chore: reorganize project into monorepo

frontend/src/pages/timeline/index.astro

@@ -0,0 +1,172 @@
+---
+import Layout from '../../layouts/BaseLayout.astro';
+import TerminalWindow from '../../components/ui/TerminalWindow.astro';
+import CommandPrompt from '../../components/ui/CommandPrompt.astro';
+import FilterPill from '../../components/ui/FilterPill.astro';
+import { api, DEFAULT_SITE_SETTINGS } from '../../lib/api/client';
+import type { Post } from '../../lib/types';
+
+let siteSettings = DEFAULT_SITE_SETTINGS;
+let posts: Post[] = [];
+
+try {
+  [siteSettings, posts] = await Promise.all([
+    api.getSiteSettings(),
+    api.getPosts(),
+  ]);
+} catch (error) {
+  console.error('Failed to load timeline:', error);
+}
+
+const groupedByYear = posts.reduce((acc: Record<number, Post[]>, post) => {
+  const year = new Date(post.date).getFullYear();
+  if (!acc[year]) acc[year] = [];
+  acc[year].push(post);
+  return acc;
+}, {});
+
+const years = Object.keys(groupedByYear).sort((a, b) => Number(b) - Number(a));
+const latestYear = years[0] || 'all';
+---
+
+<Layout title={`时间轴 | ${siteSettings.siteShortName}`} description={`记录 ${siteSettings.ownerName} 的技术成长与生活点滴`}>
+  <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <TerminalWindow title="~/timeline" class="w-full">
+      <div class="px-4 py-4 space-y-6">
+        <div>
+          <CommandPrompt command="cat timeline.log" path="~" />
+          <div class="terminal-panel ml-4 mt-4">
+            <div class="terminal-kicker">activity trace</div>
+            <div class="terminal-section-title mt-4">
+              <span class="terminal-section-icon">
+                <i class="fas fa-stream"></i>
+              </span>
+              <div>
+                <h1 class="text-2xl font-bold text-[var(--title-color)]">时间轴</h1>
+                <p class="mt-2 text-sm leading-6 text-[var(--text-secondary)]">
+                  共 {posts.length} 篇内容 · 记录 {siteSettings.ownerName} 的技术成长与生活点滴
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div>
+          <CommandPrompt command="filter --by-year" path="~/timeline" />
+          <div class="ml-4 mt-4 flex flex-wrap gap-2">
+            <FilterPill
+              class="timeline-filter"
+              tone="neutral"
+              data-year="all"
+              active={false}
+            >
+              全部
+            </FilterPill>
+            {years.map(year => (
+              <FilterPill
+                class="timeline-filter"
+                tone="blue"
+                data-year={year}
+                active={year === latestYear}
+              >
+                <i class="fas fa-calendar-alt"></i>
+                {year}
+                <span class="ml-1 text-[var(--text-tertiary)]">[{groupedByYear[Number(year)].length}]</span>
+              </FilterPill>
+            ))}
+          </div>
+        </div>
+
+        <div>
+          <CommandPrompt command="git log --oneline --all" path="~/timeline" />
+          <div class="ml-4 mt-2 space-y-8">
+            {years.map(year => (
+              <div class="timeline-year-group relative" data-year={year}>
+                <div class="sticky top-20 z-10 mb-4">
+                  <div class="inline-flex items-center gap-2 rounded-xl border border-[var(--border-color)] bg-[var(--terminal-bg)] px-4 py-2 font-mono text-sm">
+                    <i class="fas fa-calendar-alt text-[var(--primary)]"></i>
+                    <span class="font-bold text-[var(--text)]">{year}</span>
+                  </div>
+                </div>
+
+                <div class="relative pl-8 space-y-4">
+                  <div class="absolute left-3 top-0 bottom-0 w-px" style="background: linear-gradient(180deg, color-mix(in oklab, var(--primary) 60%, transparent), var(--border-color), transparent);"></div>
+
+                  {groupedByYear[Number(year)].map(post => (
+                    <div class="relative group">
+                      <div class="absolute -left-[1.625rem] top-4 h-3.5 w-3.5 rounded-full bg-[var(--bg)] border-2 border-[var(--primary)] z-10 group-hover:bg-[var(--primary)] group-hover:scale-125 transition-all"></div>
+
+                      <a
+                        href={`/articles/${post.slug}`}
+                        class="terminal-panel group flex items-start gap-4 p-4 hover:border-[var(--primary)] hover:translate-x-2 transition-all"
+                      >
+                        <div class="terminal-panel-muted shrink-0 min-w-[72px] text-center py-3">
+                          <div class="text-[11px] uppercase tracking-[0.2em] text-[var(--text-tertiary)]">
+                            {new Date(post.date).toLocaleDateString('zh-CN', { month: 'short' })}
+                          </div>
+                          <div class="mt-1 text-2xl font-bold text-[var(--primary)]">
+                            {new Date(post.date).getDate()}
+                          </div>
+                        </div>
+
+                        <div class="flex-1 min-w-0">
+                          <div class="flex flex-wrap items-center gap-2 mb-2">
+                            <span
+                              class="w-2 h-2 rounded-full"
+                              style={`background-color: ${post.type === 'article' ? 'var(--primary)' : 'var(--secondary)'}`}
+                            ></span>
+                            <h3 class="font-bold text-[var(--title-color)] group-hover:text-[var(--primary)] transition-colors truncate text-lg">
+                              {post.title}
+                            </h3>
+                          </div>
+                          <p class="text-sm text-[var(--text-secondary)] line-clamp-2 leading-6">{post.description}</p>
+                          <div class="flex items-center gap-2 mt-2 flex-wrap">
+                            <span class="terminal-chip text-xs py-1 px-2.5">
+                              {post.category}
+                            </span>
+                            <span class="terminal-chip text-xs py-1 px-2.5">
+                              {post.readTime}
+                            </span>
+                          </div>
+                        </div>
+                      </a>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+
+        <div class="pt-4 border-t border-[var(--border-color)]">
+          <a href="/" class="inline-flex items-center gap-2 text-[var(--text-secondary)] hover:text-[var(--primary)] transition-colors">
+            <i class="fas fa-chevron-left"></i>
+            <span class="font-mono">cd ~</span>
+          </a>
+        </div>
+      </div>
+    </TerminalWindow>
+  </div>
+</Layout>
+
+<script>
+  const filterButtons = document.querySelectorAll('.timeline-filter');
+  const yearGroups = document.querySelectorAll('.timeline-year-group');
+
+  filterButtons.forEach(button => {
+    button.addEventListener('click', () => {
+      const year = button.getAttribute('data-year');
+
+      filterButtons.forEach(item => {
+        item.classList.remove('is-active');
+      });
+
+      button.classList.add('is-active');
+
+      yearGroups.forEach(group => {
+        const matches = year === 'all' || group.getAttribute('data-year') === year;
+        group.classList.toggle('hidden', !matches);
+      });
+    });
+  });
+</script>