diff --git a/.gitignore b/.gitignore index b1640b5..359d8f5 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ node_modules dist .env .env.local +.cms-editor/ diff --git a/README.md b/README.md index ff10859..5cf2bc8 100644 --- a/README.md +++ b/README.md @@ -146,9 +146,19 @@ schema contract: [docs/styling.md](docs/styling.md). ## Deploying -Serve `dist/onpage-editor.js` at `/editor/onpage-editor.js` and let the existing loader do -`if (document.cookie.includes('cms_preview=1')) import('/editor/onpage-editor.js')`. The bundle -re-checks the cookie, so loading it for a visitor is a no-op. +Part of the ecommerce monorepo as the `cms-onpageeditor` submodule. Each instance image (`tornberg`, `bygglagret`, +`k6n`) and `Dockerfile.nginx` build it in an `onpage` stage (named context `onpageeditor`) and ship two files in `/editor/`: + +- `cms-client.js` - the tiny loader (`src/loader-core.ts`, ~0.5 kB gz) that page templates already reference. It replaces the old + hand-written `cms-client` in every instance. With the `cms_preview=1` cookie it imports `onpage-editor.js` from the same directory; + otherwise it does nothing. +- `onpage-editor.js` - the editor. + +Entering edit mode on a deployed site: open **`/edit`** or **`/edit/`** (the edge, `deploy/nginx.conf`, sets the cookie and redirects +to the page). Entering/leaving edit mode: open any page with `?cms_preview=1` (sets the cookie, strips the param, reloads so the edge serves the +live render) and `?cms_preview=0` to leave. Dev: `make dev` rebuilds both into the instance's `public/` (`npm run build:watch`, +`CMS_ONPAGE_OUT`). The shared `@k6n/cms-editor` sources are found at `../backoffice/web/packages/cms-editor/src` (submodule layout), +`../ecommerce/...` (standalone checkout), `.cms-editor/` (Docker) or `CMS_EDITOR_SRC`. ## Not done / next diff --git a/docs/styling.md b/docs/styling.md index 6cbbd87..403d61c 100644 --- a/docs/styling.md +++ b/docs/styling.md @@ -64,8 +64,12 @@ and every block with a numeric `columns`. ## Open points / suggestions for the CMS side -1. **Responsive spacing** is not possible today: no `gap/padding/margin` classes per breakpoint. If wanted: add `x-style` spacing - fields to `$defs/breakpoint` and emit e.g. `k6n-gap-md@t` classes from `layout.gohtml`; the editor picks them up unchanged. +1. **Responsive spacing** (done): `$defs/breakpoint` declares `gap`, `padding(Top|Bottom)`, `margin(Top|Bottom)`, `align`, `justify`; the k6n + layout template emits `k6n-t-gap-md` / `k6n-m-pt-sm` classes (tablet ≤900px, mobile ≤620px). Columns are resolved in the template into + `--k6n-cols` / `--k6n-cols-t` / `--k6n-cols-m` (defaults: tablet ≤2, mobile 1); cards/quotes/cases/projects/people read the same variables. + **Device preview**: the Style panel's *Show … preview* opens the page in an iframe at 390/820/1280px (real viewport, so media queries apply), + reloaded after each edit; the editor does not boot inside it (`window.name`). Only the k6n content root has this so far; the shared + `data/templates/layout.gohtml` still uses the old class scheme. 2. **Left/right padding and margin** have no fields (`paddingTop/Bottom` only), so those grips edit the all-sides field. Adding `paddingX/marginX` (`side: "x"`) gives them their own handles with no editor change. 3. `InsertOp` in `@k6n/cms-editor` lacks the optional `id` the server accepts (the editor casts for the wrap batch). diff --git a/mock/fixtures.ts b/mock/fixtures.ts index dce2b27..a1e5dd6 100644 --- a/mock/fixtures.ts +++ b/mock/fixtures.ts @@ -53,6 +53,9 @@ export const schemas: Record = { properties: { flow: { 'x-style': { kind: 'flow' }, type: 'string', enum: ['row', 'stack', 'actions'] }, columns: { 'x-style': { kind: 'columns' }, type: 'integer', minimum: 1, maximum: 12 }, + gap: { 'x-style': { kind: 'gap', token: '--k6n-sp-{value}' }, type: 'string', enum: ['none', 'xs', 'sm', 'md', 'lg', 'xl'] }, + paddingTop: { 'x-style': { kind: 'spacing', box: 'padding', side: 'top', overrides: 'padding', token: '--k6n-sp-{value}' }, type: 'string', enum: ['none', 'xs', 'sm', 'md', 'lg', 'xl'] }, + paddingBottom: { 'x-style': { kind: 'spacing', box: 'padding', side: 'bottom', overrides: 'padding', token: '--k6n-sp-{value}' }, type: 'string', enum: ['none', 'xs', 'sm', 'md', 'lg', 'xl'] }, }, additionalProperties: false, }, @@ -193,9 +196,13 @@ export function render(g: Graph, id: string): string { .map(([k, c]) => ` k6n-${c}-${d[k]}`) .join('') const r = d.responsive ?? {} - const resp = [['mobile', 'm'], ['tablet', 't'], ['desktop', 'd']] - .flatMap(([bp, c]) => [r[bp]?.flow ? ` k6n-layout--${c}-${r[bp].flow}` : '', r[bp]?.columns ? ` k6n-layout--${c}c-${r[bp].columns}` : '']) - .join('') + // Mirrors data/k6n/templates/layout.gohtml: tablet flow class only when it differs; spacing as k6n---. + const norm = (f: string) => ({ vertical: 'stack', horizontal: 'row', grid: 'row' } as Record)[f] ?? f + const tf = r.tablet?.flow ? norm(r.tablet.flow) : flow + const resp = (tf !== flow ? ` k6n-layout--t-${tf}` : '') + + [['tablet', 't'], ['mobile', 'm']] + .flatMap(([bp, c]) => [['gap', 'gap'], ['padding', 'p'], ['paddingTop', 'pt'], ['paddingBottom', 'pb']].filter(([k]) => r[bp]?.[k]).map(([k, n]) => ` k6n-${c}-${n}-${r[bp][k]}`)) + .join('') const tone = d.tone && d.tone !== 'none' ? ` k6n-${d.tone}` : '' const cells = g.children(id).map((e) => `
${render(g, e.to)}
`).join('\n') return `
\n${cells}\n
` diff --git a/package.json b/package.json index d4bdbd2..225c79a 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "scripts": { "dev": "vite", "dev:mock": "CMS_MODE=mock vite", - "build": "tsc --noEmit && vite build --mode lib", + "build": "tsc --noEmit && vite build --mode lib && vite build --mode loader", + "build:watch": "vite build --mode lib --watch & vite build --mode loader --watch & wait", "preview": "vite preview", "typecheck": "tsc --noEmit", "test": "vitest run", diff --git a/src/loader-core.ts b/src/loader-core.ts new file mode 100644 index 0000000..294c6a9 --- /dev/null +++ b/src/loader-core.ts @@ -0,0 +1,49 @@ +// The tiny script pages reference as /editor/cms-client.js (the URL the templates +// already use). Visitors pay for this file only; the editor bundle is fetched when +// the cms_preview cookie is set. +// +// ?cms_preview=1 sets the cookie, drops the param and reloads, so the edge +// renders the live (preview) page and the editor boots +// ?cms_preview=0 clears the cookie and reloads the published page + +export const COOKIE = 'cms_preview' +export const DEFAULT_BUNDLE = '/editor/onpage-editor.js' + +export interface LoaderEnv { + location: Pick + cookie: { get(): string; set(v: string): void } + /** URL of this script, used to find the editor bundle next to it. */ + scriptSrc?: string + load(url: string): Promise +} + +export const hasPreviewCookie = (cookie: string) => new RegExp(`(?:^|;\\s*)${COOKIE}=1`).test(cookie) + +export function bundleUrl(scriptSrc?: string): string { + if (!scriptSrc) return DEFAULT_BUNDLE + try { + return new URL('onpage-editor.js', scriptSrc).href + } catch { + return DEFAULT_BUNDLE + } +} + +/** Returns what it did, for tests and the console. */ +export function runLoader(env: LoaderEnv): 'redirected' | 'loaded' | 'idle' { + const url = new URL(env.location.href) + const flag = url.searchParams.get(COOKIE) + if (flag === '1' || flag === '0') { + const secure = env.location.protocol === 'https:' ? '; Secure' : '' + env.cookie.set( + flag === '1' + ? `${COOKIE}=1; path=/; SameSite=Lax${secure}` + : `${COOKIE}=; path=/; max-age=0; SameSite=Lax${secure}`, + ) + url.searchParams.delete(COOKIE) + env.location.replace(url.toString()) + return 'redirected' + } + if (!hasPreviewCookie(env.cookie.get())) return 'idle' + void env.load(bundleUrl(env.scriptSrc)).catch((e) => console.error('[cms] could not load the on-page editor', e)) + return 'loaded' +} diff --git a/src/loader.ts b/src/loader.ts new file mode 100644 index 0000000..636f8dd --- /dev/null +++ b/src/loader.ts @@ -0,0 +1,8 @@ +import { runLoader } from './loader-core' + +runLoader({ + location, + cookie: { get: () => document.cookie, set: (v) => void (document.cookie = v) }, + scriptSrc: (document.currentScript as HTMLScriptElement | null)?.src, + load: (url) => import(/* @vite-ignore */ url), +}) diff --git a/src/main.ts b/src/main.ts index 76b010f..af0922a 100644 --- a/src/main.ts +++ b/src/main.ts @@ -2,10 +2,12 @@ // own loader only when the preview cookie is set (docs/onpage-editor.md §2). // It re-checks, so loading it by mistake never shows editor UI to visitors. import { boot } from './boot' +import { PREVIEW_FRAME_NAME } from './style/DevicePreview' export const previewEnabled = () => /(?:^|;\s*)cms_preview=1/.test(document.cookie) -if (previewEnabled()) boot() +// The device-preview iframe shows the page only; it must not boot a second editor. +if (previewEnabled() && window.name !== PREVIEW_FRAME_NAME) boot() export { boot } export * from './registry' diff --git a/src/style/DevicePreview.tsx b/src/style/DevicePreview.tsx new file mode 100644 index 0000000..071329c --- /dev/null +++ b/src/style/DevicePreview.tsx @@ -0,0 +1,65 @@ +import { useEffect, useRef } from 'react' +import { useEditorState } from '../ui/hooks' +import type { Breakpoint } from './model' + +/** Real viewport widths: media queries only answer to an actual window, hence an iframe. */ +export const DEVICE_WIDTH: Record = { mobile: 390, tablet: 820, desktop: 1280, base: 1280 } +/** Marks the preview frame so the editor does not boot inside it (see main.ts). */ +export const PREVIEW_FRAME_NAME = 'cms-device-preview' + +const SHOWN = 380 // px the frame occupies on screen at most +const HEIGHT = 520 + +/** + * The page at the width of the selected breakpoint, floating bottom-left. It is the same URL, so it + * renders the live store (cms_preview cookie) and reloads shortly after every edit. Because the + * viewport is real, `@media` rules - including the layout's tablet/mobile column variables - apply. + */ +export function DevicePreview({ bp, onClose }: { bp?: Breakpoint; onClose(): void }) { + const ref = useRef(null) + const rev = useEditorState((s) => s.editRev) + const first = useRef(true) + const width = DEVICE_WIDTH[bp ?? 'base'] + const scale = Math.min(1, SHOWN / width) + + useEffect(() => { + if (first.current) { + first.current = false + return + } + const t = setTimeout(() => { + try { + ref.current?.contentWindow?.location.reload() + } catch { + /* cross-origin: nothing to reload */ + } + }, 450) + return () => clearTimeout(t) + }, [rev]) + + const url = location.pathname + location.search + return ( +
+
+ + {bp ?? 'desktop'} preview · {width}px + + +
+
+