Skip to content

Commit 4d835fb

Browse files
davingmdavingm
committed
feat(docs) add HTML documentation Version v-1.0
1 parent 8ba81e8 commit 4d835fb

18 files changed

Lines changed: 1147 additions & 230 deletions

File tree

‎app/components/DocsHeader.vue‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,48 @@ const frameworks = computed(() => [
1313
to: '/docs/laravel/getting-started',
1414
icon: 'i-simple-icons-laravel',
1515
active: route.path.startsWith('/docs/laravel')
16+
},
17+
{
18+
label: 'HTML',
19+
to: '/docs/html/getting-started',
20+
icon: 'i-simple-icons-html5',
21+
active: route.path.startsWith('/docs/html')
22+
},
23+
{
24+
label: 'CSS',
25+
to: '/docs/css/getting-started',
26+
icon: 'i-simple-icons-css3',
27+
active: route.path.startsWith('/docs/css')
28+
},
29+
{
30+
label: 'JavaScript',
31+
to: '/docs/js/getting-started',
32+
icon: 'i-simple-icons-javascript',
33+
active: route.path.startsWith('/docs/js')
34+
},
35+
{
36+
label: 'TypeScript',
37+
to: '/docs/ts/getting-started',
38+
icon: 'i-simple-icons-typescript',
39+
active: route.path.startsWith('/docs/ts')
40+
},
41+
{
42+
label: 'Next.js',
43+
to: '/docs/next.js/getting-started',
44+
icon: 'i-simple-icons-nextdotjs',
45+
active: route.path.startsWith('/docs/next.js')
46+
},
47+
{
48+
label: 'MongoDB',
49+
to: '/docs/mongodb/getting-started',
50+
icon: 'i-simple-icons-mongodb',
51+
active: route.path.startsWith('/docs/mongodb')
52+
},
53+
{
54+
label: 'Java',
55+
to: '/docs/java/getting-started',
56+
icon: 'i-lucide-coffee',
57+
active: route.path.startsWith('/docs/java')
1658
}
1759
])
1860
</script>

‎content/1.docs/1.nuxt/2.essentials/1.markdown-syntax.md‎

Lines changed: 1 addition & 230 deletions
Original file line numberDiff line numberDiff line change
@@ -1,230 +1 @@
1-
---
2-
title: Markdown Syntax
3-
description: Text, title, and styling in standard markdown.
4-
navigation:
5-
icon: i-lucide-heading-1
6-
---
7-
8-
## Titles
9-
10-
Use titles to introduce main sections. They structure your documentation and help users navigate content.
11-
12-
::code-preview
13-
---
14-
class: "[&>div]:*:my-0"
15-
---
16-
## Titles
17-
18-
#code
19-
```mdc
20-
## Titles
21-
```
22-
::
23-
24-
### Subtitles
25-
26-
Use subtitles to divide sections further. They create a more detailed content hierarchy for better readability.
27-
28-
::code-preview
29-
---
30-
class: "[&>div]:*:my-0"
31-
---
32-
### Subtitles
33-
34-
#code
35-
```mdc
36-
### Subtitles
37-
```
38-
::
39-
40-
::tip
41-
Each title and subtitle creates an anchor and shows up automatically in the table of contents.
42-
::
43-
44-
## Text Formatting
45-
46-
Nuxt UI supports most Markdown formatting options.
47-
48-
| Style | How to use | Result |
49-
| ------ | ------------ | ---------- |
50-
| Bold | `**bold**` | **Bold** |
51-
| Italic | `*italic*` | *Italic* |
52-
| Strike | `~~strike~~` | ~~Strike~~ |
53-
54-
Combine formatting for richer text styles and visual emphasis.
55-
56-
| Style | How to use | Result |
57-
| ------------- | ------------------- | ----------------- |
58-
| Bold Italic | `**_bold italic_**` | ***Bold Italic*** |
59-
| Bold Strike | `~~**bold**~~` | ~~**Bold**~~ |
60-
| Italic Strike | `~~*italic*~~` | ~~*Italic*~~ |
61-
62-
For exponents, indices, or mathematical notations, use HTML `<sup>` and `<sub>` tags.
63-
64-
| Style | How to use | Result |
65-
| ----------- | ------------------------ | ----------- |
66-
| Superscript | `<sup>superscript</sup>` | superscript |
67-
| Subscript | `<sub>subscript</sub>` | subscript |
68-
69-
## Links
70-
71-
Links connect different parts of your documentation and external resources, essential for user navigation and providing references.
72-
To create a link, wrap the link text in brackets `[]()`.
73-
74-
::code-preview
75-
---
76-
class: "[&>div]:*:my-0"
77-
---
78-
[Nuxt UI](https://ui.nuxt.com/getting-started/installation)
79-
80-
#code
81-
```mdc
82-
[Nuxt UI](https://ui.nuxt.com/getting-started/installation)
83-
```
84-
::
85-
86-
### Internal links
87-
88-
For linking within your documentation, use root-relative paths like `/getting-started/installation`.
89-
90-
::code-preview
91-
---
92-
class: "[&>div]:*:my-0"
93-
---
94-
[Installation](/getting-started/installation)
95-
96-
#code
97-
```mdc
98-
[Installation](/getting-started/installation)
99-
```
100-
::
101-
102-
## Lists
103-
104-
Organize related items in a structured, readable format. Markdown supports unordered, ordered, and nested lists for various content needs.
105-
106-
### Unordered
107-
108-
Use unordered lists for items without a specific sequence. Start each item with a `-` symbol.
109-
110-
::code-preview
111-
---
112-
class: "[&>div]:*:my-0"
113-
---
114-
- I'm a list item.
115-
- I'm another list item.
116-
- I'm the last list item.
117-
118-
#code
119-
```mdc
120-
- I'm a list item.
121-
- I'm another list item.
122-
- I'm the last list item.
123-
```
124-
::
125-
126-
### Ordered
127-
128-
Use ordered lists when item order matters, like steps in a process. Start each item with a number.
129-
130-
::code-preview
131-
---
132-
class: "[&>div]:*:my-0"
133-
---
134-
1. I'm a list item.
135-
2. I'm another list item.
136-
3. I'm the last list item.
137-
138-
#code
139-
```mdc
140-
1. I'm a list item.
141-
2. I'm another list item.
142-
3. I'm the last list item.
143-
```
144-
::
145-
146-
### Nested
147-
148-
Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces for nesting.
149-
150-
::code-preview
151-
---
152-
class: "[&>div]:*:my-0"
153-
---
154-
- I'm a list item.
155-
- I'm a nested list item.
156-
- I'm another nested list item.
157-
- I'm another list item.
158-
159-
#code
160-
```mdc
161-
- I'm a list item.
162-
- I'm a nested list item.
163-
- I'm another nested list item.
164-
- I'm another list item.
165-
```
166-
::
167-
168-
## Tables
169-
170-
Present structured data in rows and columns clearly. Tables are ideal for comparing data or listing properties.
171-
172-
::code-preview
173-
---
174-
class: "[&>div]:*:my-0 [&>div]:*:w-full"
175-
---
176-
| Prop | Default | Type |
177-
| ------- | --------- | -------- |
178-
| `name` | | `string` |
179-
| `size` | `md` | `string` |
180-
| `color` | `neutral` | `string` |
181-
182-
#code
183-
```mdc
184-
| Prop | Default | Type |
185-
|---------|-----------|--------------------------|
186-
| `name` | | `string`{lang="ts-type"} |
187-
| `size` | `md` | `string`{lang="ts-type"} |
188-
| `color` | `neutral` | `string`{lang="ts-type"} |
189-
```
190-
::
191-
192-
## Blockquotes
193-
194-
Highlight important quotations, citations, or emphasized text. Blockquotes visually distinguish quoted content.
195-
196-
### Singleline
197-
198-
Single-line blockquotes are best for short, impactful quotes or citations that fit within a single line. To create a single-line blockquote, add a `>` in front of a paragraph. Ideal for short and impactful quotes.
199-
200-
::code-preview
201-
---
202-
class: "[&>div]:*:my-0"
203-
---
204-
> Nuxt UI is a collection of Vue components, composables and utils designed to create beautiful and accessible user interfaces.
205-
206-
#code
207-
```mdc
208-
> Nuxt UI is a collection of Vue components, composables and utils designed to create beautiful and accessible user interfaces.
209-
```
210-
::
211-
212-
### Multiline
213-
214-
Multi-line blockquotes are suitable for longer quotes or when you need to include multiple paragraphs within a single quotation.
215-
216-
::code-preview
217-
---
218-
class: "[&>div]:*:my-0"
219-
---
220-
> Nuxt UI is a collection of Vue components, composables and utils designed to create beautiful and accessible user interfaces.
221-
>
222-
> Create beautiful, responsive, and accessible Vue applications with Nuxt UI.
223-
224-
#code
225-
```mdc
226-
> Nuxt UI is a collection of Vue components, composables and utils designed to create beautiful and accessible user interfaces.
227-
>
228-
> Create beautiful, responsive, and accessible Vue applications with Nuxt UI.
229-
```
230-
::
1+
c

0 commit comments

Comments
 (0)