ctao/portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Preview styles

Browse Source
This commit is contained in:
kuba
2026-09-24 12:54:30 +02:00
parent c3a2ebc594
commit 8e3cbb6530
4 changed files with 458 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
scripts/preview-styles.mjs
+29 -10
View File
@@ -1,13 +1,32 @@
// Derive editor body styles from the mockup CSS so the preview cannot drift.
// Derive editor preview styles from the site CSS so the preview cannot drift.
// The preview template in src/pages/admin/index.astro renders the same markup
// as the Example pages, so the page hero, figure and prose rules apply as-is.
import { readFileSync, writeFileSync } from 'node:fs';
const css = readFileSync(new URL('../src/styles/global.css', import.meta.url), 'utf8');
const base = css.slice(0, css.indexOf('/* Utilities'));
const prose = css.slice(css.indexOf('/* Prose'), css.indexOf('/* Footer'));
const markdown = css.slice(css.indexOf('.prose { overflow-wrap:'), css.indexOf('.submenu a[aria-current="page"]'));
const preview = (base + prose + markdown).replace(/\.prose\b/g, 'body');
const css = readFileSync(new URL('../src/styles/global.css', import.meta.url), 'utf8').replace(/\r\n/g, '\n');
const between = (start, end) => {
const from = css.indexOf(start);
const to = end ? css.indexOf(end, from) : css.length;
if (from < 0 || to < 0) throw new Error(`preview-styles: marker not found in global.css: ${from < 0 ? start : end}`);
return css.slice(from, to).trim();
};
const preview = [
between('/* ===', '/* Header'), // fonts, tokens, base, utilities
between('/* Page hero', '/* Footer'), // hero, figure, prose, buttons
between('/* Responsive page'), // responsive page, preferences
`/* Preview frame
========================================================================== */
/* There is no site header above the hero */
.page-hero {
margin-top: 0;
padding-top: 3rem;
}
/* Sveltia wraps the image preview in a paragraph */
.page-figure p {
margin: 0;
}`,
];
writeFileSync(new URL('../public/admin/preview.css', import.meta.url),
'/* Generated by scripts/preview-styles.mjs; edit src/styles/global.css. */\n' + preview + `
body { display: block; min-height: 0; max-width: 64rem; margin: 0 auto; padding: 1.5rem; }
h1 { color: var(--galaxy-blue); font-family: var(--font-head); font-weight: 500; line-height: 1.05; }
`);
'/* Generated by scripts/preview-styles.mjs; edit src/styles/global.css. */\n\n' + preview.join('\n\n') + '\n');