@do11y/docs 0.0.3 → 0.0.5

package/README.md

@@ -0,0 +1,125 @@
+# @do11y/docs
+
+A very bare-bones tool to help document Vue components.
+
+- Write documentation in Markdown files that get treated as Vue components
+- Import markdown files with a `title` and `slug` added through frontmatter as routes
+- Sandbox components - e.g. `Button.sandbox.vue` will be available on the url `/sandbox?id=button`
+
+## Install
+
+```bash
+npm i @do11y/docs
+```
+
+## Setup
+
+### Allow markdown files in `vite.config.ts` file
+
+```ts
+import { fileURLToPath, URL } from 'node:url';
+
+import { defineConfig } from 'vite';
+
+import vue from '@vitejs/plugin-vue';
+import vueDevTools from 'vite-plugin-vue-devtools';
+
+export default defineConfig({
+  plugins: [vue({ include: [/\.vue$/, /\.md$/] }), vueDevTools()],
+
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
+    },
+  },
+});
+```
+
+### Add scripts to `package.json`
+
+```json
+{
+  "scripts": {
+    "docs:dev": "do11y",
+    "docs:build": "do11y build",
+    "docs:preview": "do11y preview"
+  }
+}
+```
+
+### Add the `docs` folder
+
+#### Add `tsconfig.json` file
+
+```json
+{
+  "extends": "../tsconfig.json",
+  "include": ["site/**/*", "../src/**/*"],
+
+  "compilerOptions": {
+    "types": ["@do11y/docs/types"]
+  }
+}
+```
+
+#### Add a `site/index.ts` file
+
+This file will be used to configure the documentation site. The configuration requires you to pass an import for the main `Site` component.
+
+> [!WARNING]
+> Both the documentation site and the sandbox uses the same `setup` function. This means importing styles or components directly in this file will also import them to the sandbox.
+
+```ts
+import type { Site } from '@do11y/docs';
+
+export default {
+  Site: () => import('./Site.vue'),
+
+  setup(app) {
+    // App setup
+  },
+} satisfies Site;
+```
+
+#### Add a `site/plugins.ts` file
+
+This file will be used to configure the different plugins available.
+
+```ts
+import type { PluginOptions } from '@do11y/docs';
+
+export default {
+  metaRenderer(meta, title) {
+    return `
+      <h3>${title}</h3>
+      <pre><code>${JSON.stringify(meta, null, 2)}</code></pre>
+    `;
+  },
+} satisfies PluginOptions;
+```
+
+#### Add a main `Site` component
+
+Inside the app you can import the available routes from `dolly:routes`.
+
+```vue
+<template>
+  <nav>
+    <ul>
+      <template v-for="route of routes" :key="route.path">
+        <li>
+          <router-link :to="route.path">
+            {{ route.meta.title }}
+          </router-link>
+        </li>
+      </template>
+    </ul>
+  </nav>
+
+  <RouterView />
+</template>
+
+<script lang="ts" setup>
+  import routes from 'do11y:routes';
+</script>
+```

package/dist/files.js

@@ -4,5 +4,6 @@ import { searchForWorkspaceRoot } from 'vite';
 const require = createRequire(import.meta.url);
 export const ui = join(dirname(require.resolve('@do11y/ui/package.json')));
 export const root = searchForWorkspaceRoot(process.cwd());
+// export const root = join(searchForWorkspaceRoot(process.cwd()), 'example');
 export const docs = join(root, 'docs');
 export const plugins = join(docs, 'site', 'plugins.ts');

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@do11y/docs",
   "description": "A very bare-bones tool to help document Vue components.",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "type": "module",
   "repository": {
     "type": "git",
@@ -24,7 +24,8 @@
   },
   "peerDependencies": {
     "@vitejs/plugin-vue": "^6.0.2",
-    "vue": "3.5.25"
+    "vue": "3.5.25",
+    "vue-router": "^4.6.3"
   },
   "dependencies": {
     "@mdit-vue/plugin-component": "^3.0.2",
@@ -39,7 +40,7 @@
     "markdown-it-mark": "^4.0.0",
     "markdown-it-vue-meta": "^0.0.2",
     "v-custom-block": "^1.0.67",
-    "@do11y/ui": "0.0.1"
+    "@do11y/ui": "0.0.3"
   },
   "devDependencies": {
     "@tsconfig/node24": "^24.0.3",
@@ -47,8 +48,7 @@
     "@types/markdown-it-attrs": "^4.1.3",
     "@types/node": "^24.10.1",
     "typescript": "5.9.3",
-    "vite": "^7.2.6",
-    "vue-router": "^4.6.3"
+    "vite": "^7.2.6"
   },
   "scripts": {
     "build": "tsc && copyfiles -f src/html/template.html dist/html"