do11y 0.2.3 → 0.2.5

package/README.md

@@ -2,6 +2,9 @@
 
 A bare-bones tool to document Vue components.
 
+> [!WARNING]
+> This is a small personal project! I make a lot of component libraries for personal projects and I absolutely love, love, love writing documentation for components, and I intend for this to be a mix of some of the features I love from [VitePress](https://vitepress.dev) and [Histoire](https://histoire.dev). Issues and thoughts and contributions are very welcome! But it is, again, a _personal_ project 😊
+
 ## Features
 
 ### Markdown components with [@mdit-vue](https://github.com/mdit-vue/mdit-vue).
@@ -44,10 +47,10 @@ Document components through meta imports (`Button.vue?meta`) which give a simpli
 
 ## Options
 
-Expected to be in file `docs/do11y/do11y.ts`.
+Expected as the default export in `docs/do11y/do11y.ts`.
 
 ```ts
-export interface Options {
+interface Options {
   /**
    * The home page.
    */

package/dist/docs/plugins/highlight/highlight-css.d.ts

@@ -0,0 +1,7 @@
+import type { Plugin } from "vite";
+/**
+ * Adds the necessary styles for using
+ * dual themes with the `highlighter`.
+ */
+declare const _default: () => Plugin;
+export default _default;

package/dist/docs/plugins/highlight/highlight-css.js

@@ -0,0 +1,33 @@
+import { do11yOptions } from "../../options.js";
+/**
+ * Adds the necessary styles for using
+ * dual themes with the `highlighter`.
+ */
+export default () => ({
+    name: "do11y:highlight-css",
+    async resolveId(id) {
+        if (id === "do11y:css") {
+            return "\0dolly:css.css";
+        }
+    },
+    load: {
+        order: "post",
+        handler(id) {
+            if (id === "\0dolly:css.css") {
+                const generateThemeCss = (theme) => `
+        [data-theme="${theme}"] .shiki {
+          background-color: var(--shiki-${theme}-bg) !important;
+        }
+
+        [data-theme="${theme}"] .shiki span {
+          color: var(--shiki-${theme}) !important;
+        }
+      `;
+                return Object.keys(do11yOptions.highlighter.themesInput)
+                    .filter((theme) => do11yOptions.highlighter.defaultTheme !== theme)
+                    .map((theme) => generateThemeCss(theme))
+                    .join("\n");
+            }
+        },
+    },
+});

package/dist/docs/plugins/{highlight.js → highlight/highlight.js}

@@ -3,7 +3,7 @@ import { parse as parseVue } from "vue/compiler-sfc";
 import { format } from "oxfmt";
 import { createHighlighter, bundledLanguages, bundledThemes } from "shiki";
 import { JSDOM } from "jsdom";
-import { do11yOptions } from "../options.js";
+import { do11yOptions } from "../../options.js";
 import { transformerNotationDiff, transformerNotationErrorLevel, transformerNotationHighlight, } from "@shikijs/transformers";
 const shiki = await createHighlighter({
     langs: Object.keys(bundledLanguages),
@@ -41,32 +41,12 @@ export const highlightAndFormatCode = async (path, code) => {
 export default () => {
     let viteDevServer;
     return {
-        name: "do11y:shiki",
+        name: "do11y:highlight",
         configureServer(server) {
             viteDevServer = server;
         },
-        async resolveId(id) {
-            if (id === "do11y:css") {
-                return "\0dolly:css.css";
-            }
-        },
         async load(id) {
-            if (id === "\0dolly:css.css") {
-                const generateThemeCss = (theme) => `
-          [data-theme="${theme}"] .shiki {
-            background-color: var(--shiki-${theme}-bg) !important;
-          }
-
-          [data-theme="${theme}"] .shiki span {
-            color: var(--shiki-${theme}) !important;
-          }
-        `;
-                return Object.keys(do11yOptions.highlighter.themesInput)
-                    .filter((theme) => do11yOptions.highlighter.defaultTheme !== theme)
-                    .map((theme) => generateThemeCss(theme))
-                    .join("\n");
-            }
-            else if (id.endsWith(".vue?highlight") || id.endsWith(".vue?highlight&lang=css")) {
+            if (id.endsWith(".vue?highlight") || id.endsWith(".vue?highlight&lang=css")) {
                 const path = id.replace("?highlight", "").replace("&lang=css", "");
                 const source = readFileSync(path, "utf-8");
                 /**
@@ -77,7 +57,7 @@ export default () => {
                  * to compile the style tags to CSS.
                  */
                 if (viteDevServer?.config.command === "serve" || !id.endsWith("lang=css")) {
-                    return `export default ${JSON.stringify(await highlightAndFormatCode(path, source))};`;
+                    return `export default \`${await highlightAndFormatCode(path, source)}\`;`;
                 }
                 const loadCss = async (index, lang) => {
                     const { code } = await this.load({
@@ -96,7 +76,7 @@ export default () => {
                     .filter((stylesheet) => !!stylesheet)
                     .map((stylesheet) => `<style>${stylesheet}</style>`)
                     .join("\n");
-                return `export default ${JSON.stringify(await highlightAndFormatCode(path, sourceWithoutStyles + css))};`;
+                return `export default \`${await highlightAndFormatCode(path, sourceWithoutStyles + css)}\`;`;
             }
         },
     };

package/dist/docs/plugins/markdown.js

@@ -3,7 +3,7 @@ import { sfcPlugin } from "@mdit-vue/plugin-sfc";
 import { frontmatterPlugin } from "@mdit-vue/plugin-frontmatter";
 import attrsPlugin from "markdown-it-attrs";
 import markdown from "markdown-it";
-import { highlightCode } from "./highlight.js";
+import { highlightCode } from "./highlight/highlight.js";
 /**
  * Processes blocks with the lang set to `md` into HTML,
  * and turns `.md` files into single file vue components

package/dist/docs/plugins/plugins.js

@@ -1,6 +1,7 @@
 import ui from "./ui.js";
 import sandbox from "./sandbox.js";
-import highlight from "./highlight.js";
+import highlightCss from "./highlight/highlight-css.js";
+import highlight from "./highlight/highlight.js";
 import meta from "./meta/meta.js";
 import markdown from "./markdown.js";
 import block from "v-custom-block";
@@ -10,6 +11,7 @@ import { do11yOptions } from "../options.js";
 export const plugins = () => [
     ui(),
     sandbox(),
+    highlightCss(),
     highlight(),
     meta(),
     markdown(do11yOptions),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "do11y",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "description": "A bare-bones tool to document Vue components.",
   "keywords": [
     "docs-generator",
@@ -33,6 +33,7 @@
     "@shikijs/langs": "^3.22.0",
     "@shikijs/themes": "^3.22.0",
     "@shikijs/transformers": "^3.22.0",
+    "@types/markdown-it": "^14.1.2",
     "front-matter": "^4.0.2",
     "jsdom": "^28.1.0",
     "markdown-it": "^14.1.1",
@@ -46,7 +47,6 @@
   "devDependencies": {
     "@tsconfig/node24": "^24.0.4",
     "@types/jsdom": "^27.0.0",
-    "@types/markdown-it": "^14.1.2",
     "@types/markdown-it-attrs": "^4.1.3",
     "@types/node": "24.10.3",
     "@vue/tsconfig": "^0.8.1",