domma-cms 0.49.2 → 0.50.0

package/CLAUDE.md

@@ -156,6 +156,8 @@ Menus live in `config/menus/<slug>.json`. The slot → menu map lives in `config
 
 **Floating panel surface.** `float` also takes `radius`, `shadow` (`none|sm|md|lg|xl` → `--dm-shadow-*`), `accent` (preset key or hex → border tint + leading-edge stripe via `--dm-menu-accent`) and `opacity` (20-100 → `--dm-menu-panel-opacity`, blurred translucent surface). `floatToCss` exists twice - `server/services/menus.js` and `public/js/menu-decor.mjs` - and `tests/services/menus-float.test.js` asserts the copies agree.
 
+**Menus render on TWO paths - test both.** `buildMenuNav`/`buildFloatChrome` (server) draw the `[menu]` shortcode and overlay panels; the **public navbar is built in the browser** by Domma from `window.__CMS_NAV__` and never touches that code, so anything added to the server markup is simply absent there. `applyFloat` in `menu-decor.mjs` is the only channel to the client path - it stamps `data-float-*` attributes and `menu-float.js` builds the chrome from them. Fixed in 0.49.1 after `collapsible`/`movable` shipped dead on a floating navbar. Navbar CSS also needs `#site-navbar`-level specificity: `#site-navbar.dm-nav-vertical .navbar-container` outranks any class-only rule.
+
 **Floating panel behaviour.** `float` also takes `collapsible`, `collapsed`, `movable`, `resizable` and `title`. Any of the first two or `movable` makes `buildMenuNav` draw a chrome bar (grip + title + hamburger) via `buildFloatChrome`; `public/js/menu-float.js` (loaded from `page.html`, and called by `site.js` for the floating navbar) wires collapse/drag/resize. **Visitor state beats config**: position, size and collapsed state live in the visitor's own `S` storage under `dm_menu_float_<slug>` and are restored over `float` on load; double-clicking the bar clears them. A panel only stops tracking its `anchor` once actually moved or resized (`unanchor()` converts right/bottom/transform pinning to left/top on first interaction), so untouched panels stay responsive. `floatBehaviour` is the third function duplicated across `menus.js` / `menu-decor.mjs`, parity-tested alongside `floatToCss`. Below 768px site.css returns panels to the flow, so only collapse applies there.
 
 ## Admin sidebar (menu-data-driven)
@@ -212,6 +214,11 @@ holds `compareValues`/`sortEntries` - the same comparison ladder backs both the
    than 32 characters. Set it in `.env`.
 10. **Page visibility enforcement**: `server/routes/public.js` checks `page.visibility` against the visitor's role
    level - unauthenticated visitors cannot access private or role-restricted pages.
+   **Draft preview**: `status: draft` still 404s the public, but a viewer holding `pages.read` gets the real page plus
+   a banner (`buildDraftBanner` in `renderer.js`, passed via `renderPage(page, {preview})`). Draft renders bypass the
+   response cache and carry `no-store` + `noindex` - never route one through `cache.wrap`. Browser navigations
+   authenticate via the `dm_session` cookie (`server/services/viewerSession.js`), which is read **only** by the public
+   page renderer; `authenticate()` stays Bearer-only, so no write route accepts ambient credentials.
 11. **404 page**: create `content/pages/404.md` to customise the not-found response; it is auto-served on missing routes.
 
 ## Docs

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-cms",
-  "version": "0.49.2",
+  "version": "0.50.0",
   "description": "File-based CMS powered by Domma and Fastify. Run npx domma-cms my-site to create a new project.",
   "type": "module",
   "main": "server/server.js",

package/server/routes/api/auth.js

@@ -26,6 +26,7 @@ import {
     validatePassword
 } from '../../services/users.js';
 import {getProfile, updateProfile} from '../../services/userProfiles.js';
+import {buildClearedSessionCookie, buildSessionCookie} from '../../services/viewerSession.js';
 import {createTransport, sendEmail} from '../../services/email.js';
 
 const { accessTokenExpiry, refreshTokenExpiry } = config.auth;
@@ -111,6 +112,7 @@ export async function authRoutes(fastify) {
         const safeUser = { id: user.id, name: user.name, email: user.email, role: user.role, additionalRoles: user.additionalRoles || [], level: getRoleLevel(user.role) };
         hooks.emit('user:loggedIn', {userId: user.id, email: user.email, role: user.role});
         const { token, refreshToken } = signTokens(fastify, safeUser);
+        setSessionCookie(request, reply, token);
         return { token, refreshToken, user: safeUser };
     });
 
@@ -238,9 +240,10 @@ export async function authRoutes(fastify) {
     });
 
   // POST /api/auth/logout - blacklists the refresh token (fire-and-forget safe: no auth required)
-  fastify.post('/auth/logout', async (request) => {
+  fastify.post('/auth/logout', async (request, reply) => {
     const {refreshToken} = request.body || {};
     if (refreshToken) blacklistedRefreshTokens.add(refreshToken);
+    reply.header('set-cookie', buildClearedSessionCookie({secure: request.protocol === 'https'}));
     return {ok: true};
   });
 
@@ -273,10 +276,32 @@ export async function authRoutes(fastify) {
 
         const safeUser = { id: user.id, name: user.name, email: user.email, role: user.role, additionalRoles: user.additionalRoles || [], level: getRoleLevel(user.role) };
         const token = fastify.jwt.sign({ ...safeUser, type: 'access' }, { expiresIn: accessTokenExpiry });
+        setSessionCookie(request, reply, token);
         return { token };
     });
 }
 
+/**
+ * Attach the access token to the response as a session cookie.
+ *
+ * The SPA already stores the token in `S` for its Bearer calls; the cookie
+ * exists purely so a *browser navigation* to a public page can be attributed
+ * to a signed-in user (draft previews, role-gated pages). It is read only by
+ * the public page renderer - never by an API guard - so it grants no ambient
+ * authority over any write route. See services/viewerSession.js.
+ *
+ * @param {import('fastify').FastifyRequest} request
+ * @param {import('fastify').FastifyReply} reply
+ * @param {string} token
+ * @returns {void}
+ */
+function setSessionCookie(request, reply, token) {
+    reply.header('set-cookie', buildSessionCookie(token, {
+        secure: request.protocol === 'https',
+        maxAgeMs: parseDuration(accessTokenExpiry)
+    }));
+}
+
 /**
  * Parse a duration string into milliseconds.
  * Supports "Nm" (minutes), "Nh" (hours), "Nd" (days).

package/server/routes/public.js

@@ -1,7 +1,9 @@
 /**
  * Public Site Routes
  * Catch-all that resolves URL paths to Markdown pages and renders them server-side.
- * Draft pages are not served publicly.
+ * Draft pages are not served publicly - but a signed-in user holding
+ * `pages.read` is shown the real page with a draft banner, so designers and
+ * developers can verify a page before it is released.
  * The admin panel is excluded (handled by static serving).
  */
 import {getPage, getPageMtime} from '../services/content.js';
@@ -9,6 +11,9 @@ import {getProjectForPage, isProjectEnabled} from '../services/projects.js';
 import {renderPage} from '../services/renderer.js';
 import {buildRobotsTxt, generate as generateSitemap} from '../services/sitemap.js';
 import {checkVisibility} from '../middleware/auth.js';
+import {resolveViewer} from '../services/viewerSession.js';
+import {getPermissionsFor} from '../services/roles.js';
+import {getEffectiveRoles} from '../services/userRoles.js';
 import {hooks} from '../services/hooks.js';
 import {getConfig} from '../config.js';
 import * as cache from '../services/cache/index.js';
@@ -103,12 +108,6 @@ export async function publicRoutes(fastify) {
             return reply.type('text/html').send(await render404(urlPath));
         }
 
-        // Don't serve draft pages publicly
-        if (page.status !== 'published') {
-            reply.status(404);
-            return reply.type('text/html').send(await render404(urlPath));
-        }
-
         // Hard kill-switch: a disabled project takes its pages off the public
         // site entirely - 404 (no oracle), regardless of page visibility.
         const pageProject = await getProjectForPage(page.urlPath || urlPath, page.project);
@@ -117,14 +116,21 @@ export async function publicRoutes(fastify) {
             return reply.type('text/html').send(await render404(urlPath));
         }
 
+        // Draft preview: a page that is not published stays invisible to the
+        // public, but is served in full to a signed-in user who could read it
+        // in the admin anyway. Everyone else gets the same 404 as before - the
+        // response must not reveal that an unpublished page exists there.
+        const isDraft = page.status !== 'published';
+
         // Enforce page visibility - role only resolved for gated pages,
         // so public pages share a single cache entry keyed `roleanon`.
         //
         // `visibility` may be a string ('public' | 'private' | role name) or
         // an array of role names - see checkVisibility() for full semantics.
         // Effectively-public values (missing, 'public', or an array containing
-        // 'public') skip JWT verification entirely so anonymous traffic hits
-        // the shared cache without auth cost.
+        // 'public') skip viewer resolution entirely so anonymous traffic hits
+        // the shared cache without auth cost - unless the page is a draft,
+        // which needs the viewer regardless of its visibility.
         // For per-role cache keying we use the primary role only - multi-role
         // users still see correctly-gated content (checkVisibility consults
         // additionalRoles too) but the cache key stays bounded to one entry
@@ -139,45 +145,74 @@ export async function publicRoutes(fastify) {
             || vis === 'public'
             || (Array.isArray(vis) && (vis.length === 0 || vis.includes('public')));
 
-        if (!isPublic) {
-            try {
-                const decoded = await request.jwtVerify();
-                if (decoded.type === 'access') {
-                    userRole = decoded.role;
-                    userObj  = { role: decoded.role, additionalRoles: decoded.additionalRoles || [] };
-                }
-            } catch { /* no token - treat as unauthenticated */ }
-
-            if (!checkVisibility(userObj, vis)) {
-                reply.status(403);
-                return reply.type('text/html').send(accessDeniedHtml(urlPath));
-            }
+        // A draft always needs the viewer resolved, whatever its visibility.
+        if (isDraft || !isPublic) {
+            userObj  = await resolveViewer(request);
+            userRole = userObj ? userObj.role : null;
+        }
+
+        if (isDraft && !canPreviewDrafts(userObj)) {
+            reply.status(404);
+            return reply.type('text/html').send(await render404(urlPath));
+        }
+
+        if (!isPublic && !checkVisibility(userObj, vis)) {
+            reply.status(403);
+            return reply.type('text/html').send(accessDeniedHtml(urlPath));
         }
 
         const baseUrl = getBaseUrl(request);
+
+        // Re-parse with user context so the body's [menu] shortcode sees the
+        // visitor's role for visibility filtering. The first getPage() above
+        // was anonymous because we hadn't resolved the viewer yet.
+        const render = async () => {
+            const pageForRole = await getPage(page.urlPath, {user: userObj}) || page;
+            return renderPage(pageForRole, {
+                baseUrl,
+                user: userObj,
+                ...(isDraft && {preview: {status: page.status || 'draft', urlPath: page.urlPath || urlPath, user: userObj}})
+            });
+        };
+
+        // A draft render is private to one viewer and changes on every editor
+        // save. It must never enter the shared response cache - an entry
+        // written here would be served to the next anonymous visitor under
+        // the same key - and must never be indexed.
+        if (isDraft) {
+            reply.header('cache-control', 'no-store, private');
+            reply.header('x-robots-tag', 'noindex, nofollow');
+            return reply.type('text/html').send(await render());
+        }
+
         // mtime in the key: any change to the backing file - editor save,
         // script, git pull - yields a fresh entry even if no invalidation
         // hook fired. Stale-mtime entries age out via TTL/LRU.
         const pageMtime = await getPageMtime(page.urlPath || urlPath);
         const cacheKey = `page:${urlPath}:m${pageMtime}:role${userRole ?? 'anon'}:o${baseUrl}`;
         const cacheTags = [`page:${urlPath}`, ...(page.cacheTags || []), 'nav', 'site'];
-        const html = await cache.wrap(
-            cacheKey,
-            async () => {
-                // Re-parse with user context so the body's [menu] shortcode
-                // sees the visitor's role for visibility filtering. The first
-                // getPage() above was anonymous because we hadn't decoded the
-                // JWT yet; this second pass uses the resolved userObj.
-                const pageForRole = await getPage(page.urlPath, {user: userObj}) || page;
-                return renderPage(pageForRole, {baseUrl, user: userObj});
-            },
-            {tags: cacheTags}
-        );
+        const html = await cache.wrap(cacheKey, render, {tags: cacheTags});
         hooks.emit('content:pageViewed', {urlPath, title: page.title || ''});
         return reply.type('text/html').send(html);
     });
 }
 
+/**
+ * May this viewer see unpublished pages on the public site?
+ *
+ * Gated on `pages.read` - the same permission that opens the Pages list in the
+ * admin. Anyone who can already read the draft's source there loses nothing by
+ * seeing it rendered, and nobody else gains anything.
+ *
+ * @param {object|null} user - Resolved viewer (`{role, additionalRoles}`) or null
+ * @returns {boolean}
+ */
+function canPreviewDrafts(user) {
+    if (!user) return false;
+    const allowed = getPermissionsFor('pages', 'read');
+    return getEffectiveRoles(user).some(role => allowed.includes(role));
+}
+
 /**
  * Render a 404 response - tries content/pages/404.md first, falls back to
  * a minimal inline page so the site theme is applied when possible.

package/server/services/renderer.js

@@ -85,6 +85,9 @@ async function buildOverlayMenus(menuCtx, user) {
  *   Falls back to `site.baseUrl` from config, then to no canonical at all.
  * @param {object|null} [opts.user] - Authenticated user (`{role, additionalRoles}`)
  *   or null for anonymous. Used to filter menu items gated by `visibility`.
+ * @param {object} [opts.preview] - Set when rendering an unpublished page for a
+ *   permitted viewer: `{status, urlPath, user}`. Draws the draft banner. Absent
+ *   for every normal public render.
  * @returns {Promise<string>}
  */
 export async function renderPage(page, opts = {}) {
@@ -247,6 +250,10 @@ export async function renderPage(page, opts = {}) {
         headInject: [injection.head, navbarFontLink].filter(Boolean).join('\n'),
         headInjectLate: [injection.headLate, customCssTag, navbarStyleTag].filter(Boolean).join('\n'),
         bodyEndInject: [
+            // Draft banner - first, so it is the topmost fixed element and a
+            // floating overlay menu cannot bury the only affordance telling
+            // the viewer this page is not live.
+            opts.preview ? buildDraftBanner(opts.preview) : '',
             // Overlay menus - bound to the `overlay` slot and pinned by their own
             // float config, so they belong at the end of the body, clear of the
             // content flow.
@@ -428,6 +435,91 @@ function buildSeoTags({page, site, baseUrl, seoTitle, seoDescription, ogImage})
     return tags.join('\n    ');
 }
 
+/**
+ * Build the draft banner shown over an unpublished page.
+ *
+ * Self-contained on purpose - its CSS and JS are inline rather than in
+ * public/css/site.css, because the updater replaces public/ wholesale and a
+ * site running a stale minified stylesheet would render the banner unstyled,
+ * i.e. as an invisible warning. It is also why nothing here depends on a
+ * Domma component: the banner has to work on a page whose CSS is broken,
+ * since verifying broken CSS is exactly what it is for.
+ *
+ * The Publish button authenticates with the Bearer token from `S` storage,
+ * never with the session cookie - keeping every state-changing call
+ * explicitly credentialled and the cookie free of write authority.
+ *
+ * @param {{status?: string, urlPath?: string, user?: object|null}} preview
+ * @returns {string}
+ */
+function buildDraftBanner(preview) {
+    const urlPath  = preview.urlPath || '/';
+    const status   = preview.status || 'draft';
+    const user     = preview.user || {};
+    const who      = escapeHtml(user.name || user.email || 'an authorised user');
+    const role     = escapeHtml(user.role || '');
+    const editHref = '/admin/#/pages/edit' + escapeHtml(urlPath);
+    const pathAttr = escapeHtml(urlPath);
+    const label    = escapeHtml(status.charAt(0).toUpperCase() + status.slice(1));
+
+    return `<div id="dm-draft-banner" role="status" aria-live="polite" data-url-path="${pathAttr}">
+<style>
+#dm-draft-banner{position:fixed;left:0;right:0;bottom:0;z-index:2147483000;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
+padding:.6rem .9rem;font:500 .8125rem/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:#1c1601;
+background:repeating-linear-gradient(135deg,#ffcf33,#ffcf33 14px,#f5b800 14px,#f5b800 28px);box-shadow:0 -2px 12px rgba(0,0,0,.28)}
+#dm-draft-banner[hidden]{display:none}
+#dm-draft-banner .dmdb-pill{flex:none;padding:.2rem .55rem;border-radius:999px;background:#1c1601;color:#ffcf33;
+font-weight:700;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}
+#dm-draft-banner .dmdb-text{flex:1 1 16rem;min-width:0}
+#dm-draft-banner .dmdb-actions{flex:none;display:flex;align-items:center;gap:.4rem}
+#dm-draft-banner button,#dm-draft-banner a.dmdb-btn{font:inherit;cursor:pointer;border:1px solid rgba(28,22,1,.45);
+border-radius:.3rem;padding:.3rem .7rem;background:rgba(255,255,255,.55);color:#1c1601;text-decoration:none}
+#dm-draft-banner button:hover,#dm-draft-banner a.dmdb-btn:hover{background:#fff}
+#dm-draft-banner button[disabled]{opacity:.55;cursor:default}
+#dm-draft-banner .dmdb-publish{background:#1c1601;color:#ffcf33;border-color:#1c1601}
+#dm-draft-banner .dmdb-publish:hover{background:#000;color:#ffe27a}
+#dm-draft-banner .dmdb-close{padding:.2rem .5rem;line-height:1;font-size:1rem;background:transparent;border-color:transparent}
+@media print{#dm-draft-banner{display:none}}
+</style>
+<span class="dmdb-pill">${label}</span>
+<span class="dmdb-text">Not published - the public gets a 404 here. You can see it because you are signed in as <strong>${who}</strong>${role ? ` (${role})` : ''}.</span>
+<span class="dmdb-actions">
+<a class="dmdb-btn" href="${editHref}">Edit page</a>
+<button type="button" class="dmdb-publish" data-dmdb-publish>Publish</button>
+<button type="button" class="dmdb-close" data-dmdb-close aria-label="Hide draft banner" title="Hide">&times;</button>
+</span>
+<script>
+(function(){
+  var bar = document.getElementById('dm-draft-banner');
+  if (!bar) return;
+  var path = bar.getAttribute('data-url-path') || '/';
+  bar.querySelector('[data-dmdb-close]').addEventListener('click', function(){ bar.hidden = true; });
+  bar.querySelector('[data-dmdb-publish]').addEventListener('click', function(){
+    var btn = this;
+    var token = '';
+    try { token = (window.S && S.get('auth_token')) || ''; } catch (e) { token = ''; }
+    if (!token) { window.location.href = '/admin/'; return; }
+    if (!window.confirm('Publish this page? It becomes visible to everyone.')) return;
+    btn.disabled = true;
+    btn.textContent = 'Publishing…';
+    fetch('/api/pages' + path, {
+      method: 'PUT',
+      headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token},
+      body: JSON.stringify({frontmatter: {status: 'published'}})
+    }).then(function(res){
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      window.location.reload();
+    }).catch(function(){
+      btn.disabled = false;
+      btn.textContent = 'Publish';
+      window.alert('Could not publish. Try again from the admin editor.');
+    });
+  });
+})();
+</script>
+</div>`;
+}
+
 function escapeHtml(str) {
     return String(str)
         .replace(/&/g, '&amp;')

package/server/services/viewerSession.js

@@ -0,0 +1,128 @@
+/**
+ * Viewer Session
+ *
+ * Resolves the human behind a *public page navigation*.
+ *
+ * The API authenticates with `Authorization: Bearer <jwt>` and the client keeps
+ * that token in `S` storage - fine for `fetch`, useless for a browser typing a
+ * URL into the address bar, which sends no such header. Draft previews and
+ * role-gated pages both need to know who is looking during a plain navigation,
+ * so login additionally drops the access token into a session cookie and this
+ * module reads it back.
+ *
+ * SCOPE - read this before reusing anything here:
+ *   The cookie is consulted ONLY by the public page renderer (GET, no side
+ *   effects). `authenticate()` in middleware/auth.js stays Bearer-only, so no
+ *   state-changing route is reachable with ambient credentials and the CSRF
+ *   surface stays at zero. Do not wire `resolveViewer()` into a write path.
+ */
+
+/** Name of the session cookie carrying the access token. */
+export const SESSION_COOKIE = 'dm_session';
+
+/**
+ * Parse a Cookie request header into a plain object.
+ *
+ * @param {string} [header]
+ * @returns {Record<string, string>}
+ */
+function parseCookies(header) {
+    const out = {};
+    if (!header) return out;
+    for (const part of header.split(';')) {
+        const eq = part.indexOf('=');
+        if (eq < 0) continue;
+        const key = part.slice(0, eq).trim();
+        if (!key) continue;
+        try {
+            out[key] = decodeURIComponent(part.slice(eq + 1).trim());
+        } catch {
+            out[key] = part.slice(eq + 1).trim();
+        }
+    }
+    return out;
+}
+
+/**
+ * Build the Set-Cookie value that carries an access token for page navigation.
+ *
+ * HttpOnly because nothing client-side needs to read it (the SPA keeps its own
+ * copy in `S`), SameSite=Lax so a link from an email or chat still arrives
+ * authenticated, and Secure only over https so localhost development works.
+ *
+ * @param {string} token          - Signed access token
+ * @param {object} [opts]
+ * @param {boolean} [opts.secure] - Emit the Secure attribute
+ * @param {number} [opts.maxAgeMs]- Cookie lifetime; defaults to one hour
+ * @returns {string}
+ */
+export function buildSessionCookie(token, {secure = false, maxAgeMs = 3_600_000} = {}) {
+    const attrs = [
+        `${SESSION_COOKIE}=${encodeURIComponent(token)}`,
+        'Path=/',
+        'HttpOnly',
+        'SameSite=Lax',
+        `Max-Age=${Math.max(0, Math.floor(maxAgeMs / 1000))}`
+    ];
+    if (secure) attrs.push('Secure');
+    return attrs.join('; ');
+}
+
+/**
+ * Build the Set-Cookie value that removes the session cookie.
+ *
+ * @param {object} [opts]
+ * @param {boolean} [opts.secure]
+ * @returns {string}
+ */
+export function buildClearedSessionCookie({secure = false} = {}) {
+    const attrs = [`${SESSION_COOKIE}=`, 'Path=/', 'HttpOnly', 'SameSite=Lax', 'Max-Age=0'];
+    if (secure) attrs.push('Secure');
+    return attrs.join('; ');
+}
+
+/**
+ * Read the raw session token from the request cookie, if present.
+ *
+ * @param {import('fastify').FastifyRequest} request
+ * @returns {string} '' when absent
+ */
+export function readSessionToken(request) {
+    return parseCookies(request.headers?.cookie)[SESSION_COOKIE] || '';
+}
+
+/**
+ * Resolve the viewer of a public page from either credential channel.
+ *
+ * Tries the Bearer header first (so API-style and test clients keep working
+ * unchanged), then the session cookie. Anything that is not a valid, unexpired
+ * *access* token is ignored - a refresh token presented here resolves to
+ * anonymous rather than to its subject.
+ *
+ * @param {import('fastify').FastifyRequest} request
+ * @returns {Promise<{id?: string, name: string, email: string, role: string, additionalRoles: string[]}|null>}
+ */
+export async function resolveViewer(request) {
+    const header = request.headers?.authorization || '';
+    const bearer = header.startsWith('Bearer ') ? header.slice(7).trim() : '';
+    const jwt = request.server?.jwt;
+    if (!jwt) return null;
+
+    for (const raw of [bearer, readSessionToken(request)]) {
+        if (!raw) continue;
+        try {
+            const decoded = jwt.verify(raw);
+            if (decoded?.type !== 'access' || !decoded.role) continue;
+            return {
+                id: decoded.id,
+                name: decoded.name || '',
+                email: decoded.email || '',
+                role: decoded.role,
+                additionalRoles: Array.isArray(decoded.additionalRoles) ? decoded.additionalRoles : []
+            };
+        } catch {
+            // Malformed or expired - fall through to the next channel.
+        }
+    }
+    return null;
+}