astro-theme-popular 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Mariatta
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,40 @@
+# astro-theme-popular
+
+**Popular** is a warm, community-first Astro theme for meetups, clubs and fan
+communities: events with venues and speakers, a multi-author blog, organizer
+docs with persistent checklists, and one-block re-theming, shipped as an
+Astro integration.
+
+```bash
+npm install astro-theme-popular
+```
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+import popular from 'astro-theme-popular';
+
+export default defineConfig({
+  site: 'https://your.community',
+  integrations: [mdx(), popular()],
+});
+```
+
+Your site keeps its own content (`src/content/`) and one typed config file
+(`popular.config.ts`); the theme injects the routes, layouts, styles and
+behavior. Adopt the content model in one line:
+
+```ts
+// src/content.config.ts
+export { collections } from 'astro-theme-popular/schemas';
+```
+
+- **Docs & feature guides**: https://mariatta.ca/hugo-theme-popular/
+- **Demos** (three fictional communities + one superfan personal site):
+  https://mariatta.ca/astro-theme-popular/
+- **Changelog & releases**: https://github.com/Mariatta/astro-theme-popular/releases
+- **Hugo twin** (same design system, full parity):
+  https://github.com/Mariatta/hugo-theme-popular
+
+Popular is MIT licensed and named after the song *Pop!ular* by Darren Hayes.

package/index.mjs

@@ -0,0 +1,81 @@
+/** Popular: Astro integration entry.
+ *
+ *   import popular from 'astro-theme-popular';
+ *   export default defineConfig({
+ *     site: 'https://your.community',
+ *     integrations: [mdx(), popular()],
+ *   });
+ *
+ * Theme config (SITE, STRINGS, BRAND, NAV, ...) lives in the adopter's
+ * `popular.config.ts` (same named exports as the classic src/config.ts;
+ * the shape is the parity contract, see PARITY.md). Theme code reads it
+ * through the `popular:config` virtual module.
+ */
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const PAGES = [
+  ['/', 'index.astro'],
+  ['/[slug]', '[slug].astro'],
+  ['/authors/[slug]', 'authors/[slug].astro'],
+  ['/blog/[...page]', 'blog/[...page].astro'],
+  ['/blog/[slug]', 'blog/[slug].astro'],
+  ['/events/[...page]', 'events/[...page].astro'],
+  ['/events/[slug]', 'events/[slug].astro'],
+  ['/organizers/[...page]', 'organizers/[...page].astro'],
+  ['/speakers/[slug]', 'speakers/[slug].astro'],
+  ['/venues/[slug]', 'venues/[slug].astro'],
+  ['/tags/[tag]/[...page]', 'tags/[tag]/[...page].astro'],
+  ['/rss.xml', 'rss.xml.js'],
+];
+
+export default function popular(options = {}) {
+  const configFile = options.configFile ?? './popular.config.ts';
+  return {
+    name: 'astro-theme-popular',
+    hooks: {
+      'astro:config:setup': ({ config, injectRoute, injectScript, updateConfig, addWatchFile }) => {
+        const root = fileURLToPath(config.root);
+        const userConfig = path.resolve(root, configFile);
+        addWatchFile(userConfig);
+        updateConfig({
+          vite: {
+            plugins: [
+              {
+                name: 'popular:config',
+                resolveId(id) {
+                  if (id === 'popular:config') return '\0popular:config';
+                },
+                load(id) {
+                  if (id === '\0popular:config') {
+                    return `export * from ${JSON.stringify(userConfig)};`;
+                  }
+                },
+              },
+            ],
+          },
+        });
+        // Behavior JS (Tier-1 shared files, byte-identical with the Hugo
+        // repo). Injected as one bundled page script: hashed, deduplicated,
+        // loaded once per page like the classic <script defer> tags.
+        injectScript(
+          'page',
+          [
+            'nav',
+            'checklist',
+            'toc',
+            'blog-filter',
+            'copy-code',
+          ].map((s) => `import 'astro-theme-popular/scripts/${s}.js';`).join('\n'),
+        );
+        for (const [pattern, entry] of PAGES) {
+          injectRoute({
+            pattern,
+            entrypoint: `astro-theme-popular/pages/${entry}`,
+            prerender: true,
+          });
+        }
+      },
+    },
+  };
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "astro-theme-popular",
+  "version": "0.3.0",
+  "description": "Popular: a warm, community-first Astro theme for meetups, clubs and fan communities. Ships as an Astro integration.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Mariatta",
+  "homepage": "https://mariatta.ca/hugo-theme-popular/",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Mariatta/astro-theme-popular.git"
+  },
+  "keywords": [
+    "astro-integration",
+    "astro-theme",
+    "community",
+    "meetup",
+    "events"
+  ],
+  "exports": {
+    ".": "./index.mjs",
+    "./schemas": "./schemas.ts",
+    "./pages/*": "./src/pages/*",
+    "./components/*": "./src/components/*",
+    "./layouts/*": "./src/layouts/*",
+    "./styles/*": "./src/styles/*",
+    "./scripts/*": "./scripts/*"
+  },
+  "dependencies": {
+    "@astrojs/rss": "^4.0.0"
+  },
+  "peerDependencies": {
+    "astro": "^7.0.0"
+  },
+  "files": [
+    "index.mjs",
+    "schemas.ts",
+    "src",
+    "scripts",
+    "tsconfig.json",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/schemas.ts

@@ -0,0 +1,137 @@
+import { defineCollection, z } from 'astro:content';
+import { glob } from 'astro/loaders';
+
+/** Front-matter schemas: kept 1:1 compatible with the Hugo theme (see PARITY.md). */
+
+const blog = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/blog' }),
+  schema: z.object({
+    title: z.string(),
+    date: z.coerce.date(),
+    draft: z.boolean().default(false), // drafts are excluded from builds, matching Hugo
+    author: z.string().optional(), // simple byline fallback
+    authors: z.array(z.string()).default([]), // slugs of entries in the authors collection
+    guestAuthors: z
+      .array(
+        z.object({
+          name: z.string(),
+          title: z.string().optional(),
+          photo: z.string().optional(),
+          bio: z.string().optional(),
+          website: z.string().optional(),
+          social: z.array(z.object({ label: z.string(), icon: z.string(), url: z.string() })).default([]),
+        })
+      )
+      .default([]),
+    description: z.string().optional(),
+    image: z.string().optional(),
+    tags: z.array(z.string()).default([]),
+    speaker: z
+      .object({
+        name: z.string(),
+        title: z.string().optional(),
+        photo: z.string().optional(),
+        bio: z.string().optional(),
+      })
+      .optional(),
+  }),
+});
+
+const events = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/events' }),
+  schema: z.object({
+    title: z.string(),
+    date: z.coerce.date(), // the event's start time; upcoming vs past is decided by this
+    draft: z.boolean().default(false), // drafts are excluded from builds, matching Hugo
+    description: z.string().optional(),
+    image: z.string().optional(),
+    tags: z.array(z.string()).default([]),
+    time: z.string().optional(),
+    venue: z.string().optional(),
+    venueWanted: z.boolean().default(false),
+    address: z.string().optional(),
+    speaker: z.string().optional(), // one-liner fallback when no speaker profiles are referenced
+    speakers: z.array(z.string()).default([]), // slugs of entries in the speakers collection
+    venueRef: z.string().optional(), // slug of a venues-collection entry; wins over the flat venue fields
+    checkin: z.string().optional(), // e.g. "Bring your registration email (print or phone) and photo ID."
+    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
+  }),
+});
+
+const organizers = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/organizers' }),
+  schema: z.object({
+    title: z.string(),
+    weight: z.number().default(100),
+    role: z.string().optional(),
+    photo: z.string().optional(),
+    description: z.string().optional(),
+    social: z
+      .array(z.object({ label: z.string(), icon: z.string(), url: z.string() }))
+      .default([]),
+  }),
+});
+
+/** Author profiles: referenced from blog posts via `authors: [slug]`. */
+const authors = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/authors' }),
+  schema: z.object({
+    title: z.string(), // the author's name
+    role: z.string().optional(),
+    photo: z.string().optional(),
+    bio: z.string().optional(),
+    website: z.string().optional(),
+    social: z.array(z.object({ label: z.string(), icon: z.string(), url: z.string() })).default([]),
+  }),
+});
+
+/** Speaker profiles: referenced from events via `speakers: [slug]`. */
+const speakers = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/speakers' }),
+  schema: z.object({
+    title: z.string(), // the speaker's name
+    role: z.string().optional(),
+    photo: z.string().optional(),
+    bio: z.string().optional(),
+    website: z.string().optional(),
+    social: z.array(z.object({ label: z.string(), icon: z.string(), url: z.string() })).default([]),
+  }),
+});
+
+/** Venue pages: referenced from events via `venueRef: slug`. */
+const venues = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/venues' }),
+  schema: z.object({
+    title: z.string(), // the venue's name
+    address: z.string().optional(),
+    photo: z.string().optional(),
+    notes: z.string().optional(), // arrival notes inherited by events held here
+    accessibility: z.string().optional(),
+    website: z.string().optional(),
+  }),
+});
+
+/** Long-form docs (handbook, runbooks), MDX with Callout/Checklist components. */
+const docs = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/docs' }),
+  schema: z.object({
+    title: z.string(),
+    eyebrow: z.string().optional(),
+    lead: z.string().optional(),
+    weight: z.number().default(100), // sidebar order, matching Hugo's weight
+  }),
+});
+
+/** Simple prose pages (about, code of conduct, get involved). */
+const pages = defineCollection({
+  loader: glob({ pattern: '**/*.{md,mdx}', base: './src/content/pages' }),
+  schema: z.object({
+    title: z.string(),
+    eyebrow: z.string().optional(),
+    lead: z.string().optional(),
+  }),
+});
+
+export const collections = { blog, events, organizers, authors, speakers, venues, docs, pages };

package/scripts/blog-filter.js

@@ -0,0 +1,24 @@
+/* Popular: client-side tag filter for the blog list.
+   Buttons [data-filter] show/hide [data-tags] cards. */
+(function () {
+  document.addEventListener("DOMContentLoaded", function () {
+    var bar = document.querySelector("[data-filterbar]");
+    if (!bar) return;
+    var buttons = Array.prototype.slice.call(bar.querySelectorAll("[data-filter]"));
+    var cards = Array.prototype.slice.call(document.querySelectorAll("[data-tags]"));
+    buttons.forEach(function (b) { b.setAttribute("aria-pressed", b.classList.contains("is-active") ? "true" : "false"); });
+    buttons.forEach(function (btn) {
+      btn.addEventListener("click", function () {
+        var f = btn.getAttribute("data-filter");
+        buttons.forEach(function (b) {
+          b.classList.toggle("is-active", b === btn);
+          b.setAttribute("aria-pressed", b === btn ? "true" : "false");
+        });
+        cards.forEach(function (card) {
+          var tags = (card.getAttribute("data-tags") || "").split(",");
+          card.style.display = (f === "*" || tags.indexOf(f) !== -1) ? "" : "none";
+        });
+      });
+    });
+  });
+})();

package/scripts/checklist.js

@@ -0,0 +1,42 @@
+/* Popular: persistent runbook checklists.
+   Any .g-checklist with a data-key gets its tick state saved to
+   localStorage so organizers can close the tab and resume. */
+(function () {
+  function initChecklist(root) {
+    var key = root.getAttribute("data-key") || "";
+    var items = Array.prototype.slice.call(root.querySelectorAll(".g-check"));
+    var countEl = root.querySelector(".g-checklist__count");
+    var state = {};
+    try { state = JSON.parse(localStorage.getItem("popular-check:" + key) || "{}"); } catch (e) {}
+
+    function render() {
+      var done = 0;
+      items.forEach(function (btn, i) {
+        var on = !!state[i];
+        btn.classList.toggle("is-done", on);
+        var box = btn.querySelector(".g-check__box");
+        if (box) box.innerHTML = on ? '<i class="fa-solid fa-check" aria-hidden="true"></i>' : "";
+        btn.setAttribute("aria-checked", on ? "true" : "false");
+        if (on) done++;
+      });
+      if (countEl) {
+        countEl.textContent = done + "/" + items.length + " " + (document.body.getAttribute("data-checklist-done") || "done");
+        countEl.classList.toggle("is-complete", done === items.length && items.length > 0);
+      }
+    }
+
+    if (countEl) countEl.setAttribute("aria-live", "polite");
+    items.forEach(function (btn, i) {
+      btn.setAttribute("role", "checkbox");
+      btn.addEventListener("click", function () {
+        state[i] = !state[i];
+        try { localStorage.setItem("popular-check:" + key, JSON.stringify(state)); } catch (e) {}
+        render();
+      });
+    });
+    render();
+  }
+  document.addEventListener("DOMContentLoaded", function () {
+    document.querySelectorAll(".g-checklist[data-key]").forEach(initChecklist);
+  });
+})();

package/scripts/copy-code.js

@@ -0,0 +1,25 @@
+/* Popular: copy button on fenced code blocks. */
+(function () {
+  document.addEventListener("DOMContentLoaded", function () {
+    if (!navigator.clipboard) return;
+    document.querySelectorAll("pre > code").forEach(function (code) {
+      var pre = code.parentElement;
+      var btn = document.createElement("button");
+      btn.className = "g-copy";
+      btn.type = "button";
+      btn.setAttribute("aria-label", document.body.getAttribute("data-copy-label") || "Copy code");
+      btn.innerHTML = '<i class="fa-regular fa-copy" aria-hidden="true"></i>';
+      btn.addEventListener("click", function () {
+        navigator.clipboard.writeText(code.innerText).then(function () {
+          btn.classList.add("is-copied");
+          btn.innerHTML = '<i class="fa-solid fa-check" aria-hidden="true"></i>';
+          setTimeout(function () {
+            btn.classList.remove("is-copied");
+            btn.innerHTML = '<i class="fa-regular fa-copy" aria-hidden="true"></i>';
+          }, 1600);
+        });
+      });
+      pre.appendChild(btn);
+    });
+  });
+})();

package/scripts/nav.js

@@ -0,0 +1,12 @@
+/* Popular: mobile nav toggle. */
+(function () {
+  document.addEventListener("DOMContentLoaded", function () {
+    var toggle = document.querySelector(".g-nav__toggle");
+    var links = document.querySelector(".g-navlinks");
+    if (!toggle || !links) return;
+    toggle.addEventListener("click", function () {
+      var open = links.classList.toggle("is-open");
+      toggle.setAttribute("aria-expanded", open ? "true" : "false");
+    });
+  });
+})();

package/scripts/toc.js

@@ -0,0 +1,25 @@
+/* Popular: scroll-spy for the docs table of contents.
+   Highlights the .g-doc-toc link whose section is in view. */
+(function () {
+  document.addEventListener("DOMContentLoaded", function () {
+    var toc = document.querySelector(".g-doc-toc");
+    if (!toc) return;
+    var links = Array.prototype.slice.call(toc.querySelectorAll("a[href^='#']"));
+    if (!links.length) return;
+    var map = {};
+    var targets = [];
+    links.forEach(function (a) {
+      var id = a.getAttribute("href").slice(1);
+      var el = document.getElementById(id);
+      if (el) { map[id] = a; targets.push(el); }
+    });
+    function setActive(id) {
+      links.forEach(function (a) { a.classList.toggle("is-active", a === map[id]); });
+    }
+    var obs = new IntersectionObserver(function (entries) {
+      entries.forEach(function (e) { if (e.isIntersecting) setActive(e.target.id); });
+    }, { rootMargin: "-30% 0px -60% 0px", threshold: 0 });
+    targets.forEach(function (t) { obs.observe(t); });
+    if (targets[0]) setActive(targets[0].id);
+  });
+})();

package/src/components/AuthorBox.astro

@@ -0,0 +1,51 @@
+---
+import { STRINGS } from 'popular:config';
+/** AuthorBox: bio card for a post author.
+ *  Pass either `entry` (an authors-collection entry, linked to its profile)
+ *  or `guest` (inline guestAuthors object from a post's front matter). */
+import type { CollectionEntry } from 'astro:content';
+
+interface Guest {
+  name: string; title?: string; photo?: string; bio?: string; website?: string;
+  social?: { label: string; icon: string; url: string }[];
+}
+interface Props {
+  entry?: CollectionEntry<'authors'> | CollectionEntry<'speakers'>;
+  guest?: Guest;
+  /** Profile URL prefix; speakers pass '/speakers/'. */
+  base?: string;
+}
+const { entry, guest, base = '/authors/' } = Astro.props;
+const d = entry?.data;
+---
+
+<div class="g-persona g-persona--primary">
+  {d && (
+    <>
+      {d.photo && <img class="g-persona__img" src={d.photo} alt={entry.data.title} />}
+      <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>}
+        <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.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>
+    </>
+  )}
+  {guest && (
+    <>
+      {guest.photo && <img class="g-persona__img" src={guest.photo} alt={guest.name} />}
+      <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>}
+        {guest.bio && <p class="g-persona__bio">{guest.bio}</p>}
+        <div class="g-persona__socials">
+          {guest.website && <a href={guest.website} aria-label={STRINGS.website} rel="noopener" target="_blank"><i class="fa-solid fa-globe" aria-hidden="true"></i></a>}
+          {(guest.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>
+    </>
+  )}
+</div>

package/src/components/Callout.astro

@@ -0,0 +1,22 @@
+---
+/** Callout: use inside MDX: <Callout tone="tip" title="Two-deep rule">…</Callout>
+ *  tone: info | tip | warn (mirrors the Hugo `callout` shortcode). */
+interface Props {
+  tone?: 'info' | 'tip' | 'warn';
+  title?: string;
+}
+const { tone = 'info', title } = Astro.props;
+const icons = {
+  info: 'fa-solid fa-circle-info',
+  tip: 'fa-solid fa-lightbulb',
+  warn: 'fa-solid fa-triangle-exclamation',
+};
+---
+
+<div class={`g-callout${tone !== 'info' ? ` g-callout--${tone}` : ''}`}>
+  <i class={icons[tone]} aria-hidden="true"></i>
+  <div class="g-callout__body">
+    {title && <div class="g-callout__title">{title}</div>}
+    <slot />
+  </div>
+</div>

package/src/components/Checklist.astro

@@ -0,0 +1,29 @@
+---
+import { STRINGS } from 'popular:config';
+/** Checklist: use inside MDX:
+ *  <Checklist id="rb-venue" items={[ 'Shortlist venues', 'Confirm access' ]} />
+ *  `id` must be unique across the site, it namespaces the saved progress
+ *  (localStorage, same key format as the Hugo theme: popular-check:<id>). */
+interface Props {
+  id: string;
+  items: string[];
+}
+const { id, items } = Astro.props;
+---
+
+<div class="g-checklist" data-key={id}>
+  <div class="g-checklist__head">
+    <span>{STRINGS.checklist}</span>
+    <span class="g-checklist__count">0/{items.length} {STRINGS.checklistDone}</span>
+  </div>
+  <ul>
+    {items.map((item) => (
+      <li>
+        <button class="g-check" type="button" role="checkbox" aria-checked="false">
+          <span class="g-check__box"></span>
+          <span class="g-check__label">{item}</span>
+        </button>
+      </li>
+    ))}
+  </ul>
+</div>

package/src/components/DemoBar.astro

@@ -0,0 +1,50 @@
+---
+/** DemoBar: fixed demo switcher, rendered ONLY when the config exports a
+ *  non-null DEMO_BAR (the theme's own demo builds). Adopters: set
+ *  `export const DEMO_BAR = null;` (or remove demo content) and it disappears.
+ *  Links are computed client-side by swapping the /<slug>/ path segment. */
+import * as cfg from 'popular:config';
+const bar = import.meta.env.DEV ? null : ((cfg as Record<string, any>).DEMO_BAR ?? null);
+---
+
+{bar && (
+  <>
+    <style>
+      .g-demobar { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 90;
+        display: flex; align-items: center; gap: 2px; padding: 5px;
+        background: color-mix(in srgb, var(--ink-900) 92%, transparent); color: var(--ink-200);
+        border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); font-size: var(--text-xs);
+        font-family: var(--font-sans); backdrop-filter: blur(8px); }
+      .g-demobar__label { padding: 0 8px 0 12px; color: var(--ink-400); font-weight: var(--weight-semibold);
+        letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: 0.65rem; }
+      .g-demobar a { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
+        border-radius: var(--radius-pill); color: var(--ink-300); text-decoration: none; white-space: nowrap; }
+      .g-demobar a:hover { color: #fff; background: rgba(255,255,255,0.08); }
+      .g-demobar a.is-current { background: var(--color-primary); color: #fff; }
+      @media (max-width: 640px) { .g-demobar__label { display: none; } }
+    </style>
+    <nav class="g-demobar" aria-label="Theme demos">
+      <a href="#" data-demo-home><i class="fa-solid fa-star" aria-hidden="true"></i>Popular</a>
+      <span class="g-demobar__label">Demo</span>
+      {bar.links.map((l: any) => (
+        <a href="#" data-demo={l.slug} class={l.slug === bar.current ? 'is-current' : ''}>
+          <i class={l.icon} aria-hidden="true"></i>{l.label}
+        </a>
+      ))}
+      {bar.repo && <a href={bar.repo} rel="noopener" target="_blank"><i class="fa-brands fa-github" aria-hidden="true"></i>Source</a>}
+    </nav>
+    <script is:inline define:vars={{ slugs: bar.links.map((l: any) => l.slug) }}>
+      (function () {
+        var path = window.location.pathname;
+        var re = new RegExp('/(' + slugs.join('|') + ')/');
+        var home = document.querySelector('.g-demobar a[data-demo-home]');
+        if (home) { var m = path.search(re); home.href = m >= 0 ? path.slice(0, m + 1) : '/'; }
+        document.querySelectorAll('.g-demobar a[data-demo]').forEach(function (a) {
+          var slug = a.getAttribute('data-demo');
+          if (re.test(path)) a.href = path.replace(re, '/' + slug + '/').replace(/\/[^/]*$/, '/');
+          else a.href = '/' + slug + '/';
+        });
+      })();
+    </script>
+  </>
+)}