chore(docs): eslint migration + extractor updates
Migrate docs to eslint flat config (build-script console override); doc extractor points at configs/eslint.
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
<script setup lang="ts">const route = useRoute();
|
||||
const { getPackage } = useDocs();
|
||||
const { getPackage, countEntries } = useDocs();
|
||||
|
||||
const slug = computed(() => route.params.package as string);
|
||||
const pkg = computed(() => getPackage(slug.value));
|
||||
@@ -8,66 +8,125 @@ if (!pkg.value) {
|
||||
throw createError({ statusCode: 404, message: `Package "${slug.value}" not found` });
|
||||
}
|
||||
|
||||
useHead({
|
||||
title: `${pkg.value.name} — @robonen/tools`,
|
||||
});
|
||||
useHead({ title: `${pkg.value.name} — @robonen/tools` });
|
||||
|
||||
const kindLabel = computed(() => ({
|
||||
api: 'API Reference',
|
||||
components: 'Components',
|
||||
guide: 'Guide',
|
||||
}[pkg.value!.kind]));
|
||||
|
||||
// For guide packages, surface the overview section inline.
|
||||
const overview = computed(() =>
|
||||
pkg.value?.kind === 'guide' ? pkg.value.sections.find(s => s.slug === 'overview') : undefined,
|
||||
);
|
||||
const otherSections = computed(() =>
|
||||
pkg.value?.kind === 'guide' ? pkg.value.sections.filter(s => s.slug !== 'overview') : [],
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-if="pkg" class="max-w-3xl min-w-0">
|
||||
<div v-if="pkg" class="max-w-3xl">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-3 mb-2">
|
||||
<h1 class="text-2xl font-bold tracking-tight text-(--color-text)">
|
||||
{{ pkg.name }}
|
||||
</h1>
|
||||
<DocsTag :label="`v${pkg.version}`" variant="since" />
|
||||
<header class="mb-8 pb-8 border-b border-(--border)">
|
||||
<div class="flex items-center gap-2.5 mb-2">
|
||||
<h1 class="font-mono text-2xl font-bold tracking-tight text-(--fg)">{{ pkg.name }}</h1>
|
||||
<DocsTag :label="`v${pkg.version}`" variant="neutral" />
|
||||
</div>
|
||||
<p class="text-(--color-text-soft)">
|
||||
{{ pkg.description }}
|
||||
</p>
|
||||
</div>
|
||||
<p class="text-(--fg-muted) text-[15px] leading-relaxed">{{ pkg.description }}</p>
|
||||
<div class="mt-4 flex items-center gap-3 text-xs text-(--fg-subtle)">
|
||||
<span>{{ kindLabel }}</span>
|
||||
<span>·</span>
|
||||
<span>{{ countEntries(pkg) }} entries</span>
|
||||
</div>
|
||||
<div class="mt-5">
|
||||
<DocsCode :code="`pnpm add ${pkg.name}`" lang="bash" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Install -->
|
||||
<div class="mb-8">
|
||||
<h2 class="text-sm font-semibold uppercase tracking-wider text-(--color-text-mute) mb-2">
|
||||
Installation
|
||||
</h2>
|
||||
<DocsCode :code="`pnpm add ${pkg.name}`" lang="bash" />
|
||||
</div>
|
||||
|
||||
<!-- Categories -->
|
||||
<div v-for="category in pkg.categories" :key="category.slug" class="mb-8">
|
||||
<h2 class="text-lg font-semibold text-(--color-text) mb-4 pb-2 border-b border-(--color-border)">
|
||||
{{ category.name }}
|
||||
</h2>
|
||||
|
||||
<div class="grid gap-2">
|
||||
<NuxtLink
|
||||
v-for="item in category.items"
|
||||
:key="item.slug"
|
||||
:to="`/${pkg.slug}/${item.slug}`"
|
||||
class="group flex items-center gap-3 p-3 rounded-lg border border-(--color-border) hover:border-brand-300 hover:bg-(--color-bg-soft) transition-all"
|
||||
>
|
||||
<DocsBadge :kind="item.kind" />
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="font-mono text-sm font-medium text-(--color-text) group-hover:text-brand-600 transition-colors">
|
||||
{{ item.name }}
|
||||
</span>
|
||||
<DocsTag v-if="item.since" :label="`v${item.since}`" variant="since" />
|
||||
<DocsTag v-if="item.hasTests" label="tested" variant="test" />
|
||||
<DocsTag v-if="item.hasDemo" label="demo" variant="demo" />
|
||||
<!-- API: categories of items -->
|
||||
<template v-if="pkg.kind === 'api'">
|
||||
<section v-for="category in pkg.categories" :key="category.slug" class="mb-10">
|
||||
<h2 class="text-xs font-semibold uppercase tracking-wider text-(--fg-subtle) mb-4">
|
||||
{{ category.name }}
|
||||
<span class="ml-1 text-(--fg-subtle) normal-case font-normal">· {{ category.items.length }}</span>
|
||||
</h2>
|
||||
<div class="grid gap-2">
|
||||
<NuxtLink
|
||||
v-for="item in category.items"
|
||||
:key="item.slug"
|
||||
:to="`/${pkg.slug}/${item.slug}`"
|
||||
class="group flex items-center gap-3 p-3 rounded-xl border border-(--border) bg-(--bg-elevated) hover:border-(--border-strong) hover:bg-(--bg-subtle) transition-all"
|
||||
>
|
||||
<DocsBadge :kind="item.kind" />
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-center gap-2 flex-wrap">
|
||||
<span class="font-mono text-sm font-medium text-(--fg) group-hover:text-(--accent-text) transition-colors">{{ item.name }}</span>
|
||||
<DocsTag v-if="item.hasTests" label="tested" variant="test" />
|
||||
<DocsTag v-if="item.hasDemo" label="demo" variant="demo" />
|
||||
</div>
|
||||
<p v-if="item.description" class="text-sm text-(--fg-subtle) mt-0.5 truncate">{{ item.description }}</p>
|
||||
</div>
|
||||
<p v-if="item.description" class="text-sm text-(--color-text-mute) mt-0.5 truncate">
|
||||
{{ item.description }}
|
||||
</p>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-(--color-text-mute) group-hover:text-brand-600 transition-colors shrink-0">
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-(--fg-subtle) group-hover:text-(--accent-text) transition-colors shrink-0">
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<!-- Components: gallery -->
|
||||
<template v-else-if="pkg.kind === 'components'">
|
||||
<section>
|
||||
<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">
|
||||
<NuxtLink
|
||||
v-for="c in pkg.components"
|
||||
:key="c.slug"
|
||||
:to="`/${pkg.slug}/${c.slug}`"
|
||||
class="group block p-4 rounded-xl border border-(--border) bg-(--bg-elevated) hover:border-(--border-strong) hover:shadow-(--shadow-card) transition-all"
|
||||
>
|
||||
<div class="flex items-center justify-between gap-2 mb-1.5">
|
||||
<span class="font-semibold text-(--fg) group-hover:text-(--accent-text) transition-colors">{{ c.name }}</span>
|
||||
<span class="text-[11px] text-(--fg-subtle)">{{ c.parts.length }} parts</span>
|
||||
</div>
|
||||
<p v-if="c.description" class="text-sm text-(--fg-subtle) line-clamp-2">{{ c.description }}</p>
|
||||
<div class="mt-3 flex flex-wrap gap-1">
|
||||
<span
|
||||
v-for="part in c.parts.slice(0, 4)"
|
||||
:key="part.name"
|
||||
class="text-[10px] font-mono px-1.5 py-0.5 rounded bg-(--bg-inset) border border-(--border) text-(--fg-subtle)"
|
||||
>
|
||||
{{ part.role }}
|
||||
</span>
|
||||
<span v-if="c.parts.length > 4" class="text-[10px] text-(--fg-subtle) px-1">+{{ c.parts.length - 4 }}</span>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<!-- Guide: overview markdown + section links -->
|
||||
<template v-else>
|
||||
<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">
|
||||
<NuxtLink
|
||||
v-for="s in otherSections"
|
||||
:key="s.slug"
|
||||
:to="`/${pkg.slug}/${s.slug}`"
|
||||
class="group flex items-center justify-between gap-3 p-3.5 rounded-xl border border-(--border) bg-(--bg-elevated) hover:border-(--border-strong) hover:bg-(--bg-subtle) transition-all"
|
||||
>
|
||||
<span class="text-sm font-medium text-(--fg) group-hover:text-(--accent-text) transition-colors">{{ s.title }}</span>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="text-(--fg-subtle) group-hover:text-(--accent-text) transition-colors shrink-0">
|
||||
<polyline points="9 18 15 12 9 6" />
|
||||
</svg>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user