Laad de code-viewer alleen waar nodig en geef bestanden leesbare namen

astro.config.mjs

@@ -5,13 +5,47 @@ import { satteri } from '@astrojs/markdown-satteri';
 import { codeViewer, markdownLinks, nonBreakingEmail, pageTitle } from './src/lib/markdown.mjs';
 import { base, siteUrl } from './src/lib/site.mjs';
 
+// Readable names in _astro/: a <script> in Layout.astro is named after the
+// component instead of its virtual module id, a chunk from a package after the
+// package plus its module.
+const slug = (label) =>
+    label
+        .replace(/[^a-zA-Z0-9]+/g, '-')
+        .replace(/^-|-$/g, '')
+        .toLowerCase();
+
+/** @param {import('rolldown').PreRenderedChunk} chunk */
+const name = (chunk) => {
+    const id = chunk.facadeModuleId ?? chunk.moduleIds.at(-1) ?? '';
+    const astro = id.match(/([^/]+)\.astro\?astro&type=script/);
+    const pkg = id.match(/node_modules\/((?:@[^/]+\/)?[^/]+)/)?.[1];
+    let label = chunk.name;
+    if (astro) label = astro[1];
+    else if (pkg && pkg !== '@nldd/design-system') {
+        label = /^(dist|index)$/.test(chunk.name) ? pkg : `${pkg}-${chunk.name}`;
+    }
+    return `_astro/${slug(label)}.[hash].js`;
+};
+
+/** @param {import('rolldown').PreRenderedAsset} asset */
+const assetName = (asset) => {
+    const css = asset.names[0]?.match(/^(.+)\.css$/);
+    return css ? `_astro/${slug(css[1])}.[hash].css` : '_astro/[name].[hash][extname]';
+};
+
 export default defineConfig({
     site: siteUrl.origin,
     base,
     trailingSlash: 'always',
     // No inlined scripts or assets, so the Content-Security-Policy in
     // container/security-headers.conf needs no 'unsafe-inline'.
-    vite: { build: { assetsInlineLimit: 0 } },
+    vite: {
+        // Astro writes the CSS from the server build, the JavaScript from the client build.
+        build: { assetsInlineLimit: 0, rolldownOptions: { output: { assetFileNames: assetName } } },
+        environments: {
+            client: { build: { rolldownOptions: { output: { entryFileNames: name, chunkFileNames: name } } } },
+        },
+    },
     integrations: [sitemap({ filter: (page) => !page.endsWith('/404/') })],
     markdown: {
         syntaxHighlight: false,

scripts/check-site.mjs

@@ -56,7 +56,7 @@ const walk = (file) => {
     }
 };
 const entry = readFileSync(path.join(root, 'src/scripts/nldd.ts'), 'utf8');
-for (const [, subpath] of entry.matchAll(/import '@nldd\/design-system\/([^']+)';/g)) {
+for (const [, subpath] of entry.matchAll(/import[ (]'@nldd\/design-system\/([^']+)'/g)) {
     const target = pkg.exports[`./${subpath}`];
     const file = typeof target === 'string' ? target : target?.default;
     if (!file) problems.push(`src/scripts/nldd.ts: @nldd/design-system/${subpath} is not an export of the package`);

src/layouts/Layout.astro

@@ -1,5 +1,6 @@
 ---
 import '@nldd/design-system/styles';
+import '../styles/site.css';
 import favicon from '@nldd/design-system/favicon.svg?url';
 import touchIcon from '@nldd/design-system/touch-icon.png?url';
 

src/scripts/nldd.ts

@@ -4,7 +4,6 @@ import '@nldd/design-system/page';
 import '@nldd/design-system/breadcrumbs';
 import '@nldd/design-system/button';
 import '@nldd/design-system/card';
-import '@nldd/design-system/code-viewer';
 import '@nldd/design-system/cell';
 import '@nldd/design-system/collection';
 import '@nldd/design-system/container';
@@ -31,3 +30,9 @@ import '@nldd/design-system/text-cell';
 import '@nldd/design-system/title';
 import '@nldd/design-system/top-navigation-bar';
 import '@nldd/design-system/window';
+
+// The code viewer brings CodeMirror, about half of all the JavaScript, and only
+// a few pages have a code block.
+if (document.querySelector('nldd-code-viewer')) {
+    import('@nldd/design-system/code-viewer');
+}

src/styles/site.css

@@ -0,0 +1,28 @@
+/*
+ * The design system keeps the page hidden while any element on it is undefined,
+ * custom elements the site does not define included (checked against 0.23.0).
+ * So this waits for our own components only: nldd.ts defines them all in the
+ * one task that evaluates it. The code viewer loads on its own and is not
+ * waited for. These rules match the specificity of the design system's own, so
+ * this stylesheet must load after it.
+ */
+body:has(:not(:defined)) {
+    opacity: 1;
+}
+
+body:has(nldd-shell:not(:defined)) {
+    opacity: 0;
+}
+
+/* Until it is defined, a code block shows its plain text in the viewer's box. */
+nldd-code-viewer:not(:defined) {
+    display: block;
+    overflow-x: auto;
+    padding: var(--primitives-space-16);
+    border-radius: var(--semantics-surfaces-corner-radius);
+    background-color: var(--semantics-surfaces-tinted-background-color);
+    box-shadow: inset 0 0 0 var(--semantics-surfaces-highlight-border-width)
+        var(--semantics-surfaces-tinted-highlight-border-color);
+    font: var(--primitives-font-monospace-sm-regular-snug);
+    white-space: pre;
+}