@windcoder/astro-theme-orchid 0.0.0-stage → 0.2.0

package/src/routes/categories/index.astro

@@ -0,0 +1,29 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "virtual:theme/components/BaseLayout.astro";
+import { t } from "../../i18n/index.js";
+import { collectCategories, getSortedPosts } from "../../utils.js";
+
+// 分类云：复用 tag-cloud 样式，分类内文章数 > 1 用大字号
+const all = await getCollection("posts", ({ data }) =>
+	import.meta.env.PROD ? !data.draft : true,
+);
+const cats = [...collectCategories(getSortedPosts(all)).entries()];
+---
+
+<BaseLayout title={t('categories')} page="categories">
+  <header class="archive-head reveal">
+    <h1 class="page-title">{t('categories')}</h1>
+    <p class="page-sub">{t('totalCategories', { n: cats.length })}</p>
+  </header>
+  <div class="tag-cloud card reveal">
+    {
+      cats.map(([cat, list]) => (
+        <a class={list.length > 1 ? 'tag-s3' : 'tag-s1'} href={`/categories/${encodeURIComponent(cat)}/`}>
+          {cat}
+          <span class="tag-count">{list.length}</span>
+        </a>
+      ))
+    }
+  </div>
+</BaseLayout>

package/src/routes/friends.astro

@@ -0,0 +1,83 @@
+---
+import { getEntry, render } from "astro:content";
+import BaseLayout from "virtual:theme/components/BaseLayout.astro";
+import config from "virtual:theme/config";
+import { t } from "../i18n/index.js";
+
+// 数据源 = themeConfig.friends.list（决策 8：与侧栏友链 widget 同源）
+const friends = config.friends.list
+	.filter((f) => f.enabled)
+	.sort((a, b) =>
+		config.friends.sort === "random"
+			? Math.random() - 0.5
+			: b.weight - a.weight,
+	);
+
+// 可选 spec 正文（src/content/spec/friends.md），渲染在卡片列表上方
+const entry = await getEntry("spec", "friends").catch(() => null);
+const { Content } = entry ? await render(entry) : { Content: null };
+
+const apply = config.friends.apply;
+---
+
+<BaseLayout title={config.friends.title} page="friends">
+  <header class="archive-head reveal">
+    <h1 class="page-title">{config.friends.title}</h1>
+    {config.friends.description && <p class="page-sub">{config.friends.description}</p>}
+  </header>
+
+  {
+    Content && (
+      <article class="card page-card prose reveal" data-lightbox-gallery>
+        <Content />
+      </article>
+    )
+  }
+
+  {
+    friends.length > 0 ? (
+      <div class="friend-grid reveal">
+        {friends.map((f) => (
+          <a class="friend-card card" href={f.site} target="_blank" rel="noopener">
+            <div class="friend-avatar">
+              {f.image ? (
+                <img src={f.image} alt={t('avatarAlt', { name: f.title })} loading="lazy" />
+              ) : (
+                <span class="avatar-fallback">{f.title.slice(0, 1)}</span>
+              )}
+            </div>
+            <div class="friend-info">
+              <div class="friend-name">{f.title}</div>
+              {f.desc && <div class="friend-desc">{f.desc}</div>}
+              {f.tags.length > 0 && (
+                <div class="friend-tags">
+                  {f.tags.map((ft) => (
+                    <span class="chip">{ft}</span>
+                  ))}
+                </div>
+              )}
+            </div>
+          </a>
+        ))}
+      </div>
+    ) : (
+      <p class="tag-empty reveal">{t('noFriends')}</p>
+    )
+  }
+
+  {
+    apply.title && (
+      <section class="friend-apply card reveal">
+        <div>
+          <div class="fa-title">{apply.title}</div>
+          {apply.description && <p class="fa-desc">{apply.description}</p>}
+        </div>
+        {apply.link && (
+          <a class="btn" href={apply.link}>
+            {apply.label || t('applyFriend')}
+          </a>
+        )}
+      </section>
+    )
+  }
+</BaseLayout>

package/src/routes/gallery/[album].astro

@@ -0,0 +1,97 @@
+---
+/**
+ * 相册详情页（M3b-b8）：封面横幅（无封面降级卡式头部）+ 瀑布流照片墙。
+ * 加密相册复用 b7 EncryptedContent（slug = album.id），解密注入后
+ * 灯箱组委托（app.ts doc 级）依然生效。
+ */
+import BaseLayout from "virtual:theme/components/BaseLayout.astro";
+import EncryptedContent from "virtual:theme/components/EncryptedContent.astro";
+import PhotoCard from "virtual:theme/components/PhotoCard.astro";
+import config from "virtual:theme/config";
+import { t } from "../../i18n/index.js";
+import { getAlbumCover, scanAlbumPhotos } from "../../utils/gallery.js";
+import { getLqipStyle } from "../../utils/lqip.js";
+
+export function getStaticPaths() {
+	return config.gallery.albums.map((album) => ({
+		params: { album: album.id },
+		props: { album },
+	}));
+}
+
+const { album } = Astro.props;
+const photos = scanAlbumPhotos(album.id);
+const cover = getAlbumCover(album, photos);
+const tags = album.tags || [];
+---
+
+<BaseLayout title={album.name} page="gallery">
+  {
+    cover ? (
+      <header class="gallery-banner reveal">
+        {/* LQIP 占位渐变（b9.5，回补 b8 画廊图片）：z-index 低于 banner-inner/back/遮罩 */}
+        <div class="qy-lqip" style={getLqipStyle(cover)} aria-hidden="true"></div>
+        <img src={cover} alt={album.name} data-lqip />
+        <a class="gallery-back" href="/gallery/">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m15 18-6-6 6-6" /></svg>
+          {t('backToAlbums')}
+        </a>
+        <div class="gallery-banner-inner">
+          <h1 class="gallery-title">{album.name}</h1>
+          {album.description && <p class="gallery-desc">{album.description}</p>}
+          <div class="gallery-meta">
+            {album.date && (
+              <span>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></svg>
+                {album.date}
+              </span>
+            )}
+            {album.location && (
+              <span>
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12S4 16 4 10a8 8 0 1 1 16 0Z" /><circle cx="12" cy="10" r="3" /></svg>
+                {album.location}
+              </span>
+            )}
+            <span>{t('galleryPhotos', { n: photos.length })}</span>
+            {tags.length > 0 && (
+              <span class="gallery-meta-tags">
+                {tags.map((tag) => <span>{tag}</span>)}
+              </span>
+            )}
+          </div>
+        </div>
+      </header>
+    ) : (
+      <header class="gallery-head-plain card reveal">
+        <h1 class="page-title">{album.name}</h1>
+        {album.description && <p class="page-sub">{album.description}</p>}
+        <div class="gallery-meta">
+          {album.date && <span>{album.date}</span>}
+          {album.location && <span>{album.location}</span>}
+          <span>{t('galleryPhotos', { n: photos.length })}</span>
+          {tags.length > 0 && (
+            <span class="gallery-meta-tags">
+              {tags.map((tag) => <span>{tag}</span>)}
+            </span>
+          )}
+        </div>
+      </header>
+    )
+  }
+
+  {
+    photos.length === 0 ? (
+      <p class="gallery-empty reveal">{t('galleryNoPhotos')}</p>
+    ) : album.password ? (
+      <EncryptedContent password={album.password} slug={album.id} hint={album.passwordHint}>
+        <div class="gallery-masonry" data-lightbox-group style={`--col-width: ${config.gallery.columnWidth}px`}>
+          {photos.map((src, i) => <PhotoCard src={src} alt={`${album.name} · ${i + 1}`} />)}
+        </div>
+      </EncryptedContent>
+    ) : (
+      <div class="gallery-masonry" data-lightbox-group style={`--col-width: ${config.gallery.columnWidth}px`}>
+        {photos.map((src, i) => <PhotoCard src={src} alt={`${album.name} · ${i + 1}`} />)}
+      </div>
+    )
+  }
+</BaseLayout>

package/src/routes/gallery/index.astro

@@ -0,0 +1,100 @@
+---
+import AlbumCard from "virtual:theme/components/AlbumCard.astro";
+/**
+ * 画廊列表页（M3b-b8）：相册网格 + 标签 chips 筛选 + 关键词搜索。
+ * 筛选用 <gallery-filter> custom element（is:inline + 防重复 define），
+ * VT 换页后新 DOM 自动 re-connect，与原版验证过的模式一致。
+ */
+import BaseLayout from "virtual:theme/components/BaseLayout.astro";
+import config from "virtual:theme/config";
+import { t } from "../../i18n/index.js";
+import { buildAlbumIndex } from "../../utils/gallery.js";
+
+const albums = buildAlbumIndex(config.gallery.albums);
+const allTags = [...new Set(albums.flatMap((a) => a.tags || []))].sort();
+---
+
+<BaseLayout title={config.gallery.title} page="gallery">
+  <header class="archive-head reveal">
+    <h1 class="page-title">{config.gallery.title}</h1>
+    {config.gallery.description && <p class="page-sub">{config.gallery.description}</p>}
+  </header>
+
+  {
+    albums.length > 0 ? (
+      <gallery-filter class="reveal">
+        <div class="gallery-search">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="7" /><path d="m21 21-4.3-4.3" /></svg>
+          <input type="search" data-gallery-search placeholder={t('searchAlbums')} aria-label={t('searchAlbums')} />
+        </div>
+        {allTags.length > 0 && (
+          <div class="chips">
+            <button type="button" class="chip is-on" data-tag-filter="">
+              {t('allTags')}
+            </button>
+            {allTags.map((tag) => (
+              <button type="button" class="chip" data-tag-filter={tag}>
+                {tag}
+              </button>
+            ))}
+          </div>
+        )}
+        <div class="gallery-grid">
+          {albums.map((album) => (
+            <AlbumCard
+              id={album.id}
+              name={album.name}
+              cover={album.cover}
+              description={album.description}
+              date={album.date}
+              location={album.location}
+              tags={album.tags}
+              photoCount={album.photoCount}
+              encrypted={!!album.password}
+            />
+          ))}
+        </div>
+        <p class="gallery-empty" data-gallery-empty hidden>{t('searchAlbumNoResults')}</p>
+      </gallery-filter>
+    ) : (
+      <p class="gallery-empty reveal">{t('galleryNoAlbums')}</p>
+    )
+  }
+</BaseLayout>
+
+<script is:inline>
+  if (!customElements.get('gallery-filter')) {
+    customElements.define(
+      'gallery-filter',
+      class extends HTMLElement {
+        connectedCallback() {
+          const search = this.querySelector('[data-gallery-search]');
+          const chips = Array.from(this.querySelectorAll('[data-tag-filter]'));
+          const cards = Array.from(this.querySelectorAll('.album-card'));
+          const empty = this.querySelector('[data-gallery-empty]');
+          let tag = '';
+          const apply = () => {
+            const q = (search && search.value ? search.value : '').trim().toLowerCase();
+            let visible = 0;
+            for (const card of cards) {
+              const okTag = !tag || (card.dataset.tags || '').split(',').includes(tag);
+              const okQ = !q || (card.dataset.search || '').includes(q);
+              const show = okTag && okQ;
+              card.classList.toggle('hidden', !show);
+              if (show) visible++;
+            }
+            if (empty) empty.hidden = visible > 0;
+          };
+          this.addEventListener('click', (e) => {
+            const btn = e.target.closest('[data-tag-filter]');
+            if (!btn) return;
+            tag = btn.dataset.tagFilter || '';
+            chips.forEach((c) => c.classList.toggle('is-on', c === btn));
+            apply();
+          });
+          if (search) search.addEventListener('input', apply);
+        }
+      },
+    );
+  }
+</script>

package/src/routes/guestbook.astro

@@ -0,0 +1,37 @@
+---
+import { getEntry, render } from "astro:content";
+import BaseLayout from "virtual:theme/components/BaseLayout.astro";
+import Comment from "virtual:theme/components/Comment.astro";
+import config from "virtual:theme/config";
+import { t } from "../i18n/index.js";
+
+// 正文来自站点 spec 集合（src/content/spec/guestbook.md）
+const entry = await getEntry("spec", "guestbook").catch(() => null);
+const { Content } = entry ? await render(entry) : { Content: null };
+const commentOn = config.comment.enabled && config.comment.provider !== "none";
+---
+
+<BaseLayout title={t('guestbook')} page="guestbook">
+  <header class="archive-head reveal">
+    <h1 class="page-title">{t('guestbook')}</h1>
+    <p class="page-sub">{t('guestbookSub')}</p>
+  </header>
+
+  {
+    Content && (
+      <article class="card page-card prose reveal" data-lightbox-gallery>
+        <Content />
+      </article>
+    )
+  }
+
+  {
+    commentOn ? (
+      <Comment path="/guestbook" />
+    ) : (
+      <div class="card page-card comment-placeholder reveal">
+        <p>{t('commentComingSoon')}</p>
+      </div>
+    )
+  }
+</BaseLayout>

package/src/routes/index.astro

@@ -0,0 +1,47 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "virtual:theme/components/BaseLayout.astro";
+import CategoryBar from "virtual:theme/components/CategoryBar.astro";
+import Pagination from "virtual:theme/components/Pagination.astro";
+import PostCard from "virtual:theme/components/PostCard.astro";
+import Sidebar from "virtual:theme/components/Sidebar.astro";
+import config from "virtual:theme/config";
+import { t } from "../i18n/index.js";
+import { getSortedPosts } from "../utils.js";
+import { hydratePosts } from "./_hydrate.js";
+
+// 首页 = 分页第 1 页。置顶文章留在分页流内（§4.39，对齐 orchid-blog paginate 全量流口径）：
+// 排序置顶在前，占第 1 页 pageSize 名额，各页卡片数一致，翻页不会出现「少一块」。
+const all = await getCollection("posts", ({ data }) =>
+	import.meta.env.PROD ? !data.draft : true,
+);
+const sorted = getSortedPosts(all);
+const total = Math.max(1, Math.ceil(sorted.length / config.postList.pageSize));
+
+const pagePosts = await hydratePosts(sorted.slice(0, config.postList.pageSize));
+---
+
+<BaseLayout page="home">
+  <div class="home-layout">
+    {/* 文章列表（§4.34）：id/data 属性供 app.ts 恢复与切换网格/列表形态 */}
+    <div
+      class="post-list"
+      id="postList"
+      data-allow-switch={config.postList.allowSwitch ? "true" : undefined}
+      data-default-layout={config.postList.defaultLayout}
+      data-grid-col={config.postList.gridColumnWidth}
+    >
+      {/* 分类导航栏（§4.15→§4.21）：仅首页、与置顶/近期文章同列宽；「更多」固定跳分类页 */}
+      <CategoryBar />
+      {
+        pagePosts.length > 0 ? (
+          pagePosts.map((post) => <PostCard post={post} featured={post.data.pinned} />)
+        ) : (
+          <p class="empty-note card">{t('emptyPosts')}</p>
+        )
+      }
+      <Pagination page={1} total={total} basePath="/" />
+    </div>
+    <Sidebar posts={sorted} />
+  </div>
+</BaseLayout>

package/src/routes/og/[...slug].ts

@@ -0,0 +1,281 @@
+import type { CollectionEntry } from "astro:content";
+import { getCollection } from "astro:content";
+import config from "virtual:theme/config";
+import type { APIRoute } from "astro";
+import satori from "satori";
+import { formatDate, getSortedPosts, hexToHsl } from "../../utils.js";
+
+/**
+ * OG 分享图（P1-11，默认关）：为每篇文章构建期生成 1200x630 分享图（/og/<slug>.png）。
+ * satori（对象树→SVG）+ sharp（SVG→PNG）。相对原版 orchid-blog 的主题化调整：
+ * 1. 不读站点磁盘头像/favicon（主题中立），页头以 accent 圆角方块作站点标识；
+ * 2. 修复原版缺陷：Google Fonts 拉取失败时原版 fonts 为空数组，satori 会抛
+ *    "No font provided" 令整个构建崩溃，此处降级为 sharp 纯形状占位图 + warn，构建不中断。
+ */
+
+interface FontOption {
+	data: Buffer | ArrayBuffer;
+	name: string;
+	weight: 400 | 700;
+	style: "normal";
+}
+
+export async function getStaticPaths() {
+	// 与相关文章口径一致：草稿（getSortedPosts 内已滤）、加密文章不生成分享图
+	const sorted = getSortedPosts(await getCollection("posts"));
+	return sorted
+		.filter((post) => !post.data.password)
+		.map((post) => ({ params: { slug: `${post.id}.png` }, props: { post } }));
+}
+
+let fontCache: { regular: Buffer | null; bold: null | Buffer } | null = null;
+
+/** Google Fonts CSS2 API 抽 Noto Sans SC woff2（400/700 两档），模块级缓存；失败缓存 null 供降级 */
+async function fetchNotoSansSCFonts() {
+	if (fontCache) return fontCache;
+	try {
+		const cssResp = await fetch(
+			"https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&display=swap",
+		);
+		if (!cssResp.ok) throw new Error(`Google Fonts CSS 响应 ${cssResp.status}`);
+		const cssText = await cssResp.text();
+		const getUrlForWeight = (weight: number) => {
+			const block = cssText.match(
+				new RegExp(`@font-face\\s*{[^}]*font-weight:\\s*${weight}[^}]*}`),
+			);
+			return block?.[0]?.match(/url\((https:[^)]+)\)/)?.[1] ?? null;
+		};
+		const regularUrl = getUrlForWeight(400);
+		const boldUrl = getUrlForWeight(700);
+		if (!regularUrl || !boldUrl)
+			throw new Error("Google Fonts CSS 中未找到 woff2 地址");
+		const [rResp, bResp] = await Promise.all([
+			fetch(regularUrl),
+			fetch(boldUrl),
+		]);
+		if (!rResp.ok || !bResp.ok) throw new Error("字体文件下载失败");
+		fontCache = {
+			regular: Buffer.from(await rResp.arrayBuffer()),
+			bold: Buffer.from(await bResp.arrayBuffer()),
+		};
+	} catch (err) {
+		console.warn("[og] Google Fonts 拉取失败，OG 图降级为占位图：", err);
+		fontCache = { regular: null, bold: null };
+	}
+	return fontCache;
+}
+
+/** 无字体时的占位图：纯形状 SVG（深底 + accent 竖条），不依赖任何字体 */
+async function placeholderPng(accent: string) {
+	const sharp = (await import("sharp")).default;
+	const { h } = hexToHsl(accent);
+	const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630"><rect width="1200" height="630" fill="hsl(${h}, 15%, 12%)"/><rect x="60" y="281" width="10" height="68" rx="6" fill="${accent}"/></svg>`;
+	return sharp(Buffer.from(svg)).png().toBuffer();
+}
+
+export const GET: APIRoute = async ({ props }) => {
+	const { post } = props as { post: CollectionEntry<"posts"> };
+	const { h } = hexToHsl(config.accentColor);
+	const primary = `hsl(${h}, 90%, 65%)`;
+	const textColor = "hsl(0, 0%, 95%)";
+	const subtleTextColor = `hsl(${h}, 10%, 75%)`;
+	const backgroundColor = `hsl(${h}, 15%, 12%)`;
+
+	const { regular, bold } = await fetchNotoSansSCFonts();
+	const fonts: FontOption[] = [];
+	if (regular)
+		fonts.push({
+			name: "Noto Sans SC",
+			data: regular,
+			weight: 400,
+			style: "normal",
+		});
+	if (bold)
+		fonts.push({
+			name: "Noto Sans SC",
+			data: bold,
+			weight: 700,
+			style: "normal",
+		});
+	if (fonts.length === 0) {
+		// 降级：占位图保证构建不中断（原版此处 satori 抛 "No font provided" 崩构建）
+		const png = await placeholderPng(config.accentColor);
+		return new Response(new Uint8Array(png), {
+			headers: {
+				"Content-Type": "image/png",
+				"Cache-Control": "public, max-age=31536000, immutable",
+			},
+		});
+	}
+
+	const description = post.data.description;
+	const author = config.author || config.title;
+
+	const template = {
+		type: "div",
+		props: {
+			style: {
+				height: "100%",
+				width: "100%",
+				display: "flex",
+				flexDirection: "column",
+				backgroundColor,
+				fontFamily: '"Noto Sans SC", sans-serif',
+				padding: "60px",
+			},
+			children: [
+				// 页头：accent 圆角方块 + 站点名（原版为 favicon 图，主题化后不依赖站点资源）
+				{
+					type: "div",
+					props: {
+						style: {
+							width: "100%",
+							display: "flex",
+							alignItems: "center",
+							gap: "20px",
+						},
+						children: [
+							{
+								type: "div",
+								props: {
+									style: {
+										width: "48px",
+										height: "48px",
+										borderRadius: "10px",
+										backgroundColor: primary,
+									},
+								},
+							},
+							{
+								type: "div",
+								props: {
+									style: {
+										fontSize: "36px",
+										fontWeight: 600,
+										color: subtleTextColor,
+									},
+									children: config.title,
+								},
+							},
+						],
+					},
+				},
+				// 中部：accent 竖条 + 标题（3 行截断）+ 描述（2 行截断）
+				{
+					type: "div",
+					props: {
+						style: {
+							display: "flex",
+							flexDirection: "column",
+							justifyContent: "center",
+							flexGrow: 1,
+							gap: "20px",
+						},
+						children: [
+							{
+								type: "div",
+								props: {
+									style: { display: "flex", alignItems: "flex-start" },
+									children: [
+										{
+											type: "div",
+											props: {
+												style: {
+													width: "10px",
+													height: "68px",
+													backgroundColor: primary,
+													borderRadius: "6px",
+													marginTop: "14px",
+												},
+											},
+										},
+										{
+											type: "div",
+											props: {
+												style: {
+													fontSize: "72px",
+													fontWeight: 700,
+													lineHeight: 1.2,
+													color: textColor,
+													marginLeft: "25px",
+													display: "-webkit-box",
+													overflow: "hidden",
+													textOverflow: "ellipsis",
+													lineClamp: 3,
+													WebkitLineClamp: 3,
+													WebkitBoxOrient: "vertical",
+												},
+												children: post.data.title,
+											},
+										},
+									],
+								},
+							},
+							description && {
+								type: "div",
+								props: {
+									style: {
+										fontSize: "32px",
+										lineHeight: 1.5,
+										color: subtleTextColor,
+										paddingLeft: "35px",
+										display: "-webkit-box",
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+										lineClamp: 2,
+										WebkitLineClamp: 2,
+										WebkitBoxOrient: "vertical",
+									},
+									children: description,
+								},
+							},
+						].filter(Boolean),
+					},
+				},
+				// 页脚：作者 + 日期（原版含头像，主题化后不依赖站点资源）
+				{
+					type: "div",
+					props: {
+						style: {
+							display: "flex",
+							justifyContent: "space-between",
+							alignItems: "center",
+							width: "100%",
+						},
+						children: [
+							{
+								type: "div",
+								props: {
+									style: {
+										fontSize: "28px",
+										fontWeight: 600,
+										color: textColor,
+									},
+									children: author,
+								},
+							},
+							{
+								type: "div",
+								props: {
+									style: { fontSize: "28px", color: subtleTextColor },
+									children: formatDate(post.data.published),
+								},
+							},
+						],
+					},
+				},
+			],
+		},
+	};
+
+	const svg = await satori(template, { width: 1200, height: 630, fonts });
+	const sharp = (await import("sharp")).default;
+	const png = await sharp(Buffer.from(svg)).png().toBuffer();
+
+	return new Response(new Uint8Array(png), {
+		headers: {
+			"Content-Type": "image/png",
+			"Cache-Control": "public, max-age=31536000, immutable",
+		},
+	});
+};