CGitのソーシャルアイコンをカスタム fork/branch SVG に変更

SocialIcons コンポーネントを上書きして、CGit 用に
git リポジトリを表す fork/branch アイコンを表示。

- src/components/starlight/SocialIcons.astro を新規作成
- Starlight の social icon はカスタム SVG を受け付けないため、
  コンポーネント上書きで対応
- X アイコンも併せてインライン化

1 files changed, 51 insertions, 0 deletions

diff --git a/src/components/starlight/SocialIcons.astro b/src/components/starlight/SocialIcons.astro
new file mode 100644
index 0000000..4cceb9a
--- /dev/null
+++ b/src/components/starlight/SocialIcons.astro
@@ -0,0 +1,51 @@
+---
+import config from "virtual:starlight/user-config";
+
+const links = config.social || [];
+
+// Built-in SVG icons (replacing Starlight's Icon component for social links)
+const BUILTIN: Record<string, string> = {
+  "x.com":
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 4l11.733 16h4.267l-11.733 -16z"/><path d="M4 20l6.768 -6.768m2.46 -2.46L20 4"/></svg>',
+  "code-branch":
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><line x1="6" y1="8.5" x2="6" y2="15.5"/><path d="M6 12 L18 8"/><circle cx="18" cy="6" r="2.5"/></svg>',
+};
+
+// CGit 専用アイコン（cgit.yasutakeyohei.com の favicon に基づく）
+const CGIT_SVG =
+  '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="7" cy="7" r="3"/><circle cx="7" cy="17" r="3"/><line x1="7" y1="10" x2="7" y2="14"/><path d="M7 12h6a3 3 0 0 0 3-3V7"/><circle cx="17" cy="7" r="3"/></svg>';
+---
+
+{
+  links.length > 0 && (
+    <>
+      {links.map(({ label, href, icon }) => {
+        const svg = label === "CGit" ? CGIT_SVG : (BUILTIN[String(icon)] || BUILTIN["code-branch"]);
+        return (
+        <a href={href} rel="me" class="sl-flex" title={label}>
+          <span class="sr-only">{label}</span>
+          <span class="sl-social-icon" set:html={svg} />
+        </a>
+        );
+      })}
+    </>
+  )
+}
+
+<style>
+  @layer starlight.core {
+    a {
+      color: var(--sl-color-text-accent);
+      padding: 0.5em;
+      margin: -0.5em;
+    }
+    a:hover {
+      color: var(--sl-color-white);
+    }
+    .sl-social-icon :global(svg) {
+      width: 1rem;
+      height: 1rem;
+      display: block;
+    }
+  }
+</style>