ferst-core 0.7.2 → 0.7.4

package/routes/posts/index.astro

@@ -1,31 +1,36 @@
----
-/**
- * Posts index (`/posts`) — INJECTED by the ferst() integration (blog option).
- * The news / notices listing. Excludes any tag in postsSettings.excludeFromIndex
- * (e.g. a newsletter series that has its own tag page). Content, not code — a
- * client carries the post markdown + tag data; this route ships from core.
- */
-import Base from '../../layouts/Base.astro';
-import NewsList from '../../components/NewsList.astro';
-import PostsFilter from '../../components/PostsFilter.astro';
-import { getIndexPosts, getPostsSettings, getUsedTags } from '../../lib/posts';
-
-const [posts, settings, tags] = await Promise.all([getIndexPosts(), getPostsSettings(), getUsedTags()]);
----
-
-<Base title={settings.title} description={settings.intro || undefined}>
-  <section class="posts">
-    <header class="posts__head">
-      <h1>{settings.title}</h1>
-      {settings.intro && <p class="t-lead">{settings.intro}</p>}
-    </header>
-    <PostsFilter tags={tags} />
-    <NewsList posts={posts} empty="No posts yet." />
-  </section>
-</Base>
-
-<style>
-  .posts { display: flex; flex-direction: column; gap: 2rem; }
-  .posts__head { display: flex; flex-direction: column; gap: 0.5rem; }
-  .posts__head .t-lead { color: var(--muted); }
-</style>
+---
+/**
+ * Posts index (`/posts`) — INJECTED by the ferst() integration (blog option).
+ * The news / notices listing. Excludes any tag in postsSettings.excludeFromIndex
+ * (e.g. a newsletter series that has its own tag page). Content, not code — a
+ * client carries the post markdown + tag data; this route ships from core.
+ */
+import Base from '../../layouts/Base.astro';
+import NewsList from '../../components/NewsList.astro';
+import PostsFilter from '../../components/PostsFilter.astro';
+import Pagination from '../../components/Pagination.astro';
+import { getIndexPosts, getPostsSettings, getUsedTags } from '../../lib/posts';
+import { pageCount, pageSlice } from '../../lib/paginate';
+
+const [all, settings, tags] = await Promise.all([getIndexPosts(), getPostsSettings(), getUsedTags()]);
+const pages = pageCount(all.length, settings.perPage);
+const posts = pageSlice(all, 1, settings.perPage);
+---
+
+<Base title={settings.title} description={settings.intro || undefined}>
+  <section class="posts">
+    <header class="posts__head">
+      <h1>{settings.title}</h1>
+      {settings.intro && <p class="t-lead">{settings.intro}</p>}
+    </header>
+    <PostsFilter tags={tags} />
+    <NewsList posts={posts} empty="No posts yet." />
+    <Pagination base="/posts" page={1} pages={pages} />
+  </section>
+</Base>
+
+<style>
+  .posts { display: flex; flex-direction: column; gap: 2rem; }
+  .posts__head { display: flex; flex-direction: column; gap: 0.5rem; }
+  .posts__head .t-lead { color: var(--muted); }
+</style>

package/routes/posts/page/[page].astro

@@ -0,0 +1,36 @@
+---
+/**
+ * Posts index, page 2 onwards (`/posts/page/<n>`) — INJECTED by the ferst() integration
+ * (blog option). Page 1 is `/posts`. Pages are `postsSettings.perPage` posts long.
+ */
+import Base from '../../../layouts/Base.astro';
+import NewsList from '../../../components/NewsList.astro';
+import PostsFilter from '../../../components/PostsFilter.astro';
+import Pagination from '../../../components/Pagination.astro';
+import { getIndexPageRoutes, getIndexPosts, getPostsSettings, getUsedTags } from '../../../lib/posts';
+import { pageSlice } from '../../../lib/paginate';
+
+export const getStaticPaths = getIndexPageRoutes;
+
+const { page, pages } = Astro.props as { page: number; pages: number };
+const [all, settings, tags] = await Promise.all([getIndexPosts(), getPostsSettings(), getUsedTags()]);
+const posts = pageSlice(all, page, settings.perPage);
+---
+
+<Base title={`${settings.title} — page ${page}`} description={settings.intro || undefined}>
+  <section class="posts">
+    <header class="posts__head">
+      <h1>{settings.title}</h1>
+      <p class="posts__page">Page {page} of {pages}</p>
+    </header>
+    <PostsFilter tags={tags} />
+    <NewsList posts={posts} />
+    <Pagination base="/posts" page={page} pages={pages} />
+  </section>
+</Base>
+
+<style>
+  .posts { display: flex; flex-direction: column; gap: 2rem; }
+  .posts__head { display: flex; flex-direction: column; gap: 0.5rem; }
+  .posts__page { margin: 0; color: var(--muted); }
+</style>

package/routes/posts/tag/[...tag].astro

@@ -1,37 +1,41 @@
----
-/**
- * A tag page (`/posts/tag/<slug>`) — INJECTED by the ferst() integration (blog
- * option). All posts carrying one tag. This is also how an excluded-from-index
- * series (e.g. a newsletter) gets its own page.
- */
-import Base from '../../../layouts/Base.astro';
-import NewsList from '../../../components/NewsList.astro';
-import PostsFilter from '../../../components/PostsFilter.astro';
-import { getTagRoutes, getPostsByTag, getUsedTags } from '../../../lib/posts';
-
-export const getStaticPaths = getTagRoutes;
-
-const { tag } = Astro.props;
-const [posts, tags] = await Promise.all([getPostsByTag(tag.slug), getUsedTags()]);
----
-
-<Base title={tag.label} description={tag.description || undefined}>
-  <section class="posts">
-    <header class="posts__head">
-      <p class="posts__eyebrow">Tag</p>
-      <h1>{tag.label}</h1>
-      {tag.description && <p class="t-lead">{tag.description}</p>}
-    </header>
-    <PostsFilter tags={tags} active={tag.slug} />
-    <NewsList posts={posts} />
-    <a class="posts__back" href="/posts">&larr; All posts</a>
-  </section>
-</Base>
-
-<style>
-  .posts { display: flex; flex-direction: column; gap: 2rem; }
-  .posts__head { display: flex; flex-direction: column; gap: 0.35rem; }
-  .posts__eyebrow { margin: 0; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
-  .posts__head .t-lead { color: var(--muted); }
-  .posts__back { font-weight: 600; color: var(--gold); }
-</style>
+---
+/**
+ * A tag page (`/posts/tag/<slug>`) — INJECTED by the ferst() integration (blog
+ * option). All posts carrying one tag. This is also how an excluded-from-index
+ * series (e.g. a newsletter) gets its own page.
+ */
+import Base from '../../../layouts/Base.astro';
+import NewsList from '../../../components/NewsList.astro';
+import PostsFilter from '../../../components/PostsFilter.astro';
+import Pagination from '../../../components/Pagination.astro';
+import { getTagRoutes, getPostsByTag, getPostsSettings, getUsedTags } from '../../../lib/posts';
+import { pageSlice } from '../../../lib/paginate';
+
+export const getStaticPaths = getTagRoutes;
+
+const { tag, page = 1, pages = 1 } = Astro.props;
+const [all, tags, settings] = await Promise.all([getPostsByTag(tag.slug), getUsedTags(), getPostsSettings()]);
+const posts = pageSlice(all, page, settings.perPage);
+---
+
+<Base title={page > 1 ? `${tag.label} — page ${page}` : tag.label} description={tag.description || undefined}>
+  <section class="posts">
+    <header class="posts__head">
+      <p class="posts__eyebrow">Tag</p>
+      <h1>{tag.label}</h1>
+      {tag.description && <p class="t-lead">{tag.description}</p>}
+    </header>
+    <PostsFilter tags={tags} active={tag.slug} />
+    <NewsList posts={posts} />
+    <Pagination base={`/posts/tag/${tag.slug}`} page={page} pages={pages} />
+    <a class="posts__back" href="/posts">&larr; All posts</a>
+  </section>
+</Base>
+
+<style>
+  .posts { display: flex; flex-direction: column; gap: 2rem; }
+  .posts__head { display: flex; flex-direction: column; gap: 0.35rem; }
+  .posts__eyebrow { margin: 0; font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }
+  .posts__head .t-lead { color: var(--muted); }
+  .posts__back { font-weight: 600; color: var(--gold); }
+</style>