You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
- Which pages are marked as private (employee-only)
33
34
34
35
Example structure:
36
+
35
37
```yaml
36
38
navigation:
37
-
- title: "Brand"
38
-
slug: "brand"
39
-
description: "Visual patterns and guidelines"
40
-
items:
41
-
- title: "Logo"
42
-
slug: "logo"
43
-
image: "/images/heros/logo.svg"
44
-
45
-
- title: "Border radius"
46
-
slug: "border-radius"
47
-
image: "/images/heros/border-radius.svg"
48
-
49
-
- title: "Brand strategy"
50
-
slug: "strategy"
51
-
private: true# Employee-only content
39
+
- title: "Brand"
40
+
slug: "brand"
41
+
description: "Visual patterns and guidelines"
42
+
items:
43
+
- title: "Logo"
44
+
slug: "logo"
45
+
image: "/images/heros/logo.svg"
46
+
47
+
- title: "Border radius"
48
+
slug: "border-radius"
49
+
image: "/images/heros/border-radius.svg"
50
+
51
+
- title: "Brand strategy"
52
+
slug: "strategy"
53
+
private: true # Employee-only content
52
54
```
53
55
54
56
Each navigation item should point to content in `src/docs/public` or `src/docs/private`. Pages are rendered by the SvelteKit/mdsvex docs app; do not add `legacy:` entries for new or migrated pages.
@@ -58,6 +60,7 @@ Each navigation item should point to content in `src/docs/public` or `src/docs/p
58
60
Documentation is built using [mdsvex](https://mdsvex.pngwn.io/), which allows you to use Svelte components within Markdown files. The build process automatically adds several features:
59
61
60
62
**Automatically Added:**
63
+
61
64
- **Table of Contents** - Extracted from headings and exposed via `toc` in frontmatter
62
65
- **Heading IDs** - All headings get slug IDs for direct linking (e.g., `## Color hierarchy` → `id="color-hierarchy"`)
63
66
- **Section wrappers** - Content is automatically wrapped in `<section>` elements
@@ -68,6 +71,7 @@ Documentation is built using [mdsvex](https://mdsvex.pngwn.io/), which allows yo
68
71
69
72
**Svelte Components in Markdown:**
70
73
You can import and use Svelte components directly in your markdown:
74
+
71
75
```markdown
72
76
<script>
73
77
import ColorSwatch from './ColorSwatch.svelte'
@@ -89,15 +93,18 @@ Documentation content lives in two directories:
89
93
Public-facing documentation accessible to everyone. The directory structure maps directly to URL routes:
2. **Directory with index:** `route/index.md` for pages with supporting files
98
104
99
105
**Supporting Files:**
100
106
You can place images, Svelte components, YAML data, and other assets alongside your markdown:
107
+
101
108
```
102
109
src/docs/public/brand/color/
103
110
├── index.md # Main content
@@ -108,6 +115,7 @@ src/docs/public/brand/color/
108
115
109
116
**Image Handling:**
110
117
Images and non-markdown files are automatically copied from `src/docs/` to `static/docs/` during build by the Vite plugin in `vite.config.ts`. Reference them in markdown using relative paths:
118
+
111
119
```markdown
112
120
113
121
```
@@ -129,24 +137,26 @@ The private docs follow the same structure and conventions as public docs. Mark
129
137
### Adding a New Page
130
138
131
139
1. **Create the content file** in the appropriate location:
132
-
```sh
133
-
# Simple page
134
-
touch src/docs/public/brand/new-page.md
135
140
136
-
# Page with supporting files
137
-
mkdir src/docs/public/brand/new-page
138
-
touch src/docs/public/brand/new-page/index.md
139
-
```
141
+
```sh
142
+
# Simple page
143
+
touch src/docs/public/brand/new-page.md
144
+
145
+
# Page with supporting files
146
+
mkdir src/docs/public/brand/new-page
147
+
touch src/docs/public/brand/new-page/index.md
148
+
```
140
149
141
150
2. **Add the page to navigation** in `src/structure.yaml`:
142
-
```yaml
143
-
- title: "Brand"
144
-
slug: "brand"
145
-
items:
146
-
- title: "New Page"
147
-
slug: "new-page"
148
-
image: "/images/heros/new-page.svg" # Optional, relative to 'static' director
149
-
```
151
+
152
+
```yaml
153
+
- title: "Brand"
154
+
slug: "brand"
155
+
items:
156
+
- title: "New Page"
157
+
slug: "new-page"
158
+
image: "/images/heros/new-page.svg" # Optional, relative to 'static' director
159
+
```
150
160
151
161
3. **Add any images or assets** to the same directory as your markdown file
0 commit comments