astro-theme-popular 0.4.0 → 0.5.0

package/index.mjs

@@ -21,7 +21,7 @@ import { fileURLToPath } from 'node:url';
    folder-organized content ids (2019-pycon-us/cooper-lees) resolve. */
 const ROUTES = {
   home: [['/', 'index.astro']],
-  pages: [['/[...slug]', '[slug].astro']],
+  pages: [['/[...slug]', '[...slug].astro']],
   authors: [['/authors/[...slug]', 'authors/[slug].astro']],
   blog: [
     ['/blog/[...page]', 'blog/[...page].astro'],
@@ -31,7 +31,10 @@ const ROUTES = {
     ['/events/[...page]', 'events/[...page].astro'],
     ['/events/[...slug]', 'events/[slug].astro'],
   ],
-  organizers: [['/organizers/[...page]', 'organizers/[...page].astro']],
+  organizers: [
+    ['/organizers/[...page]', 'organizers/[...page].astro'],
+    ['/organizers/[...slug]', 'organizers/[slug].astro'],
+  ],
   speakers: [['/speakers/[...slug]', 'speakers/[slug].astro']],
   venues: [['/venues/[...slug]', 'venues/[slug].astro']],
   tags: [['/tags/[tag]/[...page]', 'tags/[tag]/[...page].astro']],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-theme-popular",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Popular: a warm, community-first Astro theme for meetups, clubs and fan communities. Ships as an Astro integration.",
   "type": "module",
   "license": "MIT",

package/schemas.ts

@@ -131,6 +131,7 @@ const pages = defineCollection({
     title: z.string(),
     eyebrow: z.string().optional(),
     lead: z.string().optional(),
+    shortTitle: z.string().optional(),
   }),
 });
 

package/src/components/AuthorBox.astro

@@ -10,13 +10,14 @@ interface Guest {
   social?: { label: string; icon: string; url: string }[];
 }
 interface Props {
-  entry?: CollectionEntry<'authors'> | CollectionEntry<'speakers'>;
+  entry?: CollectionEntry<'authors'> | CollectionEntry<'speakers'> | CollectionEntry<'organizers'>;
   guest?: Guest;
   /** Profile URL prefix; speakers pass '/speakers/'. */
   base?: string;
 }
 const { entry, guest, base = '/authors/' } = Astro.props;
 const d = entry?.data;
+const bio = d ? ((d as any).bio ?? (d as any).description) : undefined;
 ---
 
 <div class="g-persona g-persona--primary">
@@ -26,9 +27,9 @@ const d = entry?.data;
       <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>}
-        {d.bio && <p class="g-persona__bio">{d.bio}</p>}
+        {bio && <p class="g-persona__bio">{bio}</p>}
         <div class="g-persona__socials">
-          {d.website && <a href={d.website} aria-label={STRINGS.website} rel="noopener" target="_blank"><i class="fa-solid fa-globe" aria-hidden="true"></i></a>}
+          {(d as any).website && <a href={(d as any).website} aria-label={STRINGS.website} rel="noopener" target="_blank"><i class="fa-solid fa-globe" aria-hidden="true"></i></a>}
           {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/OrganizerCard.astro

@@ -7,8 +7,8 @@ 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.photo && <a href={`/organizers/${organizer.id}/`}><img class="g-org__img" src={d.photo} alt={d.title} loading="lazy" /></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>}
   {d.social.length > 0 && (

package/src/components/PostCard.astro

@@ -1,5 +1,5 @@
 ---
-import { SITE } from 'popular:config';
+import { SITE, SECTIONS_MAP } from 'popular:config';
 import { tagSlug } from '../lib/slugs';
 import type { CollectionEntry } from 'astro:content';
 import { safeCollection } from '../lib/collections';
@@ -8,8 +8,11 @@ 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 safeCollection('authors');
+// Mirror of the Hugo card's date guard: this component can render date-less
+// content, so omit the date (and, below, the whole eyebrow) when absent.
+const hasDate = d.date instanceof Date && !Number.isNaN(+d.date) && d.date.getFullYear() > 1;
+const month = hasDate ? d.date.toLocaleDateString(SITE.locale, { month: 'short', year: 'numeric' }) : '';
+const allAuthors = await safeCollection(SECTIONS_MAP.authors);
 const names = [
   ...d.authors.map((slug) => allAuthors.find((a) => a.id === slug)?.data.title ?? slug),
   ...d.guestAuthors.map((g) => g.name),
@@ -22,7 +25,9 @@ if (!names.length && d.author) names.push(d.author);
     <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>
+    {(month || names.length > 0) && (
+      <span class="g-card__eyebrow">{month}{month && names.length > 0 && ' · '}{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 && (

package/src/lib/stats.ts

@@ -0,0 +1,36 @@
+/** Resolve a home-page stat value, mirroring partials/stat-value.html.
+ *  Reusable from any page that shows a stats strip.
+ *  - @pastEventCount           past-event count, rounded ("70+")
+ *  - @count:<section>          live entry count of a collection
+ *  - @count:<section>:rounded  same, rounded down to "70+" at ten or more
+ *  Any other value passes through unchanged. */
+const round = (n: number) => (n >= 10 ? `${Math.floor(n / 10) * 10}+` : String(n));
+
+export function formatStat(
+  value: string,
+  ctx: { pastCount: number; counts: Record<string, number> },
+): string {
+  if (value === '@pastEventCount') return round(ctx.pastCount);
+  if (value.startsWith('@count:')) {
+    let rest = value.slice('@count:'.length);
+    let rounded = false;
+    if (rest.endsWith(':rounded')) {
+      rounded = true;
+      rest = rest.slice(0, -':rounded'.length);
+    }
+    const n = ctx.counts[rest] ?? 0;
+    return rounded ? round(n) : String(n);
+  }
+  return value;
+}
+
+/** Collection names referenced by @count: values in a stats array. */
+export function countSectionsIn(stats: { value: string }[]): string[] {
+  const names = new Set<string>();
+  for (const s of stats ?? []) {
+    if (s?.value?.startsWith('@count:')) {
+      names.add(s.value.slice('@count:'.length).replace(/:rounded$/, ''));
+    }
+  }
+  return [...names];
+}

package/src/pages/{[slug].astro → [...slug].astro}

@@ -10,13 +10,23 @@ import PageHero from '../components/PageHero.astro';
 export async function getStaticPaths() {
   const pages = await safeCollection('pages');
   const docs = await safeCollection('docs');
+  const byId = new Map(pages.map((p) => [p.id, p]));
   return [
-    ...pages.map((entry) => ({ params: { slug: entry.id }, props: { entry, kind: 'page' } })),
-    ...docs.map((entry) => ({ params: { slug: entry.id }, props: { entry, kind: 'doc' } })),
+    ...pages.map((entry) => {
+      // Nested page (policies/conduct) links back to its parent segment;
+      // root pages have no parent. Label prefers the parent's shortTitle.
+      const cut = entry.id.lastIndexOf('/');
+      const parentEntry = cut > 0 ? byId.get(entry.id.slice(0, cut)) : undefined;
+      const parent = parentEntry
+        ? { href: `/${parentEntry.id}/`, label: parentEntry.data.shortTitle ?? parentEntry.data.title }
+        : null;
+      return { params: { slug: entry.id }, props: { entry, kind: 'page', parent } };
+    }),
+    ...docs.map((entry) => ({ params: { slug: entry.id }, props: { entry, kind: 'doc', parent: null } })),
   ];
 }
 
-const { entry, kind } = Astro.props;
+const { entry, kind, parent } = 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
@@ -54,8 +64,11 @@ const allDocs = (await safeCollection('docs')).sort(
   ) : (
     <section class="g-bg-white g-section">
       <div class="g-container">
-        <div class="g-article g-prose">
-          <Content />
+        <div class="g-article">
+          {parent && (
+            <a href={parent.href} 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> {parent.label}</a>
+          )}
+          <div class="g-prose"><Content /></div>
         </div>
       </div>
     </section>

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

@@ -3,7 +3,7 @@ import { render } from 'astro:content';
 import { safeCollection } from '../../lib/collections';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import AuthorBox from '../../components/AuthorBox.astro';
-import { SUPPORT, SITE, STRINGS } from 'popular:config';
+import { SUPPORT, SITE, STRINGS, SECTIONS_MAP } from 'popular:config';
 import { tagSlug } from '../../lib/slugs';
 
 export async function getStaticPaths() {
@@ -25,7 +25,7 @@ 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 safeCollection('authors');
+const allAuthors = await safeCollection(SECTIONS_MAP.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),
@@ -84,7 +84,7 @@ const byline = bylineNames.length > 1
         <>
           <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} />)}
+            {resolved.map((a) => <AuthorBox entry={a} base={`/${SECTIONS_MAP.authors}/`} />)}
             {d.guestAuthors.map((g) => <AuthorBox guest={g} />)}
           </div>
         </>

package/src/pages/index.astro

@@ -1,9 +1,10 @@
 ---
 import { safeCollection } from '../lib/collections';
+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 } from 'popular:config';
+import { HOME, SITE, STRINGS, SECTIONS_MAP } from 'popular:config';
 
 const now = new Date();
 const events = (await safeCollection('events')).filter((e) => !e.data.draft);
@@ -11,13 +12,17 @@ const upcoming = events.filter((e) => e.data.date >= now).sort((a, b) => +a.data
 const next = upcoming[0];
 
 const posts = (await safeCollection('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). */
+/* Stat values: @pastEventCount and @count:<section>[:rounded] resolve to
+   live numbers (Hugo parity, see lib/stats). Draft entries are excluded to
+   match Hugo's RegularPages. */
 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 counts: Record<string, number> = {};
+for (const name of countSectionsIn(HOME.stats ?? [])) {
+  counts[name] = (await safeCollection(name)).filter((e) => !(e.data as any)?.draft).length;
+}
+const statValue = (v: string) => formatStat(v, { pastCount, counts });
 const nextVenue = next?.data.venueRef ? (await safeCollection('venues')).find((v) => v.id === next.data.venueRef)?.data.title : undefined;
-const organizers = (await safeCollection('organizers')).sort((a, b) => a.data.weight - b.data.weight);
+const organizers = (await safeCollection(SECTIONS_MAP.team)).sort((a, b) => a.data.weight - b.data.weight);
 
 const h = HOME;
 ---
@@ -130,7 +135,7 @@ const h = HOME;
           {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>
+          <a class="g-btn g-btn--outline" href={`/${SECTIONS_MAP.team}/`}>All organizers</a>
         </div>
       </div>
     </section>

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

@@ -0,0 +1,29 @@
+---
+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';
+
+export async function getStaticPaths() {
+  const organizers = await safeCollection('organizers');
+  return organizers.map((entry) => ({ params: { slug: entry.id }, props: { entry } }));
+}
+
+const { entry } = Astro.props;
+const d = entry.data;
+const { Content } = await render(entry);
+---
+
+<BaseLayout title={d.title} description={d.description}>
+  <PageHero eyebrow={d.role ?? STRINGS.eyebrowOrganizer} title={d.title} lead={d.description} />
+  <section class="g-bg-white g-section">
+    <div class="g-container">
+      <div class="g-article">
+        <AuthorBox entry={entry} base="/organizers/" />
+        <Content />
+      </div>
+    </div>
+  </section>
+</BaseLayout>

package/src/pages/rss.xml.js

@@ -1,6 +1,6 @@
 import rss from '@astrojs/rss';
 import { safeCollection } from '../lib/collections';
-import { SITE } from 'popular:config';
+import { SITE, SECTIONS_MAP } from 'popular:config';
 
 const escapeXml = (s) => s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
 
@@ -8,7 +8,7 @@ export async function GET(context) {
   const posts = (await safeCollection('blog'))
     .filter((p) => !p.data.draft)
     .sort((a, b) => +b.data.date - +a.data.date);
-  const allAuthors = await safeCollection('authors');
+  const allAuthors = await safeCollection(SECTIONS_MAP.authors);
   return rss({
     title: SITE.title,
     description: SITE.description,