hd-garden 0.3.0

package/app/components/GithubProfile.tsx

@@ -0,0 +1,326 @@
+import {
+  ArrowUpRight,
+  PushPin,
+  Star,
+} from "@phosphor-icons/react/ssr";
+import { githubUsername } from "../lib/site";
+import { siteConfig } from "../site.config";
+import { GithubLiveOverview, type GithubPublicProfile } from "./GithubLiveOverview";
+
+type GithubRepository = {
+  nameWithOwner: string;
+  description: string | null;
+  url: string;
+  stargazerCount: number;
+  primaryLanguage: { name: string; color: string | null } | null;
+};
+
+type ContributionDay = {
+  date: string;
+  contributionCount: number;
+  contributionLevel: string;
+};
+
+type GithubEvent = {
+  id: string;
+  type: string;
+  created_at: string;
+  repo: { name: string };
+  payload: {
+    action?: string;
+    ref?: string | null;
+    ref_type?: string | null;
+    pull_request?: { html_url?: string; title?: string };
+    issue?: { html_url?: string; title?: string };
+    release?: { html_url?: string; name?: string; tag_name?: string };
+  };
+};
+
+type GithubActivity = {
+  id: string;
+  label: string;
+  repository: string;
+  date: string;
+  url: string;
+};
+
+type GithubGraphqlResponse = {
+  data?: {
+    user?: {
+      pinnedItems: { nodes: Array<GithubRepository | null> };
+      status: { message: string; emoji: string } | null;
+      year: {
+        contributionCalendar: {
+          totalContributions: number;
+          weeks: Array<{ contributionDays: ContributionDay[] }>;
+        };
+      };
+      recent: { totalCommitContributions: number };
+    } | null;
+  };
+  errors?: Array<{ message: string }>;
+};
+
+const fallback: GithubPublicProfile = {
+  avatar_url: `https://github.com/${githubUsername}.png`,
+  name: siteConfig.author.name,
+  login: githubUsername,
+  bio: siteConfig.author.githubBio,
+  public_repos: 0,
+  followers: 0,
+  html_url: `https://github.com/${githubUsername}`,
+  location: null,
+};
+
+const apiHeaders = (token?: string) => ({
+  Accept: "application/vnd.github+json",
+  "User-Agent": "Garden-Blog",
+  "X-GitHub-Api-Version": "2022-11-28",
+  ...(token ? { Authorization: `Bearer ${token}` } : {}),
+});
+
+async function loadGithubUser(token?: string) {
+  try {
+    const response = await fetch(`https://api.github.com/users/${githubUsername}`, {
+      headers: apiHeaders(token),
+      next: { revalidate: 3600 },
+    });
+    if (!response.ok) return { profile: fallback, live: false };
+    return { profile: (await response.json()) as GithubPublicProfile, live: true };
+  } catch {
+    return { profile: fallback, live: false };
+  }
+}
+
+function activityFromEvent(event: GithubEvent): GithubActivity | null {
+  const repository = event.repo.name;
+  const repositoryUrl = `https://github.com/${repository}`;
+
+  if (event.type === "PushEvent") {
+    return { id: event.id, label: "推送了代码", repository, date: event.created_at, url: `${repositoryUrl}/commits` };
+  }
+  if (event.type === "PullRequestEvent") {
+    const action = event.payload.action === "closed" ? "完成了 Pull Request" : "提交了 Pull Request";
+    return { id: event.id, label: action, repository, date: event.created_at, url: event.payload.pull_request?.html_url ?? repositoryUrl };
+  }
+  if (event.type === "IssuesEvent") {
+    const action = event.payload.action === "closed" ? "关闭了 Issue" : "参与了 Issue";
+    return { id: event.id, label: action, repository, date: event.created_at, url: event.payload.issue?.html_url ?? repositoryUrl };
+  }
+  if (event.type === "CreateEvent") {
+    const target = event.payload.ref_type === "repository" ? "创建了仓库" : `创建了${event.payload.ref_type === "tag" ? "标签" : "分支"}`;
+    return { id: event.id, label: target, repository, date: event.created_at, url: repositoryUrl };
+  }
+  if (event.type === "ReleaseEvent") {
+    return { id: event.id, label: "发布了新版本", repository, date: event.created_at, url: event.payload.release?.html_url ?? `${repositoryUrl}/releases` };
+  }
+  return null;
+}
+
+async function loadGithubActivity(token?: string) {
+  try {
+    const response = await fetch(
+      `https://api.github.com/users/${githubUsername}/events/public?per_page=100`,
+      { headers: apiHeaders(token), next: { revalidate: 1800 } },
+    );
+    if (!response.ok) return [];
+    return ((await response.json()) as GithubEvent[])
+      .map(activityFromEvent)
+      .filter((activity): activity is GithubActivity => Boolean(activity))
+      .slice(0, 6);
+  } catch {
+    return [];
+  }
+}
+
+async function loadConfiguredRepositories(token?: string) {
+  const names = siteConfig.author.githubPinned ?? [];
+  const repositories = await Promise.all(names.slice(0, 6).map(async (name) => {
+    try {
+      const response = await fetch(`https://api.github.com/repos/${name}`, {
+        headers: apiHeaders(token),
+        next: { revalidate: 3600 },
+      });
+      if (!response.ok) return null;
+      const repository = await response.json() as {
+        full_name: string;
+        description: string | null;
+        html_url: string;
+        stargazers_count: number;
+        language: string | null;
+      };
+      return {
+        nameWithOwner: repository.full_name,
+        description: repository.description,
+        url: repository.html_url,
+        stargazerCount: repository.stargazers_count,
+        primaryLanguage: repository.language ? { name: repository.language, color: null } : null,
+      } satisfies GithubRepository;
+    } catch {
+      return null;
+    }
+  }));
+  return repositories.filter((repository): repository is GithubRepository => Boolean(repository));
+}
+
+async function loadGithubGraph(token?: string) {
+  if (!token) return null;
+
+  const now = new Date();
+  const recentFrom = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+  const yearFrom = new Date(now.getTime() - 364 * 24 * 60 * 60 * 1000);
+  const query = `query GardenGithubProfile($login: String!, $recentFrom: DateTime!, $yearFrom: DateTime!, $to: DateTime!) {
+    user(login: $login) {
+      status { message emoji }
+      pinnedItems(first: 6, types: [REPOSITORY]) {
+        nodes {
+          ... on Repository {
+            nameWithOwner
+            description
+            url
+            stargazerCount
+            primaryLanguage { name color }
+          }
+        }
+      }
+      year: contributionsCollection(from: $yearFrom, to: $to) {
+        contributionCalendar {
+          totalContributions
+          weeks { contributionDays { date contributionCount contributionLevel } }
+        }
+      }
+      recent: contributionsCollection(from: $recentFrom, to: $to) {
+        totalCommitContributions
+      }
+    }
+  }`;
+
+  try {
+    const response = await fetch("https://api.github.com/graphql", {
+      method: "POST",
+      headers: { ...apiHeaders(token), "Content-Type": "application/json" },
+      body: JSON.stringify({
+        query,
+        variables: {
+          login: githubUsername,
+          recentFrom: recentFrom.toISOString(),
+          yearFrom: yearFrom.toISOString(),
+          to: now.toISOString(),
+        },
+      }),
+      next: { revalidate: 3600 },
+    });
+    if (!response.ok) return null;
+    const payload = await response.json() as GithubGraphqlResponse;
+    if (payload.errors?.length || !payload.data?.user) return null;
+    return payload.data.user;
+  } catch {
+    return null;
+  }
+}
+
+function formatActivityDate(value: string) {
+  return new Intl.DateTimeFormat("zh-CN", { month: "2-digit", day: "2-digit" }).format(new Date(value));
+}
+
+function contributionLevelClass(level: string) {
+  return level.toLowerCase().replaceAll("_", "-");
+}
+
+export async function GithubProfile() {
+  const token = process.env.GITHUB_TOKEN;
+  const [{ profile, live }, graph, activity] = await Promise.all([
+    loadGithubUser(token),
+    loadGithubGraph(token),
+    loadGithubActivity(token),
+  ]);
+  const pinned = graph
+    ? graph.pinnedItems.nodes.filter((repository): repository is GithubRepository => Boolean(repository))
+    : await loadConfiguredRepositories(token);
+  const calendarDays = graph?.year.contributionCalendar.weeks.flatMap((week) => week.contributionDays) ?? [];
+
+  return (
+    <section className="github-profile" aria-label="GitHub 资料">
+      <GithubLiveOverview
+        username={githubUsername}
+        initialProfile={profile}
+        initialLive={live}
+        statusMessage={graph?.status?.message}
+        recentCommits={graph?.recent.totalCommitContributions}
+      />
+
+      <section className="github-pinned" aria-labelledby="github-pinned-title">
+        <header>
+          <div>
+            <p className="eyebrow">PINNED / 置顶仓库</p>
+            <h3 id="github-pinned-title">正在持续构建的项目</h3>
+          </div>
+          <PushPin size={20} aria-hidden="true" />
+        </header>
+        {pinned.length > 0 ? (
+          <div className="github-repository-grid">
+            {pinned.map((repository) => (
+              <a href={repository.url} target="_blank" rel="noopener noreferrer" key={repository.nameWithOwner}>
+                <strong>{repository.nameWithOwner.split("/").at(-1)}</strong>
+                <p>{repository.description ?? "查看这个公开仓库的代码与最近更新。"}</p>
+                <span>
+                  {repository.primaryLanguage && <><i style={{ background: repository.primaryLanguage.color ?? undefined }} />{repository.primaryLanguage.name}</>}
+                  <small><Star size={13} weight="fill" />{repository.stargazerCount}</small>
+                </span>
+              </a>
+            ))}
+          </div>
+        ) : (
+          <p className="github-data-note">配置 GitHub Token 或 author.githubPinned 后，这里会展示置顶仓库。</p>
+        )}
+      </section>
+
+      <section className="github-contributions" aria-labelledby="github-contributions-title">
+        <header>
+          <div>
+            <p className="eyebrow">CONTRIBUTIONS / 贡献</p>
+            <h3 id="github-contributions-title">过去一年的公开贡献</h3>
+          </div>
+          <strong>{graph ? `${graph.year.contributionCalendar.totalContributions} 次贡献` : "需要 GitHub Token"}</strong>
+        </header>
+        {calendarDays.length > 0 ? (
+          <div className="github-calendar" role="img" aria-label={`过去一年 ${graph?.year.contributionCalendar.totalContributions ?? 0} 次公开贡献`}>
+            {calendarDays.map((day) => (
+              <span
+                className={`github-contribution-day level-${contributionLevelClass(day.contributionLevel)}`}
+                key={day.date}
+                title={`${day.date} · ${day.contributionCount} 次贡献`}
+                aria-label={`${day.date}，${day.contributionCount} 次贡献`}
+              />
+            ))}
+          </div>
+        ) : (
+          <p className="github-data-note">正式发布时会使用工作流的只读令牌生成贡献热点图。</p>
+        )}
+      </section>
+
+      <section className="github-activity" aria-labelledby="github-activity-title">
+        <header>
+          <p className="eyebrow">CONTRIBUTION ACTIVITY / 最近活动</p>
+          <h3 id="github-activity-title">最近在 GitHub 上做了什么</h3>
+        </header>
+        {activity.length > 0 ? (
+          <ol>
+            {activity.map((item) => (
+              <li key={item.id}>
+                <time dateTime={item.date}>{formatActivityDate(item.date)}</time>
+                <a href={item.url} target="_blank" rel="noopener noreferrer">
+                  <span>{item.label}</span>
+                  <strong>{item.repository}</strong>
+                  <ArrowUpRight size={15} />
+                </a>
+              </li>
+            ))}
+          </ol>
+        ) : (
+          <p className="github-data-note">GitHub 暂时没有返回最近的公开贡献活动。</p>
+        )}
+      </section>
+    </section>
+  );
+}

package/app/components/MarkdownArticle.tsx

@@ -0,0 +1,144 @@
+import { markdownPlugins } from "../lib/markdown-plugins";
+import {
+  Children,
+  isValidElement,
+  type HTMLAttributes,
+} from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+import rehypeKatex from "rehype-katex";
+import rehypeSlug from "rehype-slug";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypeHighlight from "rehype-highlight";
+import { MermaidDiagram } from "./MermaidDiagram";
+import { ExternalEmbed } from "./ExternalEmbed";
+import { WidgetChart } from "./WidgetChart";
+
+function CodeBlock({
+  className,
+  children,
+  ...props
+}: HTMLAttributes<HTMLElement> & { node?: unknown }) {
+  if (className?.includes("language-mermaid")) {
+    return <MermaidDiagram source={String(children).trim()} />;
+  }
+  if (className?.includes("language-embed")) {
+    return <ExternalEmbed source={String(children).trim()} />;
+  }
+  if (className?.includes("language-widget")) {
+    return <WidgetChart source={String(children).trim()} />;
+  }
+
+  const codeProps = { ...props };
+  delete codeProps.node;
+
+  return (
+    <code className={className} {...codeProps}>
+      {children}
+    </code>
+  );
+}
+
+const calloutKinds: Record<string, { tone: "info" | "success" | "warning" | "danger" }> = {
+  NOTE: { tone: "info" }, INFO: { tone: "info" },
+  TIP: { tone: "success" }, SUCCESS: { tone: "success" },
+  IMPORTANT: { tone: "warning" }, WARNING: { tone: "warning" },
+  CAUTION: { tone: "danger" }, DANGER: { tone: "danger" }, FAILURE: { tone: "danger" },
+};
+
+const automaticCalloutLabels = new Set([
+  "提示", "说明", "建议", "成功", "重要",
+  "告警", "警告", "警示", "危险", "失败",
+]);
+
+export function normalizeCallouts(markdown: string) {
+  let fence: string | null = null;
+  let pendingLegacyLabel = false;
+  return markdown.split("\n").flatMap((line) => {
+    const marker = line.match(/^\s*(`{3,}|~{3,})/)?.[1];
+    if (marker) { if (!fence) fence = marker[0]; else if (marker[0] === fence) fence = null; return [line]; }
+    if (fence) return [line];
+    const legacyMarker = line.match(/garden-callout-marker--(info|success|warning|danger)/u)?.[1];
+    if (legacyMarker) {
+      pendingLegacyLabel = true;
+      return [line];
+    }
+    if (pendingLegacyLabel && /^>\s*$/u.test(line)) return [line];
+    if (pendingLegacyLabel) {
+      pendingLegacyLabel = false;
+      const label = line.match(/^>\s*\*\*(.+?)\*\*\s*$/u)?.[1].trim();
+      if (label && automaticCalloutLabels.has(label)) return [];
+    }
+    const match = line.match(/^>\s*\[!([a-z]+)\]\s*(.*)$/iu);
+    const callout = match ? calloutKinds[match[1].toUpperCase()] : undefined;
+    if (!callout) return [line];
+    const title = match?.[2].trim();
+    const lines = [`> <span class="garden-callout-marker garden-callout-marker--${callout.tone}" aria-hidden="true"></span>`, ">"];
+    if (title && !automaticCalloutLabels.has(title)) lines.push(`> **${title}**`, ">");
+    return lines;
+  }).join("\n");
+}
+
+export function MarkdownArticle({ content }: { content: string }) {
+  return (
+    <div className="markdown-body">
+      <ReactMarkdown
+        remarkPlugins={markdownPlugins}
+        rehypePlugins={[
+          rehypeRaw,
+          rehypeKatex,
+          rehypeSlug,
+          [rehypeAutolinkHeadings, { behavior: "wrap" }],
+          rehypeHighlight,
+        ]}
+        components={{
+          a: ({ href, children, ...props }) => {
+            const external = href?.startsWith("http");
+            return (
+              <a
+                href={href}
+                {...props}
+                {...(external
+                  ? { target: "_blank", rel: "noopener noreferrer" }
+                  : {})}
+              >
+                {children}
+              </a>
+            );
+          },
+          img: ({ alt, ...props }) => (
+            // Native images keep Typora-authored relative paths intact.
+            // eslint-disable-next-line @next/next/no-img-element
+            <img loading="lazy" alt={alt ?? ""} {...props} />
+          ),
+          code: CodeBlock,
+          pre: ({ children, ...props }) => {
+            const child = Children.only(children);
+            const className = isValidElement<{ className?: string }>(child)
+              ? child.props.className
+              : undefined;
+            const language = className?.match(/language-([\w-]+)/)?.[1];
+            const preProps = { ...props };
+            delete preProps.node;
+
+            if (
+              className?.includes("language-mermaid") ||
+              className?.includes("language-embed") ||
+              className?.includes("language-widget")
+            ) {
+              return <>{children}</>;
+            }
+
+            return (
+              <pre {...preProps} data-language={language?.toUpperCase()}>
+                {children}
+              </pre>
+            );
+          },
+        }}
+      >
+        {normalizeCallouts(content)}
+      </ReactMarkdown>
+    </div>
+  );
+}

package/app/components/MermaidDiagram.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { useEffect, useId, useState } from "react";
+
+let mermaidRenderQueue: Promise<unknown> = Promise.resolve();
+
+function renderMermaid(source: string, id: string) {
+  const task = mermaidRenderQueue.then(async () => {
+    const mermaid = (await import("mermaid")).default;
+    mermaid.initialize({
+      startOnLoad: false,
+      theme: "neutral",
+      fontFamily: "var(--font-mono)",
+      securityLevel: "strict",
+      suppressErrorRendering: true,
+    });
+    return mermaid.render(id, source);
+  });
+  mermaidRenderQueue = task.then(
+    () => undefined,
+    () => undefined,
+  );
+  return task;
+}
+
+export function MermaidDiagram({ source }: { source: string }) {
+  const reactId = useId();
+  const [view, setView] = useState<"render" | "code">("render");
+  const [svg, setSvg] = useState("");
+  const [error, setError] = useState(false);
+  const panelId = `mermaid-panel-${reactId.replaceAll(":", "")}`;
+
+  useEffect(() => {
+    let active = true;
+    const draw = async () => {
+      setError(false);
+      try {
+        const id = `mermaid-${reactId.replaceAll(":", "")}`;
+        const result = await renderMermaid(source, id);
+        if (active) setSvg(result.svg);
+      } catch {
+        if (active) setError(true);
+      }
+    };
+    void draw();
+    return () => {
+      active = false;
+    };
+  }, [reactId, source]);
+
+  return (
+    <figure
+      className="mermaid-block language-mermaid"
+      data-mermaid-theme="neutral"
+    >
+      <figcaption className="mermaid-toolbar">
+        <span>Mermaid</span>
+        <span
+          className="mermaid-view-switcher"
+          role="tablist"
+          aria-label="切换 Mermaid 显示方式"
+        >
+          <button
+            type="button"
+            role="tab"
+            aria-selected={view === "render"}
+            aria-controls={panelId}
+            tabIndex={view === "render" ? 0 : -1}
+            onClick={() => setView("render")}
+          >
+            图表
+          </button>
+          <button
+            type="button"
+            role="tab"
+            aria-selected={view === "code"}
+            aria-controls={panelId}
+            tabIndex={view === "code" ? 0 : -1}
+            onClick={() => setView("code")}
+          >
+            Code
+          </button>
+        </span>
+      </figcaption>
+      {view === "render" ? (
+        <div
+          className="mermaid-canvas"
+          id={panelId}
+          role="tabpanel"
+          aria-live="polite"
+        >
+          {svg ? (
+            <div
+              className="mermaid-svg"
+              dangerouslySetInnerHTML={{ __html: svg }}
+            />
+          ) : null}
+          {!svg && !error ? (
+            <span className="mermaid-loading">正在绘制图表…</span>
+          ) : null}
+          {error ? (
+            <span className="mermaid-error">图表渲染失败，请检查语法。</span>
+          ) : null}
+        </div>
+      ) : (
+        <pre
+          className="mermaid-code"
+          id={panelId}
+          role="tabpanel"
+          data-language="MERMAID"
+        >
+          <code>{source}</code>
+        </pre>
+      )}
+    </figure>
+  );
+}

package/app/components/PageIntro.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+type PageIntroProps = {
+  eyebrow: string;
+  title: string;
+  subtitle?: string;
+  children?: ReactNode;
+};
+
+/** Shared heading treatment for every top-level public page. */
+export function PageIntro({
+  eyebrow,
+  title,
+  subtitle,
+  children,
+}: PageIntroProps) {
+  return (
+    <header className="page-intro">
+      <p className="eyebrow">{eyebrow}</p>
+      <h1>
+        {title.split("\n").map((line, index) => (
+          <span key={`${line}-${index}`}>
+            {index > 0 && <br />}
+            {line}
+          </span>
+        ))}
+      </h1>
+      {subtitle && <p>{subtitle}</p>}
+      {children && <div className="page-intro-actions">{children}</div>}
+    </header>
+  );
+}

package/app/components/SiteChrome.tsx

@@ -0,0 +1,18 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import { SiteFooter } from "./SiteFooter";
+import { SiteHeader } from "./SiteHeader";
+
+export function SiteChrome({ children }: { children: React.ReactNode }) {
+  const pathname = usePathname();
+  if (pathname?.startsWith("/admin")) return <>{children}</>;
+
+  return (
+    <>
+      <SiteHeader />
+      <div id="main-content">{children}</div>
+      <SiteFooter />
+    </>
+  );
+}

package/app/components/SiteFooter.tsx

@@ -0,0 +1,29 @@
+import { GithubLogo, Rss } from "@phosphor-icons/react/ssr";
+import { githubUrl, siteConfig } from "../site.config";
+
+export function SiteFooter() {
+  return (
+    <footer className="site-footer">
+      <div className="footer-inner">
+        <p>
+          © {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} />
+            GitHub
+          </a>
+          <a href="/rss.xml" aria-label="RSS 订阅">
+            <Rss size={18} />
+            RSS
+          </a>
+        </div>
+      </div>
+    </footer>
+  );
+}