astro-theme-popular 0.3.0

package/src/components/EventRow.astro

@@ -0,0 +1,59 @@
+---
+import { SITE, STRINGS } from 'popular:config';
+import type { CollectionEntry } from 'astro:content';
+import { getCollection } from 'astro:content';
+
+interface Props { event: CollectionEntry<'events'> }
+const { event } = Astro.props;
+const d = event.data;
+
+/* Venue: a venueRef to the venues collection wins over the flat fields. */
+const venuePage = d.venueRef ? (await getCollection('venues')).find((v) => v.id === d.venueRef) : undefined;
+if (d.venueRef && !venuePage) console.warn(`events/${event.id}: venueRef "${d.venueRef}" matches no venue page`);
+const venueName = venuePage?.data.title ?? d.venue;
+const venueAddress = venuePage?.data.address ?? (venuePage ? undefined : d.address);
+const tbd = d.venueWanted || !venueName;
+
+/* Speaker line: resolved speaker-profile names, falling back to the string. */
+const allSpeakers = d.speakers.length ? await getCollection('speakers') : [];
+const names = d.speakers.map((slug) => {
+  const found = allSpeakers.find((s) => s.id === slug);
+  if (!found) console.warn(`events/${event.id}: speaker "${slug}" matches no speaker page`);
+  return found?.data.title;
+}).filter(Boolean);
+const speakerLine = names.length ? names.join(', ') : d.speaker;
+
+const dow = d.date.toLocaleDateString(SITE.locale, { weekday: 'short' });
+const day = d.date.toLocaleDateString(SITE.locale, { month: 'short', day: 'numeric' });
+---
+
+<div class="g-event">
+  <div class="g-event__date">
+    <span class="g-event__dow">{dow}</span>
+    <span class="g-event__day">{day}</span>
+    {d.time && <span class="g-event__time">{d.time}</span>}
+  </div>
+  <div class="g-event__body">
+    {d.tags.length > 0 && (
+      <div class="g-card__footer" style="padding-top:0">
+        {d.tags.map((t) => <span class="g-tag">{t}</span>)}
+      </div>
+    )}
+    <h3><a href={`/events/${event.id}/`} style="color:inherit">{d.title}</a></h3>
+    {d.description && <p>{d.description}</p>}
+    <div class="g-event__meta">
+      <i class="fa-solid fa-location-dot" aria-hidden="true"></i>{venueName ?? STRINGS.venueTba}{venueAddress && ` · ${venueAddress}`}
+    </div>
+    {speakerLine && (
+      <div class="g-event__meta"><i class="fa-solid fa-microphone-lines" aria-hidden="true"></i>{speakerLine}</div>
+    )}
+  </div>
+  <div class="g-event__aside">
+    {tbd
+      ? <span class="g-badge g-badge--warning g-badge--soft">{STRINGS.venueWanted}</span>
+      : <span class="g-badge g-badge--success g-badge--soft">{STRINGS.confirmed}</span>}
+    {d.rsvp && (
+      <a class="g-btn g-btn--primary g-btn--sm" href={d.rsvp}><i class="fa-solid fa-calendar" aria-hidden="true"></i>{STRINGS.rsvp}</a>
+    )}
+  </div>
+</div>

package/src/components/Footer.astro

@@ -0,0 +1,42 @@
+---
+import { SITE, FOOTER, SOCIAL } from 'popular:config';
+const year = new Date().getFullYear();
+const credit = (FOOTER as { credit?: { label: string; url: string } }).credit;
+---
+
+<footer class="g-footer">
+  <div class="g-container g-footer__top">
+    <div class="g-footer__brand">
+      {SITE.logo && <img src={SITE.logo} alt={SITE.title} />}
+      {SITE.landAcknowledgement && <p class="g-footer__ack">{SITE.landAcknowledgement}</p>}
+      {SOCIAL.length > 0 && (
+        <div style="display:flex;gap:0.5rem;margin-top:0.25rem">
+          {SOCIAL.map((s) => (
+            <a class="g-social" href={s.url} aria-label={s.label} rel="me noopener" target="_blank">
+              <i class={s.icon} aria-hidden="true"></i>
+            </a>
+          ))}
+        </div>
+      )}
+    </div>
+
+    {FOOTER.columns.map((col) => (
+      <div class="g-footer__col">
+        <div class="g-footer__col-title">{col.title}</div>
+        <ul>
+          {col.links.map((l) => (
+            <li><a href={l.href}>{l.label}</a></li>
+          ))}
+        </ul>
+      </div>
+    ))}
+  </div>
+
+  <div class="g-footer__bottom">
+    <div class="g-container">
+      <span>© {year} {SITE.title}</span>
+      {credit && <span><a href={credit.url} rel="noopener">{credit.label}</a></span>}
+      {FOOTER.tagline && <span>{FOOTER.tagline}</span>}
+    </div>
+  </div>
+</footer>

package/src/components/Header.astro

@@ -0,0 +1,49 @@
+---
+import { SITE, NAV, CTA, STRINGS } from 'popular:config';
+const path = Astro.url.pathname;
+const isActive = (href: string) => href !== '/' && path.startsWith(href.replace(/\/$/, ''));
+---
+
+<header class="g-header">
+  <nav class="g-container g-nav" aria-label={STRINGS.primaryNav}>
+    <a class="g-brand" href="/">
+      {SITE.logo && <img src={SITE.logo} alt={SITE.title} />}
+      <span class="g-brand__text">
+        <span class="g-brand__name">{SITE.brandName ?? SITE.title}</span>
+        {SITE.brandSub && <span class="g-brand__sub">{SITE.brandSub}</span>}
+      </span>
+    </a>
+
+    <button class="g-nav__toggle" aria-label={STRINGS.toggleMenu} aria-expanded="false">
+      <i class="fa-solid fa-bars" aria-hidden="true"></i>
+    </button>
+
+    <ul class="g-navlinks">
+      {NAV.map((l) =>
+        l.children?.length ? (
+          <li class="has-sub">
+            <a
+              href={l.href}
+              class={isActive(l.href) || l.children.some((c) => isActive(c.href)) ? 'is-active' : ''}
+            >
+              {l.label}<i class="fa-solid fa-chevron-down g-navlinks__caret" aria-hidden="true"></i>
+            </a>
+            <ul class="g-navlinks__sub">
+              {l.children.map((c) => (
+                <li><a href={c.href} class={isActive(c.href) ? 'is-active' : ''}>{c.label}</a></li>
+              ))}
+            </ul>
+          </li>
+        ) : (
+          <li><a href={l.href} class={isActive(l.href) ? 'is-active' : ''}>{l.label}</a></li>
+        )
+      )}
+    </ul>
+
+    {CTA && (
+      <a class="g-btn g-btn--primary g-btn--sm g-nav__cta" href={CTA.url}>
+        {CTA.icon && <i class={CTA.icon} aria-hidden="true"></i>}{CTA.label}
+      </a>
+    )}
+  </nav>
+</header>

package/src/components/OrganizerCard.astro

@@ -0,0 +1,21 @@
+---
+import type { CollectionEntry } from 'astro:content';
+
+interface Props { organizer: CollectionEntry<'organizers'> }
+const { organizer } = Astro.props;
+const d = organizer.data;
+---
+
+<div class="g-org">
+  {d.photo && <img class="g-org__img" src={d.photo} alt={d.title} loading="lazy" />}
+  <div class="g-org__name">{d.title}</div>
+  {d.role && <div class="g-org__role">{d.role}</div>}
+  {d.description && <p class="g-org__bio">{d.description}</p>}
+  {d.social.length > 0 && (
+    <div class="g-persona__socials">
+      {d.social.map((s) => (
+        <a href={s.url} aria-label={s.label} rel="noopener" target="_blank"><i class={s.icon} aria-hidden="true"></i></a>
+      ))}
+    </div>
+  )}
+</div>

package/src/components/PageHero.astro

@@ -0,0 +1,19 @@
+---
+interface Props {
+  eyebrow?: string;
+  title: string;
+  lead?: string;
+}
+const { eyebrow, title, lead } = Astro.props;
+---
+
+<header class="g-pagehero">
+  <div class="g-container">
+    {eyebrow && <span class="g-eyebrow">{eyebrow}</span>}
+    <h1>{title}</h1>
+    {lead && <p class="g-pagehero__lead">{lead}</p>}
+    {Astro.slots.has('default') && (
+      <div class="g-row" style="margin-top:var(--space-4)"><slot /></div>
+    )}
+  </div>
+</header>

package/src/components/Pagination.astro

@@ -0,0 +1,35 @@
+---
+/* Pager for paginated lists. Mirrors the Hugo theme's
+   layouts/partials/pagination.html (see PARITY.md).
+   `base` is the section's root URL ("/blog/"); page 1 links to the base
+   itself, page N to `${base}page/N/`, matching Hugo's paginator URLs.
+   Renders nothing when everything fits on one page. */
+import { STRINGS } from 'popular:config';
+
+interface Props {
+  current: number;
+  total: number;
+  base: string;
+}
+const { current, total, base } = Astro.props;
+const url = (n: number) => (n === 1 ? base : `${base}page/${n}/`);
+const pages = Array.from({ length: total }, (_, i) => i + 1);
+---
+
+{total > 1 && (
+  <nav class="g-pager" aria-label={STRINGS.paginationLabel}>
+    {current > 1 && (
+      <a class="g-pager__nav" href={url(current - 1)} rel="prev"><i class="fa-solid fa-chevron-left" aria-hidden="true"></i>{STRINGS.paginationPrev}</a>
+    )}
+    {pages.map((n) =>
+      n === current ? (
+        <span class="g-pager__num is-active" aria-current="page">{n}</span>
+      ) : (
+        <a class="g-pager__num" href={url(n)}>{n}</a>
+      )
+    )}
+    {current < total && (
+      <a class="g-pager__nav" href={url(current + 1)} rel="next">{STRINGS.paginationNext}<i class="fa-solid fa-chevron-right" aria-hidden="true"></i></a>
+    )}
+  </nav>
+)}

package/src/components/PostCard.astro

@@ -0,0 +1,36 @@
+---
+import { SITE } from 'popular:config';
+import { tagSlug } from '../lib/slugs';
+import type { CollectionEntry } from 'astro:content';
+import { getCollection } from 'astro:content';
+
+interface Props { post: CollectionEntry<'blog'> }
+const { post } = Astro.props;
+const d = post.data;
+const href = `/blog/${post.id}/`;
+const month = d.date.toLocaleDateString(SITE.locale, { month: 'short', year: 'numeric' });
+const allAuthors = await getCollection('authors');
+const names = [
+  ...d.authors.map((slug) => allAuthors.find((a) => a.id === slug)?.data.title ?? slug),
+  ...d.guestAuthors.map((g) => g.name),
+];
+if (!names.length && d.author) names.push(d.author);
+---
+
+<article class="g-card" data-tags={d.tags.join(',')}>
+  {d.image && (
+    <a href={href} class="g-card__media"><img src={d.image} alt={d.title} loading="lazy" /></a>
+  )}
+  <div class="g-card__body">
+    <span class="g-card__eyebrow">{month}{names.length > 0 && ` · ${names.join(', ')}`}</span>
+    <h3 class="g-card__title"><a href={href}>{d.title}</a></h3>
+    {d.description && <div class="g-card__text">{d.description}</div>}
+    {d.tags.length > 0 && (
+      <div class="g-card__footer">
+        {d.tags.slice(0, 2).map((t) => (
+          <a class="g-tag" href={`/tags/${tagSlug(t)}/`}>{t}</a>
+        ))}
+      </div>
+    )}
+  </div>
+</article>

package/src/layouts/BaseLayout.astro

@@ -0,0 +1,102 @@
+---
+/** Popular: base layout: head, brand token overrides, header, footer, shared JS. */
+import '../styles/tokens/fonts.css';
+import '../styles/tokens/colors.css';
+import '../styles/tokens/typography.css';
+import '../styles/tokens/spacing.css';
+import '../styles/tokens/elevation.css';
+import '../styles/base.css';
+import '../styles/components.css';
+import Header from '../components/Header.astro';
+import Footer from '../components/Footer.astro';
+import DemoBar from '../components/DemoBar.astro';
+import { SITE, BRAND, STRINGS } from 'popular:config';
+
+interface Props {
+  title?: string;
+  description?: string;
+  image?: string;
+  /** Set on blog posts: emits og:type=article plus article meta. */
+  article?: { published?: Date; modified?: Date; authors?: string[]; tags?: string[] };
+}
+const { title, description, image, article } = Astro.props;
+const pageTitle = title ? `${title} · ${SITE.title}` : `${SITE.title}, ${SITE.tagline}`;
+const desc = description ?? SITE.description;
+const ogImage = image ?? SITE.ogImage;
+const canonical = new URL(Astro.url.pathname, Astro.site ?? Astro.url);
+
+/* Brand overrides: mirrors the Hugo theme's brand-vars.html partial. */
+const vars: string[] = [];
+const b = BRAND;
+if (b.primary) {
+  vars.push(`--color-primary:${b.primary}`, `--gold-500:${b.primary}`);
+  vars.push(`--gold-50:color-mix(in srgb, ${b.primary} 7%, #fff)`);
+  vars.push(`--gold-100:color-mix(in srgb, ${b.primary} 20%, #fff)`);
+  vars.push(`--gold-300:color-mix(in srgb, ${b.primary} 55%, #fff)`);
+}
+if (b.primaryHover) vars.push(`--color-primary-hover:${b.primaryHover}`);
+if (b.primaryActive) vars.push(`--color-primary-active:${b.primaryActive}`, `--gold-700:${b.primaryActive}`, `--text-link:${b.primaryActive}`);
+if (b.link) vars.push(`--text-link:${b.link}`);
+if (b.linkHover) vars.push(`--text-link-hover:${b.linkHover}`);
+if (b.secondary) vars.push(`--color-secondary:${b.secondary}`);
+if (b.accent) vars.push(`--color-accent:${b.accent}`, `--indigo-500:${b.accent}`);
+if (b.accentHover) vars.push(`--color-accent-hover:${b.accentHover}`);
+if (b.ink) vars.push(`--ink-800:${b.ink}`, `--text-strong:${b.ink}`);
+if (b.surfaceWash) vars.push(`--surface-wash:${b.surfaceWash}`);
+if (b.surfaceWashSoft) vars.push(`--surface-wash-soft:${b.surfaceWashSoft}`);
+if (b.surfaceInk) vars.push(`--surface-ink:${b.surfaceInk}`);
+/* Dark-palette keys: page/card surfaces, body text, borders, and the text
+   color on filled buttons. Setting these lets a site run on a dark background. */
+if (b.surfacePage) vars.push(`--surface-page:${b.surfacePage}`);
+if (b.surfaceCard) vars.push(`--surface-card:${b.surfaceCard}`);
+if (b.surfaceTertiary) vars.push(`--surface-tertiary:${b.surfaceTertiary}`);
+if (b.textBody) vars.push(`--text-body:${b.textBody}`, `--ink-700:${b.textBody}`);
+if (b.textMuted) vars.push(`--text-muted:${b.textMuted}`, `--ink-500:${b.textMuted}`);
+if (b.textOnBrand) vars.push(`--text-on-brand:${b.textOnBrand}`);
+if (b.borderSubtle) vars.push(`--border-subtle:${b.borderSubtle}`, `--border-default:${b.borderSubtle}`);
+if (b.fontSans) vars.push(`--font-sans:${b.fontSans}`);
+if (b.fontDisplay) vars.push(`--font-display:${b.fontDisplay}`);
+if (b.radiusCard) vars.push(`--radius-xl:${b.radiusCard}`);
+if (b.containerMax) vars.push(`--container-max:${b.containerMax}`);
+/* html:root outranks the token files' :root so the override wins regardless of
+   where Astro injects the bundled stylesheet in <head>. */
+const brandCss = `html:root{${vars.join(';')}}`;
+---
+
+<!DOCTYPE html>
+<html lang={SITE.locale}>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>{pageTitle}</title>
+    <meta name="description" content={desc} />
+    <meta property="og:site_name" content={SITE.title} />
+    <meta property="og:title" content={title ?? SITE.title} />
+    <meta property="og:description" content={desc} />
+    <meta property="og:url" content={canonical} />
+    <link rel="canonical" href={canonical} />
+    <meta property="og:type" content={article ? 'article' : 'website'} />
+    {article?.published && <meta property="article:published_time" content={article.published.toISOString()} />}
+    {article?.modified && <meta property="article:modified_time" content={article.modified.toISOString()} />}
+    {article?.authors?.map((a) => <meta property="article:author" content={a} />)}
+    {article?.tags?.map((t) => <meta property="article:tag" content={t} />)}
+    {ogImage && <meta property="og:image" content={new URL(ogImage, Astro.site ?? Astro.url)} />}
+    <meta name="twitter:card" content={ogImage ? 'summary_large_image' : 'summary'} />
+    <link rel="icon" href={SITE.favicon ?? SITE.logo} />
+    <link rel="alternate" type="application/rss+xml" title={(SITE as Record<string, any>).rssTitle ?? SITE.title} href={new URL("rss.xml", Astro.site ?? Astro.url)} />
+    <link rel="stylesheet" href={SITE.fontAwesome} referrerpolicy="no-referrer"
+      integrity={SITE.fontAwesome.includes("font-awesome/6.5.2/css/all.min.css") ? "sha384-PPIZEGYM1v8zp5Py7UjFb79S58UeqCL9pYVnVPURKEqvioPROaVAJKKLzvH2rDnI" : undefined}
+      crossorigin={SITE.fontAwesome.includes("font-awesome/6.5.2/css/all.min.css") ? "anonymous" : undefined} />
+    {(SITE as Record<string, any>).customCSS?.map((href: string) => <link rel="stylesheet" href={href} />)}
+    <style is:inline id="popular-brand" set:html={brandCss}></style>
+  </head>
+  <body data-copy-label={STRINGS.copyCode} data-checklist-done={STRINGS.checklistDone}>
+    <a class="g-skip" href="#main">{STRINGS.skipToContent}</a>
+    <Header />
+    <main id="main">
+      <slot />
+    </main>
+    <Footer />
+    <DemoBar />
+  </body>
+</html>

package/src/lib/slugs.ts

@@ -0,0 +1,10 @@
+/** Slugify a tag the way Hugo urlizes taxonomy terms, so both theme
+    implementations generate the same tag URLs (see PARITY.md).
+    Display labels keep the tag's first-seen spelling; only URLs use this. */
+export function tagSlug(tag: string): string {
+  return tag
+    .toLowerCase()
+    .replace(/['"]/g, '')
+    .replace(/[^\p{L}\p{N}]+/gu, '-')
+    .replace(/^-+|-+$/g, '');
+}

package/src/pages/[slug].astro

@@ -0,0 +1,62 @@
+---
+import { STRINGS } from 'popular:config';
+/** Root-level content pages: prose pages (about, code-of-conduct, get-involved)
+ *  and docs pages (handbook, runbooks, rendered with a scroll-spy TOC). */
+import { getCollection, render } from 'astro:content';
+import BaseLayout from '../layouts/BaseLayout.astro';
+import PageHero from '../components/PageHero.astro';
+
+export async function getStaticPaths() {
+  const pages = await getCollection('pages');
+  const docs = await getCollection('docs');
+  return [
+    ...pages.map((entry) => ({ params: { slug: entry.id }, props: { entry, kind: 'page' } })),
+    ...docs.map((entry) => ({ params: { slug: entry.id }, props: { entry, kind: 'doc' } })),
+  ];
+}
+
+const { entry, kind } = Astro.props;
+const d = entry.data;
+const { Content, headings } = await render(entry);
+/* Current page's h2/h3 links nest under its sidebar entry, in document
+   order, mirroring the Hugo theme's docs/single.html. */
+const sections = headings.filter((h) => h.depth === 2 || h.depth === 3);
+const allDocs = (await getCollection('docs')).sort(
+  (a, b) => (a.data.weight ?? 100) - (b.data.weight ?? 100)
+);
+---
+
+<BaseLayout title={d.title} description={d.lead}>
+  <PageHero eyebrow={d.eyebrow} title={d.title} lead={d.lead} />
+
+  {kind === 'doc' ? (
+    <div class="g-container g-doc">
+      <nav class="g-doc-toc" aria-label={STRINGS.eyebrowDocs}>
+        <div class="g-doc-toc__label">{STRINGS.eyebrowDocs}</div>
+        {allDocs.map((e) => (
+          <>
+            <a
+              href={`/${e.id}/`}
+              class={e.id === entry.id ? 'is-active' : ''}
+              aria-current={e.id === entry.id ? 'page' : undefined}
+            >{e.data.title}</a>
+            {e.id === entry.id && sections.map((h) => (
+              <a href={`#${h.slug}`} style={`padding-left:${h.depth === 2 ? '1.35rem' : '2rem'};font-size:var(--text-xs)`}>{h.text}</a>
+            ))}
+          </>
+        ))}
+      </nav>
+      <div class="g-doc__content g-prose">
+        <Content />
+      </div>
+    </div>
+  ) : (
+    <section class="g-bg-white g-section">
+      <div class="g-container">
+        <div class="g-article g-prose">
+          <Content />
+        </div>
+      </div>
+    </section>
+  )}
+</BaseLayout>

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

@@ -0,0 +1,39 @@
+---
+import { STRINGS } from 'popular:config';
+import { getCollection, render } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import PageHero from '../../components/PageHero.astro';
+import AuthorBox from '../../components/AuthorBox.astro';
+import PostCard from '../../components/PostCard.astro';
+
+export async function getStaticPaths() {
+  const authors = await getCollection('authors');
+  return authors.map((entry) => ({ params: { slug: entry.id }, props: { entry } }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await render(entry);
+const posts = (await getCollection('blog'))
+  .filter((p) => !p.data.draft && p.data.authors.includes(entry.id))
+  .sort((a, b) => +b.data.date - +a.data.date);
+---
+
+<BaseLayout title={entry.data.title} description={entry.data.bio}>
+  <PageHero eyebrow={STRINGS.eyebrowAuthor} title={entry.data.title} lead={entry.data.bio} />
+  <section class="g-bg-white g-section">
+    <div class="g-container">
+      <div class="g-article" style="margin-bottom:var(--space-5)">
+        <AuthorBox entry={entry} />
+        <div class="g-prose" style="margin-top:var(--space-4)"><Content /></div>
+      </div>
+      {posts.length > 0 && (
+        <>
+          <div class="g-section-head"><span class="g-eyebrow">{STRINGS.posts}</span><h2>{STRINGS.writtenBy.replace('{name}', entry.data.title)}</h2></div>
+          <div class="g-grid-3" style="margin-top:var(--space-4)">
+            {posts.map((p) => <PostCard post={p} />)}
+          </div>
+        </>
+      )}
+    </div>
+  </section>
+</BaseLayout>

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

@@ -0,0 +1,52 @@
+---
+import { getCollection } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import PageHero from '../../components/PageHero.astro';
+import PostCard from '../../components/PostCard.astro';
+import Pagination from '../../components/Pagination.astro';
+import { SECTIONS, STRINGS, PAGINATION } from 'popular:config';
+
+/* One route serves /blog/ and /blog/page/N/, matching the Hugo theme's
+   paginator URLs. /blog/<slug> still goes to [slug].astro: named params
+   take priority over rest params. */
+export async function getStaticPaths() {
+  const posts = (await getCollection('blog')).filter((p) => !p.data.draft).sort((a, b) => +b.data.date - +a.data.date);
+  const size = PAGINATION.pageSize;
+  const total = Math.max(1, Math.ceil(posts.length / size));
+  const tags = [...new Set(posts.flatMap((p) => p.data.tags))];
+  return Array.from({ length: total }, (_, i) => ({
+    params: { page: i === 0 ? undefined : `page/${i + 1}` },
+    props: { current: i + 1, total, posts: posts.slice(i * size, (i + 1) * size), tags },
+  }));
+}
+
+const { current, total, posts, tags } = Astro.props;
+---
+
+<BaseLayout title="Blog">
+  <PageHero
+    eyebrow={SECTIONS.blog.eyebrow}
+    title={SECTIONS.blog.title}
+    lead={SECTIONS.blog.lead}
+  />
+  <section class="g-bg-white g-section">
+    <div class="g-container">
+      <div class="g-row" style="justify-content:space-between;align-items:center;margin-bottom:var(--space-5)">
+        <div class="g-row" data-filterbar>
+          {tags.length > 0 && (
+            <>
+              <span style="font-size:var(--text-sm);color:var(--text-muted)">{STRINGS.filterLabel}</span>
+              <button class="g-filter is-active" data-filter="*">{STRINGS.filterAll}</button>
+              {tags.map((t) => <button class="g-filter" data-filter={t}>#{t}</button>)}
+            </>
+          )}
+        </div>
+        <a class="g-btn g-btn--ghost g-btn--sm" href="/rss.xml" title={STRINGS.subscribeRssTitle}><i class="fa-solid fa-rss" aria-hidden="true"></i> {STRINGS.subscribeRss}</a>
+      </div>
+      <div class="g-grid-3">
+        {posts.map((p) => <PostCard post={p} />)}
+      </div>
+      <Pagination current={current} total={total} base="/blog/" />
+    </div>
+  </section>
+</BaseLayout>

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

@@ -0,0 +1,122 @@
+---
+import { getCollection, render } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import AuthorBox from '../../components/AuthorBox.astro';
+import { SUPPORT, SITE, STRINGS } from 'popular:config';
+import { tagSlug } from '../../lib/slugs';
+
+export async function getStaticPaths() {
+  const posts = (await getCollection('blog')).filter((p) => !p.data.draft);
+  /* PARITY.md pins the ordering: date desc, then title, then id, matching
+     Hugo's section order (posts must not set weight). next = newer. */
+  const cmp = (x: string, y: string) => (x < y ? -1 : x > y ? 1 : 0);
+  const sorted = [...posts].sort(
+    (a, b) => +b.data.date - +a.data.date || cmp(a.data.title, b.data.title) || cmp(a.id, b.id),
+  );
+  return sorted.map((post, i) => ({
+    params: { slug: post.id },
+    props: { post, newer: sorted[i - 1], older: sorted[i + 1] },
+  }));
+}
+
+const { post, newer, older } = Astro.props;
+const d = post.data;
+const { Content } = await render(post);
+const dateStr = d.date.toLocaleDateString(SITE.locale, { month: 'short', day: 'numeric', year: 'numeric' });
+
+const allAuthors = await getCollection('authors');
+const resolved = d.authors.map((slug) => allAuthors.find((a) => a.id === slug)).filter(Boolean);
+const bylineNames = [
+  ...d.authors.map((slug) => allAuthors.find((a) => a.id === slug)?.data.title ?? slug),
+  ...d.guestAuthors.map((g) => g.name),
+];
+if (!bylineNames.length && d.author) bylineNames.push(d.author);
+const byline = bylineNames.length > 1
+  ? bylineNames.slice(0, -1).join(STRINGS.listSeparator) + STRINGS.listSeparatorFinal + bylineNames[bylineNames.length - 1]
+  : bylineNames.join('');
+---
+
+<BaseLayout title={d.title} description={d.description} image={d.image} article={{ published: d.date, authors: bylineNames, tags: d.tags }}>
+  <article>
+    <header class="g-pagehero">
+      <div class="g-container" style="padding-block:var(--space-6) var(--space-5)">
+        <a href="/blog/" style="display:inline-flex;gap:.4rem;align-items:center;font-size:var(--text-sm);font-weight:var(--weight-medium);margin-bottom:1rem">
+          <i class="fa-solid fa-arrow-left" aria-hidden="true"></i> {STRINGS.allPosts}
+        </a>
+        {d.tags.length > 0 && (
+          <div class="g-row" style="margin-bottom:.8rem">
+            {d.tags.map((t) => <a class="g-tag" href={`/tags/${tagSlug(t)}/`}>{t}</a>)}
+          </div>
+        )}
+        <h1 style="margin:0">{d.title}</h1>
+        <p style="margin:.9rem 0 0;font-size:var(--text-sm);color:var(--ink-700)">
+          {byline && `${STRINGS.authorsBy} ${byline} · `}{dateStr}
+        </p>
+      </div>
+    </header>
+
+    <div class="g-container g-section--sm">
+     <div class="g-article">
+      {d.image && (
+        <div style="border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-md);margin-bottom:var(--space-5)">
+          <img src={d.image} alt={d.title} style="width:100%;aspect-ratio:16/9;object-fit:cover" />
+        </div>
+      )}
+
+      <div class="g-prose"><Content /></div>
+
+      {d.speaker && (
+        <>
+          <h2 style="font-size:var(--text-xl);margin:var(--space-5) 0 1rem">{STRINGS.ourSpeaker}</h2>
+          <div class="g-persona">
+            {d.speaker.photo && <img class="g-persona__img" src={d.speaker.photo} alt={d.speaker.name} />}
+            <div>
+              <div class="g-persona__name">{d.speaker.name}</div>
+              {d.speaker.title && <div class="g-persona__role">{d.speaker.title}</div>}
+              {d.speaker.bio && <p class="g-persona__bio">{d.speaker.bio}</p>}
+            </div>
+          </div>
+        </>
+      )}
+
+      {(resolved.length > 0 || d.guestAuthors.length > 0) && (
+        <>
+          <h2 style="font-size:var(--text-xl);margin:var(--space-5) 0 1rem">About the author{resolved.length + d.guestAuthors.length > 1 ? 's' : ''}</h2>
+          <div class="g-stack" style="gap:var(--space-3)">
+            {resolved.map((a) => <AuthorBox entry={a} />)}
+            {d.guestAuthors.map((g) => <AuthorBox guest={g} />)}
+          </div>
+        </>
+      )}
+
+      {(older || newer) && (
+        <nav class="g-postnav" aria-label={STRINGS.postNavigation}>
+          {older ? (
+            <a class="g-postnav__card" href={`/blog/${older.id}/`} rel="prev">
+              <span class="g-postnav__label"><i class="fa-solid fa-arrow-left" aria-hidden="true"></i> {STRINGS.olderPost}</span>
+              <span class="g-postnav__title">{older.data.title}</span>
+            </a>
+          ) : <span></span>}
+          {newer && (
+            <a class="g-postnav__card g-postnav__card--next" href={`/blog/${newer.id}/`} rel="next">
+              <span class="g-postnav__label">{STRINGS.newerPost} <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></span>
+              <span class="g-postnav__title">{newer.data.title}</span>
+            </a>
+          )}
+        </nav>
+      )}
+      {SUPPORT && (
+        <div class="g-callout" style="margin-top:var(--space-5);flex-direction:column;gap:.9rem">
+          <span class="g-badge g-badge--secondary g-badge--soft"><i class="fa-solid fa-heart" aria-hidden="true"></i> {SUPPORT.badge}</span>
+          <div class="g-callout__body">{SUPPORT.text}</div>
+          <div class="g-row">
+            {SUPPORT.ctas.map((c) => (
+              <a class={`g-btn g-btn--${c.variant ?? 'secondary'}`} href={c.url}>{c.label}</a>
+            ))}
+          </div>
+        </div>
+      )}
+     </div>
+    </div>
+  </article>
+</BaseLayout>