✨ Added frontend admin toolbar (#28058)

Staff members viewing the frontend of their Ghost site now see a
floating toolbar with quick links back to the editor, settings, and
analytics for the current page. The toolbar is staff-only and invisible
to normal visitors — public pages remain fully cacheable.

**Activation model**

Admin "view site" links append `?admin=1`. Frontend middleware creates a
short-lived HMAC-signed marker cookie on the site domain and redirects
to the clean URL. The cookie contains no session data or PII — it only
signals that staff tooling should load. On subsequent requests the
middleware validates the marker and sets a response local that
`ghost_head` checks before emitting the script tag.

The browser bundle independently verifies the real staff session through
the existing `/ghost/auth-frame/` bridge before rendering anything. This
two-layer approach means the server never embeds staff-specific data in
HTML, so CDN and theme caching are unaffected.

**Suppression inside Admin**

Admin's "view site" iframe passes `?admin=1&admin_toolbar=0`. The
middleware seeds the marker cookie (so the toolbar works on normal
frontend visits) but suppresses injection for that response. Suppression
triggers on the explicit query parameter and on `Sec-Fetch-Dest: iframe`.
Theme and announcement-bar previews, which use `fetch()` rather than
iframes, append `?admin_toolbar=0` to their request URLs. The toolbar
script also checks the parameter client-side as a safety net.

**Package boundary**

The toolbar lives in `apps/admin-toolbar` as a self-contained package
with its own source, Vite build, tests, and UMD artifact. It uses Preact 
(~3 KB) instead of React (~40 KB) since it is a lightweight public-facing
widget that only needs basic rendering — a rationale that could apply 
to other small public scripts where bundle size matters more than 
ecosystem compatibility. It renders inside Shadow DOM so theme CSS 
cannot affect it.

In production the script is served from jsDelivr via the `adminToolbar`
config in `defaults.json`, following the same CDN pattern as portal,
comments-ui, search, and announcement-bar. In development the Docker
setup proxies through Caddy to a local Vite preview server.

---

Co-authored-by: Hannah Wolfe <github.erisds@gmail.com>

Author: JohnONolan

apps/admin-toolbar/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2013-2026 Ghost Foundation
+
+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.

apps/admin-toolbar/README.md

@@ -0,0 +1,25 @@
+# Admin Toolbar
+
+Frontend staff toolbar for Ghost sites. Uses Preact (~3KB) instead of React
+(~40KB) since this is a lightweight public-facing widget that only needs basic
+rendering and hooks — the same rationale applies to any future small public
+scripts where bundle size matters more than ecosystem compatibility.
+
+## Development
+
+```bash
+pnpm build    # one-off build
+pnpm dev      # build + preview with watch (started automatically by pnpm dev from root)
+pnpm test     # build + run tests against UMD bundle
+```
+
+## How it's served
+
+In production, the script is loaded from jsDelivr via the `adminToolbar` config
+in `defaults.json`, following the same CDN pattern as portal, comments-ui, and
+the other public apps. In development, the Docker Dockerfile overrides the URL
+to proxy through Caddy to the local vite preview server on port 4176.
+
+# Copyright & License
+
+Copyright (c) 2013-2026 Ghost Foundation - Released under the [MIT license](LICENSE).

apps/admin-toolbar/package.json

@@ -0,0 +1,73 @@
+{
+  "name": "@tryghost/admin-toolbar",
+  "version": "0.1.0",
+  "license": "MIT",
+  "repository": "https://github.com/TryGhost/Ghost",
+  "author": "Ghost Foundation",
+  "files": [
+    "src/",
+    "umd/",
+    "LICENSE",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "preact": "catalog:"
+  },
+  "scripts": {
+    "build": "pnpm exec vite build",
+    "build:watch": "pnpm exec vite build --watch",
+    "dev": "concurrently --kill-others --names preview,build \"pnpm exec vite preview -l silent\" \"pnpm build:watch\"",
+    "lint": "pnpm exec eslint src --ext .js --cache",
+    "test": "pnpm run build && pnpm exec mocha --exit --trace-warnings --timeout=60000 \"test/**/*.test.js\""
+  },
+  "devDependencies": {
+    "concurrently": "catalog:",
+    "eslint": "catalog:",
+    "jsdom": "catalog:",
+    "mocha": "catalog:",
+    "vite": "catalog:"
+  },
+  "eslintConfig": {
+    "ignorePatterns": [
+      "umd/**/*.js"
+    ],
+    "env": {
+      "browser": true
+    },
+    "parserOptions": {
+      "sourceType": "module",
+      "ecmaVersion": 2022
+    },
+    "extends": [
+      "plugin:ghost/browser"
+    ],
+    "plugins": [
+      "ghost"
+    ],
+    "overrides": [
+      {
+        "files": [
+          "test/**/*.js"
+        ],
+        "env": {
+          "mocha": true,
+          "node": true
+        },
+        "parserOptions": {
+          "sourceType": "script"
+        }
+      }
+    ],
+    "rules": {
+      "ghost/filenames/match-regex": [
+        "error",
+        "^[a-z0-9.-]+$",
+        false
+      ]
+    }
+  }
+}

apps/admin-toolbar/src/actions.js

@@ -0,0 +1,96 @@
+import {adminHref, commentsHref} from './links';
+
+export function getToolbarActions(config) {
+    if (config.pageContext === 'home') {
+        return getHomepageActions(config);
+    }
+
+    if (config.resourceType === 'post' && config.resourceId) {
+        return getPostActions(config);
+    }
+
+    if (config.resourceType === 'tag' && config.resourceSlug) {
+        return [{
+            href: adminHref(config.adminUrl, `tags/${encodeURIComponent(config.resourceSlug)}`),
+            icon: 'edit',
+            label: 'Edit'
+        }];
+    }
+
+    if (config.resourceType && config.resourceId) {
+        return [{
+            href: adminHref(config.adminUrl, `editor/${config.resourceType}/${config.resourceId}`),
+            icon: 'edit',
+            label: 'Edit'
+        }];
+    }
+
+    return [];
+}
+
+function getHomepageActions(config) {
+    const actions = [];
+
+    if (config.siteAnalyticsEnabled) {
+        actions.push({
+            href: adminHref(config.adminUrl, 'analytics'),
+            icon: 'siteAnalytics',
+            label: 'Analytics'
+        });
+    }
+
+    if (config.activityPubEnabled) {
+        actions.push({
+            href: adminHref(config.adminUrl, 'activitypub'),
+            icon: 'network',
+            label: 'Network'
+        });
+    }
+
+    actions.push({
+        href: adminHref(config.adminUrl, 'posts/'),
+        icon: 'posts',
+        label: 'Posts'
+    });
+
+    if (config.membersEnabled) {
+        actions.push({
+            href: adminHref(config.adminUrl, 'members'),
+            icon: 'members',
+            label: 'Members'
+        });
+    }
+
+    actions.push({
+        href: adminHref(config.adminUrl, 'settings'),
+        icon: 'settings',
+        label: 'Settings'
+    });
+
+    return actions;
+}
+
+function getPostActions(config) {
+    const actions = [
+        {
+            href: adminHref(config.adminUrl, `posts/analytics/${config.resourceId}`),
+            icon: 'analytics',
+            label: 'Analytics'
+        },
+        {
+            href: adminHref(config.adminUrl, `editor/${config.resourceType}/${config.resourceId}`),
+            icon: 'edit',
+            label: 'Edit'
+        }
+    ];
+
+    if (config.commentsEnabled) {
+        actions.push({
+            href: commentsHref(config.adminUrl, config.resourceId),
+            icon: 'comments',
+            label: 'Comments'
+        });
+    }
+
+    return actions;
+}

apps/admin-toolbar/src/auth.js

@@ -0,0 +1,77 @@
+import {AUTH_TIMEOUT} from './constants';
+
+export function createAuthFrame(adminUrl) {
+    const frame = document.createElement('iframe');
+    frame.dataset.frame = 'admin-auth';
+    frame.src = `${adminUrl}auth-frame/`;
+    frame.title = 'Ghost admin authentication';
+    frame.tabIndex = -1;
+    frame.style.cssText = 'display:none;width:0;height:0;border:0;';
+    document.body.appendChild(frame);
+    return frame;
+}
+
+export function createAdminApi(adminUrl, frame) {
+    let uid = 0;
+    const handlers = {};
+    const adminOrigin = new URL(adminUrl).origin;
+
+    window.addEventListener('message', function (event) {
+        if (event.origin !== adminOrigin) {
+            return;
+        }
+
+        let data;
+        try {
+            data = JSON.parse(event.data);
+        } catch {
+            return;
+        }
+
+        const handler = handlers[data.uid];
+        if (!handler) {
+            return;
+        }
+
+        delete handlers[data.uid];
+        handler(data.error, data.result);
+    });
+
+    function call(action, args) {
+        return new Promise((resolve, reject) => {
+            uid += 1;
+            const currentUid = uid;
+            const timeout = window.setTimeout(() => {
+                delete handlers[currentUid];
+                reject(new Error('Admin authentication timed out'));
+            }, AUTH_TIMEOUT);
+
+            handlers[currentUid] = (error, result) => {
+                window.clearTimeout(timeout);
+                if (error) {
+                    reject(new Error(error));
+                } else {
+                    resolve(result);
+                }
+            };
+
+            frame.contentWindow?.postMessage(JSON.stringify({
+                uid: currentUid,
+                action,
+                ...args
+            }), adminOrigin);
+        });
+    }
+
+    return {
+        getUser: async () => {
+            const result = await call('getUser');
+            return result?.users?.[0] || null;
+        }
+    };
+}
+
+export function canShowToolbar(user) {
+    const allowedRoles = new Set(['owner', 'administrator', 'editor']);
+    return (user?.roles || []).some(role => allowedRoles.has((role?.name || '').toLowerCase()));
+}

apps/admin-toolbar/src/body-offset.js

@@ -0,0 +1,19 @@
+import {BODY_PADDING_VAR} from './constants';
+
+let previousBodyPaddingBottom = null;
+
+export function applyBodyOffset(height) {
+    if (previousBodyPaddingBottom === null) {
+        previousBodyPaddingBottom = document.body.style.paddingBottom || '';
+    }
+
+    const offset = `${height + 24}px`;
+    document.documentElement.style.setProperty(BODY_PADDING_VAR, offset);
+    document.body.style.paddingBottom = `calc(var(${BODY_PADDING_VAR}) + env(safe-area-inset-bottom, 0px))`;
+}
+
+export function clearBodyOffset() {
+    document.documentElement.style.removeProperty(BODY_PADDING_VAR);
+    document.body.style.paddingBottom = previousBodyPaddingBottom || '';
+    previousBodyPaddingBottom = null;
+}