@rimelight/ui 0.0.32 → 0.0.34

package/src/middleware/security.ts

@@ -38,28 +38,75 @@ export const security = defineMiddleware(async (context, next) => {
     return addSecurityHeaders(response)
   }
 
+  const cspHeader = response.headers.get("content-security-policy")
+  const nonceValue = cspHeader ? crypto.randomUUID().replace(/-/g, "") : null
+  const newHeaders = new Headers(response.headers)
+
+  if (cspHeader && nonceValue) {
+    let newCsp = cspHeader
+    if (newCsp.includes("script-src ")) {
+      newCsp = newCsp.replace("script-src ", `script-src 'nonce-${nonceValue}' `)
+    } else {
+      newCsp = newCsp + `; script-src 'nonce-${nonceValue}'`
+    }
+    if (newCsp.includes("style-src ")) {
+      newCsp = newCsp.replace("style-src ", `style-src 'nonce-${nonceValue}' `)
+    } else {
+      newCsp = newCsp + `; style-src 'nonce-${nonceValue}'`
+    }
+    newHeaders.set("content-security-policy", newCsp)
+  }
+
   if (typeof HTMLRewriter !== "undefined") {
-    return addSecurityHeaders(
-      new HTMLRewriter()
-        .on("script[src]", {
+    let rewriter = new HTMLRewriter()
+      .on("script[src]", {
+        element(el: any) {
+          const src = el.getAttribute("src")
+          if (src && manifest[src]) {
+            el.setAttribute("integrity", manifest[src])
+            el.setAttribute("crossorigin", "anonymous")
+          }
+        }
+      })
+      .on('link[rel="stylesheet"][href]', {
+        element(el: any) {
+          const href = el.getAttribute("href")
+          if (href && manifest[href]) {
+            el.setAttribute("integrity", manifest[href])
+            el.setAttribute("crossorigin", "anonymous")
+          }
+        }
+      })
+
+    if (nonceValue) {
+      rewriter = rewriter
+        .on("head", {
           element(el: any) {
-            const src = el.getAttribute("src")
-            if (src && manifest[src]) {
-              el.setAttribute("integrity", manifest[src])
-              el.setAttribute("crossorigin", "anonymous")
-            }
+            el.append(`<meta name="csp-nonce" content="${nonceValue}">`, { html: true })
           }
         })
-        .on('link[rel="stylesheet"][href]', {
+        .on("script", {
           element(el: any) {
-            const href = el.getAttribute("href")
-            if (href && manifest[href]) {
-              el.setAttribute("integrity", manifest[href])
-              el.setAttribute("crossorigin", "anonymous")
+            if (!el.getAttribute("nonce")) {
+              el.setAttribute("nonce", nonceValue)
             }
           }
         })
-        .transform(response)
+        .on("style", {
+          element(el: any) {
+            el.setAttribute("nonce", nonceValue)
+          }
+        })
+    }
+
+    return addSecurityHeaders(
+      rewriter.transform(
+        new Response(response.body, {
+          status: response.status,
+          statusText: response.statusText,
+          headers: newHeaders
+        })
+      )
     )
   }
 
@@ -84,11 +131,24 @@ export const security = defineMiddleware(async (context, next) => {
     )
   }
 
+  if (nonceValue) {
+    modifiedHtml = modifiedHtml.replace(/<head([^>]*)>/i, `<head$1>\n<meta name="csp-nonce" content="${nonceValue}">`)
+    modifiedHtml = modifiedHtml.replace(
+      /<script(?![^>]*nonce=)([^>]*)>/gi,
+      `<script$1 nonce="${nonceValue}">`
+    )
+    modifiedHtml = modifiedHtml.replace(
+      /<style(?![^>]*nonce=)([^>]*)>/gi,
+      `<style$1 nonce="${nonceValue}">`
+    )
+  }
+
   return addSecurityHeaders(
     new Response(modifiedHtml, {
       status: response.status,
       statusText: response.statusText,
-      headers: new Headers(response.headers)
+      headers: newHeaders
     })
   )
 })
+

package/src/plugins/index.ts

@@ -1,5 +1,2 @@
-export { default as starlightAddons } from "./starlightAddons"
-export type { StarlightAddonsConfig } from "./starlightAddons"
-
 export { default as starlightDocsApi } from "./starlightDocsApi"
 export type { StarlightDocsApiConfig } from "./starlightDocsApi"

package/src/plugins/starlightDocsApi/index.ts

@@ -1,4 +1,4 @@
-import type { AstroIntegration } from "astro"
+import type { StarlightPlugin } from "@astrojs/starlight/types"
 import virtual from "vite-plugin-virtual"
 import path from "node:path"
 import { fileURLToPath } from "node:url"
@@ -7,8 +7,8 @@ import ts from "typescript"
 import type { ComponentMeta, PropMeta, SlotMeta, EmitMeta, ThemeMeta } from "./types"
 import { extractVueMetaDirect } from "./extract-vue"
 
-const __dirname = path.dirname(fileURLToPath(import.meta.url))
-const uiRoot = path.resolve(__dirname, "..", "..", "..")
+const pathDirname = path.dirname(fileURLToPath(import.meta.url))
+const uiRoot = path.resolve(pathDirname, "..", "..", "..")
 
 function pascalToKebab(name: string): string {
   return name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase()
@@ -241,24 +241,31 @@ function extractAllMeta(): Record<string, ComponentMeta> {
 
 export interface StarlightDocsApiConfig {}
 
-export default function starlightDocsApi(_config?: StarlightDocsApiConfig): AstroIntegration {
+export default function starlightDocsApi(_config?: StarlightDocsApiConfig): StarlightPlugin {
   return {
     name: "rimelight-ui-starlight-docs-api",
     hooks: {
-      "astro:config:setup": ({ updateConfig, logger }) => {
+      "config:setup"({ addIntegration, logger }) {
         logger.info("Initializing @rimelight/ui docs API")
 
         const meta = extractAllMeta()
 
-        updateConfig({
-          vite: {
-            plugins: [
-              virtual({
-                "virtual:rimelight-ui-docs-meta": `export default ${JSON.stringify(meta)}`
-              })
-            ]
+        addIntegration({
+          name: "rimelight-ui-starlight-docs-api-integration",
+          hooks: {
+            "astro:config:setup": ({ updateConfig }) => {
+              updateConfig({
+                vite: {
+                  plugins: [
+                    virtual({
+                      "virtual:rimelight-ui-docs-meta": `export default ${JSON.stringify(meta)}`
+                    })
+                  ]
+                }
+              } as Record<string, unknown>)
+            }
           }
-        } as Record<string, unknown>)
+        })
       }
     }
   }

package/src/presets/defaults.ts

@@ -1,6 +1,18 @@
 type ColorShades = Record<string, string>
 type ColorModeEntry = { light: ColorShades; dark: ColorShades }
 
+export const defaultColors = [
+  "primary",
+  "secondary",
+  "info",
+  "success",
+  "warning",
+  "error",
+  "commentary",
+  "ideation",
+  "source"
+] as const
+
 export const defaultColorScales: Record<string, ColorShades | ColorModeEntry> = {
   neutral: {
     light: {