jfmonty2/blog
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

all-posts page, page titles, index page

Browse Source
This commit is contained in:
Joseph Montanaro
2026-03-30 05:27:41 -04:00
parent 5ffb51d5ce
commit fd8ed38572
6 changed files with 126 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/Post.astro
View File

@@ -10,8 +10,8 @@ import { formatDate } from '@lib/datefmt';
export interface Props { export interface Props {
entry: CollectionEntry<'posts'>, entry: CollectionEntry<'posts'>,
prevSlug: string | null, prevSlug?: string | null,
nextSlug: string | null, nextSlug?: string | null,
}; };
const { entry, prevSlug, nextSlug } = Astro.props; const { entry, prevSlug, nextSlug } = Astro.props;

8
src/layouts/BaseLayout.astro
View File

@@ -2,6 +2,12 @@
import '@styles/main.css'; import '@styles/main.css';
import '@fontsource-variable/baskervville-sc'; import '@fontsource-variable/baskervville-sc';
import ThemeSwitcher from '@components/ThemeSwitcher.astro'; import ThemeSwitcher from '@components/ThemeSwitcher.astro';
export interface Props {
pageTitle: string,
}
const { pageTitle } = Astro.props;
--- ---
<html lang="en"> <html lang="en">
@@ -9,6 +15,8 @@ import ThemeSwitcher from '@components/ThemeSwitcher.astro';
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title>{pageTitle}</title>
<!-- avoid FOUC by setting the color schme here in the header --> <!-- avoid FOUC by setting the color schme here in the header -->
<script> <script>
const explicitPref = localStorage.getItem('theme-preference'); const explicitPref = localStorage.getItem('theme-preference');

8
src/pages/[slug].astro
View File

@@ -5,7 +5,8 @@ import Post from '@components/Post.astro';
export async function getStaticPaths() { export async function getStaticPaths() {
const entries = await getCollection('posts'); const entries = await getCollection('posts');
entries.sort((a, b) => a.data.date.getTime() - b.data.date.getTime()) // unlike `/index` and `/posts`, we want to sort ascending by date here
entries.sort((a, b) => a.data.date.getTime() - b.data.date.getTime());
// for each route, the page gets passed the entry itself, plus the previous and next slugs // for each route, the page gets passed the entry itself, plus the previous and next slugs
// (if any), so that it can render links to them // (if any), so that it can render links to them
@@ -20,8 +21,9 @@ export async function getStaticPaths() {
} }
const { entry, prevSlug, nextSlug } = Astro.props;
--- ---
<BaseLayout> <BaseLayout pageTitle={entry.data.title}>
<Post {...Astro.props} /> <Post {entry} {prevSlug} {nextSlug} />
</BaseLayout> </BaseLayout>

12
src/pages/index.astro
View File

@@ -1,7 +1,15 @@
--- ---
import { getCollection } from 'astro:content';
import BaseLayout from '@layouts/BaseLayout.astro'; import BaseLayout from '@layouts/BaseLayout.astro';
import Post from '@components/Post.astro';
const entries = await getCollection('posts');
entries.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
// there will always be at leaste one entry
const entry = entries[0]!;
const prevSlug = entries[1] ? entries[1]?.id : null;
--- ---
<BaseLayout> <BaseLayout pageTitle={entry.data.title}>
<p>Index file</p> <Post {entry} {prevSlug} />
</BaseLayout> </BaseLayout>

63
src/pages/posts.astro Normal file
View File

@@ -0,0 +1,63 @@
---
import '@styles/prose.css';
import { getCollection, render } from 'astro:content';
import BaseLayout from '@layouts/BaseLayout.astro';
// return all posts
let entries = await getCollection('posts', ({ data }) => !data.draft || import.meta.env.PROD );
entries.sort((a, b) => b.data.date.getTime() - a.data.date.getTime());
const posts = await Promise.all(entries.map(async entry => {
const { remarkPluginFrontmatter } = await render(entry);
return { ...entry, remarkPluginFrontmatter };
}));
---
<BaseLayout pageTitle="Posts">
<div class="prose">
<h1>All Posts</h1>
<ul>
{posts.map( (p, idx) =>
<li>
{idx > 0 && <hr></hr>}
<h2>
<a href={`/${p.id}`} data-astro-prefetch>
{p.data.title}
</a>
</h2>
<p>
{p.remarkPluginFrontmatter.description}
</p>
</li>
)}
</ul>
</div>
</BaseLayout>
<style>
div.prose {
max-width: var(--content-width);
padding: var(--content-padding);
margin: 0 auto;
& h2 a {
color: var(--content-color);
}
}
h1 {
text-align: center;
margin-bottom: 2rem;
}
ul {
list-style: none;
}
hr {
border: none;
height: 1px;
margin: 2.5rem 0;
background-color: var(--content-color);
}
</style>

38
src/plugins.ts Normal file
View File

@@ -0,0 +1,38 @@
import type { Root, Paragraph, PhrasingContent } from 'mdast';
import type { VFile } from 'vfile';
import { visit } from 'unist-util-visit';
import { toString } from 'mdast-util-to-string';
import { writeFileSync } from 'node:fs';
export function remarkDescription() {
return (tree: Root, vfile: VFile) => {
if (vfile.basename == 'advent-of-languages-2024-04.mdx') {
writeFileSync('tree.json', JSON.stringify(tree, undefined, 4));
}
let description: string | null = null;
visit(tree, 'paragraph', (node: Paragraph) => {
if (description !== null) return;
description = summarize(node);
});
// Astro exposes this as `remarkPluginFrontmatter` from render()
const astro = (vfile.data.astro ??= { frontmatter: {} }) as { frontmatter: Record<string, unknown> };
astro.frontmatter.description = description;
};
}
/**
* Convert a paragraph node to a plain-text string, stripping any
* MDX JSX elements (e.g. <Sidenote>) so their content doesn't
* leak into the summary.
*/
function summarize(par: Paragraph): string {
const filtered = par.children.filter(
(child: PhrasingContent) => !(child.type as string).startsWith('mdxJsx')
);
return toString({ type: 'paragraph', children: filtered });
}