feat(blog): add the blog index, post pages, RSS and content sitemap
The rendering split is dictated by CI building with no database. /blog, /blog/rss.xml and /content-sitemap.xml have no dynamic params, so Next prerenders them at build time and the build fails on a missing Payload secret — caught here, not on staging. They are force-dynamic instead: one indexed query against Postgres on the same Docker network, and a newly published post appears immediately rather than waiting on a revalidation. /blog/[slug] keeps ISR, because with no generateStaticParams there is nothing to prerender; it is generated on first request and cached, which is exactly what the collection's afterChange hook exists to invalidate. RichText takes `converters`, not `blocks`, in Payload 3.88, and the default converters must be spread or every paragraph and heading loses its renderer and the body comes out empty. BlogPosting references the Person and Organization by @id rather than repeating them, so every post and the About page resolve to one author entity instead of declaring several people with the same name. /sitemap.xml is proxied from FastAPI, which knows nothing about Payload, so the Next-owned URLs get their own sitemap and robots.txt lists both. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_017YmbBhr8s7GusjDE12hrZM
This commit is contained in:
TudorandClaude Opus 5 committed
1 parent
21a5d18f59
commit
b793640507
15 files changed
+705
-14
No files matched your search
@@ -2583,3 +2583,42 @@ test('the about page names a human author and is reachable from the footer', asy
|
||||
// First name only — a surname here would be the one place it leaks.
|
||||
expect(jsonLd).not.toMatch(/familyName/);
|
||||
});
|
||||
|
||||
test('the blog lists posts and each one renders with a byline', async ({ page }) => {
|
||||
await page.goto('/blog');
|
||||
await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
|
||||
|
||||
const postLinks = page.locator('a[href^="/blog/"]');
|
||||
// Data invariant: staging must carry at least one published post. If this
|
||||
// fails, the environment has no content rather than the code being broken.
|
||||
expect(await postLinks.count()).toBeGreaterThan(0);
|
||||
|
||||
await postLinks.first().click();
|
||||
await page.waitForURL(/\/blog\/.+/);
|
||||
await expect(page.getByRole('heading', { level: 1 })).toBeVisible();
|
||||
await expect(page.getByText(/^By Tudor/)).toBeVisible();
|
||||
|
||||
const jsonLd = await page
|
||||
.locator('script[type="application/ld+json"]')
|
||||
.first()
|
||||
.textContent();
|
||||
expect(jsonLd).toContain('"BlogPosting"');
|
||||
});
|
||||
|
||||
test('the admin panel is not indexable', async ({ page }) => {
|
||||
const response = await page.request.get('/admin');
|
||||
expect(response.headers()['x-robots-tag']).toContain('noindex');
|
||||
});
|
||||
|
||||
test('the content sitemap lists the about page and is advertised in robots', async ({ page }) => {
|
||||
const sitemap = await page.request.get('/content-sitemap.xml');
|
||||
expect(sitemap.ok()).toBeTruthy();
|
||||
expect(await sitemap.text()).toContain('/about');
|
||||
|
||||
// The school corpus sitemap is proxied from FastAPI; this one is Next's.
|
||||
// robots.txt must advertise both or the blog never gets discovered.
|
||||
const robots = await page.request.get('/robots.txt');
|
||||
const body = await robots.text();
|
||||
expect(body).toContain('/sitemap.xml');
|
||||
expect(body).toContain('/content-sitemap.xml');
|
||||
});
|
||||
@@ -0,0 +1,53 @@
|
||||
/**
|
||||
* The blog index imports getCachedPayload, which pulls in Payload — ESM-only,
|
||||
* and next/jest will not transform node_modules. Mocking that one module keeps
|
||||
* the page's metadata testable without loading the CMS; the mock is never
|
||||
* called, because `metadata` is a static export evaluated at import time.
|
||||
*/
|
||||
jest.mock('@/lib/payload', () => ({ getCachedPayload: jest.fn() }));
|
||||
|
||||
import { metadata } from '@/app/(frontend)/blog/page';
|
||||
import { blogPostingJsonLd, breadcrumbJsonLd } from '@/lib/jsonld';
|
||||
|
||||
const post = {
|
||||
title: 'What the data cannot tell you',
|
||||
slug: 'what-the-data-cannot-tell-you',
|
||||
excerpt: 'Results describe one year group on a handful of days.',
|
||||
publishedAt: '2026-09-15T00:00:00.000Z',
|
||||
};
|
||||
|
||||
describe('/blog metadata', () => {
|
||||
it('canonicalises to the bare path', () => {
|
||||
expect(metadata.alternates?.canonical)
|
||||
.toBe('https://www.schoolcompare.co.uk/blog');
|
||||
});
|
||||
});
|
||||
|
||||
describe('BlogPosting structured data', () => {
|
||||
it('names the same Person entity the about page declares', () => {
|
||||
// By @id, not by repeating the person: search engines must resolve every
|
||||
// post and the about page to one author entity, or the site has several.
|
||||
const ld = blogPostingJsonLd(post);
|
||||
expect(ld['@type']).toBe('BlogPosting');
|
||||
expect(ld.author['@id']).toBe('https://www.schoolcompare.co.uk/about#tudor');
|
||||
expect(ld.publisher['@id']).toBe('https://www.schoolcompare.co.uk#organization');
|
||||
});
|
||||
|
||||
it('carries a self-referencing canonical url and the publish date', () => {
|
||||
const ld = blogPostingJsonLd(post);
|
||||
expect(ld.url).toBe(
|
||||
'https://www.schoolcompare.co.uk/blog/what-the-data-cannot-tell-you',
|
||||
);
|
||||
expect(ld.datePublished).toBe('2026-09-15T00:00:00.000Z');
|
||||
});
|
||||
});
|
||||
|
||||
describe('breadcrumbs', () => {
|
||||
it('places the post under the blog index', () => {
|
||||
const ld = breadcrumbJsonLd(post);
|
||||
expect(ld.itemListElement[0].item).toBe('https://www.schoolcompare.co.uk/blog');
|
||||
expect(ld.itemListElement[1].item).toBe(
|
||||
'https://www.schoolcompare.co.uk/blog/what-the-data-cannot-tell-you',
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -9,3 +9,12 @@ describe('robots.txt', () => {
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe('sitemap discovery', () => {
|
||||
it('lists both the proxied school sitemap and the Next-owned content sitemap', () => {
|
||||
expect(robots().sitemap).toEqual([
|
||||
'https://www.schoolcompare.co.uk/sitemap.xml',
|
||||
'https://www.schoolcompare.co.uk/content-sitemap.xml',
|
||||
]);
|
||||
});
|
||||
});
|
||||
@@ -33,13 +33,13 @@ describe('posts collection', () => {
|
||||
expect(POSTS).toMatch(/access:\s*\{\s*read:\s*\(\)\s*=>\s*true/);
|
||||
});
|
||||
|
||||
it('revalidates the blog paths when a post changes or is deleted', () => {
|
||||
// Blog pages are ISR because CI builds with no database. Without these
|
||||
// hooks a published post would not appear until the revalidate window
|
||||
// expired — up to an hour of a writer thinking publishing is broken.
|
||||
it('revalidates the post page when a post changes or is deleted', () => {
|
||||
// /blog/[slug] is ISR — generated on first request and cached — so an edit
|
||||
// to an already-published post would otherwise not appear until the
|
||||
// revalidate window expired, up to an hour of a writer concluding that
|
||||
// saving is broken. The index and feeds are force-dynamic and need no hook.
|
||||
expect(POSTS).toContain('afterChange');
|
||||
expect(POSTS).toContain('afterDelete');
|
||||
expect(POSTS).toMatch(/revalidatePath\('\/blog'\)/);
|
||||
expect(POSTS).toMatch(/revalidatePath\(`\/blog\/\$\{[^}]+\}`\)/);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -0,0 +1,76 @@
|
||||
.page {
|
||||
max-width: 42rem;
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem 1.25rem 4rem;
|
||||
}
|
||||
|
||||
.header { margin-bottom: 2.5rem; }
|
||||
|
||||
.kicker {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.06em;
|
||||
color: var(--brand);
|
||||
margin: 0 0 0.35rem;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(1.5rem, 4vw, 2rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.standfirst {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 1.05rem;
|
||||
line-height: 1.65;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.list { list-style: none; padding: 0; margin: 0; }
|
||||
|
||||
.item {
|
||||
padding: 1.5rem 0;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.date {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.8rem;
|
||||
color: var(--text-muted);
|
||||
/* Inter's tabular numerals keep a column of dates aligned. */
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
|
||||
.itemTitle {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.3;
|
||||
margin: 0.35rem 0 0.5rem;
|
||||
}
|
||||
|
||||
.itemLink { color: var(--text-primary); text-decoration: none; }
|
||||
.itemLink:hover { color: var(--brand); }
|
||||
|
||||
.excerpt {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.65;
|
||||
color: var(--text-secondary);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.empty {
|
||||
font-family: var(--font-ui);
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.link { color: var(--brand); font-weight: 600; }
|
||||
.link:hover { color: var(--brand-strong); }
|
||||
@@ -0,0 +1,87 @@
|
||||
.page {
|
||||
max-width: 42rem;
|
||||
margin: 0 auto;
|
||||
padding: 2.5rem 1.25rem 4rem;
|
||||
}
|
||||
|
||||
.crumb {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.85rem;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.heading {
|
||||
font-family: var(--font-display);
|
||||
font-size: clamp(1.6rem, 5vw, 2.25rem);
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
color: var(--text-primary);
|
||||
margin: 0 0 0.75rem;
|
||||
}
|
||||
|
||||
.byline {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.9rem;
|
||||
color: var(--text-muted);
|
||||
margin: 0 0 2rem;
|
||||
}
|
||||
|
||||
.hero {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 10px;
|
||||
border: 1px solid var(--border);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Rich-text output: the editor emits plain elements, so these are styled by
|
||||
descendant selector rather than by class. */
|
||||
.prose p {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: var(--text-secondary);
|
||||
margin: 0 0 1.1rem;
|
||||
}
|
||||
|
||||
.prose h2 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 2.25rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.prose h3 {
|
||||
font-family: var(--font-display);
|
||||
font-size: 1.05rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-primary);
|
||||
margin: 1.75rem 0 0.6rem;
|
||||
}
|
||||
|
||||
.prose ul,
|
||||
.prose ol {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 1rem;
|
||||
line-height: 1.7;
|
||||
color: var(--text-secondary);
|
||||
padding-left: 1.35rem;
|
||||
margin: 0 0 1.1rem;
|
||||
}
|
||||
|
||||
.prose li { margin-bottom: 0.4rem; }
|
||||
|
||||
.prose a { color: var(--brand); font-weight: 500; }
|
||||
.prose a:hover { color: var(--brand-strong); }
|
||||
|
||||
.prose blockquote {
|
||||
border-left: 3px solid var(--border-strong);
|
||||
padding-left: 1rem;
|
||||
margin: 1.5rem 0;
|
||||
color: var(--text-muted);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.link { color: var(--brand); font-weight: 600; }
|
||||
.link:hover { color: var(--brand-strong); }
|
||||
@@ -0,0 +1,164 @@
|
||||
import type { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import { notFound } from 'next/navigation';
|
||||
import { RichText } from '@payloadcms/richtext-lexical/react';
|
||||
import type { JSXConvertersFunction } from '@payloadcms/richtext-lexical/react';
|
||||
import { getCachedPayload } from '@/lib/payload';
|
||||
import { absoluteUrl } from '@/lib/site';
|
||||
import {
|
||||
blogPostingJsonLd,
|
||||
breadcrumbJsonLd,
|
||||
personJsonLd,
|
||||
organizationJsonLd,
|
||||
} from '@/lib/jsonld';
|
||||
import { CalloutBlock } from '@/components/blog/CalloutBlock';
|
||||
import styles from './Post.module.css';
|
||||
|
||||
/*
|
||||
* ISR. Unlike the index, this route has a dynamic param and no
|
||||
* generateStaticParams, so there is nothing for the build to prerender: each
|
||||
* post is generated on first request and cached until the collection's
|
||||
* afterChange hook revalidates it. That hook is what makes an edit to an
|
||||
* already-published post appear immediately.
|
||||
*/
|
||||
export const revalidate = 3600;
|
||||
|
||||
interface HeroImage {
|
||||
url?: string | null;
|
||||
alt?: string | null;
|
||||
width?: number | null;
|
||||
height?: number | null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Spreads the default converters and adds the one custom block.
|
||||
*
|
||||
* Without the spread, every default node type — paragraphs, headings, links —
|
||||
* loses its renderer and the post body comes out empty.
|
||||
*/
|
||||
const calloutConverters: JSXConvertersFunction = ({ defaultConverters }) => ({
|
||||
...defaultConverters,
|
||||
blocks: {
|
||||
// Annotated because the generic block converter cannot infer a custom
|
||||
// block's field shape; String() guards the values regardless.
|
||||
callout: ({ node }: { node: { fields: Record<string, unknown> } }) => (
|
||||
<CalloutBlock
|
||||
tone={String(node.fields.tone ?? 'caveat')}
|
||||
body={String(node.fields.body ?? '')}
|
||||
/>
|
||||
),
|
||||
},
|
||||
});
|
||||
|
||||
async function findPost(slug: string) {
|
||||
const payload = await getCachedPayload();
|
||||
const { docs } = await payload.find({
|
||||
collection: 'posts',
|
||||
where: { slug: { equals: slug }, _status: { equals: 'published' } },
|
||||
limit: 1,
|
||||
depth: 1,
|
||||
});
|
||||
return docs[0] ?? null;
|
||||
}
|
||||
|
||||
function summarise(post: Record<string, unknown>) {
|
||||
return {
|
||||
title: String(post.title),
|
||||
slug: String(post.slug),
|
||||
excerpt: String(post.excerpt),
|
||||
publishedAt: String(post.publishedAt),
|
||||
};
|
||||
}
|
||||
|
||||
export async function generateMetadata(
|
||||
{ params }: { params: Promise<{ slug: string }> },
|
||||
): Promise<Metadata> {
|
||||
const { slug } = await params;
|
||||
const post = await findPost(slug);
|
||||
if (!post) return { title: 'Not found' };
|
||||
|
||||
const hero = post.heroImage as HeroImage | null | undefined;
|
||||
|
||||
return {
|
||||
title: String(post.title),
|
||||
description: String(post.excerpt),
|
||||
alternates: { canonical: absoluteUrl(`/blog/${post.slug}`) },
|
||||
openGraph: {
|
||||
type: 'article',
|
||||
title: String(post.title),
|
||||
description: String(post.excerpt),
|
||||
url: absoluteUrl(`/blog/${post.slug}`),
|
||||
publishedTime: String(post.publishedAt),
|
||||
// A post with a hero image shares that; one without falls through to the
|
||||
// generated share card at app/opengraph-image.tsx.
|
||||
...(hero?.url ? { images: [{ url: hero.url }] } : {}),
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default async function PostPage(
|
||||
{ params }: { params: Promise<{ slug: string }> },
|
||||
) {
|
||||
const { slug } = await params;
|
||||
const post = await findPost(slug);
|
||||
if (!post) notFound();
|
||||
|
||||
const summary = summarise(post as Record<string, unknown>);
|
||||
const hero = post.heroImage as HeroImage | null | undefined;
|
||||
|
||||
const jsonLd = {
|
||||
'@context': 'https://schema.org',
|
||||
'@graph': [
|
||||
blogPostingJsonLd(summary),
|
||||
breadcrumbJsonLd(summary),
|
||||
personJsonLd(),
|
||||
organizationJsonLd(),
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<article className={styles.page}>
|
||||
<script
|
||||
type="application/ld+json"
|
||||
dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
|
||||
/>
|
||||
|
||||
<nav className={styles.crumb}>
|
||||
<Link href="/blog" className={styles.link}>Blog</Link>
|
||||
</nav>
|
||||
|
||||
<h1 className={styles.heading}>{summary.title}</h1>
|
||||
|
||||
<p className={styles.byline}>
|
||||
By <Link href="/about" className={styles.link}>Tudor</Link>
|
||||
{' · '}
|
||||
<time dateTime={summary.publishedAt}>
|
||||
{new Date(summary.publishedAt).toLocaleDateString('en-GB', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
})}
|
||||
</time>
|
||||
</p>
|
||||
|
||||
{/*
|
||||
A plain <img>, not next/image: Payload already generated the sized
|
||||
derivatives on upload (Media's imageSizes), so routing it through the
|
||||
optimizer would resize an image that is already the right size.
|
||||
*/}
|
||||
{hero?.url && (
|
||||
<img
|
||||
className={styles.hero}
|
||||
src={hero.url}
|
||||
alt={hero.alt ?? ''}
|
||||
width={hero.width ?? undefined}
|
||||
height={hero.height ?? undefined}
|
||||
/>
|
||||
)}
|
||||
|
||||
<div className={styles.prose}>
|
||||
<RichText data={post.content as never} converters={calloutConverters} />
|
||||
</div>
|
||||
</article>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
import type { Metadata } from 'next';
|
||||
import Link from 'next/link';
|
||||
import { getCachedPayload } from '@/lib/payload';
|
||||
import { absoluteUrl } from '@/lib/site';
|
||||
import styles from './Blog.module.css';
|
||||
|
||||
/*
|
||||
* Dynamic, not ISR.
|
||||
*
|
||||
* This route has no dynamic params, so Next prerenders it at build time — and
|
||||
* CI builds the image with no database reachable, which fails the build. It is
|
||||
* a single indexed query against Postgres on the same Docker network, so
|
||||
* rendering per request is cheap, and it means a newly published post appears
|
||||
* here immediately rather than waiting on a revalidation.
|
||||
*/
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: 'Blog',
|
||||
description:
|
||||
'Notes on what school performance data shows, and what it does not.',
|
||||
alternates: { canonical: absoluteUrl('/blog') },
|
||||
};
|
||||
|
||||
function formatDate(value: string) {
|
||||
return new Date(value).toLocaleDateString('en-GB', {
|
||||
day: 'numeric',
|
||||
month: 'long',
|
||||
year: 'numeric',
|
||||
});
|
||||
}
|
||||
|
||||
export default async function BlogIndexPage() {
|
||||
const payload = await getCachedPayload();
|
||||
const { docs } = await payload.find({
|
||||
collection: 'posts',
|
||||
where: { _status: { equals: 'published' } },
|
||||
sort: '-publishedAt',
|
||||
limit: 50,
|
||||
depth: 0,
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={styles.page}>
|
||||
<header className={styles.header}>
|
||||
<p className={styles.kicker}>Blog</p>
|
||||
<h1 className={styles.heading}>Notes on the numbers</h1>
|
||||
<p className={styles.standfirst}>
|
||||
What school performance data shows, what it doesn't, and how to
|
||||
read it without being misled. Written by{' '}
|
||||
<Link href="/about" className={styles.link}>Tudor</Link>.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{docs.length === 0 ? (
|
||||
<p className={styles.empty}>No posts yet.</p>
|
||||
) : (
|
||||
<ul className={styles.list}>
|
||||
{docs.map((post) => (
|
||||
<li key={post.id} className={styles.item}>
|
||||
<time className={styles.date} dateTime={String(post.publishedAt)}>
|
||||
{formatDate(String(post.publishedAt))}
|
||||
</time>
|
||||
<h2 className={styles.itemTitle}>
|
||||
<Link href={`/blog/${post.slug}`} className={styles.itemLink}>
|
||||
{post.title}
|
||||
</Link>
|
||||
</h2>
|
||||
<p className={styles.excerpt}>{post.excerpt}</p>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
import { getCachedPayload } from '@/lib/payload';
|
||||
import { absoluteUrl } from '@/lib/site';
|
||||
|
||||
/*
|
||||
* Dynamic, not ISR.
|
||||
*
|
||||
* This route has no dynamic params, so Next prerenders it at build time — and
|
||||
* CI builds the image with no database reachable, which fails the build. It is
|
||||
* a single indexed query against Postgres on the same Docker network, so
|
||||
* rendering per request is cheap, and it means a newly published post appears
|
||||
* here immediately rather than waiting on a revalidation.
|
||||
*/
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
function escapeXml(value: string): string {
|
||||
return value.replace(/[<>&'"]/g, (char) =>
|
||||
({ '<': '<', '>': '>', '&': '&', "'": ''', '"': '"' }[char]!));
|
||||
}
|
||||
|
||||
export async function GET() {
|
||||
const payload = await getCachedPayload();
|
||||
const { docs } = await payload.find({
|
||||
collection: 'posts',
|
||||
where: { _status: { equals: 'published' } },
|
||||
sort: '-publishedAt',
|
||||
limit: 50,
|
||||
depth: 0,
|
||||
});
|
||||
|
||||
const items = docs.map((post) => `
|
||||
<item>
|
||||
<title>${escapeXml(String(post.title))}</title>
|
||||
<link>${absoluteUrl(`/blog/${post.slug}`)}</link>
|
||||
<guid isPermaLink="true">${absoluteUrl(`/blog/${post.slug}`)}</guid>
|
||||
<description>${escapeXml(String(post.excerpt))}</description>
|
||||
<pubDate>${new Date(String(post.publishedAt)).toUTCString()}</pubDate>
|
||||
</item>`).join('');
|
||||
|
||||
const xml = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<rss version="2.0">
|
||||
<channel>
|
||||
<title>schoolcompare blog</title>
|
||||
<link>${absoluteUrl('/blog')}</link>
|
||||
<description>What school performance data shows, and what it does not.</description>
|
||||
<language>en-GB</language>${items}
|
||||
</channel>
|
||||
</rss>`;
|
||||
|
||||
return new Response(xml, {
|
||||
headers: { 'Content-Type': 'application/rss+xml; charset=utf-8' },
|
||||
});
|
||||
}
|
||||
@@ -0,0 +1,52 @@
|
||||
/*
|
||||
* A second sitemap for the URLs Next owns.
|
||||
*
|
||||
* /sitemap.xml is proxied from FastAPI (app/(frontend)/sitemap.xml), which
|
||||
* knows nothing about Payload — the backend and frontend ship as separate
|
||||
* images. Rather than teach it, the Next-owned URLs get their own sitemap and
|
||||
* robots.txt lists both.
|
||||
*/
|
||||
import { getCachedPayload } from '@/lib/payload';
|
||||
import { absoluteUrl } from '@/lib/site';
|
||||
|
||||
/*
|
||||
* Dynamic, not ISR.
|
||||
*
|
||||
* This route has no dynamic params, so Next prerenders it at build time — and
|
||||
* CI builds the image with no database reachable, which fails the build. It is
|
||||
* a single indexed query against Postgres on the same Docker network, so
|
||||
* rendering per request is cheap, and it means a newly published post appears
|
||||
* here immediately rather than waiting on a revalidation.
|
||||
*/
|
||||
export const dynamic = 'force-dynamic';
|
||||
|
||||
export async function GET() {
|
||||
const payload = await getCachedPayload();
|
||||
const { docs } = await payload.find({
|
||||
collection: 'posts',
|
||||
where: { _status: { equals: 'published' } },
|
||||
sort: '-publishedAt',
|
||||
limit: 500,
|
||||
depth: 0,
|
||||
});
|
||||
|
||||
const urls: Array<{ loc: string; lastmod: string | null }> = [
|
||||
{ loc: absoluteUrl('/about'), lastmod: null },
|
||||
{ loc: absoluteUrl('/blog'), lastmod: null },
|
||||
...docs.map((post) => ({
|
||||
loc: absoluteUrl(`/blog/${post.slug}`),
|
||||
lastmod: new Date(String(post.updatedAt ?? post.publishedAt)).toISOString(),
|
||||
})),
|
||||
];
|
||||
|
||||
const xml = `<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
${urls.map(({ loc, lastmod }) =>
|
||||
` <url><loc>${loc}</loc>${lastmod ? `<lastmod>${lastmod}</lastmod>` : ''}</url>`,
|
||||
).join('\n')}
|
||||
</urlset>`;
|
||||
|
||||
return new Response(xml, {
|
||||
headers: { 'Content-Type': 'application/xml; charset=utf-8' },
|
||||
});
|
||||
}
|
||||
@@ -17,6 +17,9 @@ export default function robots(): MetadataRoute.Robots {
|
||||
disallow: ['/api/', '/_next/', '/admin/', '/cms-api/'],
|
||||
},
|
||||
],
|
||||
sitemap: absoluteUrl('/sitemap.xml'),
|
||||
// Two sitemaps: /sitemap.xml is proxied from FastAPI and carries the
|
||||
// school corpus; /content-sitemap.xml is Next-owned and carries /about
|
||||
// and the blog. The backend knows nothing about Payload.
|
||||
sitemap: [absoluteUrl('/sitemap.xml'), absoluteUrl('/content-sitemap.xml')],
|
||||
};
|
||||
}
|
||||
@@ -4,21 +4,22 @@ import { lexicalEditor, BlocksFeature } from '@payloadcms/richtext-lexical';
|
||||
import { Callout } from '@/blocks/Callout';
|
||||
|
||||
/**
|
||||
* Revalidate everything a post appears on.
|
||||
* Drop the cached copy of a post page when it changes.
|
||||
*
|
||||
* Blog pages are ISR: CI builds the image with no database reachable, so they
|
||||
* cannot be statically generated at build time. Without this, a published post
|
||||
* would not appear until the revalidate window expired — up to an hour of a
|
||||
* writer reasonably concluding that publishing is broken.
|
||||
* Only the post page needs this. The blog index, the RSS feed and the content
|
||||
* sitemap are force-dynamic — they have no dynamic params, so Next would
|
||||
* prerender them at build time, where CI has no database — which means they
|
||||
* already reflect a change on the next request.
|
||||
*
|
||||
* /blog/[slug] is ISR: generated on first request and cached, so without this
|
||||
* an edit to an already-published post would not appear until the revalidate
|
||||
* window expired — up to an hour of a writer concluding that saving is broken.
|
||||
*
|
||||
* Payload runs in the same process as Next, so this is a direct revalidatePath
|
||||
* call: no webhook, no shared secret, no network hop to get wrong.
|
||||
*/
|
||||
function revalidatePost(slug: string) {
|
||||
revalidatePath('/blog');
|
||||
revalidatePath(`/blog/${slug}`);
|
||||
revalidatePath('/content-sitemap.xml');
|
||||
revalidatePath('/blog/rss.xml');
|
||||
}
|
||||
|
||||
export const Posts: CollectionConfig = {
|
||||
|
||||
@@ -0,0 +1,21 @@
|
||||
.caveat,
|
||||
.note {
|
||||
border-left: 3px solid var(--brand);
|
||||
background: var(--brand-bg);
|
||||
padding: 1rem 1.15rem;
|
||||
margin: 1.75rem 0;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
|
||||
.note {
|
||||
border-left-color: var(--border-strong);
|
||||
background: var(--bg-secondary);
|
||||
}
|
||||
|
||||
.body {
|
||||
font-family: var(--font-ui);
|
||||
font-size: 0.95rem;
|
||||
line-height: 1.65;
|
||||
color: var(--text-primary);
|
||||
margin: 0;
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
import styles from './CalloutBlock.module.css';
|
||||
|
||||
/**
|
||||
* Renders the Callout block from blocks/Callout.ts. The "caveat" tone is the
|
||||
* one that matters: it is how a post says what a number does not show, in
|
||||
* context, rather than burying it in a closing paragraph.
|
||||
*/
|
||||
export function CalloutBlock({ tone, body }: { tone: string; body: string }) {
|
||||
return (
|
||||
<aside className={tone === 'caveat' ? styles.caveat : styles.note}>
|
||||
<p className={styles.body}>{body}</p>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
@@ -32,3 +32,47 @@ export function organizationJsonLd() {
|
||||
logo: absoluteUrl('/icon-512.png'),
|
||||
} as const;
|
||||
}
|
||||
|
||||
interface PostSummary {
|
||||
title: string;
|
||||
slug: string;
|
||||
excerpt: string;
|
||||
publishedAt: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* References the Person and Organization by @id rather than repeating them, so
|
||||
* search engines resolve every post and the About page to the one author
|
||||
* entity. Repeating the shape would declare several people with one name.
|
||||
*/
|
||||
export function blogPostingJsonLd(post: PostSummary) {
|
||||
return {
|
||||
'@type': 'BlogPosting',
|
||||
headline: post.title,
|
||||
description: post.excerpt,
|
||||
url: absoluteUrl(`/blog/${post.slug}`),
|
||||
datePublished: post.publishedAt,
|
||||
author: { '@id': `${SITE_URL}/about#tudor` },
|
||||
publisher: { '@id': `${SITE_URL}#organization` },
|
||||
} as const;
|
||||
}
|
||||
|
||||
export function breadcrumbJsonLd(post: PostSummary) {
|
||||
return {
|
||||
'@type': 'BreadcrumbList',
|
||||
itemListElement: [
|
||||
{
|
||||
'@type': 'ListItem',
|
||||
position: 1,
|
||||
name: 'Blog',
|
||||
item: absoluteUrl('/blog'),
|
||||
},
|
||||
{
|
||||
'@type': 'ListItem',
|
||||
position: 2,
|
||||
name: post.title,
|
||||
item: absoluteUrl(`/blog/${post.slug}`),
|
||||
},
|
||||
],
|
||||
} as const;
|
||||
}
|
||||
Reference in new issue
Block a user