do11y 0.2.15 → 0.4.0

package/README.md

@@ -13,9 +13,9 @@ Markdown files are treated as single file Vue components with the help of [@mdit
 
 You can customize the markdown-it instance through the `markdownSetup` option.
 
-### Import markdown route files as routes through `do11y:routes`
+### Import markdown route files and pages as routes through `do11y:routes`
 
-To include a markdown file as a route it needs to have a `title` and a `slug` (e.g. `/button`) in it's frontmatter.
+To include a markdown file as a route it needs to have a `title` and a `slug` (e.g. `/button`) in it's frontmatter. Or add it inside the `docs/do11y/pages` folder.
 
 ### [Shiki](https://shiki.style) code highlighting
 
@@ -49,18 +49,12 @@ Document components through meta imports (`Button.vue?meta`) which give a simpli
 
 Expected as the default export in `docs/do11y/do11y.ts`.
 
-```ts
-interface Options {
-  /**
-   * The home page.
-   */
-  Home: () => Promise<Component>;
+You can specify a layout for each page by adding a `docs/do11y/layout/Page.vue` file with a `<RouterView />` in it.
 
-  /**
-   * The layout for each route.
-   */
-  Layout?: () => Promise<Component>;
+And you can set the home page by adding `docs/do11y/pages/Home.vue`.
 
+```ts
+interface Options {
   /**
    * Additional setup for the app.
    */
@@ -134,5 +128,11 @@ interface Options {
    * Additional markdown-it setup.
    */
   markdownSetup?: PluginSimple;
+
+  /**
+   * The callback function for rendering code blocks.
+   * Will default return the highlighted code generated by Shiki directly.
+   */
+  markdownCodeBlock?: (highlightedCode: string, md: MarkdownIt) => string;
 }
 ```

package/dist/docs/files.js

@@ -7,4 +7,4 @@ export const root = relativePath
     : searchForWorkspaceRoot(process.cwd());
 export const docs = join(root, "docs");
 export const output = join(docs, "dist");
-export const do11y = join(docs, "do11y", "do11y.ts");
+export const do11y = join(docs, "do11y");

package/dist/docs/options.js

@@ -1,6 +1,7 @@
+import { join } from "node:path";
 import { do11y } from "./files.js";
 const resolveOptions = async () => {
-    const options = (await import(do11y)).default;
+    const options = (await import(join(do11y, "do11y.ts"))).default;
     const themes = options.highlighter?.themes.map(async (theme) => {
         if (typeof theme === "string") {
             return theme;

package/dist/docs/plugins/markdown.d.ts

@@ -1,4 +1,5 @@
 import { type MarkdownSfcBlocks } from "@mdit-vue/plugin-sfc";
+import type MarkdownIt from "markdown-it";
 import type { PluginSimple } from "markdown-it";
 import type { Plugin } from "vite";
 export interface MarkdownPluginOptions {
@@ -10,7 +11,7 @@ export interface MarkdownPluginOptions {
      * The callback function for rendering code blocks.
      * Will default return the highlighted code generated by Shiki directly.
      */
-    renderCodeBlock?: (highlightedCode: string) => string;
+    markdownCodeBlock?: (highlightedCode: string, md: MarkdownIt) => string;
 }
 export interface MarkdownItEnv {
     /**

package/dist/docs/plugins/markdown.js

@@ -14,7 +14,9 @@ export default (options) => {
         html: true,
         highlight(code, lang) {
             const highlightedCode = highlightCode(code, lang);
-            return options?.renderCodeBlock ? options.renderCodeBlock(highlightedCode) : highlightedCode;
+            return options?.markdownCodeBlock
+                ? options.markdownCodeBlock(highlightedCode, md)
+                : highlightedCode;
         },
     });
     md.use(frontmatterPlugin);

package/dist/docs/plugins/options.d.ts

@@ -1,17 +1,9 @@
 import type { Plugin } from "vite";
 import type { App, Component } from "vue";
-import type { Router, RouteRecordRaw } from "vue-router";
+import type { Router } from "vue-router";
 import type { BundledTheme, ShikiTransformer, StringLiteralUnion, ThemeInput } from "shiki";
 import type { MarkdownPluginOptions } from "./markdown.js";
 export interface Options extends MarkdownPluginOptions {
-    /**
-     * The home page.
-     */
-    Home: () => Promise<Component>;
-    /**
-     * The layout for each route.
-     */
-    Layout?: () => Promise<Component>;
     /**
      * Additional setup for the app.
      */
@@ -28,14 +20,6 @@ export interface Options extends MarkdownPluginOptions {
      * Custom wrapper component for `.vue.sandbox` imports.
      */
     SandboxIframe?: () => Promise<Component>;
-    /**
-     * Custom additional routes.
-     */
-    routes?: (RouteRecordRaw & {
-        meta: {
-            title: string;
-        };
-    })[];
     /**
      * The code highlighter.
      *   - Markdown code blocks
@@ -93,7 +77,8 @@ export interface ResolvedOptions extends Omit<Options, "highlighter"> {
 }
 /**
  * Add ability to access options (`docs/do11y/do11y.ts`)
- * through `do11y:options`.
+ * through `do11y:options`, the home component through `do11y:home`,
+ * and the layout component through `do11y:page-layout`.
  */
 declare const _default: () => Plugin;
 export default _default;

package/dist/docs/plugins/options.js

@@ -1,13 +1,38 @@
+import { existsSync } from "node:fs";
+import { join } from "node:path";
 import { do11y } from "../files.js";
 /**
  * Add ability to access options (`docs/do11y/do11y.ts`)
- * through `do11y:options`.
+ * through `do11y:options`, the home component through `do11y:home`,
+ * and the layout component through `do11y:page-layout`.
  */
 export default () => ({
     name: "do11y:options",
     async resolveId(id, importer) {
         if (id === "do11y:options") {
-            return this.resolve(do11y.replace(".ts", ".js"), importer);
+            return this.resolve(join(do11y, "do11y.js"), importer);
+        }
+        if (id === "do11y:home") {
+            const homeFile = join(do11y, "pages", "Home.vue");
+            /* prettier-ignore */
+            return existsSync(homeFile)
+                ? this.resolve(homeFile, importer)
+                : `\0do11y:home`;
+        }
+        if (id === "do11y:page-layout") {
+            const pageLayoutFile = join(do11y, "layout", "Page.vue");
+            /* prettier-ignore */
+            return existsSync(pageLayoutFile)
+                ? this.resolve(pageLayoutFile, importer)
+                : `\0do11y:page-layout`;
+        }
+    },
+    async load(id) {
+        if (id === `\0do11y:home` || id === `\0do11y:page-layout`) {
+            return {
+                code: "export default undefined",
+                moduleType: "js",
+            };
         }
     },
 });

package/dist/docs/plugins/routes.d.ts

@@ -1,7 +1,9 @@
 import type { Plugin } from "vite";
 /**
- * Adds the ability to import routes (`*.md` files with
- * a `title` and `slug`) through `do11y:routes`.
+ * Adds the ability to import routes through `do11y:routes`.
+ *
+ * Routes refer to `*.md` files with a`title` and `slug`
+ * or components inside `docs/do11y/pages`.
  */
 declare const _default: () => Plugin;
 export default _default;

package/dist/docs/plugins/routes.js

@@ -1,10 +1,14 @@
-import { readFileSync } from "node:fs";
+import { join, parse } from "node:path";
+import { existsSync, readdirSync, readFileSync } from "node:fs";
 import { globSync } from "tinyglobby";
-import { root } from "../files.js";
+import { root, do11y } from "../files.js";
 import fm from "front-matter";
+import { toParamId } from "./sandbox.js";
 /**
- * Adds the ability to import routes (`*.md` files with
- * a `title` and `slug`) through `do11y:routes`.
+ * Adds the ability to import routes through `do11y:routes`.
+ *
+ * Routes refer to `*.md` files with a`title` and `slug`
+ * or components inside `docs/do11y/pages`.
  */
 export default () => {
     const moduleId = "do11y:routes";
@@ -16,9 +20,13 @@ export default () => {
         cwd: root,
     });
     /* prettier-ignore */
-    const pages = markdownFiles
+    const routes = markdownFiles
         .map((path) => ({ path, frontmatter: fm(readFileSync(path, "utf-8")).attributes }))
         .filter((file) => typeof file.frontmatter.title === "string" && typeof file.frontmatter.slug === "string");
+    /* prettier-ignore */
+    const pages = existsSync(join(do11y, "pages"))
+        ? readdirSync(join(do11y, "pages")).filter((page) => page !== "Home.vue" && (page.endsWith(".md") || page.endsWith(".vue")))
+        : [];
     return {
         name: "do11y:routes",
         resolveId(id) {
@@ -28,26 +36,40 @@ export default () => {
         },
         load(id) {
             if (id === resolvedModuleId) {
-                const stringifiedRoutes = pages.map((route) => {
+                const stringifiedRoutes = routes.map((route) => {
                     return `{
             path: "${route.frontmatter.slug}",
             meta: ${JSON.stringify(route.frontmatter)},
             component: async () => (await import("${route.path}")).default
           }`.trim();
                 });
-                const homeMeta = {
-                    title: "Home",
-                    slug: "/",
-                };
+                const stringifiedPages = pages.map((page) => {
+                    const title = parse(page).name;
+                    const slug = `/p/${toParamId(title)}`;
+                    return `{
+            path: "${slug}",
+            component: async () => (await import("${join(do11y, "pages", page)}")).default,
+
+            meta: {
+              slug: "${slug}",
+              title: "${title}",
+            },
+          }`.trim();
+                });
                 return `
+          import Home from 'do11y:home';
           import options from 'do11y:options';
 
           import { RouterView } from 'vue-router';
 
-          const home = {
+          const homeRoute = {
             path: "/",
-            meta: ${JSON.stringify(homeMeta)},
-            component: options.Home
+            component: Home,
+
+            meta:  {
+              title: "Home",
+              slug: "/",
+            }
           };
 
           const customRoutes = (options.routes ?? []).map(page => ({
@@ -55,12 +77,11 @@ export default () => {
 
             meta: {
               slug: page.path,
-
               ...page.meta,
             }
           }))
  
-          export default [home, ...customRoutes, ${stringifiedRoutes.join(",\n")}];
+          export default [homeRoute, ${stringifiedPages.join(",\n")}, ${stringifiedRoutes.join(",\n")}];
         `;
             }
         },

package/dist/docs/plugins/sandbox.d.ts

@@ -1,4 +1,5 @@
 import type { Plugin } from "vite";
+export declare const toParamId: (path: string) => string;
 /**
  * Creates a seprate sandbox app, and
  * adds access to sandbox components through `do11y:sandbox`.

package/dist/docs/plugins/sandbox.js

@@ -2,7 +2,7 @@ import { join, parse } from "node:path";
 import { globSync } from "tinyglobby";
 import { root, ui } from "../files.js";
 import { indexHtml } from "../html/plugin.js";
-const toParamId = (path) => parse(path).name.toLowerCase().replace(".sandbox", "");
+export const toParamId = (path) => parse(path).name.toLowerCase().replace(".sandbox", "").replace(".vue", "");
 /**
  * Creates a seprate sandbox app, and
  * adds access to sandbox components through `do11y:sandbox`.

package/dist/ui/index.js

@@ -1 +1 @@
-import{createApp as e,createBlock as t,createCommentVNode as n,defineComponent as r,onBeforeMount as i,openBlock as a,renderSlot as o,shallowRef as s,unref as c,withCtx as l}from"vue";import u from"do11y:options";import{createRouter as d,createWebHistory as f}from"vue-router";import p from"do11y:routes";import m from"do11y:css";var h=r({__name:`Page`,setup(e){let n=s();return i(async()=>{n.value=(await u.Layout?.())?.default;let e=document.createElement(`style`);e.innerHTML=m,document.head.appendChild(e)}),(e,r)=>n.value?(a(),t(c(n),{key:0},{default:l(()=>[o(e.$slots,`default`)]),_:3})):o(e.$slots,`default`,{key:1})}});(async()=>{let t=d({history:f(`/`),routes:p}),n=e(h);await u.setup?.(n,t),n.use(t),n.mount(`#app`)})();
+import{createApp as e,createBlock as t,createCommentVNode as n,defineComponent as r,onBeforeMount as i,openBlock as a,resolveComponent as o,unref as s}from"vue";import c from"do11y:options";import{createRouter as l,createWebHistory as u}from"vue-router";import d from"do11y:routes";import f from"do11y:page-layout";import p from"do11y:css";var m=r({__name:`Page`,setup(e){return i(async()=>{let e=document.createElement(`style`);e.innerHTML=p,document.head.appendChild(e)}),(e,n)=>{let r=o(`RouterView`);return s(f)?(a(),t(s(f),{key:0})):(a(),t(r,{key:1}))}}});(async()=>{let t=l({history:u(`/`),routes:d,scrollBehavior(e,t,n){if(!e.hash)return;let r=document.querySelector(e.hash);if(!r)return;let i=parseFloat(getComputedStyle(r).scrollMarginTop);return{el:e.hash,top:isNaN(i)?n?.top??0:i}}}),n=e(m);await c.setup?.(n,t),n.use(t),n.mount(`#app`)})();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "do11y",
-  "version": "0.2.15",
+  "version": "0.4.0",
   "description": "A bare-bones tool to document Vue components.",
   "keywords": [
     "docs-generator",

package/src/types.d.ts

@@ -25,6 +25,18 @@ declare module "do11y:options" {
   export default options;
 }
 
+declare module "do11y:home" {
+  import type { Component } from "vue";
+  const home: Component | undefined;
+  export default home;
+}
+
+declare module "do11y:page-layout" {
+  import type { Component } from "vue";
+  const layout: Component | undefined;
+  export default layout;
+}
+
 declare module "do11y:css" {
   const css: string;
   export default string;