astro-theme-popular 0.5.0 → 0.7.0

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/speakers/[slug].astro

@@ -3,9 +3,9 @@ import { STRINGS } from 'popular:config';
 import { render } from 'astro:content';
 import { safeCollection } from '../../lib/collections';
 import BaseLayout from '../../layouts/BaseLayout.astro';
-import PageHero from '../../components/PageHero.astro';
-import AuthorBox from '../../components/AuthorBox.astro';
-import EventRow from '../../components/EventRow.astro';
+import PageHero from 'popular:component/PageHero';
+import AuthorBox from 'popular:component/AuthorBox';
+import EventRow from 'popular:component/EventRow';
 
 export async function getStaticPaths() {
   const speakers = await safeCollection('speakers');
@@ -20,7 +20,7 @@ const events = (await safeCollection('events'))
 ---
 
 <BaseLayout title={entry.data.title} description={entry.data.bio}>
-  <PageHero eyebrow={STRINGS.eyebrowSpeaker} title={entry.data.title} lead={entry.data.bio} />
+  <PageHero eyebrow={STRINGS.eyebrowSpeaker} backHref="/speakers/" backLabel={STRINGS.allSpeakers} title={entry.data.title} />
   <section class="g-bg-white g-section">
     <div class="g-container">
       <div class="g-article" style="margin-bottom:var(--space-5)">

package/src/pages/speakers/index.astro

@@ -0,0 +1,26 @@
+---
+/** Speakers list, mirroring Hugo's layouts/speakers/list.html: every speaker
+ *  rendered as an AuthorBox, sorted by name. Fixes the "All speakers" backlink
+ *  on speaker detail pages, which previously had no list page to point to. */
+import { safeCollection } from '../../lib/collections';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import PageHero from '../../components/PageHero.astro';
+import AuthorBox from 'popular:component/AuthorBox';
+import SpeakerInvite from '../../components/SpeakerInvite.astro';
+import { SECTIONS } from 'popular:config';
+
+const speakers = (await safeCollection('speakers')).sort((a, b) => a.data.title.localeCompare(b.data.title));
+const sec = SECTIONS.speakers;
+---
+
+<BaseLayout title={sec.title} description={sec.lead}>
+  <PageHero eyebrow={sec.eyebrow} title={sec.title} lead={sec.lead} />
+  <section class="g-bg-white g-section">
+    <div class="g-container">
+      <div class="g-stack" style="max-width:52rem;gap:var(--space-3)">
+        {speakers.map((s) => <AuthorBox entry={s} base="/speakers/" />)}
+        <SpeakerInvite />
+      </div>
+    </div>
+  </section>
+</BaseLayout>

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

@@ -1,10 +1,10 @@
 ---
-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';
-import PageHero from '../../../components/PageHero.astro';
-import PostCard from '../../../components/PostCard.astro';
+import PageHero from 'popular:component/PageHero';
+import PostCard from 'popular:component/PostCard';
 import Pagination from '../../../components/Pagination.astro';
 
 /* One route serves /tags/<tag>/ and /tags/<tag>/page/N/, matching the Hugo
@@ -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/talks/[...page].astro

@@ -0,0 +1,58 @@
+---
+/** §3 talk archive index. Opt-in: builds only when SITE.talks is true (the
+ *  Astro counterpart of Hugo's "create content/talks/_index.md to enable"),
+ *  so sites without recordings do not grow an empty page. Aggregates every
+ *  talk across events, newest first, filterable by the parent event's tags
+ *  via the shared blog-filter.js (same [data-filterbar] / [data-tags] markup
+ *  as the blog list). */
+import { SITE, STRINGS } from 'popular:config';
+import { safeCollection } from '../../lib/collections';
+import { collectTalks } from '../../lib/talks';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import PageHero from 'popular:component/PageHero';
+
+export async function getStaticPaths() {
+  if ((SITE as Record<string, any>).talks !== true) return [];
+  const events = (await safeCollection('events')).filter((e) => !e.data.draft);
+  const speakers = await safeCollection('speakers');
+  return [{ params: { page: undefined }, props: { talks: collectTalks(events, speakers) } }];
+}
+
+const { talks } = Astro.props;
+const tags = [...new Set(talks.flatMap((t) => t.tags))].sort();
+const fmt = (d: Date) => d.toLocaleDateString(SITE.locale, { month: 'short', day: 'numeric', year: 'numeric' });
+---
+
+<BaseLayout title={STRINGS.talks} description={STRINGS.talksLead}>
+  <PageHero eyebrow={STRINGS.talks} title={STRINGS.talks} lead={STRINGS.talksLead} />
+  <section class="g-bg-white g-section">
+    <div class="g-container">
+      <div class="g-row" data-filterbar style="margin-bottom:var(--space-5)">
+        {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>
+      <div class="g-stack" style="gap:var(--space-3)">
+        {talks.map((t) => (
+          <div class="g-talk" data-tags={t.tags.join(',')}>
+            <div class="g-talk__title">{t.title}</div>
+            {t.speakerName && (
+              <div class="g-talk__by"><i class="fa-solid fa-microphone-lines" aria-hidden="true"></i> {t.speakerSlug ? <a href={`/speakers/${t.speakerSlug}/`}>{t.speakerName}</a> : t.speakerName}</div>
+            )}
+            <div class="g-talk__event"><i class="fa-solid fa-calendar-day" aria-hidden="true"></i> <a href={`/events/${t.eventId}/`}>{t.eventTitle}</a> · {fmt(t.date)}</div>
+            {(t.recording || t.slides) && (
+              <div class="g-row" style="gap:var(--space-2)">
+                {t.recording && <a class="g-btn g-btn--sm g-btn--outline" href={t.recording} rel="noopener" target="_blank"><i class="fa-solid fa-circle-play" aria-hidden="true"></i> {STRINGS.watchRecording}</a>}
+                {t.slides && <a class="g-btn g-btn--sm g-btn--ghost" href={t.slides} rel="noopener" target="_blank"><i class="fa-solid fa-file-lines" aria-hidden="true"></i> {STRINGS.viewSlides}</a>}
+              </div>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  </section>
+</BaseLayout>

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

@@ -20,11 +20,11 @@ const events = (await safeCollection('events'))
 ---
 
 <BaseLayout title={d.title} description={d.address}>
-  <PageHero eyebrow={STRINGS.eyebrowVenue} title={d.title} lead={d.address} />
+  <PageHero eyebrow={STRINGS.eyebrowVenue} backHref="/venues/" backLabel={STRINGS.allVenues} 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)" />}
+        {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>}
@@ -36,6 +36,17 @@ const events = (await safeCollection('events'))
             {d.accessibility && <div class="g-callout__body"><i class="fa-solid fa-universal-access" aria-hidden="true"></i> {d.accessibility}</div>}
           </div>
         )}
+        {(d.wheelchair || d.transit || d.parking || d.access) && (
+          <>
+            <div class="g-section-head" style="margin-top:var(--space-4)"><span class="g-eyebrow">{STRINGS.eyebrowVenue}</span><h2 style="font-size:var(--text-xl)">{STRINGS.gettingThere}</h2></div>
+            {d.wheelchair && <p><span class="g-badge g-badge--success g-badge--soft"><i class="fa-solid fa-wheelchair" aria-hidden="true"></i> {STRINGS.wheelchairAccessible}</span></p>}
+            <div class="g-meta-line" style="flex-direction:column;align-items:flex-start;gap:.4rem">
+              {d.transit && <span><i class="fa-solid fa-train-subway" aria-hidden="true"></i> <strong>{STRINGS.transit}:</strong> {d.transit}</span>}
+              {d.parking && <span><i class="fa-solid fa-square-parking" aria-hidden="true"></i> <strong>{STRINGS.parking}:</strong> {d.parking}</span>}
+            </div>
+            {d.access && <div class="g-prose" style="margin-top:var(--space-3)"><p>{d.access}</p></div>}
+          </>
+        )}
         <div class="g-prose" style="margin-top:var(--space-4)"><Content /></div>
       </div>
       {events.length > 0 && (

package/src/pages/venues/index.astro

@@ -0,0 +1,33 @@
+---
+/** Venues list, mirroring Hugo's layouts/venues/list.html: a card grid of every
+ *  venue, sorted by name. Fixes the "All venues" backlink on venue detail pages,
+ *  which previously had no list page to point to. */
+import { safeCollection } from '../../lib/collections';
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import PageHero from '../../components/PageHero.astro';
+import { SECTIONS } from 'popular:config';
+
+const venues = (await safeCollection('venues')).sort((a, b) => a.data.title.localeCompare(b.data.title));
+const sec = SECTIONS.venues;
+---
+
+<BaseLayout title={sec.title} description={sec.lead}>
+  <PageHero eyebrow={sec.eyebrow} title={sec.title} lead={sec.lead} />
+  <section class="g-bg-white g-section">
+    <div class="g-container">
+      <div class="g-grid-3">
+        {venues.map((v) => (
+          <article class="g-card">
+            {v.data.photo && (
+              <a href={`/venues/${v.id}/`} class="g-card__media"><img src={v.data.photo} alt={v.data.title} loading="lazy" decoding="async" /></a>
+            )}
+            <div class="g-card__body">
+              <h3 class="g-card__title"><a href={`/venues/${v.id}/`}>{v.data.title}</a></h3>
+              {v.data.address && <div class="g-card__text"><i class="fa-solid fa-location-dot" aria-hidden="true"></i> {v.data.address}</div>}
+            </div>
+          </article>
+        ))}
+      </div>
+    </div>
+  </section>
+</BaseLayout>

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); }
@@ -308,3 +320,32 @@ pre:hover .g-copy, .g-copy:focus-visible { opacity: 1; }
   .g-nav__toggle { display: block; }
   .g-nav__cta { display: none; }
 }
+
+/* Notice banner (§5): site-wide static announcement above the header. */
+.g-notice { background: var(--surface-wash); border-bottom: var(--border-width) solid var(--border-subtle); color: var(--text-body); font-size: var(--text-sm); }
+.g-notice__inner { display: flex; gap: 0.4rem 0.7rem; align-items: center; justify-content: center; flex-wrap: wrap; padding: 0.6rem var(--space-4); text-align: center; }
+.g-notice__inner > i { color: var(--text-link); }
+.g-notice a { color: var(--text-link); font-weight: var(--weight-medium); text-decoration: underline; }
+
+/* Designed empty state (§5): zero upcoming events on home + events list. */
+.g-empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; padding: var(--space-5) 0; }
+.g-empty .g-lead { margin: 0; max-width: 32rem; }
+
+/* Talk archive (§3): a talk entry on the event page and the /talks/ index. */
+.g-talk { display: flex; flex-direction: column; gap: 0.4rem; padding: var(--space-3); border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card); }
+.g-talk__title { font-weight: var(--weight-medium); }
+.g-talk__by { font-size: var(--text-sm); color: var(--text-muted); }
+.g-talk__by a { color: var(--text-link); }
+.g-talk__event { font-size: var(--text-sm); color: var(--text-muted); }
+.g-talk__event a { color: var(--text-link); }
+
+/* Photo gallery + pullquote (§6). No JS, no lightbox: each photo links to its
+   full-size image (native <a>, the deliberate non-feature). */
+.g-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3); margin: var(--space-4) 0; }
+.g-gallery__item { margin: 0; }
+.g-gallery__item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); display: block; }
+.g-gallery__item figcaption { font-size: var(--text-sm); color: var(--text-muted); margin-top: 0.35rem; }
+.g-pullquote { margin: var(--space-4) 0; padding-left: var(--space-4); border-left: 3px solid var(--text-link); }
+.g-pullquote blockquote { margin: 0; font-size: var(--text-lg); font-style: italic; }
+.g-pullquote figcaption { margin-top: 0.5rem; font-size: var(--text-sm); color: var(--text-muted); font-style: normal; }
+.g-pullquote figcaption::before { content: "\2014 \00a0"; }