From 5e8ab534e79dbe04e020acd05e5fac7ec9badbd3 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 17 May 2026 17:16:05 +0000
Subject: [PATCH 1/2] =?UTF-8?q?add=20AnnatarHe=20social=20links=20(YouTube?=
 =?UTF-8?q?,=20Bilibili,=20=E5=B0=8F=E7=BA=A2=E4=B9=A6)=20to=20footer?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extend the authors constant to support a list of social profiles per
author and render them as small icon links beside the author's name.
---
 src/components/footer.astro            | 27 ++++++++++++++++++---
 src/components/icons/bilibili.astro    | 33 ++++++++++++++++++++++++++
 src/components/icons/xiaohongshu.astro | 33 ++++++++++++++++++++++++++
 src/components/icons/youtube.astro     | 33 ++++++++++++++++++++++++++
 src/constants.ts                       | 32 +++++++++++++++++++++++--
 5 files changed, 153 insertions(+), 5 deletions(-)
 create mode 100644 src/components/icons/bilibili.astro
 create mode 100644 src/components/icons/xiaohongshu.astro
 create mode 100644 src/components/icons/youtube.astro

diff --git a/src/components/footer.astro b/src/components/footer.astro
index 3051883..47dc1c4 100644
--- a/src/components/footer.astro
+++ b/src/components/footer.astro
@@ -1,16 +1,19 @@
 ---
 import { authors, evonia } from "../constants";
+import IconYouTube from "./icons/youtube.astro";
+import IconBilibili from "./icons/bilibili.astro";
+import IconXiaohongshu from "./icons/xiaohongshu.astro";
 ---
 
 <footer class="bg-black p-4 w-full flex justify-center items-center flex-col gap-3">
   <ul
-    class="max-w-screen-lg w-full text-xs text-teal-500 flex items-center justify-evenly"
+    class="max-w-screen-lg w-full text-xs text-teal-500 flex items-center justify-evenly flex-wrap gap-2"
   >
     {
       authors.map((x) => {
-        const nameNode = <span class="p-4">{x.name}</span>;
+        const nameNode = <span class="px-2 py-4">{x.name}</span>;
         return (
-          <li>
+          <li class="flex items-center">
             {x.link ? (
               <a href={x.link} target="_blank" class="hover:underline">
                 {nameNode}
@@ -18,6 +21,24 @@ import { authors, evonia } from "../constants";
             ) : (
               nameNode
             )}
+            {x.socials && x.socials.length > 0 && (
+              <span class="flex items-center gap-2 ml-1">
+                {x.socials.map((s) => (
+                  <a
+                    href={s.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    aria-label={`${x.name} on ${s.label}`}
+                    title={`${x.name} on ${s.label}`}
+                    class="text-teal-500/70 hover:text-teal-300 transition-colors duration-100"
+                  >
+                    {s.type === "youtube" && <IconYouTube />}
+                    {s.type === "bilibili" && <IconBilibili />}
+                    {s.type === "xiaohongshu" && <IconXiaohongshu />}
+                  </a>
+                ))}
+              </span>
+            )}
           </li>
         );
       })
diff --git a/src/components/icons/bilibili.astro b/src/components/icons/bilibili.astro
new file mode 100644
index 0000000..c262645
--- /dev/null
+++ b/src/components/icons/bilibili.astro
@@ -0,0 +1,33 @@
+---
+type Props = {
+  className?: string;
+};
+
+const { className } = Astro.props;
+
+let finalClassNames = [];
+
+if (className) {
+  finalClassNames.push(...className.split(" ").map((x) => x.trim()));
+}
+
+if (!finalClassNames.some((x) => x.startsWith("h-"))) {
+  finalClassNames.push("h-4");
+}
+
+if (!finalClassNames.some((x) => x.startsWith("w-"))) {
+  finalClassNames.push("w-4");
+}
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class={finalClassNames.join(" ")}
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  aria-hidden="true"
+>
+  <path
+    d="M18.223 3.086a1.25 1.25 0 0 1 0 1.768L17.08 5.996h1.17A3.75 3.75 0 0 1 22 9.747v8.5a3.75 3.75 0 0 1-3.75 3.75H5.75A3.75 3.75 0 0 1 2 18.247v-8.5a3.75 3.75 0 0 1 3.75-3.75h1.166L5.775 4.855a1.25 1.25 0 1 1 1.767-1.768l2.652 2.652c.079.079.145.165.198.257h3.213c.053-.092.12-.18.199-.258l2.651-2.652a1.25 1.25 0 0 1 1.768 0zM18.25 8.496H5.75a1.25 1.25 0 0 0-1.247 1.157L4.5 9.747v8.5a1.25 1.25 0 0 0 1.157 1.247l.093.003h12.5a1.25 1.25 0 0 0 1.247-1.157l.003-.093v-8.5a1.25 1.25 0 0 0-1.25-1.25zM8.5 11.998a1 1 0 0 1 1 1v1.5a1 1 0 1 1-2 0v-1.5a1 1 0 0 1 1-1zm7 0a1 1 0 0 1 1 1v1.5a1 1 0 1 1-2 0v-1.5a1 1 0 0 1 1-1z"
+  ></path>
+</svg>
diff --git a/src/components/icons/xiaohongshu.astro b/src/components/icons/xiaohongshu.astro
new file mode 100644
index 0000000..a12638c
--- /dev/null
+++ b/src/components/icons/xiaohongshu.astro
@@ -0,0 +1,33 @@
+---
+type Props = {
+  className?: string;
+};
+
+const { className } = Astro.props;
+
+let finalClassNames = [];
+
+if (className) {
+  finalClassNames.push(...className.split(" ").map((x) => x.trim()));
+}
+
+if (!finalClassNames.some((x) => x.startsWith("h-"))) {
+  finalClassNames.push("h-4");
+}
+
+if (!finalClassNames.some((x) => x.startsWith("w-"))) {
+  finalClassNames.push("w-4");
+}
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class={finalClassNames.join(" ")}
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  aria-hidden="true"
+>
+  <path
+    d="M4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1Zm3.4 6.6H6.2a.6.6 0 1 0 0 1.2h.6v3.6a.6.6 0 1 0 1.2 0v-3.6h.6a.6.6 0 1 0 0-1.2h-.6V8.4a.6.6 0 1 0-1.2 0v1.2Zm4.2 0v-.6a.6.6 0 1 1 1.2 0v.6h1a.6.6 0 0 1 .6.6v3.6a1.2 1.2 0 0 1-1.2 1.2h-.6a.6.6 0 1 1 0-1.2h.6v-.6h-1.6a.6.6 0 0 1-.6-.6v-2.4a.6.6 0 0 1 .6-.6h.6Zm0 1.2v1.2h1v-1.2h-1Zm5 2.4a1.4 1.4 0 1 0 0-2.8 1.4 1.4 0 0 0 0 2.8Z"
+  ></path>
+</svg>
diff --git a/src/components/icons/youtube.astro b/src/components/icons/youtube.astro
new file mode 100644
index 0000000..188a98e
--- /dev/null
+++ b/src/components/icons/youtube.astro
@@ -0,0 +1,33 @@
+---
+type Props = {
+  className?: string;
+};
+
+const { className } = Astro.props;
+
+let finalClassNames = [];
+
+if (className) {
+  finalClassNames.push(...className.split(" ").map((x) => x.trim()));
+}
+
+if (!finalClassNames.some((x) => x.startsWith("h-"))) {
+  finalClassNames.push("h-4");
+}
+
+if (!finalClassNames.some((x) => x.startsWith("w-"))) {
+  finalClassNames.push("w-4");
+}
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class={finalClassNames.join(" ")}
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  aria-hidden="true"
+>
+  <path
+    d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"
+  ></path>
+</svg>
diff --git a/src/constants.ts b/src/constants.ts
index f628f12..8c0e022 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,7 +1,35 @@
+export type AuthorSocial = {
+  type: 'youtube' | 'bilibili' | 'xiaohongshu';
+  url: string;
+  label: string;
+};
 
-export const authors = [{
+export type Author = {
+  name: string;
+  link: string | null;
+  socials?: AuthorSocial[];
+};
+
+export const authors: Author[] = [{
   name: 'AnnatarHe',
-  link: 'https://annatarhe.com'
+  link: 'https://annatarhe.com',
+  socials: [
+    {
+      type: 'youtube',
+      url: 'https://www.youtube.com/@annatarhe',
+      label: 'YouTube',
+    },
+    {
+      type: 'bilibili',
+      url: 'https://space.bilibili.com/173440264',
+      label: 'Bilibili',
+    },
+    {
+      type: 'xiaohongshu',
+      url: 'https://www.xiaohongshu.com/user/profile/5b23cdfb11be1002d5f82bd8',
+      label: '小红书',
+    },
+  ],
 }, {
   name: 'Sleaf',
   link: 'https://twitter.com/Sleaf_'

From 7590d41a5469336a6045ffb411df9241802915fa Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Sun, 17 May 2026 17:29:02 +0000
Subject: [PATCH 2/2] move social links to navbar with video platforms first
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Revert the footer changes and surface YouTube, Bilibili, and 小红书 as
icon links on the right side of the navbar, ordered with the video
platforms first.
---
 src/components/footer.astro | 27 +++-----------------
 src/components/header.astro | 36 +++++++++++++++++++++++---
 src/constants.ts            | 50 +++++++++++++++----------------------
 3 files changed, 55 insertions(+), 58 deletions(-)

diff --git a/src/components/footer.astro b/src/components/footer.astro
index 47dc1c4..3051883 100644
--- a/src/components/footer.astro
+++ b/src/components/footer.astro
@@ -1,19 +1,16 @@
 ---
 import { authors, evonia } from "../constants";
-import IconYouTube from "./icons/youtube.astro";
-import IconBilibili from "./icons/bilibili.astro";
-import IconXiaohongshu from "./icons/xiaohongshu.astro";
 ---
 
 <footer class="bg-black p-4 w-full flex justify-center items-center flex-col gap-3">
   <ul
-    class="max-w-screen-lg w-full text-xs text-teal-500 flex items-center justify-evenly flex-wrap gap-2"
+    class="max-w-screen-lg w-full text-xs text-teal-500 flex items-center justify-evenly"
   >
     {
       authors.map((x) => {
-        const nameNode = <span class="px-2 py-4">{x.name}</span>;
+        const nameNode = <span class="p-4">{x.name}</span>;
         return (
-          <li class="flex items-center">
+          <li>
             {x.link ? (
               <a href={x.link} target="_blank" class="hover:underline">
                 {nameNode}
@@ -21,24 +18,6 @@ import IconXiaohongshu from "./icons/xiaohongshu.astro";
             ) : (
               nameNode
             )}
-            {x.socials && x.socials.length > 0 && (
-              <span class="flex items-center gap-2 ml-1">
-                {x.socials.map((s) => (
-                  <a
-                    href={s.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    aria-label={`${x.name} on ${s.label}`}
-                    title={`${x.name} on ${s.label}`}
-                    class="text-teal-500/70 hover:text-teal-300 transition-colors duration-100"
-                  >
-                    {s.type === "youtube" && <IconYouTube />}
-                    {s.type === "bilibili" && <IconBilibili />}
-                    {s.type === "xiaohongshu" && <IconXiaohongshu />}
-                  </a>
-                ))}
-              </span>
-            )}
           </li>
         );
       })
diff --git a/src/components/header.astro b/src/components/header.astro
index edc791e..af3fd09 100644
--- a/src/components/header.astro
+++ b/src/components/header.astro
@@ -2,6 +2,10 @@
 import { Image } from "astro:assets";
 import logo from "../images/logo.png";
 import IconExternalLink from "./icons/external-link.astro";
+import IconYouTube from "./icons/youtube.astro";
+import IconBilibili from "./icons/bilibili.astro";
+import IconXiaohongshu from "./icons/xiaohongshu.astro";
+import { socialLinks } from "../constants";
 
 const channels = [
   {
@@ -50,10 +54,34 @@ const channels = [
         }
       </ul>
     </div>
-    <div
-      class="text-white/70 hover:text-white/90 duration-100 transition-colors"
-    >
-      <a href="/posts">Posts</a>
+    <div class="flex items-center gap-3">
+      <ul class="flex items-center gap-3 text-white/70">
+        {
+          socialLinks.map((s) => (
+            <li class="hover:text-white/90 duration-100 transition-colors">
+              <a
+                href={s.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                aria-label={s.label}
+                title={s.label}
+                class="flex items-center justify-center"
+              >
+                {s.type === "youtube" && <IconYouTube className="h-5 w-5" />}
+                {s.type === "bilibili" && <IconBilibili className="h-5 w-5" />}
+                {s.type === "xiaohongshu" && (
+                  <IconXiaohongshu className="h-5 w-5" />
+                )}
+              </a>
+            </li>
+          ))
+        }
+      </ul>
+      <div
+        class="text-white/70 hover:text-white/90 duration-100 transition-colors"
+      >
+        <a href="/posts">Posts</a>
+      </div>
     </div>
   </div>
 </header>
diff --git a/src/constants.ts b/src/constants.ts
index 8c0e022..6864434 100644
--- a/src/constants.ts
+++ b/src/constants.ts
@@ -1,35 +1,7 @@
-export type AuthorSocial = {
-  type: 'youtube' | 'bilibili' | 'xiaohongshu';
-  url: string;
-  label: string;
-};
 
-export type Author = {
-  name: string;
-  link: string | null;
-  socials?: AuthorSocial[];
-};
-
-export const authors: Author[] = [{
+export const authors = [{
   name: 'AnnatarHe',
-  link: 'https://annatarhe.com',
-  socials: [
-    {
-      type: 'youtube',
-      url: 'https://www.youtube.com/@annatarhe',
-      label: 'YouTube',
-    },
-    {
-      type: 'bilibili',
-      url: 'https://space.bilibili.com/173440264',
-      label: 'Bilibili',
-    },
-    {
-      type: 'xiaohongshu',
-      url: 'https://www.xiaohongshu.com/user/profile/5b23cdfb11be1002d5f82bd8',
-      label: '小红书',
-    },
-  ],
+  link: 'https://annatarhe.com'
 }, {
   name: 'Sleaf',
   link: 'https://twitter.com/Sleaf_'
@@ -41,6 +13,24 @@ export const authors: Author[] = [{
   link: null
 }]
 
+export const socialLinks = [
+  {
+    type: 'youtube',
+    url: 'https://www.youtube.com/@annatarhe',
+    label: 'YouTube',
+  },
+  {
+    type: 'bilibili',
+    url: 'https://space.bilibili.com/173440264',
+    label: 'Bilibili',
+  },
+  {
+    type: 'xiaohongshu',
+    url: 'https://www.xiaohongshu.com/user/profile/5b23cdfb11be1002d5f82bd8',
+    label: '小红书',
+  },
+] as const;
+
 export const evonia = {
   name: 'Evonia.ai',
   url: 'https://evoniaai.github.io/',