feat: init Astro blog with wikilinks, KaTeX and local search

- Astro 5 static blog, zero runtime JS - Obsidian wikilink remark plugin (slug matches Astro content collection) - KaTeX math rendering, local search, TOC, archives, tags - 5 posts on math/physics/ML topics - deploy scripts for nginx + certbot + rsync
2026-08-14 00:19:33 +08:00
commit 12dd13a76f
39 changed files with 19371 additions and 0 deletions
@@ -0,0 +1,123 @@
+---
+import BaseLayout from '../layouts/BaseLayout.astro';
+import { getPublishedPosts, groupByYear, formatDateShort } from '../lib/utils';
+
+const all = await getPublishedPosts();
+const years = groupByYear(all);
+const total = all.length;
+---
+
+<BaseLayout title="归档" description="按时间线浏览所有文章">
+  <section class="container" style="padding-top: calc(var(--nav-h) + 48px);">
+    <header class="page-head reveal">
+      <h1 class="page-title">归档</h1>
+      <p class="page-sub">共 {total} 篇 · 时光轴回顾</p>
+    </header>
+
+    <div class="timeline">
+      {years.map(({ year, posts }) => (
+        <section class="year-group reveal">
+          <div class="year-node glass">
+            <span class="year-num">{year}</span>
+            <span class="year-count">{posts.length} 篇</span>
+          </div>
+          <div class="year-items">
+            {posts.map((p) => (
+              <a href={`/posts/${p.id}`} class="tl-item">
+                <span class="tl-date">{formatDateShort(p.data.date)}</span>
+                <span class="tl-dot"></span>
+                <span class="tl-title">{p.data.title}</span>
+                {p.data.tags[0] && <span class="chip">{p.data.tags[0]}</span>}
+              </a>
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  </section>
+</BaseLayout>
+
+<style>
+  .page-head { margin-bottom: 32px; }
+  .page-title { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 1rem + 4vw, 3rem); letter-spacing: -0.03em; color: var(--ink); }
+  .page-sub { color: var(--ink-soft); margin-top: 8px; }
+
+  .timeline { position: relative; padding-left: 8px; }
+  .timeline::before {
+    content: '';
+    position: absolute;
+    left: 88px;
+    top: 0;
+    bottom: 0;
+    width: 2px;
+    background: linear-gradient(180deg, var(--blue-300), var(--cyan-300), transparent);
+  }
+  .year-group { margin-bottom: clamp(28px, 4vw, 44px); }
+  .year-node {
+    display: inline-flex;
+    align-items: center;
+    gap: 10px;
+    border-radius: 999px;
+    padding: 6px 18px;
+    margin-bottom: 18px;
+    margin-left: 56px;
+    position: relative;
+    z-index: 1;
+  }
+  .year-node::before {
+    content: '';
+    position: absolute;
+    left: -28px;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 14px; height: 14px;
+    border-radius: 50%;
+    background: var(--blue-500);
+    box-shadow: 0 0 0 4px rgba(132, 194, 255, 0.4), 0 0 14px var(--blue-400);
+  }
+  .year-num { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--blue-600); }
+  .year-count { color: var(--ink-faint); font-size: 0.82rem; }
+
+  .year-items { display: flex; flex-direction: column; gap: 4px; padding-left: 56px; }
+  .tl-item {
+    display: flex;
+    align-items: center;
+    gap: 14px;
+    padding: 10px 14px;
+    border-radius: 12px;
+    transition: background 0.2s, transform 0.2s;
+    position: relative;
+  }
+  .tl-item::before {
+    content: '';
+    position: absolute;
+    left: -24px;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    width: 8px; height: 8px;
+    border-radius: 50%;
+    background: var(--blue-300);
+    border: 2px solid #fff;
+    box-shadow: 0 0 0 1px rgba(79, 163, 255, 0.3);
+    transition: all 0.2s;
+  }
+  .tl-item:hover { background: rgba(132, 194, 255, 0.14); transform: translateX(4px); }
+  .tl-item:hover::before { background: var(--blue-500); box-shadow: 0 0 0 1px var(--blue-400), 0 0 10px var(--blue-400); }
+  .tl-date { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-faint); width: 84px; flex-shrink: 0; }
+  .tl-dot { display: none; }
+  .tl-title { color: var(--ink); font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .tl-item:hover .tl-title { color: var(--blue-600); }
+  .tl-item .chip { margin-left: auto; }
+
+  @media (max-width: 640px) {
+    .timeline::before { left: 20px; }
+    .year-node { margin-left: 0; }
+    .year-node::before { left: -16px; }
+    .year-items { padding-left: 0; }
+    .tl-item::before { left: -16px; }
+    .tl-item { flex-wrap: wrap; gap: 8px; }
+    .tl-date { width: auto; }
+    .tl-item .chip { margin-left: 0; }
+    .tl-title { white-space: normal; }
+  }
+</style>