Skip to content

Commit 42fabfd

Browse files
farnabazfarnabaz
committed
docs: add examples in docs
1 parent fab042d commit 42fabfd

25 files changed

Lines changed: 454 additions & 2008 deletions

File tree

docs/app.config.ts renamed to docs/app/app.config.ts

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
1-
import { defineAppConfig } from 'nuxt/app'
2-
31
export default defineAppConfig({
2+
site: {
3+
url: 'https://mdc-syntax.vercel.app',
4+
},
5+
docs: {
6+
github: 'nuxt-content/mdc-syntax',
7+
},
48
docus: {
59
title: 'MDC Syntax',
610
description: 'Modern Markdown Component Parser',

‎docs/app/pages/examples/[...slug].vue‎

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
<script setup lang="ts">
2+
import { joinURL } from 'ufo'
3+
import { kebabCase } from 'scule'
4+
5+
definePageMeta({
6+
layout: 'docs',
7+
})
8+
9+
const appConfig = useAppConfig()
10+
const route = useRoute()
11+
12+
const { data: page } = await useAsyncData(kebabCase(route.path), () =>
13+
queryCollection('examples').path(`${route.path}/readme`).first(),
14+
)
15+
if (!page.value) {
16+
throw createError({
17+
statusCode: 404,
18+
statusMessage: 'Example not found',
19+
message: `${route.path} does not exist`,
20+
fatal: true,
21+
})
22+
}
23+
24+
const { data: surround } = await useAsyncData(`${kebabCase(route.path)}-surround`, async () => {
25+
const data = await queryCollectionItemSurroundings('examples', `${route.path}/readme`, {
26+
fields: ['description'],
27+
}).where('category', '=', page.value?.category)
28+
29+
return data?.map((item) => {
30+
if (!item) return null
31+
return { ...item, path: item.path?.replace('/readme', '') }
32+
})
33+
})
34+
35+
// Extract example name from route (e.g., "/examples/vite-ssr-html" -> "vite-ssr-html")
36+
const exampleName = computed(() => {
37+
return route.path.replace(/^\/examples\//, '')
38+
})
39+
40+
const breadcrumb = computed(() => [
41+
{ label: 'Examples', icon: 'i-lucide-folder-code', to: '/examples' },
42+
{ label: page.value?.title || exampleName.value },
43+
])
44+
45+
const path = computed(() => route.path.replace(/\/$/, ''))
46+
prerenderRoutes([joinURL('/raw', `${path.value}.md`)])
47+
useHead({
48+
link: [
49+
{
50+
rel: 'alternate',
51+
href: joinURL(appConfig.site.url, 'raw', `${path.value}.md`),
52+
type: 'text/markdown',
53+
},
54+
],
55+
})
56+
</script>
57+
58+
<template>
59+
<UPage v-if="page">
60+
<UPageHeader
61+
:title="page.title"
62+
:description="page.description"
63+
:ui="{
64+
wrapper: 'flex-row items-center flex-wrap justify-between',
65+
}"
66+
>
67+
<template #headline>
68+
<UBreadcrumb :items="breadcrumb" />
69+
</template>
70+
<template #links>
71+
<UButton
72+
icon="i-simple-icons-stackblitz"
73+
label="Open in Playground"
74+
color="neutral"
75+
variant="soft"
76+
size="sm"
77+
:to="`https://stackblitz.com/fork/github/${appConfig.docs?.github}/tree/${appConfig.docs?.branch || 'main'}/examples/${exampleName}`"
78+
target="_blank"
79+
/>
80+
81+
<UButton
82+
icon="i-simple-icons-github"
83+
label="Source"
84+
color="neutral"
85+
variant="soft"
86+
size="sm"
87+
:to="`https://github.com/${appConfig.docs?.github}/tree/${appConfig.docs?.branch || 'main'}/examples/${exampleName}`"
88+
target="_blank"
89+
/>
90+
91+
<PageHeaderLinks />
92+
</template>
93+
</UPageHeader>
94+
95+
<template
96+
v-if="page.body?.toc?.links?.length"
97+
#right
98+
>
99+
<UContentToc
100+
title="On this page"
101+
:links="page.body?.toc?.links || []"
102+
highlight
103+
/>
104+
</template>
105+
106+
<UPageBody
107+
prose
108+
class="break-words"
109+
>
110+
<ContentRenderer
111+
v-if="page.body"
112+
:value="page"
113+
/>
114+
115+
<div class="space-y-6">
116+
<USeparator type="dashed" />
117+
<div class="mb-4">
118+
<UPageLinks
119+
class="inline-block"
120+
:links="[
121+
{
122+
icon: 'i-lucide-pencil',
123+
label: 'Edit this page',
124+
to: `https://github.com/${appConfig.docs?.github}/edit/${appConfig.docs?.branch || 'main'}/examples/${exampleName}/README.md`,
125+
target: '_blank',
126+
},
127+
]"
128+
/>
129+
</div>
130+
<UContentSurround
131+
v-if="surround?.length"
132+
class="mb-4"
133+
:surround="surround"
134+
/>
135+
</div>
136+
</UPageBody>
137+
</UPage>
138+
</template>

‎docs/app/pages/examples/index.vue‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<script setup lang="ts">
2+
definePageMeta({
3+
layout: 'docs',
4+
})
5+
6+
// Fetch all examples
7+
const { data: examples } = await useAsyncData('examples-list', () =>
8+
queryCollection('examples')
9+
.select('title', 'description', 'category', 'path', 'icon')
10+
.all(),
11+
)
12+
13+
// Group examples by category
14+
const groupedExamples = computed(() => {
15+
if (!examples.value) return {}
16+
17+
const groups: Record<string, typeof examples.value> = {}
18+
19+
for (const example of examples.value) {
20+
const category = example.category || 'Other'
21+
if (!groups[category]) {
22+
groups[category] = []
23+
}
24+
groups[category].push(example)
25+
}
26+
27+
return groups
28+
})
29+
</script>
30+
31+
<template>
32+
<UPage>
33+
<UPageHeader
34+
title="Examples"
35+
description="Explore MDC Syntax examples to learn how to use MDC Syntax in your projects"
36+
>
37+
<template #headline>
38+
<UBreadcrumb :items="[{ label: 'Examples', icon: 'i-lucide-code' }]" />
39+
</template>
40+
</UPageHeader>
41+
<UPageBody>
42+
<div
43+
v-for="(categoryExamples, category) in groupedExamples"
44+
:key="category"
45+
class="mb-12"
46+
>
47+
<h2 class="text-xl font-semibold mb-4 flex items-center gap-2">
48+
{{ String(category).charAt(0).toUpperCase() + String(category).slice(1) }}
49+
</h2>
50+
51+
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
52+
<UPageCard
53+
v-for="example in categoryExamples"
54+
:key="example.path"
55+
:to="example.path.replace(/\/readme$/i, '')"
56+
:title="example.title"
57+
:description="example.description"
58+
:icon="example.icon"
59+
/>
60+
</div>
61+
</div>
62+
63+
<div
64+
v-if="!examples?.length"
65+
class="text-center py-12"
66+
>
67+
<UIcon
68+
name="i-lucide-book-dashed"
69+
class="size-12 text-muted mx-auto mb-4"
70+
/>
71+
<p class="text-muted">
72+
No examples
73+
</p>
74+
</div>
75+
</UPageBody>
76+
</UPage>
77+
</template>

‎docs/content.config.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import { defineContentConfig, defineCollection, z } from '@nuxt/content'
2+
import { resolve } from 'pathe'
3+
4+
console.log(resolve(__dirname, '../examples'))
5+
export default defineContentConfig({
6+
collections: {
7+
examples: defineCollection({
8+
type: 'page',
9+
source: {
10+
cwd: resolve(__dirname, '../examples'),
11+
include: '**/README.md',
12+
prefix: '/examples',
13+
exclude: ['**/.**/**', '**/node_modules/**', '**/dist/**', '**/.docs/**'],
14+
},
15+
schema: z.object({
16+
category: z.string().optional(),
17+
icon: z.string().optional(),
18+
}),
19+
}),
20+
},
21+
})

0 commit comments

Comments
 (0)