astro-theme-popular 0.9.0 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-theme-popular",
-  "version": "0.9.0",
+  "version": "0.10.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/scripts/toc.js

@@ -13,8 +13,19 @@
       var el = document.getElementById(id);
       if (el) { map[id] = a; targets.push(el); }
     });
+    /* The sidebar has its own scrollbar when it outgrows the viewport, so
+       follow the reader: keep the highlighted entry in view. Done by hand
+       rather than with scrollIntoView, which would also scroll the page. */
+    function reveal(a) {
+      if (!a || toc.scrollHeight <= toc.clientHeight) return;
+      var box = toc.getBoundingClientRect();
+      var item = a.getBoundingClientRect();
+      if (item.top < box.top) toc.scrollTop -= box.top - item.top;
+      else if (item.bottom > box.bottom) toc.scrollTop += item.bottom - box.bottom;
+    }
     function setActive(id) {
       links.forEach(function (a) { a.classList.toggle("is-active", a === map[id]); });
+      reveal(map[id]);
     }
     var obs = new IntersectionObserver(function (entries) {
       entries.forEach(function (e) { if (e.isIntersecting) setActive(e.target.id); });

package/src/components/PreviewBar.astro

@@ -0,0 +1,58 @@
+---
+/** PreviewBar: fixed banner rendered ONLY when the config sets
+ *  `SITE.previewMode` (a generator's throwaway build, shown in an iframe). The
+ *  config written into an adopter's own repo never sets it, so the banner is
+ *  structurally incapable of reaching a real site.
+ *
+ *  Informational only, no controls: a preview is served with
+ *  `sandbox="allow-scripts"` and no allow-same-origin, so a button here could
+ *  not drive the surrounding page. Actions belong in the chrome outside the
+ *  iframe. Unlike DemoBar this renders in dev too: someone running the same
+ *  config locally is previewing as well. Twin of Hugo's preview-bar.html.
+ *
+ *  previewMode accepts `true` or `{ note: 'Expires in 60 minutes.' }`, and
+ *  POPULAR_PREVIEW_NOTE in the environment does the same for a build whose
+ *  config someone else owns.
+ */
+import * as cfg from 'popular:config';
+const { SITE, STRINGS } = cfg;
+/* A generator owns the build but not the adopter's config, so the banner can
+   also be switched on from the environment: the counterpart of Hugo's
+   HUGO_PARAMS_PREVIEWMODE_NOTE. Read at build time, never shipped to the
+   client, and absent from any build that did not ask for it. */
+const fromEnv = process.env.POPULAR_PREVIEW_NOTE;
+const preview = (SITE as Record<string, any>).previewMode
+  ?? (fromEnv ? { note: fromEnv } : null);
+const note = typeof preview === 'object' && preview ? preview.note : undefined;
+/* The demo bar occupies the same corner, and a previewed demo has both on, so
+   sit above it rather than on top of it. Matches DemoBar's own rule: it does
+   not render in dev. */
+const stacked = !import.meta.env.DEV && !!((cfg as Record<string, any>).DEMO_BAR ?? null);
+---
+
+{preview && (
+  <>
+    <style>
+      .g-previewbar { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 90;
+        display: flex; align-items: center; gap: 8px; padding: 8px 16px; max-width: calc(100vw - 28px);
+        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-previewbar__label { color: var(--ink-400); font-weight: var(--weight-semibold);
+        letter-spacing: var(--tracking-wide); text-transform: uppercase; font-size: 0.65rem; }
+      .g-previewbar__note { color: var(--ink-400); }
+      @media (max-width: 640px) { .g-previewbar__label { display: none; } }
+      /* Reserve space so the fixed bar never covers the footer credit. */
+      .g-footer__bottom { padding-bottom: 72px; }
+      /* Both bars on the same site: stack, and reserve for both. */
+      .g-previewbar--stacked { bottom: 62px; }
+    </style>
+    {stacked && <style>.g-footer__bottom {'{'} padding-bottom: 120px; {'}'}</style>}
+    <div class={`g-previewbar${stacked ? ' g-previewbar--stacked' : ''}`} role="status">
+      <i class="fa-solid fa-eye" aria-hidden="true"></i>
+      <span class="g-previewbar__label">{STRINGS.previewLabel}</span>
+      <span>{STRINGS.previewBanner}</span>
+      {note && <span class="g-previewbar__note">{note}</span>}
+    </div>
+  </>
+)}

package/src/layouts/BaseLayout.astro

@@ -10,6 +10,7 @@ import '../styles/components.css';
 import Header from 'popular:component/Header';
 import Footer from 'popular:component/Footer';
 import DemoBar from '../components/DemoBar.astro';
+import PreviewBar from '../components/PreviewBar.astro';
 import Notice from '../components/Notice.astro';
 import { SITE, BRAND, STRINGS } from 'popular:config';
 import { withBase, absoluteUrl } from '../lib/url';
@@ -111,5 +112,6 @@ const brandCss = `html:root{${vars.join(';')}}`;
     </main>
     <Footer />
     <DemoBar />
+    <PreviewBar />
   </body>
 </html>

package/src/styles/components.css

@@ -245,7 +245,13 @@ pre:hover .g-copy, .g-copy:focus-visible { opacity: 1; }
 
 /* ---------- Docs (handbook / runbooks) ---------- */
 .g-doc { display: grid; grid-template-columns: 260px 1fr; gap: var(--space-5); align-items: start; padding-block: var(--space-5) var(--space-6); }
-.g-doc-toc { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 0.15rem; }
+/* The sidebar outgrows the viewport on a long page (every h2/h3 of the
+   current page nests under its entry). A sticky element taller than the
+   viewport cannot be scrolled to its end, so the entries below the fold,
+   including the links to the other docs pages, were unreachable without
+   scrolling through the whole article first. Cap it to the space under
+   the header and give it its own scrollbar. */
+.g-doc-toc { position: sticky; top: 92px; max-height: calc(100vh - 92px - var(--space-4)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; display: flex; flex-direction: column; gap: 0.15rem; }
 .g-doc-toc__label { font-family: var(--font-display); font-size: var(--text-xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.6rem; }
 .g-doc-toc a { display: block; padding: 0.4rem 0.7rem; border-radius: var(--radius-md); font-size: var(--text-sm); line-height: 1.3; color: var(--text-body); border-left: 3px solid transparent; }
 .g-doc-toc a:hover { color: var(--color-primary); }
@@ -306,7 +312,7 @@ pre:hover .g-copy, .g-copy:focus-visible { opacity: 1; }
   /* Narrow screens: the sidebar becomes a pill row of sibling doc pages.
      The column labels and per-heading anchors only make sense in a sticky
      sidebar; the headings they point to sit directly below anyway. */
-  .g-doc-toc { position: static; flex-direction: row; flex-wrap: wrap; gap: 0.4rem; border-bottom: var(--border-width) solid var(--border-subtle); padding-bottom: 0.8rem; margin-bottom: 1rem; }
+  .g-doc-toc { position: static; max-height: none; overflow: visible; flex-direction: row; flex-wrap: wrap; gap: 0.4rem; border-bottom: var(--border-width) solid var(--border-subtle); padding-bottom: 0.8rem; margin-bottom: 1rem; }
   .g-doc-toc__label { display: none; }
   .g-doc-toc a[href^="#"] { display: none; }
   .g-doc-toc a { border: var(--border-width) solid var(--border-subtle); border-radius: var(--radius-pill); padding: 0.3rem 0.8rem; }