Skip to content

Commit 29d8e27

Browse files
benjamincanacbenjamincanac
committed
docs(app): implement index page
1 parent 0f3473c commit 29d8e27

File tree

11 files changed

+1013
-0
lines changed

11 files changed

+1013
-0
lines changed

‎docs/app/pages/index.vue‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
<script setup lang="ts">
2+
const { data: page } = await useAsyncData('index', () => queryCollection('content').first())
3+
if (!page.value) {
4+
throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true })
5+
}
6+
</script>
7+
8+
<template>
9+
<div v-if="page">
10+
<UPageHero
11+
v-bind="page.hero"
12+
:ui="{
13+
title: 'font-semibold sm:text-6xl',
14+
description: 'sm:text-lg text-[var(--ui-text-toned)] max-w-5xl mx-auto',
15+
}"
16+
>
17+
<template
18+
v-if="page.hero?.title"
19+
#title
20+
>
21+
<MDC
22+
:value="page.hero.title"
23+
unwrap="p"
24+
/>
25+
</template>
26+
27+
<UColorModeImage
28+
v-if="page.hero?.image"
29+
v-bind="page.hero.image"
30+
class="z-[-1]"
31+
/>
32+
</UPageHero>
33+
34+
<UPageSection
35+
v-for="(section, index) in page.sections"
36+
:key="index"
37+
v-bind="section"
38+
:ui="{
39+
title: 'font-semibold lg:text-4xl',
40+
featureLeadingIcon: 'text-[var(--ui-text-highlighted)]',
41+
...(section.ui || {}),
42+
}"
43+
>
44+
<template
45+
v-if="section.title"
46+
#title
47+
>
48+
<MDC
49+
:value="section.title"
50+
unwrap="p"
51+
/>
52+
</template>
53+
54+
<MDC
55+
v-if="section.code"
56+
:value="section.code"
57+
/>
58+
<UColorModeImage
59+
v-else-if="section.image"
60+
v-bind="section.image"
61+
class="z-[-1]"
62+
/>
63+
</UPageSection>
64+
</div>
65+
</template>

‎docs/content.config.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,4 +20,44 @@ export const collections = {
2020
})).optional(),
2121
}),
2222
}),
23+
content: defineCollection({
24+
type: 'data',
25+
source: '*.yml',
26+
schema: z.object({
27+
hero: z.object({
28+
title: z.string(),
29+
description: z.string(),
30+
links: z.array(z.object({
31+
label: z.string(),
32+
icon: z.string(),
33+
to: z.string(),
34+
})).optional(),
35+
image: z.object({
36+
dark: z.string(),
37+
light: z.string(),
38+
}).optional(),
39+
}).optional(),
40+
sections: z.array(z.object({
41+
title: z.string(),
42+
description: z.string().optional(),
43+
class: z.string().optional(),
44+
code: z.string().optional(),
45+
ui: z.object({}).optional(),
46+
features: z.array(z.object({
47+
icon: z.string().optional(),
48+
title: z.string().optional(),
49+
description: z.string().optional(),
50+
})).optional(),
51+
links: z.array(z.object({
52+
label: z.string(),
53+
icon: z.string(),
54+
to: z.string(),
55+
})).optional(),
56+
image: z.object({
57+
dark: z.string(),
58+
light: z.string(),
59+
}).optional(),
60+
})).optional(),
61+
}),
62+
}),
2363
}

‎docs/content/index.yml‎

Lines changed: 184 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,184 @@
1+
hero:
2+
title: The git-based CMS for<br> Nuxt projects.
3+
description: Nuxt Content is a module for Nuxt that provides a simple way to manage content for your application. It allows developers to write their content in Markdown, YAML, or JSON files and then easily import and display it in their application.
4+
image:
5+
dark: /home/hero-dark.svg
6+
light: /home/hero-light.svg
7+
class: 'size-full max-w-[calc(100%-2rem)] absolute bottom-0 inset-x-4'
8+
links:
9+
- label: Get Started
10+
trailingIcon: i-lucide-arrow-right
11+
to: /docs/getting-started
12+
- label: Open Visual Editor
13+
to: https://nuxt.studio
14+
target: _blank
15+
color: neutral
16+
variant: subtle
17+
sections:
18+
- features:
19+
- title: File-based CMS
20+
icon: i-lucide-files
21+
description: Write your content in Markdown, YML, CSV or JSON and query it in your components.
22+
- title: Query Builder
23+
icon: i-lucide-filter
24+
description: Query your content with a MongoDB-like API to fetch the right data at the right time.
25+
- title: SQLite powered
26+
icon: i-lucide-database
27+
description: Add custom fields to your content, making it suitable for various types of projects.
28+
- title: Markdown with Vue
29+
icon: i-simple-icons-markdown
30+
description: Use Vue components in Markdown files, with props, slots and nested components.
31+
- title: Code highlighting
32+
icon: i-lucide-list-minus
33+
description: Display beautiful code blocks on your website with the Shiki integration supporting VS Code.
34+
- title: Visual editor
35+
icon: i-lucide-mouse-pointer-click
36+
description: Let your team edit your Nuxt Content project with a visual editor.
37+
- title: Navigation Generation
38+
icon: i-lucide-panel-left
39+
description: Get your content structure in a structured object and display a navigation in minutes.
40+
- title: Prose Component
41+
icon: i-lucide-heading-1
42+
description: Easily drop in components to render different parts of your Markdown content.
43+
- title: Deploy everywhere
44+
icon: i-lucide-globe
45+
description: Nuxt Content works on all hosting providers, static, server, serverless & edge.
46+
- title: Everything you need for content management
47+
description: Combine file-based simplicity with Vue component power. Build any content-rich website, from documentation to complex applications.
48+
class: '-mb-24 sm:-mb-32'
49+
image:
50+
dark: /home/features-dark.svg
51+
light: /home/features-light.svg
52+
class: 'size-full lg:h-full max-w-[calc(100%-2rem)] absolute top-0 inset-x-4'
53+
- title: Markdown meets [Vue]{class="text-[var(--ui-primary)]"}
54+
description: We invented the MDC syntax to let you use your Vue components with props and slots inside your Markdown files.
55+
orientation: horizontal
56+
reverse: true
57+
features:
58+
- title: Specify props with frontmatter syntax
59+
icon: i-lucide-list
60+
- title: Use components slots with `#`
61+
icon: i-lucide-hash
62+
- title: Add any other html attributes
63+
icon: i-lucide-code-xml
64+
links:
65+
- label: Learn more about MDC
66+
to: /docs/mdc
67+
trailingIcon: i-lucide-arrow-right
68+
color: neutral
69+
variant: subtle
70+
- label: Watch 3min demo
71+
trailingIcon: i-lucide-circle-play
72+
color: neutral
73+
variant: ghost
74+
code: |
75+
::code-group
76+
77+
```md [content/index.md]
78+
---
79+
title: Nuxt Content
80+
description: An open source blog theme powered by Nuxt.
81+
---
82+
83+
::landing-hero
84+
---
85+
image: /images/mountain.png
86+
---
87+
#title
88+
Welcome to Alpine
89+
90+
#description
91+
An [open source blog theme](https://github.com/nuxt-themes/alpine) powered by [Nuxt Content](https://content.nuxtjs.org), editable on [Nuxt Studio](https://nuxt.studio).
92+
::
93+
```
94+
95+
```vue [components/LandingHero.vue]
96+
<template>
97+
<div>
98+
<h1>{{ title }}</h1>
99+
</div>
100+
</template>
101+
```
102+
103+
::
104+
- title: Query with [Type-Safety]{class="text-[var(--ui-secondary)]"}
105+
description: Define your content structure with collections and query them with schema validation and full type-safety.
106+
orientation: horizontal
107+
features:
108+
- title: Create collections for similar content files
109+
icon: i-lucide-layout-grid
110+
- title: Define schema for the collection front matter
111+
icon: i-lucide-circle-check
112+
- title: Get auto-completion in your Vue files
113+
icon: i-lucide-text-cursor
114+
links:
115+
- label: Learn more about query
116+
to: /docs/queries
117+
trailingIcon: i-lucide-arrow-right
118+
color: neutral
119+
variant: subtle
120+
code: |
121+
::code-group
122+
123+
```vue [pages/blog.vue]
124+
<script setup lang="ts">
125+
const { data: posts } = await useAsyncData('posts', () => {
126+
return queryContent('blog')
127+
.order('date', 'DESC')
128+
.select('title', 'path', 'description')
129+
.all()
130+
})
131+
</script>
132+
133+
<template>
134+
<div v-for="post in posts" :key="post.path">
135+
<h2>{{ doc.title }}</div>
136+
<p>{{ doc.description }}</p>
137+
<NuxtLink :to="doc.path">Read post →</NuxtLink>
138+
</div>
139+
</template>
140+
```
141+
142+
```ts [content.config.ts]
143+
export default defineContent({
144+
collections: ['blog'],
145+
})
146+
```
147+
148+
::
149+
- title: Make changes [like a pro]{class="text-[var(--ui-primary)]"}
150+
description: Edit your Nuxt Content website with our Notion-like Markdown editor with live preview and online collaboration.
151+
orientation: horizontal
152+
reverse: true
153+
image:
154+
dark: /home/pro-dark.svg
155+
light: /home/pro-light.svg
156+
class: 'size-full'
157+
features:
158+
- title: Commit & push to GitHub with one click
159+
icon: i-simple-icons-github
160+
- title: Invite editors to login with Google and publish changes
161+
icon: i-simple-icons-google
162+
- title: Edit the content in real-time with your team
163+
icon: i-lucide-users
164+
links:
165+
- label: Discover the Nuxt Content Editor
166+
to: https://nuxt.studio
167+
trailingIcon: i-lucide-arrow-right
168+
color: neutral
169+
- title: Add a git-based CMS to your Nuxt project.
170+
links:
171+
- label: Start reading docs
172+
to: /docs/getting-started
173+
trailingIcon: i-lucide-arrow-right
174+
- label: Open Visual Editor
175+
to: https://nuxt.studio
176+
target: _blank
177+
color: neutral
178+
variant: outline
179+
ui:
180+
container: 'lg:py-52'
181+
image:
182+
dark: /home/cta-dark.svg
183+
light: /home/cta-light.svg
184+
class: 'size-full max-w-[calc(100%-2rem)] absolute bottom-0 inset-x-4'

‎docs/public/home/cta-dark.svg‎

Lines changed: 91 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)