Skip to content

Commit ad34d67

Browse files
HugoRCDHugoRCD
authored
feat: add prose components documentation (#148)
1 parent 7bb0080 commit ad34d67

17 files changed

+2871
-1065
lines changed

‎app/app.vue

-2
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,6 @@ useHead({
2121
useSeoMeta({
2222
titleTemplate: `%s - ${seo?.siteName}`,
2323
ogSiteName: seo?.siteName,
24-
ogImage: 'https://docs-template.nuxt.dev/social-card.png',
25-
twitterImage: 'https://docs-template.nuxt.dev/social-card.png',
2624
twitterCard: 'summary_large_image'
2725
})
2826

‎app/assets/css/main.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
@import "tailwindcss";
22
@import "@nuxt/ui-pro";
33

4-
@source "../../../content";
4+
@source "../../../content/**/*";
55

66
@theme {
77
--font-sans: 'Public Sans', sans-serif;

‎app/components/OgImage/OgImageDocs.vue

+65-18
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,74 @@
1-
<script setup lang="ts">
2-
defineOptions({
3-
inheritAttrs: false
1+
<script lang="ts" setup>
2+
const props = withDefaults(defineProps<{ title?: string, description?: string, headline?: string }>(), {
3+
title: 'title',
4+
description: 'description'
45
})
56
6-
defineProps({
7-
title: {
8-
type: String,
9-
required: true
10-
},
11-
description: {
12-
type: String,
13-
required: true
14-
}
15-
})
7+
const title = computed(() => (props.title || '').slice(0, 60))
8+
const description = computed(() => (props.description || '').slice(0, 200))
169
</script>
1710

1811
<template>
19-
<div class="w-full h-full flex flex-col justify-center text-center bg-slate-900 p-8">
20-
<div class="relative">
21-
<h1 class="text-8xl mb-4 text-white">
22-
{{ title }}
12+
<div class="w-full h-full flex flex-col justify-center bg-[#020420]">
13+
<svg
14+
class="absolute right-0 top-0"
15+
width="629"
16+
height="593"
17+
viewBox="0 0 629 593"
18+
fill="none"
19+
xmlns="http://www.w3.org/2000/svg"
20+
>
21+
<g filter="url(#filter0_f_199_94966)">
22+
<path
23+
d="M628.5 -578L639.334 -94.4223L806.598 -548.281L659.827 -87.387L965.396 -462.344L676.925 -74.0787L1087.69 -329.501L688.776 -55.9396L1160.22 -164.149L694.095 -34.9354L1175.13 15.7948L692.306 -13.3422L1130.8 190.83L683.602 6.50012L1032.04 341.989L668.927 22.4412L889.557 452.891L649.872 32.7537L718.78 511.519L628.5 36.32L538.22 511.519L607.128 32.7537L367.443 452.891L588.073 22.4412L224.955 341.989L573.398 6.50012L126.198 190.83L564.694 -13.3422L81.8734 15.7948L562.905 -34.9354L96.7839 -164.149L568.224 -55.9396L169.314 -329.501L580.075 -74.0787L291.604 -462.344L597.173 -87.387L450.402 -548.281L617.666 -94.4223L628.5 -578Z"
24+
fill="#00DC82"
25+
/>
26+
</g>
27+
<defs>
28+
<filter
29+
id="filter0_f_199_94966"
30+
x="0.873535"
31+
y="-659"
32+
width="1255.25"
33+
height="1251.52"
34+
filterUnits="userSpaceOnUse"
35+
color-interpolation-filters="sRGB"
36+
>
37+
<feFlood
38+
flood-opacity="0"
39+
result="BackgroundImageFix"
40+
/>
41+
<feBlend
42+
mode="normal"
43+
in="SourceGraphic"
44+
in2="BackgroundImageFix"
45+
result="shape"
46+
/>
47+
<feGaussianBlur
48+
stdDeviation="40.5"
49+
result="effect1_foregroundBlur_199_94966"
50+
/>
51+
</filter>
52+
</defs>
53+
</svg>
54+
55+
<div class="pl-[100px]">
56+
<p
57+
v-if="headline"
58+
class="uppercase text-[24px] text-[#00DC82] mb-4 font-semibold"
59+
>
60+
{{ headline }}
61+
</p>
62+
<h1
63+
v-if="title"
64+
class="m-0 text-[75px] font-semibold mb-4 text-white flex items-center"
65+
>
66+
<span>{{ title }}</span>
2367
</h1>
24-
<p class="text-5xl text-gray-200 leading-tight">
68+
<p
69+
v-if="description"
70+
class="text-[32px] text-[#E4E4E7] leading-tight w-[700px]"
71+
>
2572
{{ description }}
2673
</p>
2774
</div>

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

+6-2
Original file line numberDiff line numberDiff line change
@@ -28,9 +28,13 @@ useSeoMeta({
2828
ogDescription: page.value.seo.description
2929
})
3030
31-
defineOgImageComponent('Docs')
31+
const headline = computed(() => findPageHeadline(navigation.value, page.value))
3232
33-
const headline = computed(() => findPageHeadline(navigation!.value, page.value))
33+
defineOgImageComponent('Docs', {
34+
title: page.value.title,
35+
description: page.value.description,
36+
headline: headline.value
37+
})
3438
3539
const links = computed(() => {
3640
const links = []

‎app/pages/index.vue

+3-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,9 @@ useSeoMeta({
99
titleTemplate: null,
1010
ogTitle: page.value.seo.title,
1111
description: page.value.seo.description,
12-
ogDescription: page.value.seo.description
12+
ogDescription: page.value.seo.description,
13+
ogImage: 'https://docs-template.nuxt.dev/social-card.png',
14+
twitterImage: 'https://docs-template.nuxt.dev/social-card.png'
1315
})
1416
</script>
1517

‎content/1.getting-started/.navigation.yml

+2-1
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
1-
title: Getting Started
1+
title: Getting Started
2+
icon: false

‎content/1.getting-started/1.index.md

+64-30
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,87 @@
11
---
22
title: Introduction
33
description: Welcome to Nuxt UI Pro documentation template.
4+
navigation.icon: i-lucide-house
45
---
56

6-
This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in minutes.
7+
This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui3.nuxt.dev/pro), a collection of premium components built on top of [Nuxt UI](https://ui3.nuxt.dev) to create beautiful & responsive Nuxt applications in minutes.
78

89
There are already many websites based on this template:
910

10-
- [Nuxt](https://nuxt.com) - The Nuxt website
11-
- [Nuxt UI](https://ui.nuxt.com) - The documentation of `@nuxt/ui` and `@nuxt/ui-pro`
12-
- [Nuxt Image](https://image.nuxt.com) - The documentation of `@nuxt/image`
13-
- [Nuxt Content](https://content.nuxt.com) - The documentation of `@nuxt/content`
14-
- [Nuxt Devtools](https://devtools.nuxt.com) - The documentation of `@nuxt/devtools`
15-
- [Nuxt Studio](https://content.nuxt.com/docs/studio) - The pro version of Nuxt Content
11+
::card-group
1612

17-
## Features
13+
::card
14+
---
15+
title: Nuxt
16+
icon: i-simple-icons-nuxtdotjs
17+
to: https://nuxt.com
18+
target: _blank
19+
---
20+
The Nuxt website
21+
::
1822

19-
- Powered by [Nuxt 3](https://nuxt.com)
20-
- Built with [Nuxt UI](https://ui.nuxt.com) and [Nuxt UI Pro](https://ui.nuxt.com/pro)
21-
- Write content with [MDC syntax](https://content.nuxt.com/usage/markdown) thanks to [Nuxt Content](https://content.nuxt.com)
22-
- Compatible with [Nuxt Studio](https://content.nuxt.com/docs/studio)
23-
- Auto-generated sidebar navigation
24-
- Full-Text Search out of the box
25-
- Beautiful Typography styles
26-
- Dark mode support
27-
- And more...
23+
::card
24+
---
25+
title: Nuxt UI
26+
icon: i-simple-icons-nuxtdotjs
27+
to: https://ui3.nuxt.dev
28+
target: _blank
29+
---
30+
The documentation of `@nuxt/ui` and `@nuxt/ui-pro`
31+
::
2832

29-
## Play online
33+
::card
34+
---
35+
title: Nuxt Image
36+
icon: i-simple-icons-nuxtdotjs
37+
to: https://image.nuxt.com
38+
target: _blank
39+
---
40+
The documentation of `@nuxt/image`
41+
::
3042

31-
You can start playing with this template in your browser using our online sandboxes:
43+
::card
44+
---
45+
title: Nuxt Content
46+
icon: i-simple-icons-nuxtdotjs
47+
to: https://content.nuxt.com
48+
target: _blank
49+
---
50+
The documentation of `@nuxt/content`
51+
::
3252

33-
::u-button
53+
::card
3454
---
35-
class: mr-4
36-
icon: i-simple-icons-stackblitz
37-
label: Play on StackBlitz
55+
title: Nuxt Devtools
56+
icon: i-simple-icons-nuxtdotjs
57+
to: https://devtools.nuxt.com
3858
target: _blank
39-
to: https://stackblitz.com/github/nuxt-ui-pro/docs/
4059
---
60+
The documentation of `@nuxt/devtools`
4161
::
4262

43-
::u-button
63+
::card
4464
---
45-
class: mt-2 sm:mt-0
46-
icon: i-simple-icons-codesandbox
47-
label: Play on CodeSandbox
65+
title: Nuxt Hub
66+
icon: i-simple-icons-nuxtdotjs
67+
to: https://hub.nuxt.com
4868
target: _blank
49-
to: https://codesandbox.io/s/github/nuxt-ui-pro/docs/
5069
---
70+
The best place to manage your projects, environments and variables.
71+
::
72+
5173
::
5274

53-
Or open [Nuxt UI playground](https://ui.nuxt.com/playground).
75+
## Key Features
76+
77+
This template includes a range of features designed to streamline documentation management:
78+
79+
- **Powered by [Nuxt 3](https://nuxt.com)**: Utilizes the latest Nuxt framework for optimal performance.
80+
- **Built with [Nuxt UI](https://ui3.nuxt.dev) and [Nuxt UI Pro](https://ui3.nuxt.dev/pro)**: Integrates a comprehensive suite of UI components.
81+
- **[MDC Syntax](https://content.nuxt.com/usage/markdown) via [Nuxt Content](https://content.nuxt.com)**: Supports Markdown with component integration for dynamic content.
82+
- **[Nuxt Studio](https://content.nuxt.com/docs/studio) Compatible**: Offers integration with Nuxt Studio for content editing.
83+
- **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure.
84+
- **Full-Text Search**: Includes built-in search functionality for content discovery.
85+
- **Optimized Typography**: Features refined typography for enhanced readability.
86+
- **Dark Mode**: Offers dark mode support for user preference.
87+
- **Extensive Functionality**: Explore the template to fully appreciate its capabilities.

‎content/1.getting-started/2.installation.md

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
---
22
title: Installation
33
description: Get started with Nuxt UI Pro documentation template.
4+
navigation.icon: i-lucide-download
45
---
56

67
::tip{target="_blank" to="https://content.nuxt.com/templates/docs"}

0 commit comments

Comments
 (0)