Edit SSG

Name

Also known as (comma separated)

Brief definition Static Site Generation.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "pageCount", "type": "select", "label": "Pages to generate", "default": "100", "options": [ "10", "100", "1000" ] }, { "id": "accent", "type": "color", "label": "Accent colour", "default": "#E8A020", "presets": [ "#E8A020", "#A8E6C1", "#F5C2E0", "#BFD9F2", "#D9C8F0", "#241430" ] }, { "id": "showBuildTime", "type": "toggle", "label": "Show build duration", "default": true }, { "id": "siteName", "type": "text", "label": "Site", "default": "docs.example.com" } ]

Templates (JSON object keyed by format) { "html": "<div class=\"ssg ssg--{{pageCount}}\" role=\"img\" aria-label=\"{{siteName}}, {{pageCount}} pages generated at build time\">\n <p class=\"ssg__site\">{{siteName}}</p>\n <div class=\"ssg__stage\">\n <div class=\"ssg__build\" style=\"background:{{accent}};\">Build: generate {{pageCount}} HTML files{{#if showBuildTime}}<small class=\"ssg__t ssg__t--10\">~1s</small><small class=\"ssg__t ssg__t--100\">~8s</small><small class=\"ssg__t ssg__t--1000\">~70s</small>{{/if}}</div>\n <span class=\"ssg__arrow\" aria-hidden=\"true\">&darr;</span>\n <div class=\"ssg__request\">Request: served instantly from a CDN edge &mdash; ~5ms, no server work</div>\n </div>\n</div>\n<style>\n.ssg { font: 12px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 16px; border-radius: 12px; width: 300px; box-sizing: border-box; }\n.ssg__site { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; }\n.ssg__build { padding: 12px; border-radius: 8px; font-size: 11px; font-weight: 700; text-align: center; }\n.ssg__t { display: none; font-weight: 400; }\n.ssg--10 .ssg__t--10, .ssg--100 .ssg__t--100, .ssg--1000 .ssg__t--1000 { display: block; margin-top: 4px; }\n.ssg__arrow { display: block; text-align: center; font-size: 16px; color: #24143060; margin: 8px 0; }\n.ssg__request { padding: 12px; border-radius: 8px; background: #24143010; font-size: 11px; text-align: center; }\n</style>", "tailwind": "<div class=\"ssgtw ssgtw--{{pageCount}} font-sans text-[#241430] bg-[#FAF7F2] p-4 rounded-xl w-[300px] box-border\" role=\"img\" aria-label=\"{{siteName}}, {{pageCount}} pages generated at build time\">\n <p class=\"m-0 mb-3 font-mono text-[11px] text-[#24143099]\">{{siteName}}</p>\n <div class=\"p-3 rounded-lg text-[11px] font-bold text-center\" style=\"background:{{accent}};\">Build: generate {{pageCount}} HTML files{{#if showBuildTime}}<small class=\"ssgtw__t-10 hidden block mt-1 font-normal\">~1s</small><small class=\"ssgtw__t-100 hidden block mt-1 font-normal\">~8s</small><small class=\"ssgtw__t-1000 hidden block mt-1 font-normal\">~70s</small>{{/if}}</div>\n <span class=\"block text-center text-base text-[#24143060] my-2\" aria-hidden=\"true\">&darr;</span>\n <div class=\"p-3 rounded-lg bg-[#24143010] text-[11px] text-center\">Request: served instantly from a CDN edge &mdash; ~5ms, no server work</div>\n</div>\n<style>\n.ssgtw--10 .ssgtw__t-10, .ssgtw--100 .ssgtw__t-100, .ssgtw--1000 .ssgtw__t-1000 { display: block; }\n</style>", "react": "export function Ssg({\n pageCount = \"{{pageCount}}\",\n accent = \"{{accent}}\",\n showBuildTime = {{showBuildTime}},\n siteName = \"{{siteName}}\",\n}) {\n const times = { \"10\": \"~1s\", \"100\": \"~8s\", \"1000\": \"~70s\" };\n return (\n <div role=\"img\" aria-label={`${siteName}, ${pageCount} pages generated at build time`} style={{ font: \"12px/1.5 system-ui, sans-serif\", color: \"#241430\", background: \"#FAF7F2\", padding: 16, borderRadius: 12, width: 300, boxSizing: \"border-box\" }}>\n <p style={{ margin: \"0 0 12px\", fontFamily: \"ui-monospace, monospace\", fontSize: 11, color: \"#24143099\" }}>{siteName}</p>\n <div style={{ padding: 12, borderRadius: 8, background: accent, fontSize: 11, fontWeight: 700, textAlign: \"center\" }}>\n Build: generate {pageCount} HTML files\n {showBuildTime && <small style={{ display: \"block\", marginTop: 4, fontWeight: 400 }}>{times[pageCount]}</small>}\n </div>\n <span aria-hidden=\"true\" style={{ display: \"block\", textAlign: \"center\", fontSize: 16, color: \"#24143060\", margin: \"8px 0\" }}>&darr;</span>\n <div style={{ padding: 12, borderRadius: 8, background: \"#24143010\", fontSize: 11, textAlign: \"center\" }}>Request: served instantly from a CDN edge &mdash; ~5ms, no server work</div>\n </div>\n );\n}" }