mirrors/vue-select
2
0
Fork 0
mirror of https://github.com/tenrok/vue-select.git synced 2026-06-19 09:50:33 +03:00
Code Activity

Refactor docs to use Nuxt Content v3 and file-based pages

Browse Source 
Migrates documentation from markdown-based content to Nuxt Content v3 with file-based routing. Removes old markdown content files, adds new Vue page components, updates layout and content rendering logic, introduces a Prose wrapper, and updates dependencies for Nuxt Content v3 and related packages.
This commit is contained in:
Jeff Sagal
2025-11-13 11:56:09 -08:00
parent 06d9a373f2
commit 7644929efe
23 changed files with 669 additions and 442 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/components/Hero.vue
+1 -1
View File
@@ -35,7 +35,7 @@ import {
</p>
<p class="mt-3 text-2xl tracking-tight text-slate-400">
Everything you wish <code>&lt;select&gt;</code> could do, wrapped
up in a lightweight, extendable Vue component.
up in lightweight, composable Vue component.
</p>
<div class="mt-8 flex gap-4 md:justify-center lg:justify-start">
<Button variant="primary"> Get started </Button>
docs/components/PageContent.vue
+16 -31
View File
@@ -1,36 +1,21 @@
<script setup lang="ts">
import ContentFooterNavigation from '~/components/PageContentFooterNavigation.vue'
import PageContentHeader from '~/components/PageContentHeader.vue'
import PageTableOfContents from '~/components/PageTableOfContents.vue'
import Prose from '~/components/Prose.vue'
import type { PageCollections } from '@nuxt/content'
type PageCollectionItem = PageCollections[keyof PageCollections]
defineProps<{
page: PageCollectionItem
}>()
</script>
<template>
<div
class="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pr-0 lg:pl-8 xl:px-16"
>
<article>
<PageContentHeader />
<div
:class="[
'prose prose-slate max-w-none dark:prose-invert dark:text-slate-400',
// headings
'prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-bold lg:prose-headings:scroll-mt-[8.5rem]',
// lead
'prose-lead:text-slate-500 dark:prose-lead:text-slate-400',
// links
'prose-a:font-semibold dark:prose-a:text-sky-400',
// link underline
'prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,var(--color-sky-300))] prose-a:hover:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:var(--color-slate-900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,var(--color-sky-800))] dark:prose-a:hover:[--tw-prose-underline-size:6px]',
// pre
'prose-pre:rounded-xl prose-pre:border-2 prose-pre:bg-white dark:prose-pre:border-0 dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-lg dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10',
// hr
'dark:prose-hr:border-slate-800',
]"
>
<ContentDoc :path="$route.path" />
</div>
</article>
<ContentFooterNavigation />
</div>
<PageTableOfContents />
<article>
<PageContentHeader :page />
<Prose>
<ContentRenderer :value="page" :path="$route.path" />
</Prose>
</article>
<PageContentFooterNavigation :page />
<PageTableOfContents :toc="page.body.toc" />
</template>
docs/components/PageContentHeader.vue
+6 -2
View File
@@ -1,7 +1,11 @@
<script setup lang="ts">
import { useContent } from '#imports'
import type { PageCollections } from '@nuxt/content'
const { page } = useContent()
type PageCollectionItem = PageCollections[keyof PageCollections]
defineProps<{
page: PageCollectionItem
}>()
</script>
<template>
docs/components/PageTableOfContents.vue
+5 -4
View File
@@ -1,13 +1,14 @@
<script setup lang="ts">
import { computed, useContent } from '#imports'
import type { MarkdownRoot } from '@nuxt/content'
const { toc, page } = useContent()
const shouldRender = computed(() => page.value?.hideToc !== true)
defineProps<{
toc?: MarkdownRoot['toc']
}>()
</script>
<template>
<div
v-if="shouldRender && toc.links"
v-if="toc"
class="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6"
>
<nav aria-labelledby="on-this-page-title" class="w-56">
docs/components/Prose.vue
+25
View File
@@ -0,0 +1,25 @@
<script setup lang="ts"></script>
<template>
<div
:class="[
'prose prose-slate max-w-none dark:prose-invert dark:text-slate-400',
// headings
'prose-headings:scroll-mt-28 prose-headings:font-display prose-headings:font-bold lg:prose-headings:scroll-mt-[8.5rem]',
// lead
'prose-lead:text-slate-500 dark:prose-lead:text-slate-400',
// links
'prose-a:font-semibold dark:prose-a:text-sky-400',
// link underline
'prose-a:no-underline prose-a:shadow-[inset_0_-2px_0_0_var(--tw-prose-background,#fff),inset_0_calc(-1*(var(--tw-prose-underline-size,4px)+2px))_0_0_var(--tw-prose-underline,var(--color-sky-300))] prose-a:hover:[--tw-prose-underline-size:6px] dark:[--tw-prose-background:var(--color-slate-900)] dark:prose-a:shadow-[inset_0_calc(-1*var(--tw-prose-underline-size,2px))_0_0_var(--tw-prose-underline,var(--color-sky-800))] dark:prose-a:hover:[--tw-prose-underline-size:6px]',
// pre
'prose-pre:rounded-xl prose-pre:border-2 prose-pre:bg-white dark:prose-pre:border-0 dark:prose-pre:bg-slate-800/60 dark:prose-pre:shadow-lg dark:prose-pre:shadow-none dark:prose-pre:ring-1 dark:prose-pre:ring-slate-300/10',
// hr
'dark:prose-hr:border-slate-800',
]"
>
<slot />
</div>
</template>
<style scoped></style>
docs/components/SidebarNavigation.vue
+2 -2
View File
@@ -61,7 +61,7 @@ const navigation = [
],
},
]
const router = { pathname: '' }
const route = useRoute()
</script>
<template>
@@ -97,7 +97,7 @@ const router = { pathname: '' }
:href="link.href"
:class="[
'block w-full pl-3.5 before:pointer-events-none before:absolute before:-left-1 before:top-1/2 before:h-1.5 before:w-1.5 before:-translate-y-1/2 before:rounded-full',
link.href === router.pathname
link.href === route.path
? 'font-semibold text-sky-500 before:bg-sky-500'
: 'text-slate-500 before:hidden before:bg-slate-300 hover:text-slate-600 hover:before:block dark:text-slate-400 dark:before:bg-slate-700 dark:hover:text-slate-300',
]"
docs/components/content/Lead.vue
+1 -1
View File
@@ -1,3 +1,3 @@
<template>
<p class="lead"><ContentSlot :use="$slots.default" unwrap="p" /></p>
<p class="lead"><slot mdc-unwrap="p" /></p>
</template>
docs/components/content/QuickLink.vue
+1 -1
View File
@@ -24,7 +24,7 @@ defineProps<{
</NuxtLink>
</h2>
<p class="mt-1 text-sm text-slate-700 dark:text-slate-400">
<ContentSlot :use="$slots.default" unwrap="p" />
<slot mdc-unwrap="p" />
</p>
</div>
</div>