robonen
09433415b6
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.
70 lines
3.3 KiB
Vue
70 lines
3.3 KiB
Vue
<script setup lang="ts">const { getGroupedPackages, getPackages, countEntries, getTotalItems } = useDocs();
|
|
const groups = getGroupedPackages();
|
|
const packages = getPackages();
|
|
const totalItems = getTotalItems();
|
|
|
|
const kindMeta: Record<string, { label: string; cls: string }> = {
|
|
api: { label: 'API', cls: 'bg-blue-100 text-blue-700 dark:bg-blue-500/15 dark:text-blue-300' },
|
|
components: { label: 'Components', cls: 'bg-fuchsia-100 text-fuchsia-700 dark:bg-fuchsia-500/15 dark:text-fuchsia-300' },
|
|
guide: { label: 'Guide', cls: 'bg-teal-100 text-teal-700 dark:bg-teal-500/15 dark:text-teal-300' },
|
|
};
|
|
|
|
useHead({ title: '@robonen/tools — Documentation' });
|
|
</script>
|
|
|
|
<template>
|
|
<div class="max-w-4xl">
|
|
<!-- Hero -->
|
|
<section class="mb-14">
|
|
<div class="inline-flex items-center gap-2 mb-5 px-3 py-1 rounded-full border border-(--border) bg-(--bg-subtle) text-xs text-(--fg-muted)">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500" />
|
|
Auto-generated from source & JSDoc
|
|
</div>
|
|
<h1 class="text-4xl sm:text-5xl font-bold tracking-tight text-(--fg) mb-4">
|
|
@robonen/tools
|
|
</h1>
|
|
<p class="text-lg text-(--fg-muted) leading-relaxed max-w-2xl">
|
|
A monorepo of TypeScript utilities, Vue composables, headless UI primitives
|
|
and shared tooling — documented, typed and tested.
|
|
</p>
|
|
<div class="mt-6 flex flex-wrap items-center gap-x-6 gap-y-2 text-sm text-(--fg-subtle)">
|
|
<span><span class="text-(--fg) font-semibold">{{ packages.length }}</span> packages</span>
|
|
<span><span class="text-(--fg) font-semibold">{{ totalItems }}</span> documented items</span>
|
|
<span><span class="text-(--fg) font-semibold">{{ groups.length }}</span> groups</span>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Package groups -->
|
|
<section v-for="grp in groups" :key="grp.group" class="mb-10">
|
|
<h2 class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-4">
|
|
{{ grp.label }}
|
|
</h2>
|
|
<div class="grid grid-cols-1 gap-3 sm:grid-cols-2">
|
|
<NuxtLink
|
|
v-for="pkg in grp.packages"
|
|
:key="pkg.slug"
|
|
:to="`/${pkg.slug}`"
|
|
class="group relative block p-5 rounded-card border border-(--border) bg-(--bg-elevated) hover:border-(--border-strong) hover:shadow-(--shadow-card) transition-all"
|
|
>
|
|
<div class="flex items-start justify-between gap-3 mb-2">
|
|
<h3 class="font-mono text-sm font-semibold text-(--fg) group-hover:text-(--accent-text) transition-colors">
|
|
{{ pkg.name }}
|
|
</h3>
|
|
<span :class="['text-[10px] px-2 py-0.5 rounded-full font-medium leading-none shrink-0', kindMeta[pkg.kind]?.cls]">
|
|
{{ kindMeta[pkg.kind]?.label }}
|
|
</span>
|
|
</div>
|
|
<p class="text-sm text-(--fg-muted) leading-relaxed line-clamp-2">
|
|
{{ pkg.description }}
|
|
</p>
|
|
<div class="mt-4 flex items-center gap-3 text-xs text-(--fg-subtle)">
|
|
<span class="font-mono">v{{ pkg.version }}</span>
|
|
<span>·</span>
|
|
<span>{{ countEntries(pkg) }} {{ pkg.kind === 'components' ? 'components' : pkg.kind === 'guide' ? 'sections' : 'items' }}</span>
|
|
</div>
|
|
</NuxtLink>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</template>
|