robonen/tools
1
0
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

feat(docs): doc-sections system, crdt package, MCP server, and responsive fixes

Browse Source 
Adds a hand-authored .vue doc-sections system (intro + guide pages per package, #docs/sections map, sidebar Guide group, client-side TOC), registers @robonen/crdt, renders demos client-only, base64-encodes the server-metadata virtual, plus the MCP docs endpoint and responsive/overflow fixes across pages and tables.
This commit is contained in:
Andrew Robonen
2026-06-08 15:52:03 +07:00
parent def1db8b6c
commit 09433415b6
23 changed files with 1107 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/app/pages/[package]/[utility].vue
+44 -3
View File
@@ -1,4 +1,5 @@
<script setup lang="ts">import { demos } from '#docs/demos';
import { sections } from '#docs/sections';
const route = useRoute();
const { resolveEntry } = useDocs();
@@ -18,6 +19,35 @@ if (!entry.value) {
const pkg = computed(() => entry.value!.pkg);
const demoComponent = computed(() => demos[`${packageSlug.value}/${utilitySlug.value}`] ?? null);
const sectionComponent = computed(() => sections[`${packageSlug.value}/${utilitySlug.value}`] ?? null);
// ── Doc sections: client-side TOC built from the rendered headings ───────────
const docRoot = ref<HTMLElement | null>(null);
const docToc = ref<Array<{ id: string; text: string; depth: number }>>([]);
function buildDocToc() {
const el = docRoot.value;
if (!el) return;
docToc.value = Array.from(el.querySelectorAll('h2, h3')).map((h) => {
if (!h.id) {
h.id = (h.textContent ?? '')
.toLowerCase().trim()
.replace(/[^a-z0-9]+/g, '-')
.replace(/(^-|-$)/g, '');
}
return { id: h.id, text: h.textContent ?? '', depth: h.tagName === 'H2' ? 2 : 3 };
});
}
onMounted(() => {
const el = docRoot.value;
if (!el) return;
buildDocToc();
// The section is an async component — rebuild once its content mounts.
const observer = new MutationObserver(() => buildDocToc());
observer.observe(el, { childList: true, subtree: true });
onScopeDispose(() => observer.disconnect());
});
function ghUrl(path: string) {
return `https://github.com/robonen/tools/blob/master/${path}`;
@@ -28,6 +58,7 @@ const title = computed(() => {
const e = entry.value!;
if (e.kind === 'api') return e.item.name;
if (e.kind === 'components') return e.component.name;
if (e.kind === 'doc') return e.section.title;
return e.section.title;
});
@@ -46,6 +77,9 @@ const toc = computed(() => {
if (e.kind === 'guide') {
return extractHeadings(e.section.markdown).map(h => ({ id: h.id, text: h.text, depth: h.depth }));
}
if (e.kind === 'doc') {
return docToc.value;
}
if (e.kind === 'components') {
return e.component.parts.map(p => ({ id: p.name.toLowerCase(), text: p.name, depth: 2 }));
}
@@ -82,7 +116,7 @@ const sectionTitle = 'text-xs font-semibold uppercase tracking-wider text-(--fg-
<header class="mb-8">
<div class="flex items-center gap-2.5 mb-2 flex-wrap">
<DocsBadge :kind="entry.item.kind" size="md" />
<h1 class="text-2xl font-bold font-mono tracking-tight text-(--fg)">{{ entry.item.name }}</h1>
<h1 class="min-w-0 break-words text-2xl font-bold font-mono tracking-tight text-(--fg)">{{ entry.item.name }}</h1>
<DocsTag v-if="entry.item.since" :label="`v${entry.item.since}`" variant="neutral" />
<DocsTag v-if="entry.item.hasTests" label="tested" variant="test" />
<DocsTag v-if="entry.item.hasDemo" label="demo" variant="demo" />
@@ -194,10 +228,17 @@ const sectionTitle = 'text-xs font-semibold uppercase tracking-wider text-(--fg-
<DocsComponentAnatomy :component="entry.component" :package-name="pkg.name" />
</template>
<!-- ── GUIDE ──────────────────────────────────────────────────────── -->
<template v-else>
<!-- ── GUIDE (Markdown) ───────────────────────────────────────────── -->
<template v-else-if="entry.kind === 'guide'">
<DocsMarkdown :source="entry.section.markdown" />
</template>
<!-- ── DOC SECTION (hand-authored .vue) ───────────────────────────── -->
<template v-else-if="entry.kind === 'doc'">
<div ref="docRoot" class="docs-section">
<component :is="sectionComponent" />
</div>
</template>
</article>
<!-- Right rail TOC -->
docs/app/pages/[package]/index.vue
+24 -8
View File
@@ -1,5 +1,7 @@
<script setup lang="ts">const route = useRoute();
const { getPackage, countEntries } = useDocs();
<script setup lang="ts">import { sections } from '#docs/sections';
const route = useRoute();
const { getPackage, countEntries, getIntro } = useDocs();
const slug = computed(() => route.params.package as string);
const pkg = computed(() => getPackage(slug.value));
@@ -8,6 +10,10 @@ if (!pkg.value) {
throw createError({ statusCode: 404, message: `Package "${slug.value}" not found` });
}
// Hand-authored intro (docs/intro.vue) renders as the package hero when present.
const intro = computed(() => getIntro(pkg.value!));
const introComponent = computed(() => intro.value ? sections[`${slug.value}/introduction`] ?? null : null);
useHead({ title: `${pkg.value.name} — @robonen/tools` });
const kindLabel = computed(() => ({
@@ -27,9 +33,14 @@ const otherSections = computed(() =>
<template>
<div v-if="pkg" class="max-w-3xl">
<!-- Header -->
<header class="mb-8 pb-8 border-b border-(--border)">
<div class="flex items-center gap-2.5 mb-2">
<!-- Hand-authored intro hero (docs/intro.vue) -->
<section v-if="introComponent" class="docs-section mb-12">
<component :is="introComponent" />
</section>
<!-- Auto header (shown only when there's no hand-authored intro) -->
<header v-else class="mb-8 pb-8 border-b border-(--border)">
<div class="flex items-center gap-2.5 mb-2 flex-wrap">
<h1 class="font-mono text-2xl font-bold tracking-tight text-(--fg)">{{ pkg.name }}</h1>
<DocsTag :label="`v${pkg.version}`" variant="neutral" />
</div>
@@ -44,6 +55,11 @@ const otherSections = computed(() =>
</div>
</header>
<!-- When an intro replaces the header, label the auto-generated reference -->
<h2 v-if="introComponent && pkg.kind === 'api'" class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-4 pt-2">
API Reference
</h2>
<!-- API: categories of items -->
<template v-if="pkg.kind === 'api'">
<section v-for="category in pkg.categories" :key="category.slug" class="mb-10">
@@ -51,7 +67,7 @@ const otherSections = computed(() =>
{{ category.name }}
<span class="ml-1 text-(--fg-subtle) normal-case font-normal">· {{ category.items.length }}</span>
</h2>
<div class="grid gap-2">
<div class="grid grid-cols-1 gap-2">
<NuxtLink
v-for="item in category.items"
:key="item.slug"
@@ -81,7 +97,7 @@ const otherSections = computed(() =>
<h2 class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-4">
All components <span class="normal-case font-normal">· {{ pkg.components.length }}</span>
</h2>
<div class="grid gap-3 sm:grid-cols-2">
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
<NuxtLink
v-for="c in pkg.components"
:key="c.slug"
@@ -113,7 +129,7 @@ const otherSections = computed(() =>
<DocsMarkdown v-if="overview" :source="overview.markdown" />
<section v-if="otherSections.length > 0" class="mt-10 pt-8 border-t border-(--border)">
<h2 class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-4">Sections</h2>
<div class="grid gap-2 sm:grid-cols-2">
<div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
<NuxtLink
v-for="s in otherSections"
:key="s.slug"
docs/app/pages/index.vue
+1 -1
View File
@@ -39,7 +39,7 @@ useHead({ title: '@robonen/tools — Documentation' });
<h2 class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-4">
{{ grp.label }}
</h2>
<div class="grid gap-3 sm:grid-cols-2">
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
<NuxtLink
v-for="pkg in grp.packages"
:key="pkg.slug"