@mintfolio/theme-verdant 0.2.0

package/pages/archive.astro

@@ -0,0 +1,384 @@
+---
+/** Verdant archive keeps filter state in the Core-owned query-string URLs. */
+import PostCard from '../components/blog/PostCard.astro';
+import Base from '../layouts/Base.astro';
+import type { PageProps, ListPageData } from '@mintfolio/theme-api/astro';
+import type { VerdantSettings } from '../settings';
+
+interface Props extends PageProps<VerdantSettings, ListPageData> {}
+const { theme, page } = Astro.props;
+const posts = page.posts;
+const BLOG_PAGE_SIZE = theme.settings.archivePageSize;
+const [allTags, allCategories] = await Promise.all([theme.taxonomy.tags(), theme.taxonomy.categories()]);
+---
+
+<Base theme={theme} page={page}>
+  <section class="blog-page">
+    <div class="container">
+      <nav class="page-nav">
+        <a href={theme.urls.home()} class="back-btn">
+          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="18" height="18">
+            <path d="M19 12H5M12 19l-7-7 7-7"/>
+          </svg>
+          返回首页
+        </a>
+      </nav>
+
+      <header class="page-header">
+        <div>
+          <p class="page-eyebrow">NOTES & IDEAS</p>
+          <h1 class="page-title">全部文章<span aria-hidden="true">.</span></h1>
+          <p class="page-subtitle">把探索写下来，让灵感有迹可循。</p>
+        </div>
+        <div class="archive-count"><span aria-hidden="true">✳</span><strong>{posts.length}</strong><span>篇文章，持续积累中</span></div>
+      </header>
+
+      <div class="controls">
+        <div class="search-wrapper">
+          <svg class="search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <circle cx="11" cy="11" r="8"/>
+            <path d="M21 21l-4.35-4.35"/>
+          </svg>
+          <input type="search" id="search-input" class="search-input" placeholder="搜索文章..." aria-label="搜索文章" />
+        </div>
+        <div class="controls-right">
+          <div class="category-filter" id="category-filter" role="radiogroup" aria-label="按分类筛选">
+            <button class="category-btn active" role="radio" aria-checked="true" data-category="">全部分类</button>
+            {allCategories.map((category) => (
+              <button class="category-btn" role="radio" aria-checked="false" data-category={category.label}>{category.label}</button>
+            ))}
+          </div>
+          <div class="tags-filter-block" data-max-rows="3">
+            <div class="tags-filter" id="tags-filter" role="radiogroup" aria-label="按标签筛选">
+              <button class="tag-btn active" role="radio" aria-checked="true" data-tag="">全部</button>
+              {allTags.map(tag => (
+                <button class="tag-btn" role="radio" aria-checked="false" data-tag={tag.label}>{tag.label}</button>
+              ))}
+            </div>
+            <button class="tags-filter-toggle" id="blog-tags-filter-toggle" type="button" hidden aria-expanded="false">
+              展开更多
+            </button>
+          </div>
+        </div>
+      </div>
+
+      <div id="posts-list" class="posts-list" data-page-size={BLOG_PAGE_SIZE}>
+        {posts.map((post, index) => (
+          <PostCard post={post} index={index} pageSize={BLOG_PAGE_SIZE} variant="blog" />
+        ))}
+      </div>
+
+      <p id="no-results" class="no-results" style="display: none;">没有找到匹配的文章</p>
+
+      <div class="load-more-wrap" id="load-more-wrap">
+        <button class="load-more-btn" id="load-more-btn">加载更多文章</button>
+      </div>
+    </div>
+  </section>
+</Base>
+
+<style>
+  .blog-page {
+    min-height: 100vh;
+    padding: 2rem 1.5rem 5rem;
+    background: radial-gradient(ellipse at 100% 0, var(--color-play-soft), transparent 600px), var(--color-bg);
+  }
+
+  .container {
+    max-width: var(--max-width);
+    margin: 0 auto;
+  }
+
+  .page-nav {
+    margin-bottom: 2rem;
+  }
+
+  .back-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--color-text-muted);
+    text-decoration: none;
+    font-size: 0.875rem;
+    transition: all var(--transition-fast);
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--color-border);
+    background: var(--color-surface);
+  }
+
+  .back-btn:hover {
+    color: var(--color-secondary);
+    border-color: var(--color-secondary);
+  }
+
+  .page-header {
+    margin-bottom: 2.5rem;
+    text-align: left;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 2rem;
+    padding: 2rem 2.25rem;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-offset);
+  }
+
+  .page-title {
+    font-size: clamp(2rem, 5vw, 3rem);
+    font-weight: 700;
+    color: var(--color-text-headline);
+    margin-bottom: 0.5rem;
+    font-family: var(--font-family);
+    letter-spacing: -.04em;
+  }
+
+  .page-subtitle {
+    font-size: 1rem;
+    color: var(--color-text-muted);
+  }
+
+  .controls {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 2rem;
+    padding: 1.25rem;
+    background: var(--color-surface);
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-lg);
+    align-items: flex-start;
+  }
+
+  .controls-right {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.75rem;
+    width: 100%;
+  }
+
+  .category-filter {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .category-btn {
+    padding: 0.35rem 0.75rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    background: var(--color-bg-alt);
+    color: var(--color-text-muted);
+    font-size: 0.78rem;
+    cursor: pointer;
+    transition: all var(--transition-fast);
+  }
+
+  .category-btn:hover {
+    border-color: var(--color-secondary);
+    color: var(--color-text);
+  }
+
+  .category-btn.active {
+    background: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-on-primary);
+  }
+
+  .category-btn.hidden-by-filter,
+  .tag-btn.hidden-by-filter {
+    display: none;
+  }
+
+  @media (min-width: 600px) {
+    .controls {
+      flex-direction: row;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
+  .search-wrapper {
+    position: relative;
+    width: 100%;
+    max-width: 300px;
+  }
+
+  .search-icon {
+    position: absolute;
+    left: 0.875rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 16px;
+    height: 16px;
+    color: var(--color-text-muted);
+    pointer-events: none;
+  }
+
+  .search-input {
+    width: 100%;
+    padding: 0.625rem 1rem 0.625rem 2.5rem;
+    border: 2px solid var(--color-border);
+    border-radius: var(--radius-md);
+    background: var(--color-surface);
+    color: var(--color-text);
+    font-size: 0.875rem;
+    transition: all var(--transition-base);
+  }
+
+  .search-input:focus {
+    outline: none;
+    border-color: var(--color-primary);
+    box-shadow: 0 0 0 3px var(--color-tag-bg);
+  }
+
+  .tags-filter-block {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.6rem;
+  }
+
+  .tags-filter {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+    width: 100%;
+    max-height: var(--expanded-height, none);
+    overflow: hidden;
+    transition: max-height var(--transition-base);
+  }
+
+  .tags-filter.is-collapsed {
+    max-height: var(--collapsed-height);
+  }
+
+  .tags-filter .tag-btn:focus-visible {
+    outline-offset: -3px;
+  }
+
+  .tags-filter-toggle {
+    display: inline-flex;
+    align-items: center;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--color-text-muted);
+    font-size: 0.8rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: color var(--transition-fast);
+  }
+
+  .tags-filter-toggle:hover {
+    color: var(--color-secondary);
+  }
+
+  .tags-filter-toggle[hidden] {
+    display: none;
+  }
+
+  .tag-btn {
+    padding: 0.375rem 0.875rem;
+    border: 1px solid var(--color-border);
+    border-radius: var(--radius-full);
+    background: var(--color-surface);
+    color: var(--color-text-muted);
+    font-size: 0.8rem;
+    font-weight: 500;
+    text-decoration: none;
+    transition: all var(--transition-fast);
+    cursor: pointer;
+  }
+
+  .tag-btn:hover {
+    border-color: var(--color-secondary);
+    color: var(--color-text);
+  }
+
+  .tag-btn.active {
+    background: var(--color-secondary);
+    color: var(--color-bg);
+    border-color: var(--color-secondary);
+  }
+
+  .posts-list {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+  }
+
+  .no-results {
+    text-align: center;
+    color: var(--color-text-muted);
+    padding: 3rem;
+  }
+
+  .load-more-wrap {
+    display: flex;
+    justify-content: center;
+    margin-top: 1.5rem;
+    min-height: 2.75rem;
+  }
+
+  .load-more-wrap.hidden {
+    visibility: hidden;
+    pointer-events: none;
+  }
+
+  .load-more-btn {
+    padding: 0.65rem 1.2rem;
+    border-radius: var(--radius-md);
+    border: 1px solid var(--color-border);
+    background: var(--color-surface);
+    color: var(--color-text);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    font-size: 0.88rem;
+  }
+
+  .load-more-btn:hover {
+    border-color: var(--color-secondary);
+    color: var(--color-secondary);
+    transform: translateY(-1px);
+  }
+
+  @media (max-width: 600px) {
+    .search-wrapper { max-width: 100%; }
+
+    .controls-right {
+      align-items: stretch;
+    }
+  }
+
+  .page-eyebrow { font: .7rem var(--font-mono); letter-spacing: .16em; color: var(--color-primary); margin-bottom: .65rem; }
+
+  .page-title > span { color: var(--color-primary); }
+
+  .archive-count { flex-shrink: 0; text-align: center; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .2rem .8rem; transform: rotate(4deg); background: var(--color-play-soft); border: 1px solid var(--color-border); border-radius: 16px; padding: .8rem 1.3rem; }
+
+  .archive-count > span:first-child { color: var(--color-primary); font-size: 2.5rem; }
+
+  .archive-count strong { font: 700 2.75rem var(--font-display); }
+
+  .archive-count > span:last-child { grid-column: 1 / -1; font-size: .68rem; color: var(--color-text-muted); }
+
+  @media (max-width: 600px) {
+    .page-header { gap: .75rem; padding: 1.25rem; }
+    .page-subtitle { font-size: .8rem; }
+    .archive-count { padding: .6rem; grid-template-columns: 1fr; gap: 0; }
+    .archive-count > span:first-child { display: none; }
+    .archive-count strong { font-size: 2rem; }
+    .archive-count > span:last-child { max-width: 6em; font-size: .6rem; }
+    .page-title { font-size: 1.8rem; }
+    .controls { padding: 1rem; }
+  }
+</style>
+
+<script>
+  import '../scripts/blog';
+</script>