feat(component): Add homepage component (#7)

Generate a QR code for the homepage URL.
Render a clickable component and a URL with it.

astro.config.ts

@@ -1,8 +1,9 @@
 import type { AstroIntegration } from "astro";
+import icon from "astro-icon";
 import { defineConfig } from "astro/config";
 import astrobook from "astrobook";
 
-const integrations: AstroIntegration[] = [];
+const integrations: AstroIntegration[] = [icon()];
 
 if (process.env.ASTROBOOK) {
   integrations.push(astrobook({ directory: "src/components" }));

package.json

@@ -13,13 +13,18 @@
     "test:cov": "vitest run --coverage"
   },
   "dependencies": {
+    "@cxa/astro-inline-svg": "0.5.1",
+    "@iconify-json/mingcute": "1.2.1",
     "astro": "4.16.10",
+    "astro-icon": "1.1.2",
+    "qrcode": "1.5.4",
     "typescript": "5.6.3"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.4",
     "@biomejs/biome": "1.9.4",
     "@types/node": "22.9.0",
+    "@types/qrcode": "1.5.5",
     "@vitest/coverage-v8": "2.1.4",
     "astrobook": "0.5.1",
     "vitest": "2.1.4"

src/components/Homepage/Homepage.astro

@@ -0,0 +1,68 @@
+---
+import Svg from "@cxa/astro-inline-svg";
+import { Icon } from "astro-icon/components";
+
+import "../../styles/global.css";
+import { generateQRCode } from "../../libs/qrcode.ts";
+
+export type Props = { url: string };
+const props = Astro.props;
+
+const url = new URL(props.url);
+const qrCode: string = await generateQRCode(props.url);
+---
+
+<a
+  href={props.url}
+  target="_blank"
+  rel="noopener noreferrer"
+  aria-label={`Visit ${url.hostname}`}
+>
+  <Svg id="qr" raw={qrCode} />
+  <div>
+    <Icon id="icon" name="mingcute:home-3-line" />
+    <span aria-hidden="true">
+      {`${url.hostname}${url.pathname === "/" ? "" : url.pathname}`}
+    </span>
+  </div>
+</a>
+
+<style>
+  a {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 0.3rem;
+    text-decoration: none;
+  }
+
+  #qr {
+    path {
+      stroke: var(--foreground);
+    }
+    width: 6rem;
+    height: auto;
+  }
+
+  div {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 0.3rem;
+    color: var(--foreground);
+  }
+
+  #icon {
+    width: 1rem;
+    height: auto;
+  }
+
+  span {
+    font-family: "LINE Seed JP", sans-serif;
+    font-size: 0.75rem;
+    font-style: normal;
+    font-weight: normal;
+    line-height: normal;
+  }
+</style>

src/components/Homepage/Homepage.stories.ts

@@ -0,0 +1,11 @@
+import Homepage from "./Homepage.astro";
+import * as stories from "./story.ts";
+
+export default {
+  title: "Homepage",
+  component: Homepage,
+};
+
+export const Domain = { args: stories.Domain };
+export const Path = { args: stories.Path };
+export const Japanese = { args: stories.Japanese };

src/components/Homepage/Homepage.test.ts

@@ -0,0 +1,23 @@
+import { experimental_AstroContainer as AstroContainer } from "astro/container";
+import { describe, expect, test } from "vitest";
+
+import Homepage from "./Homepage.astro";
+import * as stories from "./story.ts";
+
+describe("Homepage", () => {
+  for (const [name, props] of Object.entries(stories)) {
+    test(name, async () => {
+      const container: AstroContainer = await AstroContainer.create();
+      const result: string = await container.renderToString(Homepage, {
+        props,
+      });
+      const url = new URL(props.url);
+
+      expect(result).toContain(
+        `> ${encodeURI(url.hostname)}${
+          url.pathname === "/" ? "" : url.pathname
+        } </span>`,
+      );
+    });
+  }
+});

src/components/Homepage/story.ts

@@ -0,0 +1,5 @@
+import type { Props } from "./Homepage.astro";
+
+export const Domain: Props = { url: "https://example.com" };
+export const Path: Props = { url: "https://www.example.com/path" };
+export const Japanese: Props = { url: "https://www.example.com/パス" };

src/libs/qrcode.ts

@@ -0,0 +1,8 @@
+import QRCode from "qrcode";
+
+export const generateQRCode = async (url: string): Promise<string> =>
+  await QRCode.toString(url, {
+    type: "svg",
+    margin: 0,
+    color: { light: "#00000000" },
+  });