@acms-subir/core 0.0.2 → 0.2.0

package/src/lib/search-config.ts

@@ -0,0 +1,10 @@
+// Search feature toggle, configured per project via the integration:
+//   acms({ search: { enabled: false } })
+// integration.mjs validates and fills defaults before serializing; when
+// disabled it also skips injecting /search and /api/search, so this flag
+// only decides whether the layout renders the trigger + modal.
+import { userConfig } from 'virtual:acms-config';
+
+export const SEARCH = {
+  enabled: userConfig.search?.enabled ?? true,
+};

package/src/lib/search-i18n.ts

@@ -0,0 +1,45 @@
+// UI strings for the search modal and /search page. There is no site-wide
+// translation catalog yet — search is the first public surface with
+// per-locale chrome, so the dict lives here until one exists. Locales fall
+// back to English.
+export interface SearchStrings {
+  label: string;
+  placeholder: string;
+  posts: string;
+  pages: string;
+  tags: string;
+  authors: string;
+  empty: string;
+  result: string;
+  results: string;
+  button: string;
+}
+
+const STRINGS: Record<string, SearchStrings> = {
+  en: {
+    label: 'Search',
+    placeholder: 'Search posts, pages, tags and authors',
+    posts: 'Posts',
+    pages: 'Pages',
+    tags: 'Tags',
+    authors: 'Authors',
+    empty: 'Nothing found for',
+    result: 'result',
+    results: 'results',
+    button: 'Search',
+  },
+  es: {
+    label: 'Buscar',
+    placeholder: 'Busca artículos, páginas, etiquetas y autores',
+    posts: 'Artículos',
+    pages: 'Páginas',
+    tags: 'Etiquetas',
+    authors: 'Autores',
+    empty: 'No hay resultados para',
+    result: 'resultado',
+    results: 'resultados',
+    button: 'Buscar',
+  },
+};
+
+export const searchStrings = (locale: string): SearchStrings => STRINGS[locale] ?? STRINGS.en;

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

@@ -6,6 +6,7 @@ import { verifySessionToken, SESSION_COOKIE } from '../lib/auth';
 import { expandDynamicBlocks } from '../lib/dynamicBlocks';
 import { highlightCodeHtml } from '../lib/highlightCode';
 import { resolveDesign } from '../lib/theme';
+import { effectiveSettings } from '../lib/designPreview';
 
 const { slug } = Astro.params;
 const repo = await getRepo(Astro.locals);
@@ -17,7 +18,8 @@ if (!page || (page.status !== 'published' && !isAdmin)) {
   return new Response(null, { status: 404, statusText: 'Not found' });
 }
 const bodyHtml = page.bodyHtml ? highlightCodeHtml(await expandDynamicBlocks(page.bodyHtml, repo)) : '';
-const settings = await repo.getSettings();
+// ?designPreview=1 (admin-only) renders the staged Design-screen changes
+const settings = effectiveSettings(await repo.getSettings(), Astro.url, Astro.cookies);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const PageTemplate = (page.template ? resolveDesign(settings).theme.pageTemplates[page.template] : null) as any;
 ---

package/src/pages/admin/c/[collection]/[id].astro

@@ -5,7 +5,8 @@ import { createPreviewToken } from '../../../../lib/preview';
 import { resolveDesign } from '../../../../lib/theme';
 import { env } from '../../../../lib/env';
 import { BRAND } from '../../../../lib/brand';
-import { CONTENT } from '../../../../lib/content';
+import { CONTENT, collectionUrl } from '../../../../lib/content';
+import { mergePostDraft } from '../../../../lib/drafts';
 import PostEditor from '../../../../components/editor/PostEditor';
 import '../../../../styles/admin.css';
 import '../../../../styles/editor.css';
@@ -22,9 +23,14 @@ const post = await repo.getPost(id);
 if (!post) return new Response(null, { status: 404 });
 if (post.collection !== key) return Astro.redirect(`/admin/c/${post.collection}/${post.id}`);
 
+// The editor hydrates from the pending draft when one exists (live posts
+// stage their edits until Update); the live URL stays on the live slug.
+const editable = mergePostDraft(post);
+const livePath = collectionUrl(post.collection, post.slug);
+
 // Canonical content is the TipTap doc (as HTML). Legacy markdown posts are
 // converted on first open and become rich content on next save.
-const initialHTML = post.bodyHtml || (post.body ? renderMarkdown(post.body) : '');
+const initialHTML = editable.bodyHtml || (editable.body ? renderMarkdown(editable.body) : '');
 const previewPath = `/preview/post/${post.id}`;
 const sharePath = `${previewPath}?token=${createPreviewToken('post', post.id)}`;
 const unsplashEnabled = Boolean(env('UNSPLASH_ACCESS_KEY'));
@@ -45,11 +51,12 @@ const templates = Object.keys(resolveDesign(settings).theme.postTemplates);
   <body>
     <PostEditor
       client:only="react"
-      post={post}
+      post={editable}
       initialHTML={initialHTML}
       unsplashEnabled={unsplashEnabled}
       previewPath={previewPath}
       sharePath={sharePath}
+      livePath={livePath}
       templates={templates}
     />
   </body>

package/src/pages/admin/c/[collection]/index.astro

@@ -116,6 +116,7 @@ const filterHref = (patch: Record<string, string>) => {
             </td>
             <td>
               <span class={`pill ${p.status}`}>{p.status}</span>
+              {p.draft && <span class="pill edited" title="Has pending edits — press Update in the editor to push them live">edited</span>}
               {p.status === 'scheduled' && p.scheduledAt && (
                 <div class="t-sub" style="margin-top:2px">
                   {new Date(p.scheduledAt).toLocaleString('en-US', { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' })}

package/src/pages/admin/design.astro

@@ -4,12 +4,16 @@ import { getRepo } from '../../lib/repo';
 import { env } from '../../lib/env';
 import DesignManager from '../../components/DesignManager';
 import { listThemes, FONT_PAIRINGS } from '../../lib/theme';
+import { mergeDesignDraft } from '../../lib/drafts';
 import { postUrl } from '../../lib/content';
 // ImagePicker (logo upload) styles live in editor.css
 import '../../styles/editor.css';
 
 const repo = await getRepo(Astro.locals);
-const settings = await repo.getSettings();
+const liveSettings = await repo.getSettings();
+// the manager edits the staged design when one exists; visitors keep the live one
+const settings = mergeDesignDraft(liveSettings);
+const pendingDesign = Boolean(liveSettings.draftDesign);
 // most recent published post powers the preview's "Post" tab
 const [latestPost] = await repo.listPublishedPosts();
 const postPreviewPath = latestPost ? postUrl(latestPost.slug) : null;
@@ -34,6 +38,7 @@ const unsplashEnabled = Boolean(env('UNSPLASH_ACCESS_KEY'));
   <DesignManager
     client:only="react"
     settings={{ ...settings, draftsApiKey: '' }}
+    pendingDesign={pendingDesign}
     themes={themes}
     pairings={[...FONT_PAIRINGS]}
     unsplashEnabled={unsplashEnabled}

package/src/pages/admin/index.astro

@@ -57,18 +57,21 @@ function ago(ts: number) {
   <div id="acms-update" hidden data-current={coreVersion} class="card card-pad" style="display:none;align-items:center;gap:10px;margin-bottom:14px;border-left:3px solid var(--accent)">
     <div>
       <b>ACMS <span id="acms-update-latest"></span> is available</b>
-      <span class="hint" style="margin-left:6px">you're on {coreVersion} — run <code>npx acms update</code>, then <code>npm run deploy</code>.</span>
+      <span class="hint" style="margin-left:6px">you're on {coreVersion} — run <code>npx acms update</code>; it prints the deploy steps for your setup.</span>
     </div>
-    <a class="btn sm ghost" style="margin-left:auto" href="https://github.com/zurielbm/acms-subir/releases" target="_blank" rel="noopener">What's new</a>
+    <a id="acms-update-notes" class="btn sm ghost" style="margin-left:auto" href="https://www.npmjs.com/package/@acms-subir/core" target="_blank" rel="noopener">What's new</a>
+    <button id="acms-update-dismiss" class="btn sm ghost" type="button" aria-label="Dismiss until the next release" title="Dismiss until the next release">×</button>
   </div>
   <script>
     // Ghost-style update nudge: npm registry check, cached a day, silent on
-    // any failure (offline, unpublished package, CORS).
+    // any failure (offline, unpublished package, CORS). Dismissal is stored
+    // per-version, so the banner returns on the next release.
     (async () => {
       const el = document.getElementById('acms-update');
       if (!el) return;
       const current = el.dataset.current ?? '';
       const KEY = 'acms-update-check';
+      const DISMISSED = 'acms-update-dismissed';
       let latest = '';
       try {
         const cached = JSON.parse(localStorage.getItem(KEY) ?? 'null');
@@ -82,16 +85,30 @@ function ago(ts: number) {
         }
       } catch { return; }
       const lt = (a: string, b: string) => {
-        const pa = a.split('.').map(Number), pb = b.split('.').map(Number);
+        // prerelease-blind on purpose except for the base-equal case: a site
+        // pinned to a canary (0.1.1-next.x) should be nudged once the real
+        // 0.1.1 lands on the latest tag, and never before
+        const pa = a.split('-')[0].split('.').map(Number), pb = b.split('-')[0].split('.').map(Number);
         for (let i = 0; i < 3; i++) { if ((pa[i] ?? 0) < (pb[i] ?? 0)) return true; if ((pa[i] ?? 0) > (pb[i] ?? 0)) return false; }
-        return false;
+        return a.includes('-') && !b.includes('-');
       };
-      if (latest && lt(current, latest)) {
-        const slot = document.getElementById('acms-update-latest');
-        if (slot) slot.textContent = latest;
-        el.hidden = false;
-        el.style.display = 'flex';
+      if (!latest || !lt(current, latest)) return;
+      try { if (localStorage.getItem(DISMISSED) === latest) return; } catch {}
+      const slot = document.getElementById('acms-update-latest');
+      if (slot) slot.textContent = latest;
+      // deep-link to the version's npm page — the repository is self-hosted and
+      // private, so npm is the only public place this release exists
+      const notes = document.getElementById('acms-update-notes');
+      if (notes instanceof HTMLAnchorElement) {
+        notes.href = `https://www.npmjs.com/package/@acms-subir/core/v/${encodeURIComponent(latest)}`;
       }
+      document.getElementById('acms-update-dismiss')?.addEventListener('click', () => {
+        try { localStorage.setItem(DISMISSED, latest); } catch {}
+        el.hidden = true;
+        el.style.display = 'none';
+      });
+      el.hidden = false;
+      el.style.display = 'flex';
     })();
   </script>
 

package/src/pages/admin/pages/[id].astro

@@ -5,6 +5,8 @@ import { createPreviewToken } from '../../../lib/preview';
 import { resolveDesign } from '../../../lib/theme';
 import { env } from '../../../lib/env';
 import { BRAND } from '../../../lib/brand';
+import { mergePageDraft } from '../../../lib/drafts';
+import { localeHomeUrl } from '../../../lib/i18n';
 import PostEditor from '../../../components/editor/PostEditor';
 import '../../../styles/admin.css';
 import '../../../styles/editor.css';
@@ -14,9 +16,14 @@ const id = Astro.params.id!;
 const page = await repo.getPage(id);
 if (!page) return new Response(null, { status: 404 });
 
+// The editor hydrates from the pending draft when one exists (live pages
+// stage their edits until Update); the live URL stays on the live slug.
+const editable = mergePageDraft(page);
+const livePath = page.isHome ? localeHomeUrl(page.locale) : `/${page.slug}`;
+
 // Canonical content is the TipTap doc (as HTML). Legacy widget-block pages
 // are converted on first open and become rich content on next save.
-const initialHTML = page.bodyHtml || blocksToHtml(page.blocks);
+const initialHTML = editable.bodyHtml || blocksToHtml(editable.blocks);
 const previewPath = `/preview/page/${page.id}`;
 const sharePath = `${previewPath}?token=${createPreviewToken('page', page.id)}`;
 const unsplashEnabled = Boolean(env('UNSPLASH_ACCESS_KEY'));
@@ -38,11 +45,12 @@ const templates = Object.keys(resolveDesign(settings).theme.pageTemplates);
     <PostEditor
       client:only="react"
       kind="page"
-      page={page}
+      page={editable}
       initialHTML={initialHTML}
       unsplashEnabled={unsplashEnabled}
       previewPath={previewPath}
       sharePath={sharePath}
+      livePath={livePath}
       templates={templates}
     />
   </body>

package/src/pages/admin/pages/index.astro

@@ -70,6 +70,7 @@ const fmt = (ts: number) => new Date(ts).toLocaleDateString('en-US', { month: 's
             </td>
             <td>
               <span class={`pill ${p.status}`}>{p.status}</span>
+              {p.draft && <span class="pill edited" title="Has pending edits — press Update in the editor to push them live">edited</span>}
               {p.isHome && <span class="pill home">home</span>}
               {I18N.enabled && <span class="pill lang">{(p.locale || I18N.defaultLocale).toUpperCase()}</span>}
             </td>

package/src/pages/admin/settings.astro

@@ -4,6 +4,7 @@ import { getRepo } from '../../lib/repo';
 import { verifySessionToken, OWNER_ENV, SESSION_COOKIE } from '../../lib/auth';
 import { invalidateRedirectCache } from '../../middleware';
 import { CONTENT } from '../../lib/content';
+import { UMAMI_ID_RE, META_PIXEL_ID_RE, TIKTOK_PIXEL_ID_RE, normalizeScriptUrl } from '../../lib/analytics';
 
 const repo = await getRepo(Astro.locals);
 
@@ -77,6 +78,57 @@ if (Astro.request.method === 'POST') {
       });
       flash = 'Code injection saved.';
     }
+  } else if (action === 'analytics') {
+    if (!isOwner) {
+      flashError = 'Only owners can edit analytics.';
+    } else {
+      // replay sample rate is edited as a percent, stored as a fraction
+      const replayPct = Number(String(form.get('umamiReplaySampleRate') ?? '15').trim());
+      const replayDuration = Number(String(form.get('umamiReplayMaxDuration') ?? '300000').trim());
+      const umami = {
+        enabled: form.get('umamiEnabled') === 'on',
+        websiteId: String(form.get('umamiWebsiteId') ?? '').trim(),
+        scriptUrl: String(form.get('umamiScriptUrl') ?? '').trim() || 'https://cloud.umami.is/script.js',
+        replay: {
+          enabled: form.get('umamiReplayEnabled') === 'on',
+          sampleRate: Math.round(replayPct) / 100,
+          maskLevel: (form.get('umamiReplayMaskLevel') === 'strict' ? 'strict' : 'moderate') as 'strict' | 'moderate',
+          maxDuration: replayDuration,
+        },
+      };
+      const metaPixel = {
+        enabled: form.get('metaEnabled') === 'on',
+        pixelId: String(form.get('metaPixelId') ?? '').trim(),
+      };
+      const tiktokPixel = {
+        enabled: form.get('tiktokEnabled') === 'on',
+        pixelId: String(form.get('tiktokPixelId') ?? '').trim(),
+      };
+      // reject bad values even while disabled — a stored ID must always be
+      // renderable, since these end up in set:html on every public page
+      if (umami.websiteId && !UMAMI_ID_RE.test(umami.websiteId)) {
+        flashError = 'Umami website ID should be a UUID — copy it from your Umami dashboard (Settings → Websites → Edit).';
+      } else if (!normalizeScriptUrl(umami.scriptUrl)) {
+        flashError = 'Umami script URL must be an https:// URL, e.g. https://cloud.umami.is/script.js';
+      } else if (!Number.isFinite(replayPct) || replayPct < 1 || replayPct > 100) {
+        flashError = 'Replay sample rate must be between 1 and 100 percent.';
+      } else if (!Number.isInteger(replayDuration) || replayDuration <= 0) {
+        flashError = 'Replay max duration is invalid.';
+      } else if (metaPixel.pixelId && !META_PIXEL_ID_RE.test(metaPixel.pixelId)) {
+        flashError = 'Meta Pixel ID should be numbers only — find it in Meta Events Manager.';
+      } else if (tiktokPixel.pixelId && !TIKTOK_PIXEL_ID_RE.test(tiktokPixel.pixelId)) {
+        flashError = 'TikTok Pixel ID should be letters and numbers only — find it in TikTok Events Manager.';
+      } else if (umami.enabled && !umami.websiteId) {
+        flashError = 'Enter the Umami website ID to enable it.';
+      } else if (metaPixel.enabled && !metaPixel.pixelId) {
+        flashError = 'Enter the Meta Pixel ID to enable it.';
+      } else if (tiktokPixel.enabled && !tiktokPixel.pixelId) {
+        flashError = 'Enter the TikTok Pixel ID to enable it.';
+      } else {
+        await repo.updateSettings({ analytics: { umami, metaPixel, tiktokPixel } });
+        flash = 'Analytics saved.';
+      }
+    }
   } else if (action === 'announcement') {
     // link must be a relative path or http(s) URL — never javascript: etc.
     const rawLink = String(form.get('annLink') ?? '').trim();
@@ -314,6 +366,102 @@ const remainingPresets = ORIGIN_PRESETS.filter((p) => !settings.draftsAllowedOri
     </div>
   )}
 
+  {isOwner && (
+    <div class="card card-pad">
+      <p class="card-title">Analytics</p>
+      <p style="margin:0">
+        Traffic and ad tracking on every public page. Only the ID is stored — the tracking code itself
+        is rendered by the CMS. The admin is never tracked. Mind visitor-consent rules (GDPR) if you
+        enable the ad pixels.
+      </p>
+      <form method="post">
+        <input type="hidden" name="action" value="analytics" />
+
+        <div style="border-top:1px solid var(--line);margin-top:14px;padding-top:12px">
+          <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
+            <input type="checkbox" name="umamiEnabled" checked={settings.analytics.umami.enabled} />
+            <span style="font-weight:600">Umami</span>
+          </label>
+          <div class="field-row">
+            <label class="field">
+              <span>Website ID</span>
+              <input type="text" name="umamiWebsiteId" value={settings.analytics.umami.websiteId} placeholder="94db1cb1-74f4-4a40-ad6c-962362670409" style="font-family:monospace;font-size:12.5px" />
+            </label>
+            <label class="field">
+              <span>Script URL</span>
+              <input type="text" name="umamiScriptUrl" value={settings.analytics.umami.scriptUrl} placeholder="https://cloud.umami.is/script.js" style="font-family:monospace;font-size:12.5px" />
+            </label>
+          </div>
+          <p class="hint" style="margin:0">
+            Privacy-friendly stats: pageviews, referrers, devices, countries, visit duration.
+            Umami Cloud by default — point Script URL at your own instance if self-hosting.
+          </p>
+          <div style="margin:10px 0 0 24px;padding:12px 14px;background:var(--panel-2);border:1px solid var(--line);border-radius:10px">
+            <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
+              <input type="checkbox" name="umamiReplayEnabled" checked={settings.analytics.umami.replay.enabled} />
+              <span style="font-weight:600">Session replay</span>
+            </label>
+            <div class="field-row">
+              <label class="field">
+                <span>Sample rate (%)</span>
+                <input type="number" name="umamiReplaySampleRate" min="1" max="100" step="1" value={Math.round(settings.analytics.umami.replay.sampleRate * 100)} />
+              </label>
+              <label class="field">
+                <span>Mask level</span>
+                <select name="umamiReplayMaskLevel">
+                  <option value="moderate" selected={settings.analytics.umami.replay.maskLevel === 'moderate'}>moderate</option>
+                  <option value="strict" selected={settings.analytics.umami.replay.maskLevel === 'strict'}>strict</option>
+                </select>
+              </label>
+              <label class="field">
+                <span>Max duration</span>
+                <select name="umamiReplayMaxDuration">
+                  <option value="60000" selected={settings.analytics.umami.replay.maxDuration === 60000}>1 minute</option>
+                  <option value="300000" selected={settings.analytics.umami.replay.maxDuration === 300000}>5 minutes</option>
+                  <option value="600000" selected={settings.analytics.umami.replay.maxDuration === 600000}>10 minutes</option>
+                  <option value="1800000" selected={settings.analytics.umami.replay.maxDuration === 1800000}>30 minutes</option>
+                </select>
+              </label>
+            </div>
+            <p class="hint" style="margin:0">
+              Records a sample of visitor sessions for playback in Umami (v3.1+, Behavior → Replays).
+              Umami keeps replays for 30 days. Inputs are masked — mind visitor-consent rules (GDPR) before enabling.
+            </p>
+          </div>
+        </div>
+
+        <div style="border-top:1px solid var(--line);margin-top:14px;padding-top:12px">
+          <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
+            <input type="checkbox" name="metaEnabled" checked={settings.analytics.metaPixel.enabled} />
+            <span style="font-weight:600">Meta Pixel</span>
+          </label>
+          <label class="field">
+            <span>Pixel ID</span>
+            <input type="text" name="metaPixelId" value={settings.analytics.metaPixel.pixelId} placeholder="724159876543210" style="font-family:monospace;font-size:12.5px;max-width:320px" />
+          </label>
+          <p class="hint" style="margin:0">Tracks page views for Facebook/Instagram ad attribution and retargeting audiences.</p>
+        </div>
+
+        <div style="border-top:1px solid var(--line);margin-top:14px;padding-top:12px">
+          <label class="field pe-check" style="flex-direction:row;align-items:center;gap:8px">
+            <input type="checkbox" name="tiktokEnabled" checked={settings.analytics.tiktokPixel.enabled} />
+            <span style="font-weight:600">TikTok Pixel <span style="display:inline-block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;padding:2px 8px;border-radius:999px;background:var(--amber-soft);color:var(--amber);vertical-align:1px">Experimental</span></span>
+          </label>
+          <label class="field">
+            <span>Pixel ID</span>
+            <input type="text" name="tiktokPixelId" value={settings.analytics.tiktokPixel.pixelId} placeholder="CABC123DEF456GHI789" style="font-family:monospace;font-size:12.5px;max-width:320px" />
+          </label>
+          <p class="hint" style="margin:0">
+            Untested integration — the snippet follows TikTok’s published base code, but verify events
+            in TikTok Events Manager before relying on it.
+          </p>
+        </div>
+
+        <div class="form-actions"><button class="btn primary" type="submit">Save</button></div>
+      </form>
+    </div>
+  )}
+
   <div class="card card-pad">
     <p class="card-title">Announcement bar</p>
     <form method="post">

package/src/pages/api/search.ts

@@ -0,0 +1,44 @@
+import type { APIRoute } from 'astro';
+import { getRepo } from '../../lib/repo';
+import { authorSlug, publicTags } from '../../lib/schema';
+import { collectionUrl, tagUrl } from '../../lib/content';
+import { localeHomeUrl, normalizePageLocale } from '../../lib/i18n';
+import { formatDate } from '../../lib/dates';
+
+// Public search API behind the site's search modal. Published-only by
+// construction — the same contract as rss/sitemap — so it needs no auth and
+// the middleware already leaves /api alone. `locale` boosts the visitor's
+// language to the top of page results; it never filters. Snippets are safe
+// HTML (entity-escaped, <mark> around matches) ready for innerHTML.
+
+const LIMITS = { posts: 10, pages: 5, tags: 5, authors: 5 };
+
+export const GET: APIRoute = async ({ locals, url }) => {
+  const headers = { 'Content-Type': 'application/json; charset=utf-8', 'Cache-Control': 'public, max-age=60' };
+  const q = (url.searchParams.get('q') ?? '').trim().slice(0, 100);
+  if (!q) return new Response(JSON.stringify({ posts: [], pages: [], tags: [], authors: [] }), { headers });
+
+  const repo = await getRepo(locals);
+  const locale = normalizePageLocale(url.searchParams.get('locale') ?? '');
+  const [results, settings] = await Promise.all([repo.searchPublished(q, { locale }), repo.getSettings()]);
+
+  const body = {
+    posts: results.posts.slice(0, LIMITS.posts).map(({ doc: p, snippet }) => ({
+      title: p.title,
+      url: collectionUrl(p.collection, p.slug),
+      excerpt: p.excerpt,
+      snippet,
+      date: p.publishedAt ? formatDate(p.publishedAt, settings) : '',
+      tags: publicTags(p.tags),
+    })),
+    pages: results.pages.slice(0, LIMITS.pages).map(({ doc: p, snippet }) => ({
+      title: p.title,
+      url: p.isHome ? localeHomeUrl(p.locale) : `/${p.slug}`,
+      snippet,
+      locale: p.locale,
+    })),
+    tags: results.tags.slice(0, LIMITS.tags).map(({ tag, count }) => ({ name: tag.name, url: tagUrl(tag.slug), count })),
+    authors: results.authors.slice(0, LIMITS.authors).map((u) => ({ name: u.name, url: `/author/${authorSlug(u)}`, avatar: u.avatar })),
+  };
+  return new Response(JSON.stringify(body), { headers });
+};

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

@@ -7,6 +7,7 @@ import { highlightCodeHtml } from '../../lib/highlightCode';
 import { verifySessionToken, SESSION_COOKIE } from '../../lib/auth';
 import { slugify, authorSlug, publicTags } from '../../lib/schema';
 import { resolveDesign } from '../../lib/theme';
+import { effectiveSettings } from '../../lib/designPreview';
 import { siteOrigin } from '../../lib/seo';
 import { formatDate } from '../../lib/dates';
 import { collectionFromPath, collectionUrl, tagUrl } from '../../lib/content';
@@ -24,13 +25,15 @@ if (!post || (post.status !== 'published' && !isAdmin)) {
   return new Response(null, { status: 404, statusText: 'Not found' });
 }
 const authorIds = post.authorIds.length ? post.authorIds : post.authorId ? [post.authorId] : [];
-const [tags, allUsers, allPosts, settings, allMedia] = await Promise.all([
+const [tags, allUsers, allPosts, rawSettings, allMedia] = await Promise.all([
   repo.listTags(),
   authorIds.length ? repo.listUsers() : Promise.resolve([]),
   repo.listPublishedPosts(col.key), // related reading stays within the collection
   repo.getSettings(),
   post.cover.startsWith('/media/') ? repo.listMedia() : Promise.resolve([]),
 ]);
+// ?designPreview=1 (admin-only) renders the staged Design-screen changes
+const settings = effectiveSettings(rawSettings, Astro.url, Astro.cookies);
 // ordered author objects; the first is the primary (gets the author card)
 const authors = authorIds
   .map((id) => allUsers.find((u) => u.id === id))

package/src/pages/index.astro

@@ -3,6 +3,7 @@ import Site from '../layouts/Site.astro';
 import WidgetRenderer from '../components/WidgetRenderer.astro';
 import { getRepo } from '../lib/repo';
 import { resolveDesign } from '../lib/theme';
+import { effectiveSettings } from '../lib/designPreview';
 import { expandDynamicBlocks } from '../lib/dynamicBlocks';
 import { I18N, localeFromPath } from '../lib/i18n';
 
@@ -11,10 +12,12 @@ const repo = await getRepo(Astro.locals);
 // resolved from the request path (injectRoute can't pass props)
 const locale = I18N.enabled ? localeFromPath(Astro.url.pathname) : I18N.defaultLocale;
 const wantsLocaleHome = I18N.enabled && locale !== I18N.defaultLocale;
-let [home, settings] = await Promise.all([
+let [home, rawSettings] = await Promise.all([
   repo.getHomePage(wantsLocaleHome ? locale : undefined),
   repo.getSettings(),
 ]);
+// ?designPreview=1 (admin-only) renders the staged Design-screen changes
+const settings = effectiveSettings(rawSettings, Astro.url, Astro.cookies);
 // a locale home that isn't authored yet falls back to the default home —
 // /es must never 404 mid-setup
 if (wantsLocaleHome && !home) home = await repo.getHomePage();

package/src/pages/links.astro

@@ -1,6 +1,7 @@
 ---
 import Site from '../layouts/Site.astro';
 import { getRepo } from '../lib/repo';
+import { cleanEventName } from '../lib/analytics';
 
 const repo = await getRepo(Astro.locals);
 const [links, settings] = await Promise.all([repo.listLinks(), repo.getSettings()]);
@@ -11,6 +12,11 @@ const profileBio = settings.linksBio || settings.tagline;
 
 const SPACER_PX: Record<string, number> = { s: 16, m: 36, l: 72 };
 
+// every link button is auto-stamped with an analytics event so per-link click
+// counts (sponsors!) show up in Umami alongside the first-party /go counter
+const linkEvent = (label: string): string | undefined =>
+  cleanEventName(`Link: ${label}`) === 'Link:' ? undefined : cleanEventName(`Link: ${label}`);
+
 // icon column convention: '<svg…' inline markup, http/​/ image URL,
 // 'favicon' derive from the link's host, anything else = emoji/text
 function iconInfo(l: (typeof links)[number]): { type: 'svg' | 'img' | 'emoji' | 'none'; value: string } {
@@ -96,13 +102,13 @@ const visible = links.filter((l) => {
         case 'html':
           return <div class="link-html" set:html={l.html} />;
         case 'email':
-          return <a class="link-btn" style={buttonStyle(l)} href={`mailto:${l.url}`}>{icon}<span class="link-label">{l.label || l.url}</span></a>;
+          return <a class="link-btn" style={buttonStyle(l)} href={`mailto:${l.url}`} data-umami-event={linkEvent(l.label || l.url)}>{icon}<span class="link-label">{l.label || l.url}</span></a>;
         case 'phone':
-          return <a class="link-btn" style={buttonStyle(l)} href={`tel:${l.url.replace(/[^+\d]/g, '')}`}>{icon}<span class="link-label">{l.label || l.url}</span></a>;
+          return <a class="link-btn" style={buttonStyle(l)} href={`tel:${l.url.replace(/[^+\d]/g, '')}`} data-umami-event={linkEvent(l.label || l.url)}>{icon}<span class="link-label">{l.label || l.url}</span></a>;
         case 'vcard':
-          return <a class="link-btn" style={buttonStyle(l)} href={vcardHref(l)} download={`${(l.meta.firstName as string) || 'contact'}.vcf`}>{icon}<span class="link-label">{l.label || 'Save contact'}</span></a>;
+          return <a class="link-btn" style={buttonStyle(l)} href={vcardHref(l)} download={`${(l.meta.firstName as string) || 'contact'}.vcf`} data-umami-event={linkEvent(l.label || 'Save contact')}>{icon}<span class="link-label">{l.label || 'Save contact'}</span></a>;
         default:
-          return <a class="link-btn" style={buttonStyle(l)} href={`/go/${l.id}`} rel="noopener">{icon}<span class="link-label">{l.label}</span></a>;
+          return <a class="link-btn" style={buttonStyle(l)} href={`/go/${l.id}`} rel="noopener" data-umami-event={linkEvent(l.label)}>{icon}<span class="link-label">{l.label}</span></a>;
       }
     })}
     {visible.length === 0 && <p>No links yet.</p>}

package/src/pages/preview/[type]/[id].astro

@@ -7,9 +7,12 @@ import { verifyPreviewToken } from '../../../lib/preview';
 import { expandDynamicBlocks } from '../../../lib/dynamicBlocks';
 import { highlightCodeHtml } from '../../../lib/highlightCode';
 import { verifySessionToken, SESSION_COOKIE } from '../../../lib/auth';
+import { mergePageDraft, mergePostDraft } from '../../../lib/drafts';
 
 // Draft preview, any status. Reachable by a logged-in admin (the editor's
-// preview iframe) or by anyone holding a signed share token.
+// preview iframe) or by anyone holding a signed share token. Live documents
+// with pending edits render the PENDING version — exactly what Update will
+// publish — while the public URL keeps serving the live one.
 const { type, id } = Astro.params;
 if (type !== 'post' && type !== 'page') return new Response(null, { status: 404 });
 
@@ -20,9 +23,11 @@ if (!isAdmin && !verifyPreviewToken(type, id!, token)) {
 }
 
 const repo = await getRepo(Astro.locals);
-const post = type === 'post' ? await repo.getPost(id!) : null;
-const page = type === 'page' ? await repo.getPage(id!) : null;
-if (!post && !page) return new Response(null, { status: 404 });
+const livePost = type === 'post' ? await repo.getPost(id!) : null;
+const livePage = type === 'page' ? await repo.getPage(id!) : null;
+if (!livePost && !livePage) return new Response(null, { status: 404 });
+const post = livePost ? mergePostDraft(livePost) : null;
+const page = livePage ? mergePageDraft(livePage) : null;
 
 const html = post ? highlightCodeHtml(await expandDynamicBlocks(post.bodyHtml || renderMarkdown(post.body), repo)) : '';
 const pageHtml = page?.bodyHtml ? highlightCodeHtml(await expandDynamicBlocks(page.bodyHtml, repo)) : '';