Add bio component

.github/workflows/ci.yml

@@ -45,6 +45,31 @@ jobs:
       - name: 🏞️ Biome Check
         run: bun run check:biome
 
+  test:
+    name: 🧪 Test
+    runs-on: Ubuntu-Latest
+
+    steps:
+      - name: 🚚 Checkout Repository
+        uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
+
+      - name: 🍞 Setup Bun with Cache
+        uses: ./.github/actions/setup-bun-with-cache
+
+      - name: 🧪 Run Tests
+        run: bun run test:cov
+
+      - name: ☂️ Upload Coverage
+        uses: codecov/codecov-action@b9fd7d16f6d7d1b5d2bec1a2887e65ceed900238 # v4.6.0
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+
+      - name: ☂️ Upload Test Results
+        if: ${{ !cancelled() }}
+        uses: codecov/test-results-action@9739113ad922ea0a9abb4b2c0f8bf6a4aa8ef820 # v1.0.1
+        with:
+          token: ${{ secrets.CODECOV_TOKEN }}
+
   build-check:
     name: 🛠️ Build Check
     runs-on: Ubuntu-Latest

.gitignore

@@ -1,3 +1,5 @@
 node_modules/
 dist/
 .astro/
+coverage/
+junit.xml

astro.config.ts

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

package.json

@@ -4,17 +4,24 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "astro dev",
+    "astrobook": "ASTROBOOK=1 astro dev",
     "build": "astro build",
     "preview": "astro preview",
     "check:astro": "astro check",
-    "check:biome": "biome check"
+    "check:biome": "biome check",
+    "test": "vitest run",
+    "test:cov": "vitest run --coverage"
   },
   "dependencies": {
     "astro": "4.16.10",
     "typescript": "5.6.3"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.4",
-    "@biomejs/biome": "1.9.4"
+    "@biomejs/biome": "1.9.4",
+    "@types/node": "22.9.0",
+    "@vitest/coverage-v8": "2.1.4",
+    "astrobook": "0.5.1",
+    "vitest": "2.1.4"
   }
 }

src/components/Bio/Bio.astro

@@ -0,0 +1,19 @@
+---
+import "../../styles/global.css";
+import "./style.css";
+
+export type Props = {
+  name: string;
+  description: string;
+  icon: string;
+};
+const props = Astro.props;
+---
+
+<div id="bio">
+  <div id="profile">
+    <img src={props.icon} alt="icon" loading="lazy" decoding="async" />
+    <span id="name">{props.name}</span>
+  </div>
+  <span id="description">{props.description}</span>
+</div>

src/components/Bio/Bio.stories.ts

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

src/components/Bio/Bio.test.ts

@@ -0,0 +1,18 @@
+import { experimental_AstroContainer as AstroContainer } from "astro/container";
+import { describe, expect, test } from "vitest";
+
+import Bio from "./Bio.astro";
+import * as stories from "./story.ts";
+
+describe("Bio", () => {
+  for (const [name, props] of Object.entries(stories)) {
+    test(name, async () => {
+      const container: AstroContainer = await AstroContainer.create();
+      const result: string = await container.renderToString(Bio, { props });
+
+      expect(result).toContain(`>${props.name}</span>`);
+      expect(result).toContain(`>${props.description}</span>`);
+      expect(result).toContain(`<img src="${props.icon}"`);
+    });
+  }
+});

src/components/Bio/story.ts

@@ -0,0 +1,20 @@
+import type { Props } from "./Bio.astro";
+
+export const Default: Props = {
+  name: "Bio Name",
+  description: "Bio Description",
+  icon: "https://github.com/withastro.png",
+};
+
+export const Japanese: Props = {
+  name: "名前",
+  description: "説明",
+  icon: "https://github.com/withastro.png",
+};
+
+export const Long: Props = {
+  name: "Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Bio Name",
+  description:
+    "Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Long Bio Description",
+  icon: "https://github.com/withastro.png",
+};

src/components/Bio/style.css

@@ -0,0 +1,36 @@
+#bio {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 0.3rem;
+}
+
+#profile {
+  display: flex;
+  align-items: center;
+  gap: 0.3rem;
+}
+
+img {
+  width: 6rem;
+  height: auto;
+}
+
+span {
+  font-family: "LINE Seed JP" sans-serif;
+  font-style: normal;
+  line-height: normal;
+  color: var(--foreground);
+}
+
+#name {
+  font-size: 2.5rem;
+  font-weight: bold;
+}
+
+#description {
+  font-size: 0.9rem;
+  font-weight: normal;
+  white-space: pre-line;
+}

src/styles/global.css

@@ -0,0 +1,25 @@
+@font-face {
+  font-family: "LINE Seed JP";
+  src: url("/fonts/LINESeedJP_Rg.otf") format("opentype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: "LINE Seed JP";
+  src: url("/fonts/LINESeedJP_Bd.otf") format("opentype");
+  font-weight: bold;
+  font-style: normal;
+  font-display: swap;
+}
+
+:root {
+  color-scheme: light dark;
+  --foreground-light: #242424;
+  --foreground-dark: #f4f4f4;
+  --background-light: #f4f4f4;
+  --background-dark: #242424;
+  --foreground: light-dark(var(--foreground-light), var(--foreground-dark));
+  --background: light-dark(var(--background-light), var(--background-dark));
+}

vitest.config.ts

@@ -0,0 +1,10 @@
+/// <reference types="vitest" />
+
+import { getViteConfig } from "astro/config";
+
+export default getViteConfig({
+  test: {
+    reporters: ["verbose", ["junit", { suiteName: "Component Tests" }]],
+    outputFile: "junit.xml",
+  },
+});