Add YouTube, Bilibili, and 小红书 links for AnnatarHe

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>

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>

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>

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>

src/constants.ts

@@ -13,6 +13,24 @@ export const authors = [{
   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/',