astro-theme-popular 0.5.0 → 0.6.0

package/index.mjs

@@ -13,6 +13,21 @@
  */
 import path from 'node:path';
 import { fileURLToPath } from 'node:url';
+import sitemap from '@astrojs/sitemap';
+
+/* loading="lazy" decoding="async" on markdown images (CWV parity with the
+   Hugo render hook). Dependency-free HAST walk. */
+function rehypeLazyImages() {
+  const walk = (node) => {
+    if (node.tagName === 'img') {
+      node.properties = node.properties || {};
+      if (!('loading' in node.properties)) node.properties.loading = 'lazy';
+      if (!('decoding' in node.properties)) node.properties.decoding = 'async';
+    }
+    (node.children || []).forEach(walk);
+  };
+  return (tree) => walk(tree);
+}
 
 /* Injected routes, grouped by opt-out key: popular({ routes: { speakers:
    false } }) skips a group. Disabling is also the durable answer when your
@@ -39,6 +54,7 @@ const ROUTES = {
   venues: [['/venues/[...slug]', 'venues/[slug].astro']],
   tags: [['/tags/[tag]/[...page]', 'tags/[tag]/[...page].astro']],
   rss: [['/rss.xml', 'rss.xml.js']],
+  robots: [['/robots.txt', 'robots.txt.ts']],
 };
 
 export default function popular(options = {}) {
@@ -51,6 +67,8 @@ export default function popular(options = {}) {
         const userConfig = path.resolve(root, configFile);
         addWatchFile(userConfig);
         updateConfig({
+          integrations: [sitemap()],
+          markdown: { rehypePlugins: [rehypeLazyImages] },
           vite: {
             plugins: [
               {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-theme-popular",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Popular: a warm, community-first Astro theme for meetups, clubs and fan communities. Ships as an Astro integration.",
   "type": "module",
   "license": "MIT",
@@ -27,7 +27,8 @@
     "./scripts/*": "./scripts/*"
   },
   "dependencies": {
-    "@astrojs/rss": "^4.0.0"
+    "@astrojs/rss": "^4.0.0",
+    "@astrojs/sitemap": "^3.0.0"
   },
   "peerDependencies": {
     "astro": "^7.0.0"

package/schemas.ts

@@ -57,6 +57,11 @@ const events = defineCollection({
     venueNotes: z.string().optional(), // e.g. "Buzz 204 at the side door."; overrides the venue page's notes
     rsvp: z.string().optional(),
     meetupUrl: z.string().optional(), // metadata convention; the theme renders no external links on event rows
+    cancelled: z.boolean().default(false), // EventCancelled JSON-LD + visible badge
+    online: z.boolean().default(false), // OnlineEventAttendanceMode + VirtualLocation
+    price: z.union([z.number(), z.string()]).optional(), // machine price for Offer
+    currency: z.string().optional(), // ISO currency for price
+    cost: z.string().optional(), // free-text displayed cost (e.g. "15 CAD")
   }),
 });
 

package/src/components/AuthorBox.astro

@@ -23,7 +23,7 @@ const bio = d ? ((d as any).bio ?? (d as any).description) : undefined;
 <div class="g-persona g-persona--primary">
   {d && (
     <>
-      {d.photo && <img class="g-persona__img" src={d.photo} alt={entry.data.title} />}
+      {d.photo && <img class="g-persona__img" src={d.photo} alt={entry.data.title} loading="lazy" decoding="async" />}
       <div>
         <div class="g-persona__name"><a href={`${base}${entry.id}/`} style="color:inherit">{d.title}</a></div>
         {d.role && <div class="g-persona__role">{d.role}</div>}
@@ -37,7 +37,7 @@ const bio = d ? ((d as any).bio ?? (d as any).description) : undefined;
   )}
   {guest && (
     <>
-      {guest.photo && <img class="g-persona__img" src={guest.photo} alt={guest.name} />}
+      {guest.photo && <img class="g-persona__img" src={guest.photo} alt={guest.name} loading="lazy" decoding="async" />}
       <div>
         <div class="g-persona__name">{guest.name} <span class="g-badge g-badge--soft" style="vertical-align:middle">{STRINGS.guest}</span></div>
         {guest.title && <div class="g-persona__role">{guest.title}</div>}

package/src/components/EventRow.astro

@@ -49,7 +49,9 @@ const day = d.date.toLocaleDateString(SITE.locale, { month: 'short', day: 'numer
     )}
   </div>
   <div class="g-event__aside">
-    {tbd
+    {d.cancelled
+      ? <span class="g-badge g-badge--danger g-badge--soft">{STRINGS.eventCancelled}</span>
+      : 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 && (

package/src/components/FAQ.astro

@@ -0,0 +1,30 @@
+---
+/** FAQ block: wraps <FAQItem> children (native <details>, zero JS; answers in
+ *  the DOM for indexing + AI answer engines). Emits FAQPage JSON-LD collected
+ *  from the rendered items (gated on SITE.seo.faqJsonLd, default true),
+ *  mirroring Hugo's faq shortcode. No FAQ rich results are expected (Google
+ *  restricts them); this aids agents and future-proofs. */
+import { SITE } from 'popular:config';
+import { jsonld } from '../lib/jsonld';
+
+const html = await Astro.slots.render('default');
+const strip = (s: string) => s.replace(/<[^>]+>/g, '').replace(/\s+/g, ' ').trim();
+const items = [...html.matchAll(
+  /<summary class="g-faq__q">([\s\S]*?)<\/summary>\s*<div class="g-faq__a[^"]*">([\s\S]*?)<\/div>\s*<\/details>/g,
+)].map((m) => ({ q: strip(m[1]), a: strip(m[2]) }));
+
+const emit = (SITE as Record<string, any>).seo?.faqJsonLd !== false && items.length;
+const faqLd = emit
+  ? jsonld({
+      '@context': 'https://schema.org',
+      '@type': 'FAQPage',
+      mainEntity: items.map((i) => ({
+        '@type': 'Question',
+        name: i.q,
+        acceptedAnswer: { '@type': 'Answer', text: i.a },
+      })),
+    })
+  : null;
+---
+<div class="g-faq" set:html={html} />
+{faqLd && <script type="application/ld+json" set:html={faqLd} />}

package/src/components/FAQItem.astro

@@ -0,0 +1,10 @@
+---
+/** One FAQ item: native <details> (zero JS). `q` is the question; the default
+ *  slot is the markdown answer. `open` renders it expanded. */
+interface Props { q: string; open?: boolean }
+const { q, open = false } = Astro.props;
+---
+<details class="g-faq__item" open={open}>
+  <summary class="g-faq__q">{q}</summary>
+  <div class="g-faq__a g-prose"><slot /></div>
+</details>

package/src/components/OrganizerCard.astro

@@ -7,7 +7,7 @@ const d = organizer.data;
 ---
 
 <div class="g-org">
-  {d.photo && <a href={`/organizers/${organizer.id}/`}><img class="g-org__img" src={d.photo} alt={d.title} loading="lazy" /></a>}
+  {d.photo && <a href={`/organizers/${organizer.id}/`}><img class="g-org__img" src={d.photo} alt={d.title} loading="lazy" decoding="async" /></a>}
   <div class="g-org__name"><a href={`/organizers/${organizer.id}/`} style="color:inherit">{d.title}</a></div>
   {d.role && <div class="g-org__role">{d.role}</div>}
   {d.description && <p class="g-org__bio">{d.description}</p>}

package/src/components/PostCard.astro

@@ -22,7 +22,7 @@ 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>
+    <a href={href} class="g-card__media"><img src={d.image} alt={d.title} loading="lazy" decoding="async" /></a>
   )}
   <div class="g-card__body">
     {(month || names.length > 0) && (

package/src/layouts/BaseLayout.astro

@@ -18,8 +18,11 @@ interface Props {
   image?: string;
   /** Set on blog posts: emits og:type=article plus article meta. */
   article?: { published?: Date; modified?: Date; authors?: string[]; tags?: string[] };
+  imageAlt?: string;
+  noindex?: boolean;
 }
-const { title, description, image, article } = Astro.props;
+const { title, description, image, article, imageAlt, noindex } = Astro.props;
+const ogLocale = SITE.locale.replace('-', '_');
 const pageTitle = title ? `${title} · ${SITE.title}` : `${SITE.title}, ${SITE.tagline}`;
 const desc = description ?? SITE.description;
 const ogImage = image ?? SITE.ogImage;
@@ -71,6 +74,7 @@ const brandCss = `html:root{${vars.join(';')}}`;
     <title>{pageTitle}</title>
     <meta name="description" content={desc} />
     <meta property="og:site_name" content={SITE.title} />
+    <meta property="og:locale" content={ogLocale} />
     <meta property="og:title" content={title ?? SITE.title} />
     <meta property="og:description" content={desc} />
     <meta property="og:url" content={canonical} />
@@ -81,14 +85,18 @@ const brandCss = `html:root{${vars.join(';')}}`;
     {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)} />}
+    {ogImage && <meta property="og:image:alt" content={imageAlt ?? title ?? SITE.title} />}
     <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)} />
+    {SITE.fontAwesome.includes("font-awesome/6.5.2/css/all.min.css") && <link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin />}
     <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} />)}
+    {noindex && <meta name="robots" content="noindex,follow" />}
     <style is:inline id="popular-brand" set:html={brandCss}></style>
+    <slot name="head" />
   </head>
   <body data-copy-label={STRINGS.copyCode} data-checklist-done={STRINGS.checklistDone}>
     <a class="g-skip" href="#main">{STRINGS.skipToContent}</a>

package/src/lib/eventld.ts

@@ -0,0 +1,95 @@
+/** Event JSON-LD helpers, mirroring partials/jsonld-event.html.
+ *  The time-parsing contract and its vectors live in PARITY.md; the Hugo and
+ *  Astro implementations must agree on every vector. */
+
+/** Parse an event `time` free-text field to event-local "HH:MM", or null.
+ *  Leading token only: "6:00 PM · doors 5:30" -> "18:00"; "doors 5:30" -> null. */
+export function parseEventTime(raw: string | undefined): string | null {
+  const m = (raw ?? '').trim().match(/^(\d{1,2}):(\d{2})\s*(am|pm)?/i);
+  if (!m) return null;
+  let h = parseInt(m[1], 10);
+  const min = parseInt(m[2], 10);
+  const mer = m[3]?.toLowerCase();
+  if (mer) {
+    if (h < 1 || h > 12) return null;
+    if (mer === 'pm' && h < 12) h += 12;
+    if (mer === 'am' && h === 12) h = 0;
+  } else if (h > 23) {
+    return null;
+  }
+  if (min > 59) return null;
+  return `${String(h).padStart(2, '0')}:${String(min).padStart(2, '0')}`;
+}
+
+/** startDate = YYYY-MM-DD, or YYYY-MM-DDTHH:MM when a leading time parses. */
+export function eventStartDate(date: Date, time: string | undefined): string {
+  const day = date.toISOString().slice(0, 10);
+  const hm = parseEventTime(time);
+  return hm ? `${day}T${hm}` : day;
+}
+
+/** Recursively key-sort so output matches Hugo's jsonify (sorted, no spaces). */
+function sortKeys(v: any): any {
+  if (Array.isArray(v)) return v.map(sortKeys);
+  if (v && typeof v === 'object') {
+    return Object.fromEntries(Object.keys(v).sort().map((k) => [k, sortKeys(v[k])]));
+  }
+  return v;
+}
+export function jsonld(obj: Record<string, any>): string {
+  return JSON.stringify(sortKeys(obj));
+}
+
+export interface EventLdInput {
+  title: string;
+  date: Date;
+  time?: string;
+  description?: string;
+  cancelled?: boolean;
+  online?: boolean;
+  price?: number | string;
+  currency?: string;
+  cost?: string;
+  image?: string;
+  rsvp?: string;
+  permalink: string;
+  siteUrl: string;
+  siteTitle: string;
+  defaultCurrency: string;
+  venue?: { name: string; address?: string };
+  performers?: string[];
+}
+
+export function buildEventLd(i: EventLdInput): Record<string, any> {
+  const ld: Record<string, any> = {
+    '@context': 'https://schema.org',
+    '@type': 'Event',
+    name: i.title,
+    startDate: eventStartDate(i.date, i.time),
+    eventStatus: i.cancelled ? 'https://schema.org/EventCancelled' : 'https://schema.org/EventScheduled',
+    eventAttendanceMode: i.online
+      ? 'https://schema.org/OnlineEventAttendanceMode'
+      : 'https://schema.org/OfflineEventAttendanceMode',
+    organizer: { '@type': 'Organization', name: i.siteTitle, url: i.siteUrl },
+  };
+  const desc = (i.description ?? '').trim();
+  if (desc) ld.description = desc.length > 300 ? desc.slice(0, 299) + '…' : desc;
+  if (i.online) {
+    ld.location = { '@type': 'VirtualLocation', url: i.rsvp || i.permalink };
+  } else if (i.venue) {
+    ld.location = { '@type': 'Place', name: i.venue.name };
+    if (i.venue.address) ld.location.address = i.venue.address;
+  }
+  if (i.image) ld.image = i.image;
+  if (i.performers && i.performers.length) {
+    ld.performer = i.performers.map((name) => ({ '@type': 'Person', name }));
+  }
+  if (i.price !== undefined && i.price !== '') {
+    ld.isAccessibleForFree = false;
+    ld.offers = { '@type': 'Offer', price: String(i.price), priceCurrency: i.currency || i.defaultCurrency, availability: 'https://schema.org/InStock', url: i.permalink };
+  } else if (!i.cost) {
+    ld.isAccessibleForFree = true;
+    ld.offers = { '@type': 'Offer', price: '0', priceCurrency: i.defaultCurrency, availability: 'https://schema.org/InStock', url: i.permalink };
+  }
+  return ld;
+}

package/src/lib/jsonld.ts

@@ -0,0 +1,48 @@
+/** Shared JSON-LD helpers for Organization and BlogPosting, mirroring
+ *  partials/jsonld-org.html and jsonld-blogpost.html. Keys are recursively
+ *  sorted so the emitted markup byte-matches Hugo's jsonify. */
+function sortKeys(v: any): any {
+  if (Array.isArray(v)) return v.map(sortKeys);
+  if (v && typeof v === 'object') {
+    return Object.fromEntries(Object.keys(v).sort().map((k) => [k, sortKeys(v[k])]));
+  }
+  return v;
+}
+export function jsonld(obj: Record<string, any>): string {
+  return JSON.stringify(sortKeys(obj));
+}
+
+export function buildOrgLd(i: {
+  name: string; url: string; logo?: string; description?: string; sameAs?: string[];
+}): Record<string, any> {
+  const ld: Record<string, any> = {
+    '@context': 'https://schema.org', '@type': 'Organization', name: i.name, url: i.url,
+  };
+  if (i.logo) ld.logo = i.logo;
+  if (i.description) ld.description = i.description;
+  if (i.sameAs && i.sameAs.length) ld.sameAs = i.sameAs;
+  return ld;
+}
+
+export function buildBlogPostingLd(i: {
+  title: string; datePublished: string; dateModified: string;
+  authors: string[]; image?: string; url: string; description?: string;
+  siteTitle: string; siteUrl: string;
+}): Record<string, any> {
+  const publisher = { '@type': 'Organization', name: i.siteTitle, url: i.siteUrl };
+  const author = i.authors.length
+    ? i.authors.map((name) => ({ '@type': 'Person', name }))
+    : [publisher];
+  const headline = i.title.length > 110 ? i.title.slice(0, 109) + '…' : i.title;
+  const ld: Record<string, any> = {
+    '@context': 'https://schema.org', '@type': 'BlogPosting', headline,
+    datePublished: i.datePublished, dateModified: i.dateModified, author,
+    url: i.url, publisher,
+  };
+  if (i.image) ld.image = i.image;
+  if (i.description) {
+    const d = i.description.trim();
+    ld.description = d.length > 300 ? d.slice(0, 299) + '…' : d;
+  }
+  return ld;
+}

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

@@ -4,6 +4,7 @@ import { safeCollection } from '../../lib/collections';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import AuthorBox from '../../components/AuthorBox.astro';
 import { SUPPORT, SITE, STRINGS, SECTIONS_MAP } from 'popular:config';
+import { buildBlogPostingLd, jsonld } from '../../lib/jsonld';
 import { tagSlug } from '../../lib/slugs';
 
 export async function getStaticPaths() {
@@ -32,12 +33,25 @@ const bylineNames = [
   ...d.guestAuthors.map((g) => g.name),
 ];
 if (!bylineNames.length && d.author) bylineNames.push(d.author);
+const siteUrl = new URL('/', Astro.site ?? Astro.url).href;
+const postLd = jsonld(buildBlogPostingLd({
+  title: d.title,
+  datePublished: d.date.toISOString().replace(/\.\d{3}Z$/, 'Z'),
+  dateModified: d.date.toISOString().replace(/\.\d{3}Z$/, 'Z'),
+  authors: bylineNames,
+  image: d.image ? new URL(d.image, Astro.site ?? Astro.url).href : undefined,
+  url: new URL(`/blog/${post.id}/`, Astro.site ?? Astro.url).href,
+  description: d.description,
+  siteTitle: SITE.title,
+  siteUrl,
+}));
 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 }}>
+  <script type="application/ld+json" slot="head" set:html={postLd} />
   <article>
     <header class="g-pagehero">
       <div class="g-container" style="padding-block:var(--space-6) var(--space-5)">

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

@@ -1,5 +1,6 @@
 ---
 import { SITE, STRINGS } from 'popular:config';
+import { buildEventLd, jsonld } from '../../lib/eventld';
 import { render } from 'astro:content';
 import { safeCollection } from '../../lib/collections';
 import BaseLayout from '../../layouts/BaseLayout.astro';
@@ -28,9 +29,33 @@ const speakerEntries = d.speakers.map((slug) => {
   if (!entry) throw new Error(`events/${event.id}: speaker "${slug}" matches no speaker page`);
   return entry;
 });
+
+/* schema.org/Event JSON-LD (see lib/eventld; contract in PARITY.md). */
+const siteUrl = new URL('/', Astro.site ?? Astro.url).href;
+const permalink = new URL(`/events/${event.id}/`, Astro.site ?? Astro.url).href;
+const eventLd = jsonld(buildEventLd({
+  title: d.title,
+  date: d.date,
+  time: d.time,
+  description: d.description,
+  cancelled: (d as any).cancelled,
+  online: (d as any).online,
+  price: (d as any).price,
+  currency: (d as any).currency,
+  cost: (d as any).cost,
+  image: d.image ? new URL(d.image, Astro.site ?? Astro.url).href : undefined,
+  rsvp: d.rsvp,
+  permalink,
+  siteUrl,
+  siteTitle: SITE.title,
+  defaultCurrency: (SITE as Record<string, any>).seo?.currency ?? 'USD',
+  venue: venuePage ? { name: venuePage.data.title, address: venuePage.data.address } : undefined,
+  performers: speakerEntries.map((s) => s.data.title),
+}));
 ---
 
 <BaseLayout title={d.title} description={d.description} image={d.image}>
+  <script type="application/ld+json" slot="head" set:html={eventLd} />
   <article>
     <header class="g-pagehero">
       <div class="g-container" style="padding-block:var(--space-6) var(--space-5)">
@@ -40,7 +65,7 @@ const speakerEntries = d.speakers.map((slug) => {
           </a>
         </div>
         <span class="g-eyebrow">{dateStr}{d.time && ` · ${d.time}`}</span>
-        <h1 style="margin:.5rem 0 0">{d.title}</h1>
+        <h1 style="margin:.5rem 0 0">{d.title}{d.cancelled && <> <span class="g-badge g-badge--danger" style="vertical-align:middle;font-size:var(--text-sm)">{STRINGS.eventCancelled}</span></>}</h1>
       </div>
     </header>
     <div class="g-container g-section--sm">

package/src/pages/index.astro

@@ -4,7 +4,8 @@ import { formatStat, countSectionsIn } from '../lib/stats';
 import BaseLayout from '../layouts/BaseLayout.astro';
 import PostCard from '../components/PostCard.astro';
 import OrganizerCard from '../components/OrganizerCard.astro';
-import { HOME, SITE, STRINGS, SECTIONS_MAP } from 'popular:config';
+import { HOME, SITE, STRINGS, SECTIONS_MAP, SOCIAL } from 'popular:config';
+import { buildOrgLd, jsonld } from '../lib/jsonld';
 
 const now = new Date();
 const events = (await safeCollection('events')).filter((e) => !e.data.draft);
@@ -25,9 +26,17 @@ const nextVenue = next?.data.venueRef ? (await safeCollection('venues')).find((v
 const organizers = (await safeCollection(SECTIONS_MAP.team)).sort((a, b) => a.data.weight - b.data.weight);
 
 const h = HOME;
+const orgLd = jsonld(buildOrgLd({
+  name: SITE.title,
+  url: new URL('/', Astro.site ?? Astro.url).href,
+  logo: SITE.logo ? new URL(SITE.logo, Astro.site ?? Astro.url).href : undefined,
+  description: SITE.description,
+  sameAs: SOCIAL.map((s) => s.url),
+}));
 ---
 
 <BaseLayout>
+  <script type="application/ld+json" slot="head" set:html={orgLd} />
   {h.hero && (
     <section class="g-hero">
       <div class="g-container g-hero__grid">

package/src/pages/robots.txt.ts

@@ -0,0 +1,10 @@
+import type { APIRoute } from 'astro';
+
+/* Generated so the Sitemap URL respects `site` + base path. @astrojs/sitemap
+   emits sitemap-index.xml. */
+export const GET: APIRoute = ({ site }) => {
+  const sitemap = new URL('sitemap-index.xml', site ?? 'https://example.com').href;
+  return new Response(`User-agent: *\nAllow: /\nSitemap: ${sitemap}\n`, {
+    headers: { 'Content-Type': 'text/plain' },
+  });
+};

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

@@ -1,5 +1,5 @@
 ---
-import { STRINGS, PAGINATION } from 'popular:config';
+import { SITE, STRINGS, PAGINATION } from 'popular:config';
 import { tagSlug } from '../../../lib/slugs';
 import { safeCollection } from '../../../lib/collections';
 import BaseLayout from '../../../layouts/BaseLayout.astro';
@@ -34,7 +34,7 @@ const { tag } = Astro.params;
 const { label, current, total, count, posts } = Astro.props;
 ---
 
-<BaseLayout title={`#${label}`}>
+<BaseLayout title={`#${label}`} noindex={(SITE as Record<string, any>).seo?.noindexTaxonomies ?? false}>
   <PageHero eyebrow={STRINGS.eyebrowTag} title={`#${label}`} lead={STRINGS.taggedCount.replace('{n}', String(count)).replace('{tag}', label)} />
   <section class="g-bg-white g-section">
     <div class="g-container">

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

@@ -24,7 +24,7 @@ const events = (await safeCollection('events'))
   <section class="g-bg-white g-section">
     <div class="g-container">
       <div class="g-article" style="margin-bottom:var(--space-5)">
-        {d.photo && <img src={d.photo} alt={d.title} style="width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-xl);box-shadow:var(--shadow-md);margin-bottom:var(--space-4)" />}
+        {d.photo && <img src={d.photo} alt={d.title} style="width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:var(--radius-xl);box-shadow:var(--shadow-md);margin-bottom:var(--space-4)" loading="lazy" decoding="async" />}
         <div class="g-meta-line" style="margin-bottom:var(--space-3)">
           {d.address && <span><i class="fa-solid fa-location-dot" aria-hidden="true"></i> {d.address}</span>}
           {d.website && <span><i class="fa-solid fa-globe" aria-hidden="true"></i> <a href={d.website} rel="noopener" target="_blank">{STRINGS.website}</a></span>}

package/src/styles/components.css

@@ -49,6 +49,8 @@
 .g-badge--success.g-badge--soft { background: #e6f3ec; color: #0f6e44; }
 .g-badge--warning { background: var(--amber-500); color: #142a36; }
 .g-badge--warning.g-badge--soft { background: #fff7e0; color: #946a00; }
+.g-badge--danger { background: #c8102e; color: #fff; }
+.g-badge--danger.g-badge--soft { background: #fde7ea; color: #a01023; }
 .g-badge--ink { background: var(--ink-800); }
 
 .g-tag {
@@ -148,6 +150,16 @@ a.g-pager__num:hover, .g-pager__nav:hover { border-color: var(--color-primary);
 .g-org__role { font-size: var(--text-sm); color: var(--color-primary); font-weight: var(--weight-medium); }
 .g-org__bio { margin: 0.5rem 0 0; font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); }
 
+/* ---------- FAQ (native <details>, zero JS) ---------- */
+.g-faq { display: flex; flex-direction: column; gap: 0.6rem; margin: 1.2rem 0; }
+.g-faq__item { border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); overflow: hidden; }
+.g-faq__q { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: var(--weight-semibold); color: var(--text-strong); list-style: none; display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
+.g-faq__q::-webkit-details-marker { display: none; }
+.g-faq__q::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.75em; color: var(--text-muted); transition: transform 0.2s; }
+.g-faq__item[open] .g-faq__q::after { transform: rotate(180deg); }
+.g-faq__a { padding: 0 var(--space-4) var(--space-3); }
+.g-faq__a > :first-child { margin-top: 0; }
+
 /* ---------- Post navigation (older/newer neighbors on blog singles) ---------- */
 .g-postnav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-5); }
 .g-postnav__card { display: flex; flex-direction: column; gap: 0.35rem; padding: var(--space-3); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }