hd-garden 0.4.1 → 0.5.1

package/app/components/BlogArchive.tsx

@@ -1,18 +1,22 @@
 "use client";
 
 import Link from "next/link";
-import { useSearchParams } from "next/navigation";
-import { useState } from "react";
-import { columns, postHref, posts, topics } from "../lib/content";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useMemo, useState } from "react";
+import type { ArchivePost, ArchiveSeries } from "../lib/archive";
+import {
+  TAG_PARAM,
+  canonicalTags,
+  filterByTags,
+  selectedTags,
+  tagFilterHref,
+  tagOptions,
+  tagSummary,
+  toggleTag,
+  visibleTagOptions,
+} from "../lib/tag-filter";
 import { ContentEmptyState } from "./ContentEmptyState";
 
-export const archiveHref = (topic?: string) => {
-  const params = new URLSearchParams();
-  if (topic) params.set("topic", topic);
-  const query = params.toString();
-  return query ? `/blog?${query}` : "/blog";
-};
-
 function day(value: string) {
   const date = new Date(value);
   if (Number.isNaN(date.getTime())) return value.slice(0, 10);
@@ -24,12 +28,42 @@ function day(value: string) {
   }).format(date);
 }
 
-export function BlogArchive() {
+// Kept local: importing ../lib/content here would pull every post body into the client bundle.
+const postHref = (post: Pick<ArchivePost, "path">) => `/blog/${post.path}`;
+const columnIndexHref = (slug: string) => `/columns#${slug}`;
+
+function ColumnLabel({ column }: { column?: ArchivePost["column"] }) {
+  return column ? <Link className="cat" href={columnIndexHref(column.slug)}>{column.title}</Link> : null;
+}
+
+type ArchiveData = { posts: ArchivePost[]; series: ArchiveSeries[] };
+
+const NO_TAGS: string[] = [];
+
+/** Reads the selected tags from the URL; needs a Suspense boundary. */
+export function BlogArchive({ posts, series }: ArchiveData) {
+  const router = useRouter();
+  const pathname = usePathname() || "/blog";
   const searchParams = useSearchParams();
+  const paramKey = searchParams.getAll(TAG_PARAM).join("\u0000");
+  const selected = useMemo(() => canonicalTags(posts, selectedTags(paramKey ? paramKey.split("\u0000") : [])), [paramKey, posts]);
+  return <ArchiveView posts={posts} series={series} selected={selected} go={(next) => router.push(tagFilterHref(next, pathname), { scroll: false })} />;
+}
+
+/**
+ * The full, unfiltered list. Rendered into the static page as the Suspense
+ * fallback, so the list is there before scripts run (or without them).
+ */
+export function BlogArchiveFallback({ posts, series }: ArchiveData) {
+  return <ArchiveView posts={posts} series={series} selected={NO_TAGS} go={(next) => window.location.assign(tagFilterHref(next))} />;
+}
+
+function ArchiveView({ posts, series, selected, go }: ArchiveData & { selected: string[]; go: (next: string[]) => void }) {
   const [compact, setCompact] = useState(false);
-  const requestedTopic = searchParams.get("topic") ?? "";
-  const selectedTopic = topics.includes(requestedTopic) ? requestedTopic : undefined;
-  const filtered = (selectedTopic ? posts.filter((post) => post.topic === selectedTopic) : posts)
+  const [expanded, setExpanded] = useState(false);
+  const options = useMemo(() => tagOptions(posts, selected), [posts, selected]);
+  const { shown, hidden } = visibleTagOptions(options, expanded);
+  const filtered = filterByTags(posts, selected)
     .slice()
     .sort((left, right) => Date.parse(right.date) - Date.parse(left.date));
   const years = new Map<string, typeof filtered>();
@@ -40,36 +74,40 @@ export function BlogArchive() {
     else years.set(year, [post]);
   }
 
-  const series = Array.from(
-    columns.reduce((result, entry) => {
-      const key = entry.column ?? "";
-      const list = result.get(key);
-      if (list) list.push(entry);
-      else result.set(key, [entry]);
-      return result;
-    }, new Map<string, typeof columns>()),
-  );
-
   return (
     <div className="sh-listgrid">
       <div>
-        <ul className="sh-filters" aria-label="按分类筛选">
-          <li>
-            <Link className="sh-chip" href="/blog" aria-current={selectedTopic ? undefined : "true"}>
-              全部<span className="n">{posts.length}</span>
-            </Link>
-          </li>
-          {topics.map((topic) => (
-            <li key={topic}>
-              <Link className="sh-chip" href={archiveHref(topic)} aria-current={selectedTopic === topic ? "true" : undefined}>
-                {topic}<span className="n">{posts.filter((post) => post.topic === topic).length}</span>
-              </Link>
-            </li>
-          ))}
-        </ul>
+        {options.length ? (
+          <div className="sh-tagfilter">
+            <ul className="sh-tagchips" aria-label="按标签筛选">
+              {shown.map((option) => (
+                <li key={option.tag}>
+                  <button
+                    type="button"
+                    className="sh-tagchip"
+                    aria-pressed={option.selected}
+                    disabled={option.disabled}
+                    onClick={() => go(toggleTag(selected, option.tag))}
+                  >
+                    <span className="label">#{option.tag}</span>
+                    <span className="n num">{option.next}</span>
+                    {option.selected ? <span className="x" aria-hidden="true">×</span> : null}
+                  </button>
+                </li>
+              ))}
+              {hidden > 0 || expanded ? (
+                <li>
+                  <button type="button" className="sh-tagmore" aria-expanded={expanded} onClick={() => setExpanded(!expanded)}>
+                    {expanded ? "收起" : `展开全部 ${options.length} 个标签`}
+                  </button>
+                </li>
+              ) : null}
+            </ul>
+          </div>
+        ) : null}
         <div className="sh-status">
-          <span aria-live="polite">{selectedTopic ? `${selectedTopic} ${filtered.length} 篇` : `全部 ${posts.length} 篇`}</span>
-          {selectedTopic ? <Link href="/blog">清除筛选</Link> : null}
+          <span aria-live="polite">{tagSummary(selected.length, filtered.length)}</span>
+          {selected.length ? <button type="button" onClick={() => go([])}>清除</button> : null}
           <div className="sh-view" role="group" aria-label="列表密度">
             <button type="button" aria-pressed={!compact} onClick={() => setCompact(false)}>摘要</button>
             <button type="button" aria-pressed={compact} onClick={() => setCompact(true)}>紧凑</button>
@@ -84,26 +122,32 @@ export function BlogArchive() {
                   <li className="sh-row" key={post.path}>
                     <time className="archive-meta" dateTime={day(post.date)}>{day(post.date).slice(5)}</time>
                     <div className="archive-copy">
-                      {post.cover ? (
-                        // eslint-disable-next-line @next/next/no-img-element
-                        <img className="archive-cover" src={post.cover} alt="" />
-                      ) : null}
                       <h3>
                         <Link href={postHref(post)}>{post.title}</Link>
                         {post.pinned ? <span className="pin">置顶</span> : null}
                       </h3>
                       {post.description ? <p>{post.description}</p> : null}
                     </div>
-                    {post.topic ? <Link className="cat" href={archiveHref(post.topic)}>{post.topic}</Link> : null}
+                    <ColumnLabel column={post.column} />
                   </li>
                 ))}
               </ol>
             </section>
-          )) : <ContentEmptyState kind="posts" />}
+          )) : selected.length ? (
+            <div className="sh-tagempty">
+              <p>没有同时带这些标签的文章。</p>
+              <div className="acts">
+                {selected.length > 1 ? (
+                  <button type="button" onClick={() => go(selected.slice(0, -1))}>去掉「{selected[selected.length - 1]}」</button>
+                ) : null}
+                <button type="button" onClick={() => go([])}>看全部文章</button>
+              </div>
+            </div>
+          ) : <ContentEmptyState kind="posts" />}
         </div>
       </div>
       <aside className="sh-rail" aria-label="按年份跳转">
-        <h2>按年份</h2>
+        {years.size ? <h2>按年份</h2> : null}
         <ol>
           {[...years.keys()].map((year) => (
             <li key={year}>
@@ -115,9 +159,9 @@ export function BlogArchive() {
           <>
             <h2>专栏</h2>
             <ol>
-              {series.map(([slug, entries]) => (
-                <li key={slug}>
-                  <Link href={`/columns#${slug}`}><span>{entries[0]?.columnTitle ?? slug}</span><span className="n num">{entries.length}</span></Link>
+              {series.map((column) => (
+                <li key={column.slug}>
+                  <Link href={columnIndexHref(column.slug)}><span>{column.title}</span><span className="n num">{column.count}</span></Link>
                 </li>
               ))}
             </ol>

package/app/components/ContentEmptyState.tsx

@@ -6,25 +6,25 @@ import { ArrowRight, Article, Books, Quotes } from "@phosphor-icons/react/ssr";
 const emptyContent = {
   posts: {
     icon: Article,
-    eyebrow: "NO POSTS YET / 暂无博文",
+    eyebrow: "暂无博文",
     title: "暂无博文。",
-    description: "发布文章后会在这里按主题与时间归档。",
+    description: "文章会按时间排在这里。",
     actionHref: "/",
     actionLabel: "返回首页",
   },
   thoughts: {
     icon: Quotes,
-    eyebrow: "NO THOUGHTS YET / 暂无随想",
+    eyebrow: "暂无随想",
     title: "暂无随想。",
-    description: "日常的碎片记录、短笔记与链接会落在这里。",
+    description: "短笔记和链接会在这里。",
     actionHref: "/blog",
     actionLabel: "先读博文",
   },
   columns: {
     icon: Books,
-    eyebrow: "NO COLUMNS YET / 暂无专栏",
+    eyebrow: "暂无专栏",
     title: "暂无专栏。",
-    description: "文章积累成系列后会在这里按顺序呈现。",
+    description: "一组文章会按顺序列在这里。",
     actionHref: "/blog",
     actionLabel: "浏览全部博文",
   },

package/app/components/CoverImage.tsx

@@ -0,0 +1,34 @@
+import type { ContentEntry } from "../lib/content";
+
+type CoverImageProps = {
+  src: string;
+  image?: ContentEntry["coverImage"];
+  alt: string;
+  className?: string;
+  /** How wide the image shows, for the browser to pick a size from srcset. */
+  sizes: string;
+  /** The first cover a reader sees: load it right away and early. Everything else waits until it is near. */
+  priority?: boolean;
+};
+
+/**
+ * A cover with resized WebP copies when the build made them. Width and height
+ * reserve the space, so nothing moves when the picture arrives.
+ */
+export function CoverImage({ src, image, alt, className, sizes, priority = false }: CoverImageProps) {
+  return (
+    // eslint-disable-next-line @next/next/no-img-element
+    <img
+      className={className}
+      src={image?.src ?? src}
+      srcSet={image?.srcset}
+      sizes={image ? sizes : undefined}
+      width={image?.width}
+      height={image?.height}
+      alt={alt}
+      loading={priority ? "eager" : "lazy"}
+      decoding="async"
+      fetchPriority={priority ? "high" : undefined}
+    />
+  );
+}

package/app/components/GardenAdminGuide.tsx

@@ -17,7 +17,7 @@ const adminJobs = [
   },
   {
     title: "改文章里的交互",
-    description: "写作台把一句话收成可交互的块。组件页能看到每一种块长什么样。",
+    description: "写作台把一句话收成可以动手试的一块。",
   },
 ];
 

package/app/components/GardenContentGuide.tsx

@@ -23,7 +23,6 @@ const postSource = `---
 title: 我的第一篇文章
 date: 2026-08-03 09:00:00
 description: 这篇文章记录我为什么重新开始写博客。
-topic: 写作
 tags: [Markdown, 博客]
 pinned: false
 cover: writing/first-post.jpg
@@ -100,7 +99,7 @@ const guides: Guide[] = [
       <>文件名就是地址。标题和日期写在开头。先存着就标成草稿。</>,
       <>图片、音频、视频和链接按顺序放进 <code>media</code>。</>,
     ],
-    result: "它会出现在随想页和首页，并且有自己的链接。",
+    result: "它会出现在随想页，并且有自己的链接。",
     path: "content/thoughts/walk-after-rain.md",
     source: thoughtSource,
     language: "markdown",

package/app/components/GardenMediaGuide.tsx

@@ -5,7 +5,7 @@ const embedTypes = [
   },
   {
     title: "X / Twitter",
-    description: "显示成一张带出处的卡片，不依赖对方的脚本。",
+    description: "显示成一张带出处的卡片。",
   },
   {
     title: "微信公众号",
@@ -13,7 +13,7 @@ const embedTypes = [
   },
   {
     title: "其他网站",
-    description: "自己写标题、摘要和封面。不在构建时去抓那个网址。",
+    description: "自己写标题、摘要和封面。",
   },
 ];
 
@@ -53,7 +53,7 @@ export function GardenMediaGuide() {
       </ul>
 
       <p className="garden-media-boundary">
-        摘要写在文章里。构建时不去抓任意网址。原站打不开，文章还在。需要时用 <code>make embed URL=...</code> 拉一次，看过再贴进去。
+        摘要写在文章里。原站打不开，文章还在。需要时用 <code>make embed URL=...</code> 拉一次，看过再贴进去。
       </p>
     </section>
   );

package/app/components/GithubProfile.tsx

@@ -253,7 +253,7 @@ export async function GithubProfile() {
         <header>
           <div>
             <p className="eyebrow">PINNED / 置顶仓库</p>
-            <h3 id="github-pinned-title">正在持续构建的项目</h3>
+            <h3 id="github-pinned-title">正在做的项目</h3>
           </div>
           <PushPin size={20} aria-hidden="true" />
         </header>

package/app/components/LinkCardRefresh.tsx

@@ -0,0 +1,44 @@
+"use client";
+
+import { useEffect } from "react";
+import { cardUpdates, fetchCardText, refreshUrl, safeToUpdate } from "../../ui/garden/card-refresh.mjs";
+
+/**
+ * After the page is idle, ask the link-card Worker for each card's current
+ * text and swap it in for cards below the fold. Any failure leaves the
+ * build-time card as it is.
+ */
+export function LinkCardRefresh({ endpoint }: { endpoint: string }) {
+  useEffect(() => {
+    const cards = [...document.querySelectorAll<HTMLElement>(".link-cards[data-card-url]")];
+    if (!cards.length || !refreshUrl(endpoint, "https://example.com/")) return;
+    // Aborts every request when the page goes away; each request also has its own timeout.
+    const controller = new AbortController();
+    const run = () => {
+      for (const card of cards) {
+        const target = refreshUrl(endpoint, card.dataset.cardUrl ?? "");
+        if (!target) continue;
+        fetchCardText(target, { shared: controller.signal })
+          .then((fresh) => {
+            if (!fresh || !safeToUpdate(card.getBoundingClientRect().top, window.innerHeight)) return;
+            const fields = new Map(
+              [...card.querySelectorAll<HTMLElement>("[data-field]")].map((node) => [node.dataset.field ?? "", node]),
+            );
+            const current = Object.fromEntries([...fields].map(([field, node]) => [field, node.textContent ?? ""]));
+            for (const [field, text] of Object.entries(cardUpdates(current, fresh))) {
+              const node = fields.get(field);
+              if (node) node.textContent = text;
+            }
+          })
+          .catch(() => {});
+      }
+    };
+    const idle = window.requestIdleCallback ?? ((callback: () => void) => window.setTimeout(callback, 1500));
+    const handle = idle(run);
+    return () => {
+      controller.abort();
+      (window.cancelIdleCallback ?? window.clearTimeout)(handle as number);
+    };
+  }, [endpoint]);
+  return null;
+}

package/app/components/MarkdownArticle.tsx

@@ -1,5 +1,6 @@
 import { markdownPlugins } from "../lib/markdown-plugins";
 import { remarkA2 } from "../lib/remark-a2.mjs";
+import { remarkLinkCard } from "../lib/remark-link-card.mjs";
 import {
   Children,
   cloneElement,
@@ -19,6 +20,42 @@ import { MarkdownImage } from "./MarkdownImage";
 import { CodeCopy } from "./garden/chrome";
 import { CodeDiff } from "./garden/chrome";
 import { GardenBlock } from "./garden/GardenBlock";
+import { linkAssets } from "@garden/generated-content";
+import { siteConfig } from "@garden/site-config";
+import { LinkCardRefresh } from "./LinkCardRefresh";
+import { linkHost } from "../../scripts/link-meta-core.mjs";
+import { cardDate } from "../../ui/garden/card-refresh.mjs";
+
+/** The site's favicon, downloaded at build time; nothing when there is none. */
+function Favicon({ href }: { href: string }) {
+  const src = linkAssets?.favicons?.[linkHost(href)];
+  if (!src) return null;
+  // eslint-disable-next-line @next/next/no-img-element -- a 14px local icon, no optimisation needed
+  return <img className="fav" src={src} alt="" width={14} height={14} loading="lazy" decoding="async" aria-hidden="true" />;
+}
+
+/** The first word of a link (or its first CJK character) and the rest. */
+const firstWord = (text: string) => {
+  const match = /^(\s*(?:[\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]|[^\s\p{Script=Han}\p{Script=Hiragana}\p{Script=Katakana}\p{Script=Hangul}]+))([\s\S]*)$/u.exec(text);
+  return match ? [match[1], match[2]] : [text, ""];
+};
+
+/** Icon plus the link's first word on one line, so the icon never ends a line alone. */
+function WithFavicon({ href, children }: { href: string; children: ReactNode }) {
+  const icon = <Favicon href={href} />;
+  if (!linkAssets?.favicons?.[linkHost(href)]) return <>{children}</>;
+  const nodes = Children.toArray(children);
+  const head = nodes[0];
+  if (typeof head !== "string") return <><span className="fav-keep">{icon}</span>{children}</>;
+  const [first, rest] = firstWord(head);
+  return (
+    <>
+      <span className="fav-keep">{icon}{first}</span>
+      {rest}
+      {nodes.slice(1)}
+    </>
+  );
+}
 
 const BLOCK_LANGUAGES = ["language-mermaid"];
 const isBlockLanguage = (className?: string) =>
@@ -76,24 +113,43 @@ function stripPrefix(children: ReactNode, prefix: string): ReactNode {
   return walk(children);
 }
 
-function LinkCard({ href }: { href: string }) {
-  let host = href;
-  try { host = new URL(href).hostname.replace(/^www\./u, ""); } catch { /* keep the raw url */ }
+
+/**
+ * A link card. Standalone (the author's paragraph was just the link), it is the
+ * link. After a paragraph that keeps the link, it is a preview: out of the tab
+ * order and hidden from screen readers, since the link is already there.
+ */
+export function LinkCard({ href, text, standalone = true }: { href: string; text?: string; standalone?: boolean }) {
+  const meta = linkAssets?.cards?.[href];
+  const host = linkHost(href) || href;
+  const icon = linkAssets?.favicons?.[host];
+  const title = meta?.title || text || href;
+  const date = cardDate(meta?.publishedTime);
+  const preview = standalone ? {} : { tabIndex: -1, "aria-hidden": true as const };
   return (
-    <ul className="link-cards">
-      <li>
-        <a className="link-card ext" href={href} target="_blank" rel="noopener noreferrer">
-          <span className="lc-body">
-            <span className="lc-site">
-              <span className="lc-sitename">{host}</span>
-              <span className="lc-host">{host}</span>
-              <span className="lc-arrow" aria-hidden="true" />
-            </span>
-            <span className="lc-title">{href}</span>
+    <div className="link-cards" data-card-url={href}>
+      <a className="link-card" href={href} target="_blank" rel="noopener noreferrer" {...preview}>
+        <span className="lc-body">
+          <span className="lc-site">
+            {/* eslint-disable-next-line @next/next/no-img-element -- local 14px icon */}
+            {icon ? <img className="fav" src={icon} alt="" width={14} height={14} loading="lazy" decoding="async" /> : null}
+            <span className="lc-sitename" data-field="siteName">{meta?.siteName || host}</span>
+            {meta?.siteName && meta.siteName.toLowerCase() !== host ? <span className="lc-host">{host}</span> : null}
+            <span className="lc-arrow" aria-hidden="true" />
           </span>
-        </a>
-      </li>
-    </ul>
+          <span className="lc-title" data-field="title">{title}</span>
+          {meta?.description ? <span className="lc-desc" data-field="description">{meta.description}</span> : null}
+          {meta?.author || date ? (
+            <span className="lc-meta">
+              {meta?.author ? <span data-field="author">{meta.author}</span> : null}
+              {date ? <time data-field="publishedTime" dateTime={meta?.publishedTime}>{date}</time> : null}
+            </span>
+          ) : null}
+        </span>
+        {/* eslint-disable-next-line @next/next/no-img-element -- copied into the site at build time */}
+        {meta?.image ? <img className="lc-thumb" src={meta.image} alt="" width={168} height={88} loading="lazy" decoding="async" /> : null}
+      </a>
+    </div>
   );
 }
 
@@ -109,6 +165,8 @@ const headingText = (children: ReactNode) => {
 };
 
 export function MarkdownArticle({ content }: { content: string }) {
+  // Optional layer 2: a Worker that refreshes card text. Without it, cards stay as built.
+  const cardWorker = content.includes("{card}") ? siteConfig.linkPreview?.worker : undefined;
   const numbers = { h2: 0, h3: 0 };
   const numberedArticle = articleUsesHeadingNumbers(content);
   const headingBase = articleHeadingBase(content);
@@ -136,6 +194,13 @@ export function MarkdownArticle({ content }: { content: string }) {
     return <Tag {...domProps}>{sectioned.no ? <span className="sec-no">{sectioned.no}</span> : null}{sectioned.children}</Tag>;
   };
   const gardenComponents = {
+    "garden-linkcard": (props: Record<string, string | undefined>) => (
+      <LinkCard
+        href={props.dataUrl ?? props["data-url"] ?? ""}
+        text={props.dataText ?? props["data-text"]}
+        standalone={(props.dataStandalone ?? props["data-standalone"]) === "true"}
+      />
+    ),
     "garden-block": (props: { dataPayload?: string; "data-payload"?: string }) => (
       <GardenBlock dataPayload={props.dataPayload ?? props["data-payload"]} />
     ),
@@ -156,7 +221,7 @@ export function MarkdownArticle({ content }: { content: string }) {
   return (
     <div className="markdown-body prose">
       <ReactMarkdown
-        remarkPlugins={[...markdownPlugins, remarkA2]}
+        remarkPlugins={[...markdownPlugins, remarkLinkCard, remarkA2]}
         rehypePlugins={[
           rehypeRaw,
           rehypeKatex,
@@ -177,15 +242,17 @@ export function MarkdownArticle({ content }: { content: string }) {
           },
           a: ({ href, children, ...props }) => {
             const external = Boolean(href && /^(https?:)?\/\//iu.test(href));
+            const domProps = { ...props };
+            Reflect.deleteProperty(domProps, "node");
             return (
               <a
                 href={href}
-                {...props}
+                {...domProps}
                 {...(external
                   ? { className: "ext", target: "_blank", rel: "noopener noreferrer" }
                   : {})}
               >
-                {children}
+                {external && href ? <WithFavicon href={href}>{children}</WithFavicon> : children}
               </a>
             );
           },
@@ -225,6 +292,7 @@ export function MarkdownArticle({ content }: { content: string }) {
       >
         {content}
       </ReactMarkdown>
+      {cardWorker ? <LinkCardRefresh endpoint={cardWorker} /> : null}
     </div>
   );
 }

package/app/components/MarkdownImage.tsx

@@ -2,9 +2,11 @@
 
 import { useEffect, useState, type ComponentPropsWithoutRef } from "react";
 
-type MarkdownImageProps = ComponentPropsWithoutRef<"img">;
+// react-markdown also hands over its syntax-tree `node`; it must not reach the DOM.
+type MarkdownImageProps = ComponentPropsWithoutRef<"img"> & { node?: unknown };
 
-export function MarkdownImage({ alt = "", src, ...props }: MarkdownImageProps) {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function MarkdownImage({ alt = "", src, node, ...props }: MarkdownImageProps) {
   const [open, setOpen] = useState(false);
   const description = alt || "查看原图";
 

package/app/components/SiteFooter.tsx

@@ -9,13 +9,13 @@ export function SiteFooter() {
           © {new Date().getFullYear()} {siteConfig.author.name} · {siteConfig.footer}
           <span className="footer-framework"> · 基于 <a href="https://github.com/hedon954/garden" target="_blank" rel="noreferrer">Garden</a> 构建</span>
         </p>
-        <div>
-          <a href={githubUrl} aria-label="GitHub" rel="me">
-            <GithubLogo size={19} />
+        <div className="sh-foot-links">
+          <a href={githubUrl} rel="me">
+            <GithubLogo size={16} aria-hidden="true" />
             GitHub
           </a>
-          <a href="/rss.xml" aria-label="RSS 订阅">
-            <Rss size={18} />
+          <a href="/rss.xml">
+            <Rss size={16} aria-hidden="true" />
             RSS
           </a>
         </div>