@guzhongren/sha 0.1.0

package/src/pages/index.astro

@@ -0,0 +1,28 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "../layouts/BaseLayout.astro";
+import ProfileIntro from "../components/ProfileIntro.astro";
+import PostList from "../components/PostList.astro";
+import config from "virtual:blog-theme/config";
+import { isPublished, sortPosts } from "../utils";
+
+const allPosts = sortPosts((await getCollection("posts")).filter(isPublished));
+const posts = allPosts.slice(0, config.postsPerPage);
+---
+
+<BaseLayout title="Home" description={config.site.description}>
+  <ProfileIntro />
+  <section class="mx-auto max-w-5xl px-4 pb-20 sm:px-6">
+    <div class="line-y bg-[var(--panel-bg)] px-3 py-5 sm:px-4">
+      <p class="font-mono text-xs font-medium uppercase tracking-widest text-[var(--text-muted)]">Latest writing</p>
+    </div>
+    <PostList posts={posts} featuredFirst={true} />
+    {allPosts.length > config.postsPerPage && (
+      <div class="mt-10 text-center">
+        <a class="text-sm font-medium text-[var(--text-muted)] hover:text-[var(--accent)]" href="/posts/">
+          View all posts →
+        </a>
+      </div>
+    )}
+  </section>
+</BaseLayout>

package/src/pages/posts/[...slug].astro

@@ -0,0 +1,49 @@
+---
+import { getCollection, render } from "astro:content";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import TableOfContents from "../../components/TableOfContents.astro";
+import TagList from "../../components/TagList.astro";
+import { renderEmojiShortcodes } from "../../emoji";
+import { formatDate, isPublished } from "../../utils";
+
+export async function getStaticPaths() {
+  const posts = (await getCollection("posts")).filter(isPublished);
+  return posts.map((post) => ({
+    params: { slug: post.id },
+    props: { post },
+  }));
+}
+
+const { post } = Astro.props;
+const { Content, headings } = await render(post);
+const title = renderEmojiShortcodes(post.data.title);
+const description = renderEmojiShortcodes(post.data.description);
+---
+
+<BaseLayout title={title} description={description}>
+  <div class="mx-auto grid max-w-6xl grid-cols-1 xl:grid-cols-[minmax(0,1fr)_18rem]">
+    <article class="min-w-0 px-4 py-12 sm:px-6 lg:px-10" data-pagefind-body>
+      <p class="font-mono text-xs font-medium uppercase tracking-widest text-[var(--text-muted)]">
+        <a class="hover:text-[var(--accent)]" href={`/categories/${post.data.category}`} data-pagefind-meta="category">{post.data.category}</a>
+      </p>
+      <h1 class="mt-3 max-w-3xl text-4xl font-semibold tracking-tight text-[var(--text-strong)]">{title}</h1>
+      <p class="mt-5 max-w-2xl text-base/7 text-[var(--text-muted)]">{description}</p>
+      <div class="mt-6 flex flex-wrap items-center gap-4 text-sm text-[var(--text-muted)]">
+        {post.data.publishDate && <time datetime={post.data.publishDate.toISOString()} data-pagefind-meta="date">{formatDate(post.data.publishDate)}</time>}
+        {post.data.updatedDate && <span>Updated {formatDate(post.data.updatedDate)}</span>}
+      </div>
+      <div class="mt-6">
+        <TagList tags={post.data.tags} />
+      </div>
+      {
+        post.data.cover && (
+          <img class="mt-10 aspect-[16/8] w-full rounded-xl border border-[var(--border-soft)] object-cover" src={post.data.cover} alt="" />
+        )
+      }
+      <div class="prose mt-10 max-w-none" data-emoji-shortcodes>
+        <Content />
+      </div>
+    </article>
+    <TableOfContents headings={headings} />
+  </div>
+</BaseLayout>

package/src/pages/posts/index.astro

@@ -0,0 +1,24 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import Pagination from "../../components/Pagination.astro";
+import PostList from "../../components/PostList.astro";
+import config from "virtual:blog-theme/config";
+import { isPublished, sortPosts } from "../../utils";
+
+const allPosts = sortPosts((await getCollection("posts")).filter(isPublished));
+const total = Math.ceil(allPosts.length / config.postsPerPage);
+const posts = allPosts.slice(0, config.postsPerPage);
+---
+
+<BaseLayout title="Posts" description="All posts">
+  <section class="mx-auto max-w-4xl px-4 py-12 sm:px-6">
+    <p class="font-mono text-xs font-medium uppercase tracking-widest text-[var(--text-muted)]">Archive</p>
+    <h1 class="mt-3 text-4xl font-semibold tracking-tight text-[var(--text-strong)]">Posts</h1>
+    <p class="mt-4 text-sm/7 text-[var(--text-muted)]">All published notes, essays, and technical write-ups.</p>
+    <div class="mt-8">
+      <PostList posts={posts} />
+    </div>
+    <Pagination current={1} total={total} base="/posts/" />
+  </section>
+</BaseLayout>

package/src/pages/posts/page/[page].astro

@@ -0,0 +1,37 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "../../../layouts/BaseLayout.astro";
+import Pagination from "../../../components/Pagination.astro";
+import PostList from "../../../components/PostList.astro";
+import config from "virtual:blog-theme/config";
+import { isPublished, sortPosts } from "../../../utils";
+
+export async function getStaticPaths() {
+  const allPosts = sortPosts((await getCollection("posts")).filter(isPublished));
+  const total = Math.ceil(allPosts.length / config.postsPerPage);
+  // Start from page 2 since page 1 is handled by /posts
+  const pages = Array.from({ length: total - 1 }, (_, i) => i + 2);
+  return pages.map((page) => ({
+    params: { page: String(page) },
+    props: {
+      page,
+      total,
+      posts: allPosts.slice((page - 1) * config.postsPerPage, page * config.postsPerPage),
+    },
+  }));
+}
+
+const { page, total, posts } = Astro.props;
+---
+
+<BaseLayout title={`Posts — Page ${page}`} description={`All posts, page ${page}`}>
+  <section class="mx-auto max-w-4xl px-4 py-12 sm:px-6">
+    <p class="font-mono text-xs font-medium uppercase tracking-widest text-[var(--text-muted)]">Archive</p>
+    <h1 class="mt-3 text-4xl font-semibold tracking-tight text-[var(--text-strong)]">Posts</h1>
+    <p class="mt-4 text-sm/7 text-[var(--text-muted)]">All published notes, essays, and technical write-ups.</p>
+    <div class="mt-8">
+      <PostList posts={posts} />
+    </div>
+    <Pagination current={page} total={total} base="/posts/" />
+  </section>
+</BaseLayout>

package/src/pages/search.astro

@@ -0,0 +1,34 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "../layouts/BaseLayout.astro";
+import PostList from "../components/PostList.astro";
+import { isPublished, sortPosts } from "../utils";
+
+const posts = sortPosts((await getCollection("posts")).filter(isPublished));
+---
+
+<BaseLayout title="Search" description="Static article index">
+  <section class="mx-auto max-w-4xl px-4 py-12 sm:px-6">
+    <p class="font-mono text-xs font-medium uppercase tracking-widest text-[var(--text-muted)]">Search</p>
+    <h1 class="mt-3 text-4xl font-semibold tracking-tight text-[var(--text-strong)]">Search posts</h1>
+    <p class="mt-4 text-sm/7 text-[var(--text-muted)]">
+      Search across published article titles, descriptions, and body content.
+    </p>
+
+    <div class="search-page mt-8" data-search-root data-search-mode="page" data-search-limit="20">
+      <label class="search-field">
+        <span class="sr-only">Search posts</span>
+        <input data-search-input type="search" placeholder="Search posts..." autocomplete="off" />
+      </label>
+      <p class="search-status" data-search-status>Type at least 2 characters to search.</p>
+      <ol class="search-results" data-search-results></ol>
+      <div data-search-fallback>
+        <div class="rule-fade my-8"></div>
+        <p class="font-mono text-xs font-medium uppercase tracking-widest text-[var(--text-muted)]">All published posts</p>
+        <div class="mt-4">
+          <PostList posts={posts} />
+        </div>
+      </div>
+    </div>
+  </section>
+</BaseLayout>

package/src/pages/tags/[tag].astro

@@ -0,0 +1,30 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import PostList from "../../components/PostList.astro";
+import { isPublished, sortPosts, uniqueSorted } from "../../utils";
+
+export async function getStaticPaths() {
+  const allPosts = (await getCollection("posts")).filter(isPublished);
+  const tags = uniqueSorted(allPosts.flatMap((post) => post.data.tags));
+  return tags.map((tag) => ({
+    params: { tag },
+    props: {
+      tag,
+      posts: sortPosts(allPosts.filter((post) => post.data.tags.includes(tag))),
+    },
+  }));
+}
+
+const { tag, posts } = Astro.props;
+---
+
+<BaseLayout title={`Tag: ${tag}`} description={`Posts tagged ${tag}`}>
+  <section class="mx-auto max-w-4xl px-4 py-12 sm:px-6">
+    <p class="font-mono text-xs font-medium uppercase tracking-widest text-[var(--text-muted)]">Tag</p>
+    <h1 class="mt-3 text-4xl font-semibold tracking-tight text-[var(--text-strong)]">{tag}</h1>
+    <div class="mt-8">
+      <PostList posts={posts} />
+    </div>
+  </section>
+</BaseLayout>

package/src/pages/tags/index.astro

@@ -0,0 +1,18 @@
+---
+import { getCollection } from "astro:content";
+import BaseLayout from "../../layouts/BaseLayout.astro";
+import { isPublished, uniqueSorted } from "../../utils";
+
+const posts = (await getCollection("posts")).filter(isPublished);
+const tags = uniqueSorted(posts.flatMap((post) => post.data.tags));
+---
+
+<BaseLayout title="Tags" description="Browse posts by tag">
+  <section class="mx-auto max-w-4xl px-4 py-12 sm:px-6">
+    <p class="font-mono text-xs font-medium uppercase tracking-widest text-[var(--text-muted)]">Index</p>
+    <h1 class="mt-3 text-4xl font-semibold tracking-tight text-[var(--text-strong)]">Tags</h1>
+    <div class="mt-8 flex flex-wrap gap-3">
+      {tags.map((tag) => <a class="rounded-full border border-[var(--border-soft)] px-3 py-1.5 text-sm text-[var(--text-muted)] hover:text-[var(--accent)]" href={`/tags/${tag}`}>{tag}</a>)}
+    </div>
+  </section>
+</BaseLayout>

package/src/shortcodes.ts

@@ -0,0 +1,8 @@
+const echartsShortcodePattern = /\{\{<\s*echarts\s*>\}\}([\s\S]*?)\{\{<\s*\/echarts\s*>\}\}/g;
+
+export function transformContentShortcodes(source: string) {
+  return source.replace(echartsShortcodePattern, (_match, options: string) => {
+    const payload = options.trim();
+    return `\n\n<figure class="echarts-frame"><div class="echarts-canvas" data-echarts-options="${encodeURIComponent(payload)}"></div></figure>\n\n`;
+  });
+}