stack-site-builder 1.18.0 → 1.19.0

package/CHANGELOG.md

@@ -11,6 +11,22 @@ content schema, while a consuming site supplies only content, taxonomy data and
 config. Sites track the theme with `pnpm up stack-site-builder`, so each release
 here is a plain version bump they pull in.
 
+## [1.19.0] - 2026-07-23
+
+### Added
+
+- **Header member login/logout** — sites with private content get an account
+  control in the header: a login dropdown (id/password, same credential
+  machinery as the page gates) and a logout button once signed in. The
+  control reveals itself only when the new `/aas-auth.json` endpoint reports
+  configured login users (it serves the salted user table every private page
+  already embeds — nothing new is exposed); sites without `AAS_PRIVATE_*`
+  env see nothing. Credential verification moved into a shared
+  `loginWithCredentials` helper in `lib/private-client`.
+- **Slides nav hides without listed decks** — a site whose decks are all
+  private+unlisted reaches them from course pages, so the header's Slides
+  item now appears only when the index actually lists at least one deck.
+
 ## [1.18.0] - 2026-07-23
 
 ### Added
@@ -303,6 +319,7 @@ catalog sites from a thin content-only repository.
 - **Standalone development setup** — a devcontainer and a minimal `playground/`
   consuming site for developing and previewing the theme on its own.
 
+[1.19.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.18.0...v1.19.0
 [1.18.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.17.4...v1.18.0
 [1.17.4]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.17.3...v1.17.4
 [1.17.3]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.17.2...v1.17.3

package/index.mjs

@@ -129,6 +129,13 @@ export default function aasTheme({ glossary, sections = {} }) {
           });
         }
 
+        // Global (locale-less) login user table for the header login control —
+        // `{ enabled: false }` on sites without private-content env config.
+        injectRoute({
+          pattern: '/aas-auth.json',
+          entrypoint: 'stack-site-builder/pages/aas-auth.json.ts',
+        });
+
         updateConfig({
           markdown: aasMarkdown({ glossary, locales, defaultLocale }),
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stack-site-builder",
   "type": "module",
-  "version": "1.18.0",
+  "version": "1.19.0",
   "license": "MIT",
   "description": "The engine behind the awesome-*-stack catalog sites: an Astro theme with the catalog/concepts/articles/slides/samples routes, components, styles and markdown pipeline. Sites provide content, taxonomy data and config.",
   "repository": {

package/src/i18n/ui.ts

@@ -71,6 +71,7 @@ export const ui = {
     'code.copy': 'Copy code',
     'code.copied': 'Copied',
     'private.badge': 'Private',
+    'private.login': 'Log in',
     'private.locked': 'This content is private. Log in to view it.',
     'private.id': 'ID',
     'private.password': 'Password',
@@ -247,6 +248,7 @@ export const ui = {
     'code.copy': '코드 복사',
     'code.copied': '복사됨',
     'private.badge': '비공개',
+    'private.login': '로그인',
     'private.locked': '비공개 콘텐츠입니다. 로그인 후 볼 수 있습니다.',
     'private.id': '아이디',
     'private.password': '비밀번호',

package/src/layouts/BaseLayout.astro

@@ -8,6 +8,8 @@ import ThemeToggle from '../components/ThemeToggle.astro';
 import BackToTop from '../components/BackToTop.astro';
 import { getNavPages, pageSlugOf } from '../lib/pages';
 import { getNavProducts, getTopProducts, productSlugOf } from '../lib/products';
+import { getDecks } from '../lib/slides';
+import { listedInIndex } from '../lib/listing';
 import { homeTemplate } from '../lib/home';
 import { sectionEnabled, type SectionKey } from '../lib/sections';
 import { siteIcons } from '../lib/icons';
@@ -50,6 +52,9 @@ const navPages = await getNavPages(lang);
 // the Products-index link, which appears once the locale has any product.
 const navProducts = await getNavProducts(lang);
 const hasProducts = (await getTopProducts(lang)).length > 0;
+// The slides nav item only makes sense when the index actually lists decks —
+// a site whose decks are all private+unlisted reaches them from course pages.
+const hasListedDecks = (await getDecks(lang)).some((d) => listedInIndex(d.data));
 // The header's GitHub link — hidden for sites whose repo is private
 // (`repoNav: false` in site.ts) or that declare no repoUrl at all.
 const showRepoLink =
@@ -119,12 +124,16 @@ const allNavItems: {
     section: 'samples',
     svg: '<polyline points="4 17 10 11 4 5"/><line x1="12" x2="20" y1="19" y2="19"/>',
   },
-  {
-    href: getRelativeLocaleUrl(lang, 'slides/'),
-    label: t('nav.slides'),
-    section: 'slides',
-    svg: '<path d="M2 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/><path d="M12 12v9"/>',
-  },
+  ...(hasListedDecks
+    ? [
+        {
+          href: getRelativeLocaleUrl(lang, 'slides/'),
+          label: t('nav.slides'),
+          section: 'slides' as SectionKey,
+          svg: '<path d="M2 3h20"/><path d="M21 3v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V3"/><path d="m7 21 5-5 5 5"/><path d="M12 12v9"/>',
+        },
+      ]
+    : []),
   {
     href: getRelativeLocaleUrl(lang, 'glossary/'),
     label: t('nav.glossary'),
@@ -263,6 +272,53 @@ const navItems = allNavItems.filter((item) => !item.section || sectionEnabled(it
               ))
             }
           </div>
+          {/* Member login/logout for private content — hidden until
+              /aas-auth.json reports the site has login users configured. */}
+          <details class="aas-menu relative" data-auth hidden>
+            <summary
+              class="flex cursor-pointer list-none items-center rounded-lg border border-[var(--aas-border)] px-2.5 py-1 text-[var(--aas-text)] select-none"
+              aria-label={t('private.login')}
+              title={t('private.login')}
+            >
+              <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
+            </summary>
+            <div
+              class="absolute right-0 z-20 mt-1 w-64 rounded-lg border border-[var(--aas-border)] bg-[var(--aas-panel)] p-3 shadow-lg"
+            >
+              <form data-auth-form class="flex flex-col gap-2">
+                <input
+                  name="id"
+                  required
+                  autocomplete="username"
+                  placeholder={t('private.id')}
+                  class="rounded-lg border border-[var(--aas-border)] bg-[var(--aas-bg)] px-3 py-1.5 text-sm text-[var(--aas-text)]"
+                />
+                <input
+                  name="password"
+                  type="password"
+                  required
+                  autocomplete="current-password"
+                  placeholder={t('private.password')}
+                  class="rounded-lg border border-[var(--aas-border)] bg-[var(--aas-bg)] px-3 py-1.5 text-sm text-[var(--aas-text)]"
+                />
+                <p data-auth-error hidden class="text-xs text-[var(--aas-accent)]">{t('private.error')}</p>
+                <button
+                  type="submit"
+                  class="rounded-lg bg-[var(--aas-accent)] px-3 py-1.5 text-sm font-semibold text-white"
+                >
+                  {t('private.submit')}
+                </button>
+              </form>
+              <button
+                type="button"
+                data-auth-logout
+                hidden
+                class="w-full rounded-lg border border-[var(--aas-border)] px-3 py-1.5 text-sm text-[var(--aas-text)] hover:bg-[var(--aas-tint)]"
+              >
+                🔓 {t('private.logout')}
+              </button>
+            </div>
+          </details>
           <ThemeToggle lang={lang} />
           <LanguageSwitcher lang={lang} path={path} />
           <details class="aas-menu relative sm:hidden">
@@ -328,6 +384,55 @@ const navItems = allNavItems.filter((item) => !item.section || sectionEnabled(it
     <BackToTop lang={lang} />
 
     <script>
+      import {
+        hasSession,
+        clearSession,
+        loginWithCredentials,
+        type AuthData,
+      } from '../lib/private-client';
+
+      // Header member login/logout: reveal the control only when the site has
+      // login users configured (/aas-auth.json — { enabled: false } otherwise).
+      const authCtrl = document.querySelector<HTMLDetailsElement>('[data-auth]');
+      if (authCtrl) {
+        (async () => {
+          try {
+            const base = import.meta.env.BASE_URL.replace(/\/$/, '');
+            const res = await fetch(`${base}/aas-auth.json`);
+            const data = (await res.json()) as { enabled: boolean } & AuthData;
+            if (!data.enabled) return;
+            authCtrl.hidden = false;
+            const form = authCtrl.querySelector<HTMLFormElement>('[data-auth-form]')!;
+            const logoutBtn = authCtrl.querySelector<HTMLButtonElement>('[data-auth-logout]')!;
+            const errorEl = authCtrl.querySelector<HTMLElement>('[data-auth-error]')!;
+            const sync = () => {
+              const on = hasSession(data.days);
+              form.hidden = on;
+              logoutBtn.hidden = !on;
+            };
+            sync();
+            logoutBtn.addEventListener('click', () => {
+              clearSession();
+              location.reload();
+            });
+            form.addEventListener('submit', async (e) => {
+              e.preventDefault();
+              errorEl.hidden = true;
+              const fd = new FormData(form);
+              const ok = await loginWithCredentials(
+                data,
+                String(fd.get('id') ?? ''),
+                String(fd.get('password') ?? ''),
+              );
+              if (ok) location.reload();
+              else errorEl.hidden = false;
+            });
+          } catch {
+            /* endpoint unavailable — control stays hidden */
+          }
+        })();
+      }
+
       import { initOnReady } from '../lib/reinit';
 
       // Clicking a heading's "#" anchor copies that section's URL to the

package/src/lib/private-client.ts

@@ -60,7 +60,7 @@ function storedKey(days: number): Uint8Array | null {
   }
 }
 
-function clearSession(): void {
+export function clearSession(): void {
   try {
     localStorage.removeItem(STORE);
   } catch {
@@ -68,6 +68,50 @@ function clearSession(): void {
   }
 }
 
+/** The user table a login form needs — a GateData without the content. */
+export interface AuthData {
+  users: { h: string; s: string; iv: string; w: string }[];
+  salt: string;
+  days: number;
+}
+
+/** Whether this device holds a live session key. */
+export function hasSession(days: number): boolean {
+  return storedKey(days) !== null;
+}
+
+/**
+ * Verify credentials by unwrapping the site key (AES-GCM authentication
+ * fails on a wrong password) and store the session on success. Shared by
+ * the per-page gate form and the header login control.
+ */
+export async function loginWithCredentials(
+  data: AuthData,
+  id: string,
+  password: string,
+): Promise<boolean> {
+  const salt = dec(data.salt);
+  const idBytes = new TextEncoder().encode(id.trim().toLowerCase());
+  const joined = new Uint8Array(salt.length + idBytes.length);
+  joined.set(salt);
+  joined.set(idBytes, salt.length);
+  const h = await sha256Hex(joined);
+  const user = data.users.find((u) => u.h === h);
+  if (!user) return false;
+  try {
+    const kek = await deriveKek(password, dec(user.s));
+    const k = new Uint8Array(await aesDecrypt(kek, dec(user.iv), dec(user.w)));
+    try {
+      localStorage.setItem(STORE, JSON.stringify({ k: enc(k), t: Date.now() }));
+    } catch {
+      /* private browsing — session just won't persist */
+    }
+    return true;
+  } catch {
+    return false; // wrong password (unwrap failed)
+  }
+}
+
 /** Swap the gate for the decrypted HTML; re-run inline scripts; notify re-init hooks. */
 function inject(gate: HTMLElement, html: string, logoutLabel: string): void {
   const host = document.createElement('div');

package/src/pages/aas-auth.json.ts

@@ -0,0 +1,22 @@
+import type { APIRoute } from 'astro';
+import { privateClientData } from '../lib/private';
+
+/**
+ * The site's login user table (salted id hashes + per-user wrapped keys —
+ * the same data every private page already embeds in its gate payload, so
+ * this exposes nothing new). Powers the header login control on sites with
+ * private content; sites without the AAS_PRIVATE_* env render
+ * `{ enabled: false }` and the control stays hidden.
+ */
+export const GET: APIRoute = () => {
+  try {
+    const data = privateClientData();
+    return new Response(JSON.stringify({ enabled: true, ...data }), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  } catch {
+    return new Response(JSON.stringify({ enabled: false }), {
+      headers: { 'Content-Type': 'application/json' },
+    });
+  }
+};