reallysimpledocs 1.0.10 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "reallysimpledocs",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "A simple documentation system for Astro, built with Basecoat and Tailwind CSS.",
   "author": {
     "name": "hunvreus",

package/src/astro/index.js

@@ -32,7 +32,7 @@ const normalizeImportPath = (filePath) => filePath.replaceAll(path.sep, "/");
 
 const normalizeBoolean = (value, fallback = true) => (value === undefined ? fallback : Boolean(value));
 
-const shikiConfig = {
+const defaultShikiConfig = {
   themes: {
     light: "github-light",
     dark: "github-dark",
@@ -40,6 +40,16 @@ const shikiConfig = {
   defaultColor: false,
 };
 
+function normalizeShikiConfig(value = {}) {
+  return {
+    themes: {
+      ...defaultShikiConfig.themes,
+      ...(value.themes || {}),
+    },
+    defaultColor: value.defaultColor ?? defaultShikiConfig.defaultColor,
+  };
+}
+
 function collectMdxModules(docsDir) {
   if (!fs.existsSync(docsDir)) return {};
   const modules = {};
@@ -77,6 +87,7 @@ export default function reallySimpleDocs(options = {}) {
     components: options.components || {},
     routeBase: options.routeBase ?? "/docs",
     assetsBase: options.assetsBase || "/assets",
+    shiki: normalizeShikiConfig(options.shiki),
   };
 
   return {
@@ -153,7 +164,7 @@ export default function reallySimpleDocs(options = {}) {
           integrations: [
             mdx({
               syntaxHighlight: "shiki",
-              shikiConfig,
+              shikiConfig: normalizedOptions.shiki,
             }),
           ],
           markdown: {
@@ -161,7 +172,7 @@ export default function reallySimpleDocs(options = {}) {
               remarkPlugins: [[remarkPreviewSource, { docsDir }]],
               rehypePlugins: [rehypeBasecoatTables],
             }),
-            shikiConfig,
+            shikiConfig: normalizedOptions.shiki,
           },
           vite: {
             build: {

package/src/css/custom.css

@@ -174,12 +174,12 @@ html.dark .astro-code span {
 }
 
 .code-frame > header {
-  @apply flex h-10 items-center gap-2 overflow-x-auto rounded-t-[inherit] border-b bg-muted px-3 text-sm font-medium dark:bg-muted/50;
+  @apply flex h-10 items-center gap-2 overflow-x-auto rounded-t-[inherit] border-b border-border/50 bg-muted px-3 text-sm font-medium dark:bg-muted/50;
   scrollbar-width: none;
 }
 
 .tabs-frame > header {
-  @apply flex items-center gap-2 overflow-x-auto rounded-t-[inherit] border-b bg-muted px-3 text-sm font-medium dark:bg-muted/50;
+  @apply flex items-center gap-2 overflow-x-auto rounded-t-[inherit] border-b border-border/50 bg-muted px-3 text-sm font-medium dark:bg-muted/50;
   scrollbar-width: none;
 }
 

package/src/runtime/components/mdx/Code.astro

@@ -1,11 +1,12 @@
 ---
+import config from "virtual:reallysimpledocs/config";
 import { highlightCode } from "../../lib/highlight.js";
 import { decodeHtml } from "../../lib/html.js";
 
 const { lang = "text", title, code, class: className = "" } = Astro.props;
 const slotHtml = Astro.slots.has("default") ? await Astro.slots.render("default") : "";
 const rawCode = typeof code === "string" ? code.trim() : decodeSlotText(slotHtml);
-const html = await highlightCode(rawCode, lang);
+const html = await highlightCode(rawCode, lang, config.shiki);
 
 function decodeSlotText(value) {
   const text = String(value || "")

package/src/runtime/components/mdx/Preview.astro

@@ -1,9 +1,10 @@
 ---
+import config from "virtual:reallysimpledocs/config";
 import { highlightCode } from "../../lib/highlight.js";
 
 const { code = "", lang = "html", title = "Preview", class: className = "" } = Astro.props;
 const id = `preview-${Math.random().toString(36).slice(2)}`;
-const html = await highlightCode(code, lang);
+const html = await highlightCode(code, lang, config.shiki);
 const previewClassName = className || "w-fit";
 ---
 

package/src/runtime/lib/docs.js

@@ -107,7 +107,7 @@ export async function renderDoc(config, page) {
   };
 
   const tokens = marked.lexer(content);
-  await highlightCode(tokens);
+  await highlightCode(tokens, config.shiki);
   const html = marked.parser(tokens, { renderer });
   return { page, html: await transformBasecoatTablesHtml(html), headings };
 }
@@ -360,10 +360,10 @@ function normalizeDocSource(source) {
     .trimStart();
 }
 
-async function highlightCode(tokens) {
+async function highlightCode(tokens, shiki) {
   for (const token of tokens) {
     if (token.type === "code") {
-      const html = codeBlockHtml(token, await highlightToken(token));
+      const html = codeBlockHtml(token, await highlightToken(token, shiki));
       Object.assign(token, {
         type: "html",
         raw: html,
@@ -374,7 +374,7 @@ async function highlightCode(tokens) {
     }
 
     for (const childTokens of nestedTokenLists(token)) {
-      await highlightCode(childTokens);
+      await highlightCode(childTokens, shiki);
     }
   }
 }
@@ -385,28 +385,32 @@ function codeBlockHtml(token, html) {
   return `<div class="code-frame" data-code-title="${escapeHtml(title)}"><header><span>${escapeHtml(title)}</span></header><div class="code-block">${html}</div></div>`;
 }
 
-async function highlightToken(token) {
+async function highlightToken(token, shiki = {}) {
+  const shikiConfig = normalizeShikiConfig(shiki);
   try {
     return await codeToHtml(token.text, {
       lang: normalizeLanguage(token.lang),
-      themes: {
-        light: "github-light",
-        dark: "github-dark",
-      },
-      defaultColor: false,
+      ...shikiConfig,
     });
   } catch {
     return codeToHtml(token.text, {
       lang: "text",
-      themes: {
-        light: "github-light",
-        dark: "github-dark",
-      },
-      defaultColor: false,
+      ...shikiConfig,
     });
   }
 }
 
+function normalizeShikiConfig(value = {}) {
+  return {
+    themes: {
+      light: "github-light",
+      dark: "github-dark",
+      ...(value.themes || {}),
+    },
+    defaultColor: value.defaultColor ?? false,
+  };
+}
+
 function normalizeLanguage(lang) {
   const value = lang?.trim().split(/\s+/)[0].toLowerCase() || "text";
   if (value === "njk") return "html";

package/src/runtime/lib/highlight.js

@@ -1,19 +1,33 @@
 import { codeToHtml } from "shiki";
 
-export async function highlightCode(code, lang = "text") {
+const defaultShikiConfig = {
+  themes: {
+    light: "github-light",
+    dark: "github-dark",
+  },
+  defaultColor: false,
+};
+
+export async function highlightCode(code, lang = "text", shiki = defaultShikiConfig) {
   const value = String(code || "");
   const language = String(lang || "text").toLowerCase() === "mdx" ? "tsx" : String(lang || "text");
   const html = await codeToHtml(value, {
     lang: language,
-    themes: {
-      light: "github-light",
-      dark: "github-dark",
-    },
-    defaultColor: false,
+    ...normalizeShikiConfig(shiki),
   });
   return addPreClass(html, "scrollbar");
 }
 
+function normalizeShikiConfig(value = {}) {
+  return {
+    themes: {
+      ...defaultShikiConfig.themes,
+      ...(value.themes || {}),
+    },
+    defaultColor: value.defaultColor ?? defaultShikiConfig.defaultColor,
+  };
+}
+
 function addPreClass(html, className) {
   return String(html).replace(/<pre(\s[^>]*)?>/, (match, attrs = "") => {
     const classMatch = attrs.match(/\sclass=(["'])(.*?)\1/s);