astro-theme-popular 0.3.0

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

@@ -0,0 +1,86 @@
+---
+import { getCollection } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import PageHero from '../../components/PageHero.astro';
+import EventRow from '../../components/EventRow.astro';
+import Pagination from '../../components/Pagination.astro';
+import { SECTIONS, STRINGS, PAGINATION } from 'popular:config';
+
+/* One route serves /events/ and /events/page/N/, matching the Hugo theme's
+   paginator URLs. Only past events paginate; upcoming events always show in
+   full, mirroring layouts/events/list.html on the Hugo side. */
+export async function getStaticPaths() {
+  const now = new Date();
+  const all = (await getCollection('events')).filter((e) => !e.data.draft);
+  const upcoming = all.filter((e) => e.data.date >= now).sort((a, b) => +a.data.date - +b.data.date);
+  const past = all.filter((e) => e.data.date < now).sort((a, b) => +b.data.date - +a.data.date);
+  const size = PAGINATION.pageSize;
+  const total = Math.max(1, Math.ceil(past.length / size));
+  return Array.from({ length: total }, (_, i) => ({
+    params: { page: i === 0 ? undefined : `page/${i + 1}` },
+    props: { current: i + 1, total, upcoming, past: past.slice(i * size, (i + 1) * size) },
+  }));
+}
+
+const { current, total, upcoming, past } = Astro.props;
+
+/* Group consecutive events by year for the .g-year headings; the lists are
+   already sorted, so consecutive grouping preserves their order. */
+type EventEntry = (typeof upcoming)[number];
+const groupByYear = (events: EventEntry[]) => {
+  const groups: { year: number; events: EventEntry[] }[] = [];
+  for (const event of events) {
+    const year = event.data.date.getFullYear();
+    const last = groups[groups.length - 1];
+    if (last && last.year === year) last.events.push(event);
+    else groups.push({ year, events: [event] });
+  }
+  return groups;
+};
+---
+
+<BaseLayout title="Events">
+  <PageHero
+    eyebrow={SECTIONS.events.eyebrow}
+    title={SECTIONS.events.title}
+    lead={SECTIONS.events.lead}
+  />
+
+  <section class="g-bg-white g-section">
+    <div class="g-container">
+      <div class="g-section-head">
+        <span class="g-eyebrow">{STRINGS.comingUp}</span>
+        <h2>{STRINGS.upcomingEvents}</h2>
+        <p class="g-lead">{STRINGS.upcomingLead}</p>
+      </div>
+      <div class="g-stack" style="margin-top:var(--space-4);gap:var(--space-3)">
+        {groupByYear(upcoming).map((group) => (
+          <>
+            <h3 class="g-year">{group.year}</h3>
+            {group.events.map((e) => <EventRow event={e} />)}
+          </>
+        ))}
+        {upcoming.length === 0 && (
+          <p class="g-lead">{STRINGS.noUpcomingEvents}</p>
+        )}
+      </div>
+    </div>
+  </section>
+
+  {past.length > 0 && (
+    <section class="g-bg-tertiary g-section">
+      <div class="g-container">
+        <div class="g-section-head"><span class="g-eyebrow">{STRINGS.lookingBack}</span><h2>{STRINGS.pastEvents}</h2></div>
+        <div class="g-stack" style="margin-top:var(--space-4);gap:var(--space-3)">
+          {groupByYear(past).map((group) => (
+            <>
+              <h3 class="g-year">{group.year}</h3>
+              {group.events.map((e) => <EventRow event={e} />)}
+            </>
+          ))}
+        </div>
+        <Pagination current={current} total={total} base="/events/" />
+      </div>
+    </section>
+  )}
+</BaseLayout>

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

@@ -0,0 +1,81 @@
+---
+import { SITE, STRINGS } from 'popular:config';
+import { getCollection, render } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import AuthorBox from '../../components/AuthorBox.astro';
+
+export async function getStaticPaths() {
+  const events = (await getCollection('events')).filter((e) => !e.data.draft);
+  return events.map((event) => ({ params: { slug: event.id }, props: { event } }));
+}
+
+const { event } = Astro.props;
+const d = event.data;
+const { Content } = await render(event);
+const dateStr = d.date.toLocaleDateString(SITE.locale, { weekday: 'long', month: 'short', day: 'numeric', year: 'numeric' });
+
+/* Venue: a venueRef to the venues collection wins over the flat fields;
+   its arrival notes are inherited unless the event sets venueNotes. */
+const venuePage = d.venueRef ? (await getCollection('venues')).find((v) => v.id === d.venueRef) : undefined;
+if (d.venueRef && !venuePage) throw new Error(`events/${event.id}: venueRef "${d.venueRef}" matches no venue page`);
+const venueNotes = d.venueNotes ?? venuePage?.data.notes;
+
+/* Speaker profile cards, resolved from the speakers collection. */
+const allSpeakers = await getCollection('speakers');
+const speakerEntries = d.speakers.map((slug) => {
+  const entry = allSpeakers.find((s) => s.id === slug);
+  if (!entry) throw new Error(`events/${event.id}: speaker "${slug}" matches no speaker page`);
+  return entry;
+});
+---
+
+<BaseLayout title={d.title} description={d.description} image={d.image}>
+  <article>
+    <header class="g-pagehero">
+      <div class="g-container" style="padding-block:var(--space-6) var(--space-5)">
+        <div style="margin-bottom:1rem">
+          <a href="/events/" style="display:inline-flex;gap:.4rem;align-items:center;font-size:var(--text-sm);font-weight:var(--weight-medium)">
+            <i class="fa-solid fa-arrow-left" aria-hidden="true"></i> {STRINGS.allEvents}
+          </a>
+        </div>
+        <span class="g-eyebrow">{dateStr}{d.time && ` · ${d.time}`}</span>
+        <h1 style="margin:.5rem 0 0">{d.title}</h1>
+      </div>
+    </header>
+    <div class="g-container g-section--sm">
+     <div class="g-article">
+      <div class="g-meta-line" style="margin-bottom:var(--space-4)">
+        <span><i class="fa-solid fa-location-dot" aria-hidden="true"></i> {venuePage
+          ? <><a href={`/venues/${venuePage.id}/`}>{venuePage.data.title}</a>{venuePage.data.address && ` · ${venuePage.data.address}`}</>
+          : <>{d.venue ?? STRINGS.venueTba}{d.address && ` · ${d.address}`}</>}</span>
+        {d.speaker && <span><i class="fa-solid fa-microphone-lines" aria-hidden="true"></i> {d.speaker}</span>}
+      </div>
+
+      {(d.checkin || venueNotes) && (
+        <div class="g-callout" style="flex-direction:column;gap:.6rem;margin:0 0 var(--space-4)">
+          <div class="g-callout__title">{STRINGS.beforeYouArrive}</div>
+          {d.checkin && <div class="g-callout__body"><i class="fa-solid fa-ticket" aria-hidden="true"></i> {d.checkin}</div>}
+          {venueNotes && <div class="g-callout__body"><i class="fa-solid fa-door-open" aria-hidden="true"></i> {venueNotes}</div>}
+        </div>
+      )}
+
+      <div class="g-prose"><Content /></div>
+
+      {speakerEntries.length > 0 && (
+        <>
+          <h2 style="font-size:var(--text-xl);margin:var(--space-5) 0 1rem">{STRINGS.speakers}</h2>
+          <div class="g-stack" style="gap:var(--space-3)">
+            {speakerEntries.map((s) => <AuthorBox entry={s} base="/speakers/" />)}
+          </div>
+        </>
+      )}
+
+      {d.rsvp && (
+        <div class="g-row" style="margin-top:var(--space-4)">
+          <a class="g-btn g-btn--primary g-btn--lg" href={d.rsvp}><i class="fa-solid fa-calendar" aria-hidden="true"></i> {STRINGS.rsvpExternal}</a>
+        </div>
+      )}
+     </div>
+    </div>
+  </article>
+</BaseLayout>

package/src/pages/index.astro

@@ -0,0 +1,178 @@
+---
+import { getCollection } from 'astro:content';
+import BaseLayout from '../layouts/BaseLayout.astro';
+import PostCard from '../components/PostCard.astro';
+import OrganizerCard from '../components/OrganizerCard.astro';
+import { HOME, SITE, STRINGS } from 'popular:config';
+
+const now = new Date();
+const events = (await getCollection('events')).filter((e) => !e.data.draft);
+const upcoming = events.filter((e) => e.data.date >= now).sort((a, b) => +a.data.date - +b.data.date);
+const next = upcoming[0];
+
+const posts = (await getCollection('blog')).filter((p) => !p.data.draft).sort((a, b) => +b.data.date - +a.data.date).slice(0, 3);
+/* value = "@pastEventCount" renders the live number of past events,
+   rounded down to a "70+" style once there are ten or more (Hugo parity). */
+const pastCount = events.filter((e) => e.data.date < now).length;
+const statValue = (v: string) =>
+  v === '@pastEventCount' ? (pastCount >= 10 ? `${Math.floor(pastCount / 10) * 10}+` : String(pastCount)) : v;
+const nextVenue = next?.data.venueRef ? (await getCollection('venues')).find((v) => v.id === next.data.venueRef)?.data.title : undefined;
+const organizers = (await getCollection('organizers')).sort((a, b) => a.data.weight - b.data.weight);
+
+const h = HOME;
+---
+
+<BaseLayout>
+  {h.hero && (
+    <section class="g-hero">
+      <div class="g-container g-hero__grid">
+        <div class="g-hero__content">
+          {h.hero.eyebrow && <span class="g-eyebrow">{h.hero.eyebrow}</span>}
+          <h1>{h.hero.title}</h1>
+          {h.hero.lead && <p class="g-hero__lead">{h.hero.lead}</p>}
+          {h.hero.ctas && (
+            <div class="g-row">
+              {h.hero.ctas.map((c) => (
+                <a class={`g-btn g-btn--lg g-btn--${c.variant ?? 'primary'}`} href={c.url}>
+                  {'icon' in c && c.icon && <i class={c.icon} aria-hidden="true"></i>}{c.label}
+                </a>
+              ))}
+            </div>
+          )}
+        </div>
+        {h.hero.image && (
+          <div class="g-hero__media"><img src={h.hero.image} alt={SITE.title} /></div>
+        )}
+      </div>
+    </section>
+  )}
+
+  {h.stats && (
+    <section class="g-bg-ink">
+      <div class="g-container g-stats">
+        {h.stats.map((s) => (
+          <div class="g-stat"><div class="g-stat__n">{statValue(s.value)}</div><div class="g-stat__l">{s.label}</div></div>
+        ))}
+      </div>
+    </section>
+  )}
+
+  {h.features && (
+    <section class="g-bg-white g-section">
+      <div class="g-container">
+        {h.featuresHead && (
+          <div class="g-section-head">
+            {h.featuresHead.eyebrow && <span class="g-eyebrow">{h.featuresHead.eyebrow}</span>}
+            <h2>{h.featuresHead.title}</h2>
+            {h.featuresHead.lead && <p class="g-lead">{h.featuresHead.lead}</p>}
+          </div>
+        )}
+        <div class="g-grid-3" style="margin-top:var(--space-5)">
+          {h.features.map((f) => (
+            <div class="g-card"><div class="g-card__body">
+              <span class="g-medallion"><i class={f.icon} aria-hidden="true"></i></span>
+              <h3 class="g-card__title">{f.title}</h3>
+              <p class="g-card__text">{f.body}</p>
+            </div></div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )}
+
+  {next && (
+    <section class="g-bg-wash-soft">
+      <div class="g-container g-feature">
+        {(next.data.image ?? h.hero.image) && <div class="g-feature__media"><img src={next.data.image ?? h.hero.image} alt={next.data.title} /></div>}
+        <div class="g-feature__body">
+          <span class="g-badge g-badge--soft"><i class="fa-solid fa-calendar" aria-hidden="true"></i> {STRINGS.nextMeetup}</span>
+          <h2 style="margin:0">{next.data.title}</h2>
+          <div class="g-meta-line">
+            <span><i class="fa-solid fa-calendar-day" aria-hidden="true"></i> {next.data.date.toLocaleDateString(SITE.locale, { weekday: 'short', month: 'short', day: 'numeric', year: 'numeric' })}{next.data.time && ` · ${next.data.time}`}</span>
+            <span><i class="fa-solid fa-location-dot" aria-hidden="true"></i> {nextVenue ?? next.data.venue ?? STRINGS.venueTba}</span>
+          </div>
+          {next.data.description && <p style="margin:0;color:var(--text-muted);max-width:34rem">{next.data.description}</p>}
+          <div class="g-row">
+            {next.data.rsvp && <a class="g-btn g-btn--primary" href={next.data.rsvp}><i class="fa-solid fa-calendar" aria-hidden="true"></i> {STRINGS.rsvpExternal}</a>}
+            <a class="g-btn g-btn--outline" href="/events/">{STRINGS.allEvents}</a>
+          </div>
+        </div>
+      </div>
+    </section>
+  )}
+
+  {posts.length > 0 && (
+    <section class="g-bg-white g-section">
+      <div class="g-container">
+        <div class="g-row" style="justify-content:space-between;align-items:flex-end">
+          <div class="g-section-head">
+            <span class="g-eyebrow">{STRINGS.fromTheBlog}</span>
+            <h2>{STRINGS.latestFromCommunity}</h2>
+          </div>
+          <a class="g-btn g-btn--ghost" href="/blog/">{STRINGS.readTheBlog} <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></a>
+        </div>
+        <div class="g-grid-3" style="margin-top:var(--space-4)">
+          {posts.map((p) => <PostCard post={p} />)}
+        </div>
+      </div>
+    </section>
+  )}
+
+  {organizers.length > 0 && (
+    <section class="g-bg-tertiary g-section">
+      <div class="g-container">
+        <div class="g-section-head g-section-head--center">
+          <span class="g-eyebrow">The team</span>
+          <h2>Meet the organizers</h2>
+          <p class="g-lead">The volunteers who make every meetup happen.</p>
+        </div>
+        <div class="g-grid-3" style="margin-top:var(--space-5)">
+          {organizers.slice(0, 3).map((o) => <OrganizerCard organizer={o} />)}
+        </div>
+        <div class="g-row" style="justify-content:center;margin-top:var(--space-4)">
+          <a class="g-btn g-btn--outline" href="/organizers/">All organizers</a>
+        </div>
+      </div>
+    </section>
+  )}
+
+  {h.testimonials && (
+    <section class="g-bg-white g-section">
+      <div class="g-container">
+        {h.testimonialsHead && (
+          <div class="g-section-head g-section-head--center">
+            {h.testimonialsHead.eyebrow && <span class="g-eyebrow">{h.testimonialsHead.eyebrow}</span>}
+            <h2>{h.testimonialsHead.title}</h2>
+            {h.testimonialsHead.lead && <p class="g-lead">{h.testimonialsHead.lead}</p>}
+          </div>
+        )}
+        <div class="g-grid-3" style="margin-top:var(--space-5)">
+          {h.testimonials.map((t) => (
+            <figure class="g-quote">
+              <blockquote>{t.quote}</blockquote>
+              <figcaption>
+                {t.photo && <img src={t.photo} alt={t.name} />}
+                <div><span class="g-quote__name">{t.name}</span>{t.role && <span class="g-quote__role">{t.role}</span>}</div>
+              </figcaption>
+            </figure>
+          ))}
+        </div>
+      </div>
+    </section>
+  )}
+
+  {h.getInvolved && (
+    <section class="g-bg-wash g-section">
+      <div class="g-container" style="text-align:center;display:flex;flex-direction:column;align-items:center;gap:1rem">
+        <span class="g-eyebrow">{h.getInvolved.eyebrow ?? 'Community'}</span>
+        <h2 style="margin:0;max-width:40rem">{h.getInvolved.title}</h2>
+        {h.getInvolved.lead && <p style="margin:0;color:var(--ink-700);max-width:38rem">{h.getInvolved.lead}</p>}
+        <div class="g-row" style="justify-content:center">
+          {h.getInvolved.ctas.map((c) => (
+            <a class={`g-btn g-btn--${c.variant ?? 'primary'}`} href={c.url}>{c.label}</a>
+          ))}
+        </div>
+      </div>
+    </section>
+  )}
+</BaseLayout>

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

@@ -0,0 +1,38 @@
+---
+import { getCollection } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import PageHero from '../../components/PageHero.astro';
+import OrganizerCard from '../../components/OrganizerCard.astro';
+import Pagination from '../../components/Pagination.astro';
+import { SECTIONS, PAGINATION } from 'popular:config';
+
+/* One route serves /organizers/ and /organizers/page/N/, matching the Hugo
+   theme's paginator URLs. */
+export async function getStaticPaths() {
+  const organizers = (await getCollection('organizers')).sort((a, b) => a.data.weight - b.data.weight);
+  const size = PAGINATION.pageSize;
+  const total = Math.max(1, Math.ceil(organizers.length / size));
+  return Array.from({ length: total }, (_, i) => ({
+    params: { page: i === 0 ? undefined : `page/${i + 1}` },
+    props: { current: i + 1, total, organizers: organizers.slice(i * size, (i + 1) * size) },
+  }));
+}
+
+const { current, total, organizers } = Astro.props;
+---
+
+<BaseLayout title="Organizers">
+  <PageHero
+    eyebrow={SECTIONS.organizers.eyebrow}
+    title={SECTIONS.organizers.title}
+    lead={SECTIONS.organizers.lead}
+  />
+  <section class="g-bg-white g-section">
+    <div class="g-container">
+      <div class="g-grid-3">
+        {organizers.map((o) => <OrganizerCard organizer={o} />)}
+      </div>
+      <Pagination current={current} total={total} base="/organizers/" />
+    </div>
+  </section>
+</BaseLayout>

package/src/pages/rss.xml.js

@@ -0,0 +1,33 @@
+import rss from '@astrojs/rss';
+import { getCollection } from 'astro:content';
+import { SITE } from 'popular:config';
+
+const escapeXml = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+
+export async function GET(context) {
+  const posts = (await getCollection('blog'))
+    .filter((p) => !p.data.draft)
+    .sort((a, b) => +b.data.date - +a.data.date);
+  const allAuthors = await getCollection('authors');
+  return rss({
+    title: SITE.title,
+    description: SITE.description,
+    site: context.site,
+    xmlns: { dc: 'http://purl.org/dc/elements/1.1/' },
+    items: posts.map((post) => {
+      const names = [
+        ...post.data.authors.map((slug) => allAuthors.find((a) => a.id === slug)?.data.title ?? slug),
+        ...post.data.guestAuthors.map((g) => g.name),
+      ];
+      if (!names.length && post.data.author) names.push(post.data.author);
+      return {
+        title: post.data.title,
+        pubDate: post.data.date,
+        description: post.data.description,
+        link: `/blog/${post.id}/`,
+        categories: post.data.tags,
+        customData: names.length ? `<dc:creator>${escapeXml(names.join(', '))}</dc:creator>` : undefined,
+      };
+    }),
+  });
+}

package/src/pages/speakers/[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 EventRow from '../../components/EventRow.astro';
+
+export async function getStaticPaths() {
+  const speakers = await getCollection('speakers');
+  return speakers.map((entry) => ({ params: { slug: entry.id }, props: { entry } }));
+}
+
+const { entry } = Astro.props;
+const { Content } = await render(entry);
+const events = (await getCollection('events'))
+  .filter((e) => !e.data.draft && e.data.speakers.includes(entry.id))
+  .sort((a, b) => +b.data.date - +a.data.date);
+---
+
+<BaseLayout title={entry.data.title} description={entry.data.bio}>
+  <PageHero eyebrow={STRINGS.eyebrowSpeaker} 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} base="/speakers/" />
+        <div class="g-prose" style="margin-top:var(--space-4)"><Content /></div>
+      </div>
+      {events.length > 0 && (
+        <>
+          <div class="g-section-head"><span class="g-eyebrow">{STRINGS.eyebrowEvents}</span><h2>{STRINGS.sessionsBy.replace('{name}', entry.data.title)}</h2></div>
+          <div class="g-stack" style="margin-top:var(--space-4);gap:var(--space-3)">
+            {events.map((e) => <EventRow event={e} />)}
+          </div>
+        </>
+      )}
+    </div>
+  </section>
+</BaseLayout>

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

@@ -0,0 +1,47 @@
+---
+import { STRINGS, PAGINATION } from 'popular:config';
+import { tagSlug } from '../../../lib/slugs';
+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';
+
+/* One route serves /tags/<tag>/ and /tags/<tag>/page/N/, matching the Hugo
+   theme's paginated term pages. URLs use the Hugo-compatible slug; the page
+   displays the tag's first-seen spelling. */
+export async function getStaticPaths() {
+  const posts = (await getCollection('blog')).filter((p) => !p.data.draft);
+  const labels = new Map(); // slug -> first-seen tag spelling
+  for (const p of posts) for (const t of p.data.tags) {
+    const slug = tagSlug(t);
+    if (!labels.has(slug)) labels.set(slug, t);
+  }
+  const size = PAGINATION.pageSize;
+  return [...labels.entries()].flatMap(([slug, label]) => {
+    const tagged = posts
+      .filter((p) => p.data.tags.some((t) => tagSlug(t) === slug))
+      .sort((a, b) => +b.data.date - +a.data.date);
+    const total = Math.max(1, Math.ceil(tagged.length / size));
+    return Array.from({ length: total }, (_, i) => ({
+      params: { tag: slug, page: i === 0 ? undefined : `page/${i + 1}` },
+      props: { label, current: i + 1, total, count: tagged.length, posts: tagged.slice(i * size, (i + 1) * size) },
+    }));
+  });
+}
+
+const { tag } = Astro.params;
+const { label, current, total, count, posts } = Astro.props;
+---
+
+<BaseLayout title={`#${label}`}>
+  <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">
+      <div class="g-grid-3">
+        {posts.map((p) => <PostCard post={p} />)}
+      </div>
+      <Pagination current={current} total={total} base={`/tags/${tag}/`} />
+    </div>
+  </section>
+</BaseLayout>

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

@@ -0,0 +1,50 @@
+---
+import { STRINGS } from 'popular:config';
+import { getCollection, render } from 'astro:content';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import PageHero from '../../components/PageHero.astro';
+import EventRow from '../../components/EventRow.astro';
+
+export async function getStaticPaths() {
+  const venues = await getCollection('venues');
+  return venues.map((entry) => ({ params: { slug: entry.id }, props: { entry } }));
+}
+
+const { entry } = Astro.props;
+const d = entry.data;
+const { Content } = await render(entry);
+const events = (await getCollection('events'))
+  .filter((e) => !e.data.draft && e.data.venueRef === entry.id)
+  .sort((a, b) => +b.data.date - +a.data.date);
+---
+
+<BaseLayout title={d.title} description={d.address}>
+  <PageHero eyebrow={STRINGS.eyebrowVenue} title={d.title} lead={d.address} />
+  <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)" />}
+        <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>}
+        </div>
+        {(d.notes || d.accessibility) && (
+          <div class="g-callout" style="flex-direction:column;gap:.6rem">
+            <div class="g-callout__title">{STRINGS.beforeYouArrive}</div>
+            {d.notes && <div class="g-callout__body"><i class="fa-solid fa-door-open" aria-hidden="true"></i> {d.notes}</div>}
+            {d.accessibility && <div class="g-callout__body"><i class="fa-solid fa-universal-access" aria-hidden="true"></i> {d.accessibility}</div>}
+          </div>
+        )}
+        <div class="g-prose" style="margin-top:var(--space-4)"><Content /></div>
+      </div>
+      {events.length > 0 && (
+        <>
+          <div class="g-section-head"><span class="g-eyebrow">{STRINGS.eyebrowEvents}</span><h2>{STRINGS.venueEvents}</h2></div>
+          <div class="g-stack" style="margin-top:var(--space-4);gap:var(--space-3)">
+            {events.map((e) => <EventRow event={e} />)}
+          </div>
+        </>
+      )}
+    </div>
+  </section>
+</BaseLayout>