hd-garden 0.3.0

package/app/components/AdminDashboard.tsx

@@ -0,0 +1,410 @@
+"use client";
+
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import {
+  ArrowSquareOut,
+  ArrowUpRight,
+  CheckCircle,
+  Copy,
+  DotsThree,
+  FileText,
+  LinkSimple,
+  PaperPlaneTilt,
+  Plus,
+  Trash,
+} from "@phosphor-icons/react";
+import type { ContentEntry, MediaItem } from "../lib/content";
+
+type ManagedThought = ContentEntry & {
+  id: string;
+  status: "draft" | "published";
+};
+
+type CatalogEntry = {
+  kind: "post" | "column";
+  column?: string;
+  slug: string;
+  path: string;
+  title: string;
+  topic: string;
+  pinned?: boolean;
+};
+
+type AttachmentDraft = Partial<MediaItem> & {
+  type: MediaItem["type"];
+  src: string;
+};
+
+const emptyAttachment = (): AttachmentDraft => ({ type: "image", src: "" });
+
+function MediaFields({
+  attachments,
+  onChange,
+  onUpload,
+  uploading,
+}: {
+  attachments: AttachmentDraft[];
+  onChange: (next: AttachmentDraft[]) => void;
+  onUpload: (index: number, file: File) => void;
+  uploading: boolean;
+}) {
+  return (
+    <section className="admin-attachments">
+      <div className="admin-field-heading">
+        <div>
+          <span>附件</span>
+          <small>支持一条随想中混合多个图片、音频、视频与链接。</small>
+        </div>
+        <button type="button" className="admin-quiet-button" onClick={() => onChange([...attachments, emptyAttachment()])}>
+          <Plus size={14} /> 添加附件
+        </button>
+      </div>
+      {attachments.map((item, index) => (
+        <div className="admin-attachment-row" key={index}>
+          <select
+            aria-label={`附件 ${index + 1} 类型`}
+            value={item.type}
+            onChange={(event) => {
+              const next = [...attachments];
+              next[index] = { ...next[index], type: event.target.value as MediaItem["type"] };
+              onChange(next);
+            }}
+          >
+            <option value="image">图片</option>
+            <option value="audio">音频</option>
+            <option value="video">视频</option>
+            <option value="link">链接</option>
+          </select>
+          <input
+            value={item.src}
+            onChange={(event) => {
+              const next = [...attachments];
+              next[index] = { ...next[index], src: event.target.value };
+              onChange(next);
+            }}
+            placeholder={item.type === "link" ? "https://…" : "https://… 或上传到 OSS"}
+            aria-label={`附件 ${index + 1} 地址`}
+          />
+          {item.type !== "link" && (
+            <input
+              type="file"
+              accept={item.type === "image" ? "image/*" : item.type === "audio" ? "audio/*" : "video/*"}
+              aria-label={`上传附件 ${index + 1}`}
+              disabled={uploading}
+              onChange={(event) => {
+                const file = event.target.files?.[0];
+                if (file) onUpload(index, file);
+                event.currentTarget.value = "";
+              }}
+            />
+          )}
+          <input
+            value={item.title ?? ""}
+            onChange={(event) => {
+              const next = [...attachments];
+              next[index] = { ...next[index], title: event.target.value };
+              onChange(next);
+            }}
+            placeholder="标题 / 说明（可选）"
+            aria-label={`附件 ${index + 1} 标题`}
+          />
+          <button
+            type="button"
+            className="admin-icon-button"
+            aria-label={`删除附件 ${index + 1}`}
+            onClick={() => onChange(attachments.filter((_, attachmentIndex) => attachmentIndex !== index))}
+          >
+            <Trash size={16} />
+          </button>
+        </div>
+      ))}
+    </section>
+  );
+}
+
+export function AdminDashboard({
+  userName,
+  initialThoughts,
+  staticThoughtCount,
+  catalog,
+  publicSiteUrl,
+  contentWarning,
+}: {
+  userName: string;
+  initialThoughts: ManagedThought[];
+  staticThoughtCount: number;
+  catalog: CatalogEntry[];
+  publicSiteUrl: string;
+  contentWarning: string;
+}) {
+  const [thoughts, setThoughts] = useState(initialThoughts);
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [tags, setTags] = useState("");
+  const [attachments, setAttachments] = useState<AttachmentDraft[]>([]);
+  const [notice, setNotice] = useState("");
+  const [isSaving, setIsSaving] = useState(false);
+  const [uploadingCount, setUploadingCount] = useState(0);
+  const [distributionStatus, setDistributionStatus] = useState<Record<string, string>>({});
+  const [catalogEntries, setCatalogEntries] = useState(catalog);
+  const [pinningPath, setPinningPath] = useState<string | null>(null);
+  const publishedCount = useMemo(
+    () => thoughts.filter((thought) => thought.status === "published").length,
+    [thoughts],
+  );
+
+  async function uploadMedia(index: number, file: File) {
+    setNotice("");
+    setUploadingCount((count) => count + 1);
+    try {
+      const policyResponse = await fetch("/api/admin/uploads", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ name: file.name, type: file.type, size: file.size }),
+      });
+      const policy = (await policyResponse.json()) as {
+        endpoint?: string; key?: string; policy?: string; signature?: string; accessKeyId?: string; publicUrl?: string; error?: string;
+      };
+      if (!policyResponse.ok || !policy.endpoint || !policy.key || !policy.policy || !policy.signature || !policy.accessKeyId || !policy.publicUrl) {
+        throw new Error(policy.error ?? "无法获取 OSS 上传许可。");
+      }
+      const form = new FormData();
+      form.set("key", policy.key);
+      form.set("OSSAccessKeyId", policy.accessKeyId);
+      form.set("policy", policy.policy);
+      form.set("Signature", policy.signature);
+      form.set("success_action_status", "201");
+      form.set("Content-Type", file.type);
+      form.set("file", file);
+      const uploadResponse = await fetch(policy.endpoint, { method: "POST", body: form });
+      if (!uploadResponse.ok) throw new Error("OSS 未接受附件上传，请检查 Bucket CORS 和写入策略。");
+      setAttachments((current) => current.map((item, itemIndex) =>
+        itemIndex === index ? { ...item, src: policy.publicUrl!, mime: file.type } : item,
+      ));
+      setNotice("附件已上传到阿里云 OSS；发布随想后会使用该公开媒体地址。");
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "上传失败，请稍后重试。");
+    } finally {
+      setUploadingCount((count) => Math.max(0, count - 1));
+    }
+  }
+
+  async function publishThought(status: "draft" | "published") {
+    setNotice("");
+    setIsSaving(true);
+    const media = attachments.filter((item) => item.src.trim()).map((item) => ({
+      ...item,
+      src: item.src.trim(),
+      ...(item.title?.trim() ? { title: item.title.trim() } : {}),
+    }));
+    try {
+      const response = await fetch("/api/admin/thoughts", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          title,
+          content,
+          tags: tags.split(",").map((tag) => tag.trim()).filter(Boolean),
+          media,
+          status,
+        }),
+      });
+      const result = (await response.json()) as { thought?: ManagedThought; error?: string };
+      if (!response.ok || !result.thought) throw new Error(result.error ?? "保存失败。");
+      setThoughts((current) => [result.thought!, ...current]);
+      setTitle("");
+      setContent("");
+      setTags("");
+      setAttachments([]);
+      setNotice(status === "published" ? "随想已提交到 GitHub，Pages 将自动重新发布。" : "草稿已提交到 GitHub，仅后台可见。"
+      );
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "保存失败，请稍后重试。");
+    } finally {
+      setIsSaving(false);
+    }
+  }
+
+  async function updateThought(id: string, status: "draft" | "published") {
+    const response = await fetch(`/api/admin/thoughts/${id}`, {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ status }),
+    });
+    if (!response.ok) {
+      setNotice("状态更新失败，请稍后重试。");
+      return;
+    }
+    setThoughts((current) =>
+      current.map((thought) =>
+        thought.id === id
+          ? { ...thought, status, date: status === "published" ? new Date().toISOString() : thought.date }
+          : thought,
+      ),
+    );
+  }
+
+  async function deleteThought(id: string) {
+    if (!window.confirm("确定删除这条后台随想吗？此操作无法恢复。")) return;
+    const response = await fetch(`/api/admin/thoughts/${id}`, { method: "DELETE" });
+    if (!response.ok) {
+      setNotice("删除失败，请稍后重试。");
+      return;
+    }
+    setThoughts((current) => current.filter((thought) => thought.id !== id));
+  }
+
+  async function distribute(entry: CatalogEntry, platform: "x" | "csdn" | "zhihu" | "juejin") {
+    const key = `${entry.kind}:${entry.column ?? ""}:${entry.path}:${platform}`;
+    setDistributionStatus((current) => ({ ...current, [key]: "正在发送…" }));
+    try {
+      const response = await fetch("/api/admin/distribution", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ kind: entry.kind, column: entry.column, path: entry.path, platform }),
+      });
+      const result = (await response.json()) as { job?: { status: string; externalUrl?: string | null; error?: string | null }; error?: string };
+      if (!response.ok || !result.job) throw new Error(result.error ?? "分发失败。");
+      const text = result.job.status === "published"
+        ? "已发布"
+        : result.job.status === "needs_credentials"
+          ? `等待凭据：${result.job.error}`
+          : result.job.error ?? "分发失败";
+      setDistributionStatus((current) => ({ ...current, [key]: text }));
+    } catch (error) {
+      setDistributionStatus((current) => ({
+        ...current,
+        [key]: error instanceof Error ? error.message : "分发失败。",
+      }));
+    }
+  }
+
+  async function copyPackage(entry: CatalogEntry) {
+    const path = entry.kind === "post" ? `/blog/${entry.path}` : `/columns/${entry.column}/${entry.path}`;
+    await navigator.clipboard.writeText(`${entry.title}\n${entry.topic}\n${publicSiteUrl}${path}`);
+    setNotice("标题、栏目与公开链接已复制，可直接粘贴到任意发布平台。"
+    );
+  }
+
+  async function updatePinned(entry: CatalogEntry) {
+    if (entry.kind !== "post") return;
+    setNotice("");
+    setPinningPath(entry.path);
+    try {
+      const response = await fetch("/api/admin/posts/pin", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ path: entry.path, pinned: !entry.pinned }),
+      });
+      const result = (await response.json()) as { post?: { pinned: boolean }; error?: string };
+      if (!response.ok || !result.post) throw new Error(result.error ?? "置顶状态更新失败。");
+      setCatalogEntries((current) => current.map((item) =>
+        item.kind === "post" && item.path === entry.path ? { ...item, pinned: result.post!.pinned } : item,
+      ));
+      setNotice(result.post.pinned
+        ? "博文已置顶，GitHub Pages 将自动重新发布首页。"
+        : "已取消博文置顶，GitHub Pages 将自动重新发布首页。",
+      );
+    } catch (error) {
+      setNotice(error instanceof Error ? error.message : "置顶状态更新失败。");
+    } finally {
+      setPinningPath(null);
+    }
+  }
+
+  return (
+    <main className="admin-shell">
+      <header className="admin-topbar">
+        <Link className="admin-brand" href="/admin">HEDON <span>STUDIO</span></Link>
+        <div>
+          <span>{userName}</span>
+          <form action="/api/auth/logout" method="post">
+            <button type="submit" className="admin-signout">退出</button>
+          </form>
+          <a href={publicSiteUrl} target="_blank" rel="noreferrer">
+            查看公开博客 <ArrowSquareOut size={15} />
+          </a>
+        </div>
+      </header>
+
+      <section className="admin-hero">
+        <div>
+          <p className="eyebrow">CONTENT OPERATIONS</p>
+          <h1>写作留在本地，发布与分发留在这里。</h1>
+          <p>博文和专栏仍由 Typora 与 Git 管理；这里负责随想、发布状态和跨平台分发。</p>
+        </div>
+        <dl className="admin-metrics">
+          <div><dt>公开随想</dt><dd>{publishedCount + staticThoughtCount}</dd></div>
+          <div><dt>本地博文</dt><dd>{catalogEntries.filter((entry) => entry.kind === "post").length}</dd></div>
+          <div><dt>专栏篇目</dt><dd>{catalogEntries.filter((entry) => entry.kind === "column").length}</dd></div>
+        </dl>
+      </section>
+
+      {notice && <p className="admin-notice"><CheckCircle size={16} /> {notice}</p>}
+      {contentWarning && <p className="admin-notice"><CheckCircle size={16} /> {contentWarning}</p>}
+
+      <section className="admin-grid">
+        <div className="admin-panel admin-compose-panel">
+          <div className="admin-panel-heading">
+            <div><span>发布随想</span><h2>一条记录，可以有多种媒介。</h2></div>
+            <PaperPlaneTilt size={22} />
+          </div>
+          <label>标题<input value={title} onChange={(event) => setTitle(event.target.value)} placeholder="给这条记录一个标题" /></label>
+          <label>正文（Markdown）<textarea value={content} onChange={(event) => setContent(event.target.value)} placeholder="写下此刻想留下的文字…" rows={8} /></label>
+          <label>标签（用逗号分隔）<input value={tags} onChange={(event) => setTags(event.target.value)} placeholder="例如：产品, 夜晚, 摄影" /></label>
+          <MediaFields attachments={attachments} onChange={setAttachments} onUpload={uploadMedia} uploading={uploadingCount > 0} />
+          <div className="admin-actions">
+            <button type="button" className="admin-secondary-button" disabled={isSaving || uploadingCount > 0} onClick={() => publishThought("draft")}>保存草稿</button>
+            <button type="button" className="admin-primary-button" disabled={isSaving || uploadingCount > 0} onClick={() => publishThought("published")}><PaperPlaneTilt size={16} /> {uploadingCount > 0 ? "正在上传附件" : isSaving ? "正在保存" : "发布到博客"}</button>
+          </div>
+        </div>
+
+        <div className="admin-panel admin-thoughts-panel">
+          <div className="admin-panel-heading">
+            <div><span>后台随想</span><h2>已发布与草稿</h2></div>
+            <DotsThree size={23} />
+          </div>
+          <div className="admin-thought-list">
+            {thoughts.length === 0 ? <p className="admin-empty">还没有从后台创建的随想。</p> : thoughts.map((thought) => (
+              <article key={thought.id}>
+                <div><span className={`admin-status ${thought.status}`}>{thought.status === "published" ? "已发布" : "草稿"}</span><h3>{thought.title}</h3><p>{thought.content.slice(0, 76)}{thought.content.length > 76 ? "…" : ""}</p></div>
+                <div className="admin-item-actions">
+                  {thought.status === "published" && <a href={`${publicSiteUrl}/thoughts/${thought.slug}`} target="_blank" rel="noreferrer" aria-label={`查看 ${thought.title}`}><ArrowUpRight size={17} /></a>}
+                  <button type="button" onClick={() => updateThought(thought.id, thought.status === "published" ? "draft" : "published")}>{thought.status === "published" ? "撤回" : "发布"}</button>
+                  <button type="button" aria-label={`删除 ${thought.title}`} onClick={() => deleteThought(thought.id)}><Trash size={16} /></button>
+                </div>
+              </article>
+            ))}</div>
+        </div>
+      </section>
+
+      <section className="admin-panel admin-distribution-panel">
+        <div className="admin-panel-heading">
+          <div><span>博文与专栏分发</span><h2>后台不改正文，只生成发布动作。</h2></div>
+          <FileText size={22} />
+        </div>
+        <p className="admin-distribution-note"><LinkSimple size={16} /> CSDN、知乎、掘金采用你配置的同步服务；X 在填写用户访问令牌后可直接发布。没有配置时仍可一键复制分发包。</p>
+        <div className="admin-catalog">
+          {catalogEntries.map((entry) => (
+            <article key={`${entry.kind}-${entry.column ?? ""}-${entry.path}`}>
+              <div><span>{entry.kind === "post" ? `博文${entry.pinned ? " · 已置顶" : ""}` : "专栏"} · {entry.topic}</span><h3>{entry.title}</h3></div>
+              <div className="admin-distribution-actions">
+                {entry.kind === "post" && (
+                  <button type="button" disabled={pinningPath === entry.path} onClick={() => updatePinned(entry)}>
+                    {pinningPath === entry.path ? "正在更新" : entry.pinned ? "取消置顶" : "置顶首页"}
+                  </button>
+                )}
+                <button type="button" onClick={() => copyPackage(entry)}><Copy size={14} /> 复制</button>
+                {(["x", "csdn", "zhihu", "juejin"] as const).map((platform) => {
+                  const key = `${entry.kind}:${entry.column ?? ""}:${entry.path}:${platform}`;
+                  return <button type="button" key={platform} onClick={() => distribute(entry, platform)}>{platform === "x" ? "X" : platform === "csdn" ? "CSDN" : platform === "zhihu" ? "知乎" : "掘金"}{distributionStatus[key] && <small>{distributionStatus[key]}</small>}</button>;
+                })}
+              </div>
+            </article>
+          ))}
+        </div>
+      </section>
+    </main>
+  );
+}

package/app/components/Comments.tsx

@@ -0,0 +1,55 @@
+import { ChatCircle, GithubLogo } from "@phosphor-icons/react/ssr";
+import {
+  GiscusComments,
+  type GiscusConfig,
+} from "./GiscusComments";
+
+function giscusConfig(): GiscusConfig | undefined {
+  const config = {
+    repo:
+      process.env.GISCUS_REPO ?? process.env.NEXT_PUBLIC_GISCUS_REPO,
+    repoId:
+      process.env.GISCUS_REPO_ID ?? process.env.NEXT_PUBLIC_GISCUS_REPO_ID,
+    category:
+      process.env.GISCUS_CATEGORY ??
+      process.env.NEXT_PUBLIC_GISCUS_CATEGORY,
+    categoryId:
+      process.env.GISCUS_CATEGORY_ID ??
+      process.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID,
+  };
+  return Object.values(config).every(Boolean)
+    ? (config as GiscusConfig)
+    : undefined;
+}
+
+export function Comments({ slug }: { slug: string }) {
+  const config = giscusConfig();
+
+  return (
+    <section className="comments" aria-labelledby={`comments-heading-${slug}`}>
+      <div className="comments-heading">
+        <ChatCircle size={23} />
+        <div>
+          <h2 id={`comments-heading-${slug}`}>评论</h2>
+          <p>
+            {config
+              ? "评论由 GitHub Discussions 保存和管理。"
+              : "评论接入已准备好，补充 GitHub Discussions 配置后即可开放。"}
+          </p>
+        </div>
+      </div>
+
+      {config ? (
+        <GiscusComments slug={slug} config={config} />
+      ) : (
+        <div className="integration-notice">
+          <GithubLogo size={20} weight="fill" />
+          <p>
+            需要一个公开 GitHub 仓库，并为它启用 Discussions、安装 Giscus
+            App、选择评论分类。
+          </p>
+        </div>
+      )}
+    </section>
+  );
+}

package/app/components/ContentEmptyState.tsx

@@ -0,0 +1,51 @@
+import Link from "next/link";
+import { ArrowRight, Article, Books, Quotes } from "@phosphor-icons/react/ssr";
+
+const emptyContent = {
+  posts: {
+    icon: Article,
+    eyebrow: "NO POSTS YET / 暂无博文",
+    title: "这里还没有博文。",
+    description: "第一篇长文发布后，会从这里开始形成可检索、可归档的写作记录。",
+    actionHref: "/",
+    actionLabel: "返回首页",
+  },
+  thoughts: {
+    icon: Quotes,
+    eyebrow: "NO THOUGHTS YET / 暂无随想",
+    title: "随想还没有开始。",
+    description: "短句、照片、声音和临时冒出的念头，之后都会沿着时间线落在这里。",
+    actionHref: "/blog",
+    actionLabel: "先读博文",
+  },
+  columns: {
+    icon: Books,
+    eyebrow: "NO COLUMNS YET / 暂无专栏",
+    title: "专栏正在形成。",
+    description: "当同一主题积累出清晰的阅读顺序，这里会出现第一条连续的阅读路径。",
+    actionHref: "/blog",
+    actionLabel: "浏览全部博文",
+  },
+} as const;
+
+export function ContentEmptyState({ kind }: { kind: keyof typeof emptyContent }) {
+  const content = emptyContent[kind];
+  const Icon = content.icon;
+
+  return (
+    <section className="content-empty-state" aria-labelledby={`${kind}-empty-title`}>
+      <div className="content-empty-mark" aria-hidden="true">
+        <Icon size={30} weight="light" />
+      </div>
+      <div>
+        <p className="eyebrow">{content.eyebrow}</p>
+        <h2 id={`${kind}-empty-title`}>{content.title}</h2>
+        <p>{content.description}</p>
+      </div>
+      <Link href={content.actionHref}>
+        {content.actionLabel}
+        <ArrowRight size={17} />
+      </Link>
+    </section>
+  );
+}

package/app/components/ExternalEmbed.tsx

@@ -0,0 +1,127 @@
+import {
+  ArrowUpRight,
+  LinkSimple,
+  VideoCamera,
+  WechatLogo,
+  XLogo,
+  YoutubeLogo,
+} from "@phosphor-icons/react/ssr";
+import { parse } from "yaml";
+
+type EmbedData = {
+  url: string;
+  title?: string;
+  description?: string;
+  image?: string;
+};
+
+type EmbedProvider = "youtube" | "bilibili" | "x" | "wechat" | "website";
+
+function readEmbedData(source: string): EmbedData | null {
+  try {
+    const value = parse(source.trim()) as unknown;
+    const input = typeof value === "string" ? { url: value } : value;
+    if (!input || typeof input !== "object" || !("url" in input) || typeof input.url !== "string") return null;
+    const url = new URL(input.url);
+    if (!['http:', 'https:'].includes(url.protocol)) return null;
+    return {
+      url: url.toString(),
+      title: "title" in input && typeof input.title === "string" ? input.title : undefined,
+      description: "description" in input && typeof input.description === "string" ? input.description : undefined,
+      image: "image" in input && typeof input.image === "string" && /^https?:\/\//u.test(input.image) ? input.image : undefined,
+    };
+  } catch {
+    return null;
+  }
+}
+
+function providerFor(url: URL): EmbedProvider {
+  const hostname = url.hostname.replace(/^www\./u, "");
+  if (["youtube.com", "m.youtube.com", "youtu.be", "youtube-nocookie.com"].includes(hostname)) return "youtube";
+  if (hostname === "bilibili.com" || hostname.endsWith(".bilibili.com")) return "bilibili";
+  if (["x.com", "twitter.com", "mobile.twitter.com"].includes(hostname)) return "x";
+  if (hostname === "mp.weixin.qq.com") return "wechat";
+  return "website";
+}
+
+function youtubeId(url: URL) {
+  if (url.hostname.replace(/^www\./u, "") === "youtu.be") return url.pathname.split("/").filter(Boolean)[0];
+  if (url.searchParams.get("v")) return url.searchParams.get("v") ?? undefined;
+  const parts = url.pathname.split("/").filter(Boolean);
+  if (["embed", "shorts", "live"].includes(parts[0])) return parts[1];
+  return undefined;
+}
+
+function bilibiliPlayerUrl(url: URL) {
+  const match = url.pathname.match(/\/video\/(BV[0-9A-Za-z]+|av\d+)/u);
+  const identifier = match?.[1] ?? url.searchParams.get("bvid") ?? url.searchParams.get("aid");
+  if (!identifier) return null;
+  const key = identifier.toLowerCase().startsWith("av") || /^\d+$/u.test(identifier) ? "aid" : "bvid";
+  const value = identifier.toLowerCase().startsWith("av") ? identifier.slice(2) : identifier;
+  return `https://player.bilibili.com/player.html?${key}=${encodeURIComponent(value)}&high_quality=1&danmaku=0`;
+}
+
+function playableUrl(provider: EmbedProvider, url: URL) {
+  if (provider === "youtube") {
+    const id = youtubeId(url);
+    return id && /^[0-9A-Za-z_-]+$/u.test(id) ? `https://www.youtube-nocookie.com/embed/${id}` : null;
+  }
+  if (provider === "bilibili") return bilibiliPlayerUrl(url);
+  return null;
+}
+
+const providerCopy = {
+  youtube: { label: "YouTube", Icon: YoutubeLogo },
+  bilibili: { label: "Bilibili", Icon: VideoCamera },
+  x: { label: "X", Icon: XLogo },
+  wechat: { label: "微信公众号", Icon: WechatLogo },
+  website: { label: "网页摘要", Icon: LinkSimple },
+};
+
+export function ExternalEmbed({ source }: { source: string }) {
+  const data = readEmbedData(source);
+  if (!data) {
+    return <p className="external-embed-error">无法解析这个嵌入块，请检查 URL 与 YAML 格式。</p>;
+  }
+
+  const url = new URL(data.url);
+  const provider = providerFor(url);
+  const playerUrl = playableUrl(provider, url);
+  const { Icon, label } = providerCopy[provider];
+
+  if (playerUrl) {
+    return (
+      <figure className={`external-embed external-embed-${provider}`}>
+        <div className="external-embed-frame">
+          <iframe
+            src={playerUrl}
+            title={data.title ?? `${label} 嵌入内容`}
+            loading="lazy"
+            allow="accelerometer; autoplay; encrypted-media; fullscreen; picture-in-picture"
+            referrerPolicy="strict-origin-when-cross-origin"
+            allowFullScreen
+          />
+        </div>
+        <figcaption>
+          <span><Icon size={17} />{label}</span>
+          <a href={data.url} target="_blank" rel="noopener noreferrer">在原网站打开<ArrowUpRight size={14} /></a>
+        </figcaption>
+      </figure>
+    );
+  }
+
+  return (
+    <a className={`external-embed-card external-embed-${provider}`} href={data.url} target="_blank" rel="noopener noreferrer">
+      {data.image && (
+        // eslint-disable-next-line @next/next/no-img-element
+        <img src={data.image} alt="" loading="lazy" />
+      )}
+      <span className="external-embed-copy">
+        <small><Icon size={16} />{label} · {url.hostname}</small>
+        <strong>{data.title ?? "打开这条外部内容"}</strong>
+        <p>{data.description ?? (provider === "x" || provider === "wechat" ? "平台不提供稳定的无脚本嵌入，Garden 会保留清晰、可访问的原文入口。" : "查看原网页中的完整内容与上下文。")}</p>
+      </span>
+      <ArrowUpRight size={21} />
+    </a>
+  );
+}