往年今日

src/components/OnThisDay.astro

@@ -0,0 +1,133 @@
+<section class="on-this-day-band" aria-labelledby="on-this-day-title">
+  <div class="section-inner on-this-day-shell" data-on-this-day>
+    <div class="memory-date-card" aria-hidden="true">
+      <span data-memory-month>今日</span>
+      <strong data-memory-day>--</strong>
+      <small>北京时间</small>
+    </div>
+
+    <div class="on-this-day-content">
+      <div class="on-this-day-heading">
+        <div>
+          <p class="eyebrow">ON THIS DAY · 那年今日</p>
+          <h2 id="on-this-day-title">今天，记忆翻到了这一页</h2>
+        </div>
+        <p data-memory-summary aria-live="polite">正在寻找同月同日的班级记忆……</p>
+      </div>
+
+      <div class="memory-grid" data-memory-grid aria-live="polite" aria-busy="true"></div>
+
+      <div class="memory-empty" data-memory-empty hidden>
+        <span class="memory-empty-mark" aria-hidden="true">✦</span>
+        <div>
+          <h3>这一天还没有被写进纪念册</h3>
+          <p>也许只是故事还没整理好。先从其他日期里随手翻一页吧。</p>
+          <nav class="memory-empty-links" aria-label="浏览其他班级记忆">
+            <a href="/timeline/">班级时间线</a>
+            <a href="/gallery/">照片墙</a>
+            <a href="/articles/">文章归档</a>
+          </nav>
+        </div>
+      </div>
+
+      <noscript>
+        <p class="memory-noscript">启用 JavaScript 后，这里会根据北京时间自动展示当天的班级记忆。</p>
+      </noscript>
+    </div>
+  </div>
+</section>
+
+<script>
+  import { onThisDayMemories } from "../data/on-this-day";
+
+  const root = document.querySelector<HTMLElement>("[data-on-this-day]");
+
+  if (root) {
+    const dateParts = new Intl.DateTimeFormat("zh-CN", {
+      timeZone: "Asia/Shanghai",
+      year: "numeric",
+      month: "numeric",
+      day: "numeric"
+    }).formatToParts(new Date());
+    const dateValues = Object.fromEntries(dateParts.map((part) => [part.type, part.value]));
+    const month = Number(dateValues.month);
+    const day = Number(dateValues.day);
+    const currentYear = Number(dateValues.year);
+    const monthDay = `${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+    const matches = onThisDayMemories.filter((memory) => memory.monthDay === monthDay);
+    const visibleMatches = matches.slice(0, 6);
+
+    const monthLabel = root.querySelector<HTMLElement>("[data-memory-month]");
+    const dayLabel = root.querySelector<HTMLElement>("[data-memory-day]");
+    const summary = root.querySelector<HTMLElement>("[data-memory-summary]");
+    const grid = root.querySelector<HTMLElement>("[data-memory-grid]");
+    const empty = root.querySelector<HTMLElement>("[data-memory-empty]");
+
+    if (monthLabel) monthLabel.textContent = `${month}月`;
+    if (dayLabel) dayLabel.textContent = String(day).padStart(2, "0");
+
+    if (summary) {
+      summary.textContent = matches.length
+        ? `${month}月${day}日，找到了 ${matches.length} 条跨越不同年份的班级记忆。`
+        : `${month}月${day}日，今天暂时没有同月同日的记录。`;
+    }
+
+    if (grid) {
+      const fragment = document.createDocumentFragment();
+
+      visibleMatches.forEach((memory) => {
+        const card = document.createElement("a");
+        card.className = `memory-card memory-card-${memory.kind}`;
+        card.href = memory.href;
+        card.setAttribute("aria-label", `${memory.year}年${memory.kindLabel}：${memory.title}`);
+        if (memory.external) {
+          card.target = "_blank";
+          card.rel = "noreferrer";
+        }
+
+        if (memory.image) {
+          const image = document.createElement("img");
+          image.src = memory.image;
+          image.alt = "";
+          image.loading = "lazy";
+          card.append(image);
+        } else {
+          const visual = document.createElement("span");
+          visual.className = "memory-card-visual";
+          visual.setAttribute("aria-hidden", "true");
+          visual.textContent = "记";
+          card.append(visual);
+        }
+
+        const copy = document.createElement("span");
+        copy.className = "memory-card-copy";
+
+        const meta = document.createElement("span");
+        meta.className = "memory-card-meta";
+        const yearsAgo = currentYear - memory.year;
+        meta.textContent = `${memory.year}年 · ${yearsAgo > 0 ? `${yearsAgo}年前 · ` : ""}${memory.kindLabel}`;
+
+        const title = document.createElement("strong");
+        title.textContent = memory.title;
+
+        const text = document.createElement("span");
+        text.className = "memory-card-text";
+        text.textContent = memory.text;
+
+        const action = document.createElement("span");
+        action.className = "memory-card-action";
+        action.textContent = memory.external ? "阅读旧文章 ↗" : "翻开这段记忆 →";
+
+        copy.append(meta, title, text, action);
+        card.append(copy);
+        fragment.append(card);
+      });
+
+      grid.replaceChildren(fragment);
+      grid.hidden = matches.length === 0;
+      grid.setAttribute("aria-busy", "false");
+    }
+
+    if (empty) empty.hidden = matches.length > 0;
+  }
+</script>

src/data/on-this-day.ts

@@ -0,0 +1,103 @@
+import { articles } from "./articles";
+import { photoTopics } from "./photos";
+import { timeline } from "./timeline";
+
+export type MemoryKind = "event" | "photo" | "article";
+
+export interface OnThisDayMemory {
+  id: string;
+  date: string;
+  monthDay: string;
+  year: number;
+  kind: MemoryKind;
+  kindLabel: string;
+  title: string;
+  text: string;
+  href: string;
+  image?: string;
+  external?: boolean;
+}
+
+const kindLabels: Record<MemoryKind, string> = {
+  event: "班级事件",
+  photo: "旧照片",
+  article: "旧文章"
+};
+
+const toIsoDate = (year: number, month: number, day: number) =>
+  `${year}-${String(month).padStart(2, "0")}-${String(day).padStart(2, "0")}`;
+
+const getTimelineDates = (label: string) => {
+  const match = label.match(/(\d{4})年(\d{1,2})月([^日]+)日/);
+  if (!match) return [];
+
+  const [, yearText, monthText, dayText] = match;
+  return dayText
+    .split(/[、,，]/)
+    .map((value) => Number(value.match(/\d+/)?.[0]))
+    .filter((value) => Number.isInteger(value) && value >= 1 && value <= 31)
+    .map((day) => toIsoDate(Number(yearText), Number(monthText), day));
+};
+
+const createMemory = (
+  memory: Omit<OnThisDayMemory, "monthDay" | "year" | "kindLabel">
+): OnThisDayMemory => ({
+  ...memory,
+  monthDay: memory.date.slice(5),
+  year: Number(memory.date.slice(0, 4)),
+  kindLabel: kindLabels[memory.kind]
+});
+
+const eventMemories = timeline.flatMap((moment, momentIndex) =>
+  getTimelineDates(moment.date).map((date) =>
+    createMemory({
+      id: `event-${momentIndex}-${date}`,
+      date,
+      kind: "event",
+      title: moment.title,
+      text: moment.text,
+      href: "href" in moment && typeof moment.href === "string" ? moment.href : "/timeline/"
+    })
+  )
+);
+
+const photoMemories = photoTopics.flatMap((topic) =>
+  topic.photos.flatMap((photo, photoIndex) =>
+    photo.date
+      ? [
+          createMemory({
+            id: `photo-${topic.slug}-${photoIndex}-${photo.date}`,
+            date: photo.date,
+            kind: "photo",
+            title: photo.title,
+            text: photo.caption,
+            href: `/gallery/${topic.slug}/`,
+            image: photo.image
+          })
+        ]
+      : []
+  )
+);
+
+const articleMemories = articles.map((article, articleIndex) =>
+  createMemory({
+    id: `article-${articleIndex}-${article.date}`,
+    date: article.date,
+    kind: "article",
+    title: article.title,
+    text: article.excerpt,
+    href: article.sourceUrl,
+    image: article.cover,
+    external: true
+  })
+);
+
+const kindOrder: Record<MemoryKind, number> = {
+  event: 0,
+  photo: 1,
+  article: 2
+};
+
+export const onThisDayMemories = [...eventMemories, ...photoMemories, ...articleMemories].sort(
+  (left, right) => right.year - left.year || kindOrder[left.kind] - kindOrder[right.kind]
+);

src/data/photo-topics/events.ts

@@ -10,7 +10,8 @@ export const eventsTopic: PhotoTopic = {
     {
       title: "高一下学期表彰大会",
       caption: "排练时觉得麻烦，回头看全是可爱。",
-      image: "https://pic.biss.click/image/50e233d6-dd88-4a10-bb2d-a42ace27cdec.jpg"
+      image: "https://pic.biss.click/image/50e233d6-dd88-4a10-bb2d-a42ace27cdec.jpg",
+      date: "2022-07-08"
     },
     {
       title: "集体出游",
@@ -20,13 +21,17 @@ export const eventsTopic: PhotoTopic = {
     {
       title: "百日誓师大会",
       caption: "高三的第一次全体活动，大家都很随意地在听讲，虽然最后还是没能坚持到最后。",
-      image: "https://pic.biss.click/image/45bfbe79-bd7b-40f3-9670-1b34cc0957b2.png"
+      image: "https://pic.biss.click/image/45bfbe79-bd7b-40f3-9670-1b34cc0957b2.png",
+      date: "2024-02-28"
     },
     wechatPhoto(117, "考前舞台", "紧张的日子里，也需要一次大声唱出来。"),
     wechatPhoto(121, "看台上的我们", "一片红色校服，聚成高三最后的集体活动。"),
     wechatPhoto(129, "操场热身", "阳光很好，口号和动作都比平时更有力量。"),
     wechatPhoto(132, "坐在一起", "台上发生什么已经模糊，身边的人还记得。"),
-    wechatPhoto(176, "元旦歌咏", "整齐站上舞台，是青春里难得的郑重。"),
+    {
+      ...wechatPhoto(176, "元旦歌咏", "整齐站上舞台，是青春里难得的郑重。"),
+      date: "2021-12-31"
+    },
     wechatPhoto(178, "领奖时刻", "证书会褪色，但被认可的那一刻不会。"),
     wechatPhoto(180, "操场挑战", "跨过栏架，也跨过一个个觉得做不到的瞬间。"),
     wechatPhoto(181, "百日倒计时", "数字揭开的那一刻，高考忽然变得很近。"),