Enable the CSP (security.csp) in docs and courses, remove what it would block

apps/courses/astro.config.mjs

@@ -2,6 +2,7 @@ import mdx from '@astrojs/mdx';
 import postAudit from '@casoon/astro-post-audit';
 import siteFiles from '@casoon/astro-site-files';
 import speedMeasure from '@casoon/astro-speed-measure';
+import { shikiStyleToClass } from '@knowledge-core/styles/shiki.mjs';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'astro/config';
 
@@ -53,6 +54,7 @@ export default defineConfig({
     shikiConfig: {
       theme: 'github-dark',
       wrap: true,
+      transformers: [shikiStyleToClass],
     },
   },
 
@@ -61,12 +63,14 @@ export default defineConfig({
     defaultStrategy: 'viewport',
   },
 
+  // Astro reads the CSP only under security; a top-level csp key is silently ignored.
   security: {
     checkOrigin: true,
-  },
-
-  csp: {
-    algorithm: 'SHA-256',
+    csp: {
+      algorithm: 'SHA-256',
+      // AppShell loads the Inter stylesheet from Google Fonts
+      styleDirective: { resources: ["'self'", 'https://fonts.googleapis.com'] },
+    },
   },
 
   image: {

apps/docs/astro.config.mjs

@@ -2,6 +2,7 @@ import mdx from '@astrojs/mdx';
 import postAudit from '@casoon/astro-post-audit';
 import siteFiles from '@casoon/astro-site-files';
 import speedMeasure from '@casoon/astro-speed-measure';
+import { shikiStyleToClass } from '@knowledge-core/styles/shiki.mjs';
 import tailwindcss from '@tailwindcss/vite';
 import { defineConfig } from 'astro/config';
 
@@ -54,6 +55,7 @@ export default defineConfig({
     shikiConfig: {
       theme: 'github-dark',
       wrap: true,
+      transformers: [shikiStyleToClass],
     },
   },
 
@@ -62,12 +64,14 @@ export default defineConfig({
     defaultStrategy: 'viewport',
   },
 
+  // Astro reads the CSP only under security; a top-level csp key is silently ignored.
   security: {
     checkOrigin: true,
-  },
-
-  csp: {
-    algorithm: 'SHA-256',
+    csp: {
+      algorithm: 'SHA-256',
+      // AppShell loads the Inter stylesheet from Google Fonts
+      styleDirective: { resources: ["'self'", 'https://fonts.googleapis.com'] },
+    },
   },
 
   image: {

apps/docs/src/components/DocsHero.astro

@@ -10,8 +10,7 @@
       class="inline-flex items-center gap-2 rounded-full border border-slate-200 bg-slate-100 px-3.5 py-1.5 dark:border-slate-700 dark:bg-slate-900"
     >
       <span
-        class="h-1.5 w-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400"
-        style="box-shadow: 0 0 6px 2px oklch(79.2% 0.209 151.711 / 0.5)"
+        class="hero-status-dot h-1.5 w-1.5 rounded-full bg-emerald-500 dark:bg-emerald-400"
       ></span>
       <div class="h-4 overflow-hidden text-xs font-mono text-slate-600 dark:text-slate-300">
         <ul
@@ -87,6 +86,10 @@
 </section>
 
 <style>
+  .hero-status-dot {
+    box-shadow: 0 0 6px 2px oklch(79.2% 0.209 151.711 / 0.5);
+  }
+
   .hero-grid {
     background-image: linear-gradient(to right, oklch(0% 0 0 / 1) 1px, transparent 1px),
       linear-gradient(to bottom, oklch(0% 0 0 / 1) 1px, transparent 1px);

packages/styles/package.json

@@ -7,7 +7,9 @@
   "exports": {
     "./global.css": "./src/global.css",
     "./tokens.css": "./src/tokens.css",
-    "./prose.css": "./src/prose.css"
+    "./prose.css": "./src/prose.css",
+    "./shiki.css": "./src/shiki.css",
+    "./shiki.mjs": "./src/shiki.mjs"
   },
   "dependencies": {
     "tailwindcss": "catalog:"

packages/styles/src/prose.css

@@ -1,4 +1,5 @@
 /* MDX/Prose Styling */
+@import "./shiki.css";
 @reference "@knowledge-core/styles/global.css";
 
 @layer components {

packages/styles/src/shiki.css

@@ -0,0 +1,86 @@
+/*
+  Classes for the inline styles of Shiki code blocks (github-dark), written by the
+  shikiStyleToClass transformer in shiki.mjs. Unlayered, like the style attributes
+  they replace, so they win over layered rules such as .prose pre.astro-code span.
+*/
+.shiki-color-6a737d {
+  color: #6a737d;
+}
+.shiki-color-79b8ff {
+  color: #79b8ff;
+}
+.shiki-color-b392f0 {
+  color: #b392f0;
+}
+.shiki-color-e1e4e8 {
+  color: #e1e4e8;
+}
+.shiki-color-85e89d {
+  color: #85e89d;
+}
+.shiki-color-f97583 {
+  color: #f97583;
+}
+.shiki-color-9ecbff {
+  color: #9ecbff;
+}
+.shiki-color-ffab70 {
+  color: #ffab70;
+}
+.shiki-color-fdaeb7 {
+  color: #fdaeb7;
+}
+.shiki-color-24292e {
+  color: #24292e;
+}
+.shiki-color-dbedff {
+  color: #dbedff;
+}
+.shiki-color-2f363d {
+  color: #2f363d;
+}
+.shiki-color-d1d5da {
+  color: #d1d5da;
+}
+.shiki-background-color-24292e {
+  background-color: #24292e;
+}
+.shiki-background-color-f97583 {
+  background-color: #f97583;
+}
+.shiki-background-color-86181d {
+  background-color: #86181d;
+}
+.shiki-background-color-144620 {
+  background-color: #144620;
+}
+.shiki-background-color-c24e00 {
+  background-color: #c24e00;
+}
+.shiki-background-color-79b8ff {
+  background-color: #79b8ff;
+}
+.shiki-overflow-x-auto {
+  overflow-x: auto;
+}
+.shiki-white-space-pre-wrap {
+  white-space: pre-wrap;
+}
+.shiki-word-wrap-break-word {
+  word-wrap: break-word;
+}
+.shiki-font-style-italic {
+  font-style: italic;
+}
+.shiki-font-weight-bold {
+  font-weight: bold;
+}
+.shiki-text-decoration-underline {
+  text-decoration: underline;
+}
+.shiki-text-decoration-line-through {
+  text-decoration: line-through;
+}
+.shiki-text-decoration-underline-line-through {
+  text-decoration: underline line-through;
+}

packages/styles/src/shiki.d.mts

@@ -0,0 +1,5 @@
+/** Shiki transformer that moves inline styles to classes (see shiki.mjs). */
+export declare const shikiStyleToClass: {
+  name: string;
+  root(root: unknown): void;
+};

packages/styles/src/shiki.mjs

@@ -0,0 +1,31 @@
+/**
+ * Shiki transformer: turns every inline style Shiki and Astro put on code blocks
+ * (`color:#e1e4e8`, `overflow-x:auto` …) into a class (`shiki-color-e1e4e8`,
+ * `shiki-overflow-x-auto` …), because the CSP blocks style attributes. The classes
+ * are defined in shiki.css for the github-dark theme.
+ */
+export const shikiStyleToClass = {
+  name: 'style-to-class',
+  root(root) {
+    const visit = (node) => {
+      if (node.type !== 'element') return;
+      const style = node.properties?.style;
+      if (typeof style === 'string') {
+        const classes = style
+          .split(';')
+          .map((declaration) => declaration.trim())
+          .filter(Boolean)
+          .map((declaration) => {
+            const [property, ...value] = declaration.split(':');
+            const name = `${property}-${value.join(':')}`.trim().toLowerCase();
+            return `shiki-${name.replace(/[^a-z0-9]+/g, '-').replace(/-$/, '')}`;
+          });
+        const existing = node.properties.class;
+        node.properties.class = [existing, ...classes].filter(Boolean).join(' ');
+        node.properties.style = undefined;
+      }
+      for (const child of node.children ?? []) visit(child);
+    };
+    for (const child of root.children) visit(child);
+  },
+};