npm - @windcoder/astro-theme-orchid - Versions diffs - 0.0.0-stage → 0.1.0 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

package/README.md +311 -2
package/package.json +68 -3
package/src/components/AlbumCard.astro +73 -0
package/src/components/Analytics.astro +22 -0
package/src/components/BaseLayout.astro +188 -0
package/src/components/Calendar.astro +379 -0
package/src/components/CategoryBar.astro +74 -0
package/src/components/Comment.astro +48 -0
package/src/components/EncryptedContent.astro +42 -0
package/src/components/Footer.astro +31 -0
package/src/components/Header.astro +153 -0
package/src/components/License.astro +29 -0
package/src/components/Live2DWidget.astro +262 -0
package/src/components/MusicPlayer.astro +940 -0
package/src/components/OutdatedCard.astro +53 -0
package/src/components/Pagination.astro +94 -0
package/src/components/PhotoCard.astro +22 -0
package/src/components/PostCard.astro +89 -0
package/src/components/PostNav.astro +40 -0
package/src/components/RecommendedPost.astro +166 -0
package/src/components/SakuraEffect.astro +152 -0
package/src/components/Sidebar.astro +334 -0
package/src/components/Toc.astro +27 -0
package/src/components/analytics/GoogleAnalytics.astro +22 -0
package/src/components/analytics/La51Analytics.astro +52 -0
package/src/components/analytics/MicrosoftClarity.astro +18 -0
package/src/components/analytics/UmamiAnalytics.astro +86 -0
package/src/components/comments/Artalk.astro +51 -0
package/src/components/comments/Disqus.astro +43 -0
package/src/components/comments/Giscus.astro +50 -0
package/src/components/comments/Twikoo.astro +65 -0
package/src/components/comments/Waline.astro +36 -0
package/src/i18n/en.ts +164 -0
package/src/i18n/index.ts +18 -0
package/src/i18n/resolve.ts +49 -0
package/src/i18n/zh-CN.ts +184 -0
package/src/icons.ts +71 -0
package/src/index.ts +406 -0
package/src/plugins/plantuml-encoder.ts +95 -0
package/src/plugins/rehype-diagram.ts +218 -0
package/src/plugins/rehype-email.ts +75 -0
package/src/plugins/rehype-github-card.ts +114 -0
package/src/plugins/rehype.ts +284 -0
package/src/plugins/remark-diagram.ts +78 -0
package/src/plugins/remark-directives.ts +100 -0
package/src/plugins/remark-excerpt.ts +29 -0
package/src/plugins/remark-image-grid.ts +97 -0
package/src/plugins/remark-reading-time.ts +38 -0
package/src/plugins/scripts/diagram-panzoom.js +388 -0
package/src/plugins/scripts/plantuml-theme-switch.js +90 -0
package/src/routes/404.astro +14 -0
package/src/routes/_hydrate.ts +34 -0
package/src/routes/about.astro +25 -0
package/src/routes/api/allPostMeta.json.ts +26 -0
package/src/routes/archive.astro +81 -0
package/src/routes/categories/[category].astro +37 -0
package/src/routes/categories/index.astro +29 -0
package/src/routes/friends.astro +83 -0
package/src/routes/gallery/[album].astro +97 -0
package/src/routes/gallery/index.astro +100 -0
package/src/routes/guestbook.astro +37 -0
package/src/routes/index.astro +47 -0
package/src/routes/og/[...slug].ts +281 -0
package/src/routes/page/[page].astro +53 -0
package/src/routes/posts/[...slug].astro +337 -0
package/src/routes/robots.txt.ts +18 -0
package/src/routes/rss.xml.ts +37 -0
package/src/routes/series/[name].astro +63 -0
package/src/routes/series/index.astro +64 -0
package/src/routes/sponsor.astro +84 -0
package/src/routes/tags/[tag].astro +40 -0
package/src/routes/tags/index.astro +29 -0
package/src/schema.ts +1212 -0
package/src/scripts/app.ts +1041 -0
package/src/scripts/share-poster.ts +468 -0
package/src/styles/global.css +4830 -0
package/src/utils/crypto.ts +46 -0
package/src/utils/gallery.ts +76 -0
package/src/utils/lqip.ts +18 -0
package/src/utils/related.ts +101 -0
package/src/utils.ts +181 -0
package/src/vite.ts +105 -0

package/src/components/BaseLayout.astro ADDED Viewed

@@ -0,0 +1,188 @@
+---
+// 字体（§4.66）：Astro Fonts API 官方组件，按 cssVariable 渲染 @font-face
+// 与变量定义（preload 开启时附带 <link rel=preload>）
+import { Font } from "astro:assets";
+import { ClientRouter } from "astro:transitions";
+import Analytics from "virtual:theme/components/Analytics.astro";
+import Footer from "virtual:theme/components/Footer.astro";
+import Header from "virtual:theme/components/Header.astro";
+import Live2DWidget from "virtual:theme/components/Live2DWidget.astro";
+import MusicPlayer from "virtual:theme/components/MusicPlayer.astro";
+import SakuraEffect from "virtual:theme/components/SakuraEffect.astro";
+import config from "virtual:theme/config";
+import { t } from "../i18n/index.js";
+import { hexToHsl } from "../utils.js";
+import "@windcoder/astro-theme-orchid/styles/global.css";
+/* 灯箱（§4.69）：PhotoSwipe 样式随页面 CSS 一起打包，JS 由 app.ts 惰性动态加载 */
+import "photoswipe/photoswipe.css";
+interface Props {
+	title?: string;
+	description?: string;
+	/** meta keywords（§4.19）：默认站点级配置，文章页传 frontmatter tags 覆盖 */
+	keywords?: string[];
+	/** body[data-page]，驱动导航高亮（home/archive/tags/post...） */
+	page?: string;
+	/** OG 分享图路径（b9.4，文章页传 /og/<slug>.png）；绝对链接依赖站点 site 配置 */
+	ogImage?: string;
+}
+const {
+	title,
+	description = config.description,
+	keywords = config.keywords,
+	page,
+	ogImage,
+} = Astro.props;
+const pageTitle = title ? `${title} · ${config.title}` : config.title;
+const { h, s, l } = hexToHsl(config.accentColor);
+/* 首页 banner（§4.42，hero+壁纸合并单配置）：数组时构建期随机选一张（每页构建各自取，零 JS）；
+   enabled=false 或 src 未配置不渲染图 */
+const bannerSrc = Array.isArray(config.banner.src)
+	? config.banner.src.length
+		? config.banner.src[Math.floor(Math.random() * config.banner.src.length)]
+		: ""
+	: config.banner.src || "";
+const showBanner =
+	config.banner.enabled &&
+	Boolean(bannerSrc) &&
+	(!config.banner.homeOnly || page === "home");
+/* hero 文案（§4.42）：quote 留空不渲染；有 banner 时叠加其上，否则渲染为列表上方独立区块 */
+const heroEnabled = config.banner.enabled && Boolean(config.banner.quote);
+const heroOnBanner = heroEnabled && showBanner && page === "home";
+/* 字体角色映射（§4.66）：配置了 role 的字体生成 html:root 规则，把主题三角色
+   变量重定向为 var(字体变量), 原角色回退栈（取自 global.css :root 默认值，
+   字体未覆盖的字形如中文自然回落）。html:root Specificity (0,1,1) 高于
+   :root (0,1,0)，稳定覆盖不赌样式顺序；CSS 自定义属性引用是惰性求值，
+   与 <Font> 产出的变量定义先后无关 */
+const fontRoleFallback: Record<string, string> = {
+	display: '"Noto Serif SC", "Songti SC", "STSong", "SimSun", serif',
+	body: '-apple-system, "PingFang SC", "Segoe UI", "Microsoft YaHei", sans-serif',
+	mono: 'ui-monospace, "SF Mono", "JetBrains Mono", "Fira Code", monospace',
+};
+const fontRoleCss = config.fonts
+	.filter((f) => f.role)
+	.map(
+		(f) =>
+			`html:root{--font-${f.role}:var(${f.cssVariable}),${fontRoleFallback[f.role]};}`,
+	)
+	.join("");
+---
+<!doctype html>
+<html lang={config.lang} style={`--accent-h:${h};--accent-s:${s}%;--accent-l:${l}%;--page-width:${config.pageWidth}px`} data-accent-h={h} data-color-mode={config.colorMode}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="generator" content={Astro.generator} />
+    <title>{pageTitle}</title>
+    <meta name="description" content={description} />
+    {/* keywords（§4.19）：非空才输出；文章页以 tags 覆盖站点级配置 */}
+    {keywords.length > 0 && <meta name="keywords" content={keywords.join(", ")} />}
+    <meta name="author" content={config.author} />
+    {/* favicon（§4.30）：配置非空时按列表输出，theme 指定 light/dark 经 media 按系统深浅切换 */}
+    {config.favicon.length > 0
+      ? config.favicon.map((f) => (
+          <link
+            rel="icon"
+            href={f.src}
+            type={f.type}
+            sizes={f.sizes}
+            media={f.theme ? `(prefers-color-scheme: ${f.theme})` : undefined}
+          />
+        ))
+      : <link rel="icon" href="/favicon.svg" type="image/svg+xml" />}
+    {/* SEO 头部补全（§4.12）：canonical 防重复内容；RSS 供阅读器发现；theme-color 与 global.css :root 同步 */}
+    {Astro.site && <link rel="canonical" href={new URL(Astro.url.pathname, Astro.site).href} />}
+    <link rel="alternate" type="application/rss+xml" title={config.title} href={Astro.site ? new URL("rss.xml", Astro.site).href : "/rss.xml"} />
+    <meta name="theme-color" media="(prefers-color-scheme: light)" content="#f6f4ef" />
+    <meta name="theme-color" media="(prefers-color-scheme: dark)" content="#131516" />
+    {/* OG/Twitter meta（b9.4）：ogImage 仅文章页传入；绝对链接依赖 site 配置 */}
+    <meta property="og:type" content={ogImage ? 'article' : 'website'} />
+    <meta property="og:title" content={pageTitle} />
+    <meta property="og:description" content={description} />
+    <meta property="og:site_name" content={config.title} />
+    <meta property="og:locale" content={config.lang.replace("-", "_")} />
+    {Astro.site && <meta property="og:url" content={new URL(Astro.url.pathname, Astro.site).href} />}
+    {ogImage && Astro.site && <meta property="og:image" content={new URL(ogImage, Astro.site).href} />}
+    <meta name="twitter:card" content={ogImage ? 'summary_large_image' : 'summary'} />
+    <ClientRouter />
+    {/* 字体（§4.66）：Astro Fonts API 标准方案。每个 <Font> 按注入配置产出
+        @font-face + 变量定义（preload 时附带预载链接）；角色映射规则随后输出 */}
+    {config.fonts.length > 0 && (
+      <>
+        {config.fonts.map((f) => (
+          <Font cssVariable={f.cssVariable} preload={f.preload} />
+        ))}
+        <style is:global set:html={fontRoleCss} />
+      </>
+    )}
+    <!-- 深浅模式 boot：先于首帧执行防 FOUC；is:inline 在 VT swap 时不重复执行。
+         默认模式读 html[data-color-mode]（§4.16 colorMode），用户选择以 localStorage('qy-mode') 优先 -->
+    <script is:inline>
+      (function(){var m=localStorage.getItem('qy-mode');var d=document.documentElement.dataset.colorMode||'system';if(m==='dark'||(!m&&d==='dark')||(!m&&d==='system'&&matchMedia('(prefers-color-scheme: dark)').matches))document.documentElement.classList.add('dark');var h=localStorage.getItem('qy-hue');if(h)document.documentElement.style.setProperty('--accent-h',h);})();
+    </script>
+  </head>
+  <!-- 客户端动态文案载体（i18n，M3b-b5）：app.ts 读取，VT swap 后随新 body 重建 -->
+  <script type="application/json" id="qy-ui-labels" set:html={JSON.stringify({ close: t('close'), prevImage: t('prevImage'), nextImage: t('nextImage'), copied: t('copied'), fullscreen: t('fullscreen'), slideshow: t('slideshow'), thumbs: t('thumbs'), sharePoster: t('sharePoster'), generatingPoster: t('generatingPoster'), copyLink: t('copyLink'), savePoster: t('savePoster'), scanToRead: t('scanToRead'), author: t('author'), searchLoading: t('searchLoading'), searchNoResults: t('searchNoResults'), searchUnavailable: t('searchUnavailable'), searchTypeSomething: t('searchTypeSomething') })} />
+  <body data-page={page}>
+    <a class="skip-link" href="#main">{t('skipToContent')}</a>
+    <Header />
+    <!-- 首页 banner（§4.42，hero+壁纸合并单配置）：Header 之后下沉横幅 + 黑蒙层；enabled=false / src 未配置 / homeOnly 非首页不渲染 -->
+    {
+      showBanner && (
+        <div
+          class="wallpaper-banner"
+          style={`--banner-h:${config.banner.height}vh;--banner-dim:${config.banner.dimOpacity};--banner-pos:${config.banner.position}`}
+        >
+          <img src={bannerSrc} alt="" aria-hidden="true" loading="eager" />
+          <div class="wallpaper-dim" aria-hidden="true" />
+          {/* hero 文案叠加（§4.42）：quote 配置时主句/副句居中显示在 banner 上 */}
+          {heroOnBanner && (
+            <div class="wallpaper-hero reveal">
+              <h1 class="hero-quote" set:html={config.banner.quote} />
+              {config.banner.sub && <p class="hero-sub">{config.banner.sub}</p>}
+            </div>
+          )}
+        </div>
+      )
+    }
+    <main id="main" class="site-main">
+      <div class="shell">
+        {/* hero 独立区块形态（§4.42）：无 banner 图时的首页 hero 文案，保持原列表上方位置 */}
+        {
+          heroEnabled && page === "home" && !heroOnBanner && (
+            <section class="hero reveal">
+              <h1 class="hero-quote" set:html={config.banner.quote} />
+              {config.banner.sub && <p class="hero-sub">{config.banner.sub}</p>}
+            </section>
+          )
+        }
+        <slot />
+      </div>
+    </main>
+    <!-- 列表形态恢复（§4.34→§4.55）：首帧绘制前按 localStorage > defaultLayout 应用防闪烁；
+         is:inline 在 VT 换页不重执行，跨页返回由 app.ts initPage 接管 -->
+    <script is:inline>
+      (function(){try{var l=document.getElementById('postList');var m=localStorage.getItem('qy-postList')||(l&&l.dataset.defaultLayout)||'list';if(m!=='grid'||!l)return;l.classList.add('grid-mode');l.style.setProperty('--col-w',(l.dataset.gridCol||'320')+'px');var b=document.getElementById('layoutSwitch');if(b)b.setAttribute('aria-pressed','true');}catch(e){}})();
+    </script>
+    <Footer />
+    <!-- 站点统计（P1-16）：ID 全空零输出，挂 body 尾与 orchid-blog 口径一致 -->
+    <Analytics />
+    <!-- 樱花飘落特效（§4.30）：sakura.enabled 开启才渲染 -->
+    {config.sakura.enabled && <SakuraEffect density={config.sakura.density} />}
+    <!-- 悬浮音乐播放器（§4.36）：music.enabled 且歌单非空才渲染 -->
+    {config.music.enabled && config.music.playlist.length > 0 && (
+      <MusicPlayer music={config.music} />
+    )}
+    <!-- Live2D 看板娘（§4.38）：live2d.enabled 且配置了 model 才渲染 -->
+    {config.live2d.enabled && config.live2d.model && <Live2DWidget live2d={config.live2d} />}
+    <button class="back-top" id="backTop" type="button" aria-label={t('backToTop')} hidden>
+      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m18 15-6-6-6 6"/></svg>
+    </button>
+    <!-- 全局交互（VT 兼容：document 级委托 + astro:page-load 重初始化） -->
+    <script>
+      import '../scripts/app';
+    </script>
+  </body>
+</html>

package/src/components/Calendar.astro ADDED Viewed

@@ -0,0 +1,379 @@
+---
+/**
+ * 侧栏日历 + 活跃度热力图（P2 侧栏改造）。
+ * 月视图（周一起始，当月有文章日高亮）+ 近 12 个月热力图（每月 4 段，透明度 5 档）：
+ *   顶部月份标签（§4.43），整列可点击跳转对应月份，单元悬停提示月份第几周 · 几篇。
+ * 年月标签可点击展开年月选择器（§4.47：年步进 + 12 月网格、未来月置灰），非当月时头部出现「回到本月」按钮（§4.54 移至日期 ▾ 之后）。
+ * 数据复用 /api/allPostMeta.json（加密文章已在端点侧排除）。
+ * 热力图下方文章列表（§4.40，§4.43 移至热力图下）：默认当月全部，点选有文章日期过滤当日，再点取消；
+ *   按时间倒序，左侧标题右侧日期；条目悬停全文 title 可经 widgets 数组 calendar 项 specificConfig.postTooltip 开启（§4.41），默认关。
+ * <qy-calendar> 为 VT 安全 custom element：is:inline + customElements.get 防重复 define，
+ * 元数据缓存在 window.__qyAllPostMetaCache（与 random-posts 共用）。
+ */
+import { t } from "../i18n/index.js";
+interface Props {
+	/** 站点语言（决定月份/星期文案的 locale） */
+	lang?: string;
+	/** 日历下方文章列表条目悬停显示全文 title（§4.41）；默认关 */
+	postTooltip?: boolean;
+	/** 移动端（<768px）隐藏整个 widget（§4.49）；默认否 */
+	hideMobile?: boolean;
+}
+const { lang = "zh-CN", postTooltip = false, hideMobile = false } = Astro.props;
+---
+<section class:list={["side-card", "card", "reveal", "calendar-widget", { "side-hide-m": hideMobile }]}>
+  <!-- §4.47：「日历」标题移除，年月标签即卡片头部（加粗、可点选年月） -->
+  <qy-calendar
+    data-lang={lang}
+    data-api-url="/api/allPostMeta.json"
+    data-label-posts={t('dayPostsCount')}
+    data-label-heat-week={t('heatWeekTip')}
+    data-label-home={t('calendarHome')}
+    data-label-pick={t('calendarPick')}
+    data-post-tooltip={postTooltip ? '1' : '0'}
+  ></qy-calendar>
+</section>
+<script is:inline>
+  if (!customElements.get('qy-calendar')) {
+    customElements.define(
+      'qy-calendar',
+      class extends HTMLElement {
+        connectedCallback() {
+          // 每次 connected 重建月视图：VT 往返后回到当月是期望行为
+          this.render();
+        }
+        getMeta() {
+          if (window.__qyAllPostMetaCache) {
+            return Promise.resolve(window.__qyAllPostMetaCache);
+          }
+          return fetch(this.dataset.apiUrl)
+            .then((r) => r.json())
+            .then((data) => {
+              window.__qyAllPostMetaCache = data;
+              return data;
+            })
+            .catch(() => null);
+        }
+        render() {
+          var self = this;
+          this.getMeta().then(function (meta) {
+            if (!meta) return;
+            // key: YYYY-MM-DD（本地时区） → 当日文章数
+            var byDay = {};
+            meta.forEach(function (p) {
+              var d = new Date(p.published);
+              var key =
+                d.getFullYear() +
+                '-' +
+                String(d.getMonth() + 1).padStart(2, '0') +
+                '-' +
+                String(d.getDate()).padStart(2, '0');
+              byDay[key] = (byDay[key] || 0) + 1;
+            });
+            var locale = self.dataset.lang || 'zh-CN';
+            var postsLabel = self.dataset.labelPosts || '{n}';
+            // 热力图单元悬停模板（§4.43）：{m}=月份短文案、{w}=第几周、{n}=篇数
+            var weekTip = self.dataset.labelHeatWeek || '{m}第{w}周 · {n}';
+            // 「回到本月」按钮与年月标签按钮的 title/aria 文案（§4.47）
+            var homeLabel = self.dataset.labelHome || '';
+            var pickLabel = self.dataset.labelPick || '';
+            var today = new Date();
+            var thisMonth = new Date(today.getFullYear(), today.getMonth(), 1);
+            var cur = new Date(thisMonth);
+            // 年月选择器年份下界（§4.47）：数据最早文章年份，无文章则为当年（须在 today 声明后）
+            var minYear = today.getFullYear();
+            meta.forEach(function (p) {
+              var y = new Date(p.published).getFullYear();
+              if (y < minYear) minYear = y;
+            });
+            var fmtMonth = new Intl.DateTimeFormat(locale, {
+              year: 'numeric',
+              month: 'long',
+            });
+            var fmtWeek = new Intl.DateTimeFormat(locale, { weekday: 'narrow' });
+            // 热力图悬停月份短文案（§4.43）：zh="10月"、en="Oct"
+            var fmtMonthShort = new Intl.DateTimeFormat(locale, { month: 'short' });
+            // 周一起始的星期表头（2024-01-01 恰好是周一）
+            var weekHeads = [];
+            for (var i = 0; i < 7; i++) {
+              weekHeads.push(fmtWeek.format(new Date(2024, 0, 1 + i)));
+            }
+            var tooltip = function (key, n) {
+              return key + ' · ' + postsLabel.replace('{n}', n);
+            };
+            // 与 byDay 一致的 YYYY-MM-DD key（本地时区），列表过滤用
+            var dayKey = function (p) {
+              var d = new Date(p.published);
+              return (
+                d.getFullYear() +
+                '-' +
+                String(d.getMonth() + 1).padStart(2, '0') +
+                '-' +
+                String(d.getDate()).padStart(2, '0')
+              );
+            };
+            var esc = function (s) {
+              return String(s).replace(/[&<>"']/g, function (c) {
+                return { '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;', "'": '&#39;' }[c];
+              });
+            };
+            // 列表条目日期（§4.43）：两位月/日，如 10/08
+            var fmtItemDate = new Intl.DateTimeFormat(locale, { month: '2-digit', day: '2-digit' });
+            // 当前选中的日期 key（null = 未选中，列表显示当月全部）
+            var selKey = null;
+            // 文章列表条目悬停显示全文 title（§4.41），默认关
+            var postTip = self.dataset.postTooltip === '1';
+            // 年月选择器状态（§4.47）：展开态 + 选择器年份（打开时同步为当前浏览年份）
+            var pickOpen = false;
+            var pickYear = today.getFullYear();
+            // 年月选择器（§4.47）：年步进行（minYear~今年，边界置灰）+ 12 月网格（未来月置灰、当前浏览月高亮）
+            var pickerHtml = function () {
+              if (!pickOpen) return '';
+              var cy = cur.getFullYear();
+              var cm = cur.getMonth();
+              var thisYear = today.getFullYear();
+              var html =
+                '<div class="cal-picker" role="group" aria-label="' + esc(pickLabel) + '">' +
+                '<div class="cal-picker-row">' +
+                '<button type="button" class="cal-py" data-dir="-1" aria-label="prev year"' +
+                (pickYear <= minYear ? ' disabled' : '') +
+                '>&#8249;</button>' +
+                '<b class="cal-py-label">' + pickYear + '</b>' +
+                '<button type="button" class="cal-py" data-dir="1" aria-label="next year"' +
+                (pickYear >= thisYear ? ' disabled' : '') +
+                '>&#8250;</button>' +
+                '</div><div class="cal-picker-months">';
+              for (var m = 0; m < 12; m++) {
+                var d = new Date(pickYear, m, 1);
+                var future = d > thisMonth;
+                var on = pickYear === cy && m === cm;
+                html +=
+                  '<button type="button" class="cal-pm' + (on ? ' on' : '') +
+                  '" data-m="' + m + '"' + (future ? ' disabled' : '') + '>' +
+                  fmtMonthShort.format(d) + '</button>';
+              }
+              return html + '</div></div>';
+            };
+            var monthHtml = function () {
+              var y = cur.getFullYear();
+              var m = cur.getMonth();
+              var lead = (new Date(y, m, 1).getDay() + 6) % 7;
+              var days = new Date(y, m + 1, 0).getDate();
+              // 是否当前月（§4.47）：非当月才渲染「回到本月」按钮
+              var isThisMonth = y === thisMonth.getFullYear() && m === thisMonth.getMonth();
+              var html =
+                '<div class="cal-head">' +
+                '<button type="button" class="cal-nav" data-dir="-1" aria-label="prev">&#8249;</button>' +
+                // §4.54 日期与「回到本月」成组：重置按钮紧跟日期 ▾ 之后
+                '<span class="cal-head-c">' +
+                // 年月标签改为可点按钮（§4.47）：点击开合年月选择器
+                '<button type="button" class="cal-month' + (pickOpen ? ' open' : '') +
+                '" aria-expanded="' + pickOpen + '" title="' + esc(pickLabel) + '">' +
+                fmtMonth.format(cur) + '</button>' +
+                (isThisMonth
+                  ? ''
+                  : '<button type="button" class="cal-home" title="' + esc(homeLabel) +
+                    '" aria-label="' + esc(homeLabel) + '">&#8634;</button>') +
+                '</span>' +
+                '<span class="cal-head-r">' +
+                '<button type="button" class="cal-nav" data-dir="1" aria-label="next">&#8250;</button>' +
+                '</span>' +
+                '</div>' +
+                pickerHtml() +
+                '<div class="cal-grid">';
+              for (var i = 0; i < 7; i++) {
+                html += '<span class="cal-week">' + weekHeads[i] + '</span>';
+              }
+              for (var i = 0; i < lead; i++) {
+                html += '<span class="cal-day dim"></span>';
+              }
+              for (var day = 1; day <= days; day++) {
+                var key =
+                  y + '-' + String(m + 1).padStart(2, '0') + '-' + String(day).padStart(2, '0');
+                var n = byDay[key] || 0;
+                var cls = 'cal-day';
+                if (n > 0) cls += ' has-post';
+                if (selKey && key === selKey) cls += ' sel';
+                if (y === today.getFullYear() && m === today.getMonth() && day === today.getDate()) {
+                  cls += ' today';
+                }
+                html +=
+                  '<span class="' + cls + '"' +
+                  (n > 0
+                    ? ' data-key="' + key + '" role="button" tabindex="0" title="' + tooltip(key, n) + '"'
+                    : '') +
+                  '>' + day + '</span>';
+              }
+              return html + '</div>';
+            };
+            // 热力图下方文章列表（§4.40，§4.43 移至热力图下，§4.43 修正去统计标题）：默认当月全部，
+            // 选中日期则只列当日；按时间倒序，左侧标题右侧日期，超宽标题省略号截断
+            var dayListHtml = function () {
+              var ym = cur.getFullYear() + '-' + String(cur.getMonth() + 1).padStart(2, '0');
+              var list = meta.filter(function (p) {
+                if (selKey) return dayKey(p) === selKey;
+                return dayKey(p).slice(0, 7) === ym;
+              });
+              // 时间倒序（filter 返回新数组，原地 sort 安全）
+              list.sort(function (a, b) {
+                return new Date(b.published) - new Date(a.published);
+              });
+              var html = '<div class="cal-list">';
+              if (list.length) {
+                html += '<div class="cal-list-items">';
+                list.forEach(function (p) {
+                  var d = new Date(p.published);
+                  html +=
+                    '<a class="cal-post" href="/posts/' + p.id + '/"' +
+                    (postTip ? ' title="' + esc(p.title) + '"' : '') +
+                    '><span class="cal-post-title">' + esc(p.title) + '</span>' +
+                    '<time class="cal-post-date" datetime="' + dayKey(p) + '">' +
+                    fmtItemDate.format(d) + '</time></a>';
+                });
+                html += '</div>';
+              }
+              return html + '</div>';
+            };
+            // 今年 1-12 月热力图（§4.44，原近 12 个月）：还原 orchid-blog 原版形态——
+            // 月份标签独立一行（grid 12 列），下方 48 个正方形小格子平铺 12×4；
+            // 透明度 5 档 0 / .45 / .65 / .85 / 1，格子悬停提示月份第几周 · 几篇、点击跳转对应月份；
+            // 未来月份格子不渲染为按钮（月视图不允许翻到未来），仅作占位展示
+            var heatHtml = function () {
+              var y = today.getFullYear();
+              var labels = '';
+              var cells = '';
+              for (var m = 0; m < 12; m++) {
+                var d = new Date(y, m, 1);
+                var days = new Date(y, m + 1, 0).getDate();
+                var buckets = [0, 0, 0, 0];
+                for (var day = 1; day <= days; day++) {
+                  var w = Math.min(Math.floor((day - 1) / 7), 3);
+                  var key =
+                    y + '-' + String(m + 1).padStart(2, '0') + '-' + String(day).padStart(2, '0');
+                  buckets[w] += byDay[key] || 0;
+                }
+                var mShort = fmtMonthShort.format(d);
+                var future = d > thisMonth;
+                labels += '<b class="cal-heat-label">' + (m + 1) + '</b>';
+                for (var b = 0; b < 4; b++) {
+                  var n = buckets[b];
+                  var o = n === 0 ? 0 : n < 3 ? 0.45 : n < 6 ? 0.65 : n < 10 ? 0.85 : 1;
+                  cells +=
+                    '<i class="cal-heat-cell" data-y="' +
+                    y +
+                    '" data-m="' +
+                    m +
+                    '" style="--o:' +
+                    o +
+                    '"' +
+                    (future ? '' : ' role="button" tabindex="0"') +
+                    ' title="' +
+                    esc(weekTip.replace('{m}', mShort).replace('{w}', b + 1).replace('{n}', n)) +
+                    '"></i>';
+                }
+              }
+              return (
+                '<div class="cal-heat-labels">' +
+                labels +
+                '</div><div class="cal-heat-grid">' +
+                cells +
+                '</div>'
+              );
+            };
+            var build = function () {
+              // 渲染顺序（§4.43）：月视图 → 热力图 → 文章列表
+              self.innerHTML =
+                monthHtml() + '<div class="cal-heat">' + heatHtml() + '</div>' + dayListHtml();
+              self.querySelectorAll('.cal-nav[data-dir]').forEach(function (btn) {
+                btn.addEventListener('click', function () {
+                  var dir = parseInt(btn.dataset.dir, 10);
+                  var next = new Date(cur.getFullYear(), cur.getMonth() + dir, 1);
+                  // 不允许翻到未来月份
+                  if (next > thisMonth) return;
+                  cur = next;
+                  selKey = null; // 翻月取消日期选中，列表回到当月全部
+                  build();
+                });
+              });
+              // 年月标签开合选择器（§4.47）：打开时同步选择器年份为当前浏览年份
+              var monthBtn = self.querySelector('.cal-month');
+              if (monthBtn) {
+                monthBtn.addEventListener('click', function () {
+                  pickOpen = !pickOpen;
+                  if (pickOpen) pickYear = cur.getFullYear();
+                  build();
+                });
+              }
+              // 回到本月（§4.47）：仅非当月渲染；同时收起选择器、取消日期选中
+              var homeBtn = self.querySelector('.cal-home');
+              if (homeBtn) {
+                homeBtn.addEventListener('click', function () {
+                  cur = new Date(thisMonth.getFullYear(), thisMonth.getMonth(), 1);
+                  selKey = null;
+                  pickOpen = false;
+                  build();
+                });
+              }
+              // 选择器年步进（§4.47）：边界按钮已置灰，无需额外钳制
+              self.querySelectorAll('.cal-py').forEach(function (btn) {
+                btn.addEventListener('click', function () {
+                  pickYear += parseInt(btn.dataset.dir, 10);
+                  build();
+                });
+              });
+              // 选择器月份点击（§4.47）：跳月并收起选择器
+              self.querySelectorAll('.cal-pm:not([disabled])').forEach(function (btn) {
+                btn.addEventListener('click', function () {
+                  cur = new Date(pickYear, parseInt(btn.dataset.m, 10), 1);
+                  selKey = null;
+                  pickOpen = false;
+                  build();
+                });
+              });
+              // 点热力图格子（§4.43 整列点击，§4.44 还原原版改格子级点击）：跳转对应月份，列表跟随；
+              // 未来月份格子无 role 不绑（月视图不允许翻到未来）；Enter/Space 同点按
+              self.querySelectorAll('.cal-heat-cell[role="button"]').forEach(function (el) {
+                var jump = function () {
+                  cur = new Date(+el.dataset.y, +el.dataset.m, 1);
+                  selKey = null;
+                  build();
+                };
+                el.addEventListener('click', jump);
+                el.addEventListener('keydown', function (e) {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    jump();
+                  }
+                });
+              });
+              // 点日期（§4.40）：toggle 选中，列表在当日/当月间切换；Enter/Space 同点按
+              self.querySelectorAll('.cal-day.has-post').forEach(function (el) {
+                var toggle = function () {
+                  selKey = selKey === el.dataset.key ? null : el.dataset.key;
+                  build();
+                };
+                el.addEventListener('click', toggle);
+                el.addEventListener('keydown', function (e) {
+                  if (e.key === 'Enter' || e.key === ' ') {
+                    e.preventDefault();
+                    toggle();
+                  }
+                });
+              });
+            };
+            build();
+          });
+        }
+      },
+    );
+  }
+</script>

package/src/components/CategoryBar.astro ADDED Viewed

@@ -0,0 +1,74 @@
+---
+/**
+ * 分类导航栏（§4.15，参考 orchid-blog CategoryBar；§4.21 改版）：
+ * 仅首页渲染（index.astro post-list 顶部，与置顶/近期文章同列宽），
+ * 结构 = 首页 pill + 归档 pill + 分隔线 + 分类滚动区（pill 带计数，溢出横向滚动）
+ * + 分隔线 + 「更多」固定链接跳 /categories/ 分类总览页（始终显示）。
+ * 组件内自行聚合分类（仅取分类名与数量，不做 hydrate）；
+ * 激活态在构建期由 Astro.url.pathname 判断（SSG 每页 pathname 可用），零客户端 JS。
+ * 溢出处理（§4.21，替代 §4.18 折叠下拉）：溢出时整条横向滚动、右缘渐隐提示（app.ts
+ * 检测 scrollWidth 溢出后给 .category-bar 加 .is-scrollable），全量分类见「更多」页。
+ */
+import { getCollection } from "astro:content";
+import config from "virtual:theme/config";
+import { t } from "../i18n/index.js";
+import { collectCategories } from "../utils.js";
+const posts = await getCollection("posts", ({ data }) =>
+	import.meta.env.PROD ? !data.draft : true,
+);
+const cats = [...collectCategories(posts).entries()];
+// 统一去尾斜杠后比较（dev 与 prerender 的 pathname 尾斜杠行为一致化）
+const path = Astro.url.pathname.replace(/\/+$/, "");
+const isHome = path === "";
+const isArchive = path === "/archive";
+const isCategory = (name: string) =>
+	path === `/categories/${encodeURIComponent(name)}`;
+---
+{
+	config.categoryBar.enabled && (
+		<nav class="category-bar card reveal" aria-label={t("categoryNav")}>
+			<a class:list={["category-pill", { "is-active": isHome }]} href="/">
+				{t("home")}
+			</a>
+			<a
+				class:list={["category-pill", { "is-active": isArchive }]}
+				href="/archive"
+			>
+				{t("archive")}
+			</a>
+			<span class="bar-divider" aria-hidden="true" />
+			<div class="bar-scroll">
+				{cats.map(([name, list]) => (
+					<a
+						class:list={["category-pill", { "is-active": isCategory(name) }]}
+						href={`/categories/${encodeURIComponent(name)}/`}
+					>
+						{name}
+						<span class="pill-count">{list.length}</span>
+					</a>
+				))}
+			</div>
+			{/* 「更多」固定跳分类总览页（§4.21），始终显示 */}
+			<span class="bar-divider" aria-hidden="true" />
+			<a class="category-pill bar-more" href="/categories/">
+				{t("more")}
+				<svg
+					class="bar-more-arrow"
+					viewBox="0 0 24 24"
+					fill="none"
+					stroke="currentColor"
+					stroke-width="1.75"
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					aria-hidden="true"
+				>
+					<path d="M5 12h14" />
+					<path d="m12 5 7 7-7 7" />
+				</svg>
+			</a>
+		</nav>
+	)
+}