@unterberg/nivel 0.1.4 → 0.1.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +162 -67
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,28 +1,83 @@
|
|
|
1
|
-
# nivel
|
|
1
|
+
# @unterberg/nivel
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
Opinionated docs engine for Vike + Vite + React.
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
`@unterberg/nivel` owns the docs runtime: Vike integration, MDX setup, docs-graph validation, route code generation, page shell rendering, and reusable docs UI primitives. The consumer stays thin and keeps its content, docs graph, visible Vike shell files, and theme files local.
|
|
6
6
|
|
|
7
|
-
|
|
8
|
-
- generated Vike routes from MDX content
|
|
9
|
-
- docs layout primitives such as navbar, sidebar, table of contents, pagination, and meta head wiring
|
|
10
|
-
- MDX setup with built-in docs components and code-block transforms
|
|
11
|
-
- optional Algolia search wiring
|
|
12
|
-
- engine-owned fonts and shared assets
|
|
7
|
+
## What It Provides
|
|
13
8
|
|
|
14
|
-
|
|
9
|
+
- typed docs config and docs graph helpers
|
|
10
|
+
- generated Vike docs pages from a single docs graph
|
|
11
|
+
- docs shell primitives such as navbar, sidebar, table of contents, pagination, search, and meta head wiring
|
|
12
|
+
- MDX support with built-in docs components and code-block tooling
|
|
13
|
+
- Tailwind v4 and daisyUI integration helpers
|
|
14
|
+
- a small CLI for consumer scaffolding and docs page generation
|
|
15
15
|
|
|
16
|
-
##
|
|
16
|
+
## Install
|
|
17
17
|
|
|
18
|
-
```
|
|
19
|
-
|
|
18
|
+
```bash
|
|
19
|
+
pnpm add @unterberg/nivel react react-dom vike vike-react
|
|
20
|
+
pnpm add -D vite typescript @types/react @types/react-dom
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
`vike` and `vite` are peer dependencies. The package exposes a local `nivel` binary after install.
|
|
24
|
+
|
|
25
|
+
## Quick Start
|
|
26
|
+
|
|
27
|
+
Scaffold a consumer:
|
|
28
|
+
|
|
29
|
+
```bash
|
|
30
|
+
pnpm exec nivel init
|
|
20
31
|
```
|
|
21
32
|
|
|
22
|
-
|
|
33
|
+
Generate docs pages:
|
|
34
|
+
|
|
35
|
+
```bash
|
|
36
|
+
pnpm exec nivel prepare
|
|
37
|
+
```
|
|
38
|
+
|
|
39
|
+
Typical consumer scripts:
|
|
40
|
+
|
|
41
|
+
```json
|
|
42
|
+
{
|
|
43
|
+
"scripts": {
|
|
44
|
+
"generate:docs": "nivel prepare",
|
|
45
|
+
"predev": "pnpm generate:docs",
|
|
46
|
+
"dev": "vike dev",
|
|
47
|
+
"prebuild": "pnpm generate:docs",
|
|
48
|
+
"build": "vike build",
|
|
49
|
+
"pretypecheck": "pnpm generate:docs",
|
|
50
|
+
"typecheck": "tsc --noEmit -p tsconfig.json"
|
|
51
|
+
}
|
|
52
|
+
}
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Consumer Shape
|
|
56
|
+
|
|
57
|
+
Keep these files local and visible in the consumer:
|
|
58
|
+
|
|
59
|
+
- `docs/docs.graph.ts`
|
|
60
|
+
- `pages/+docs.ts`
|
|
61
|
+
- `pages/+config.ts`
|
|
62
|
+
- `pages/+Head.tsx`
|
|
63
|
+
- `pages/+Layout.tsx`
|
|
64
|
+
- `pages/+onCreateGlobalContext.ts`
|
|
65
|
+
- `pages/+Wrapper.tsx`
|
|
66
|
+
- `global.d.ts`
|
|
67
|
+
- docs content, brand assets, and consumer CSS/theme files
|
|
68
|
+
|
|
69
|
+
Only `pages/(nivel-generated)` is engine-generated and should not be edited by hand.
|
|
70
|
+
|
|
71
|
+
`docs/docs.graph.ts` is the single source of truth for docs structure. Navbar and sidebar behavior come from that graph.
|
|
72
|
+
|
|
73
|
+
## Minimal Setup
|
|
74
|
+
|
|
75
|
+
`docs/docs.graph.ts`
|
|
23
76
|
|
|
24
77
|
```ts
|
|
25
|
-
|
|
78
|
+
import { defineDocsGraph } from '@unterberg/nivel/config'
|
|
79
|
+
|
|
80
|
+
export const docsGraph = defineDocsGraph({
|
|
26
81
|
items: [
|
|
27
82
|
{
|
|
28
83
|
kind: 'section',
|
|
@@ -31,56 +86,37 @@ const docsGraph = defineDocsGraph({
|
|
|
31
86
|
items: [
|
|
32
87
|
{
|
|
33
88
|
kind: 'page',
|
|
34
|
-
id: '
|
|
35
|
-
title: '
|
|
36
|
-
slug: '
|
|
37
|
-
source: 'content/
|
|
89
|
+
id: 'gettingStarted',
|
|
90
|
+
title: 'Getting Started',
|
|
91
|
+
slug: 'getting-started',
|
|
92
|
+
source: 'content/getting-started/content.mdx',
|
|
93
|
+
description: 'Getting started with @unterberg/nivel.',
|
|
38
94
|
},
|
|
39
95
|
],
|
|
40
96
|
},
|
|
41
97
|
],
|
|
42
98
|
})
|
|
43
|
-
|
|
44
|
-
export default defineDocsConfig({
|
|
45
|
-
siteTitle: 'My Docs',
|
|
46
|
-
siteDescription: 'Documentation site powered by @unterberg/nivel.',
|
|
47
|
-
basePath: '/docs',
|
|
48
|
-
// Optional project-relative root for page.source resolution.
|
|
49
|
-
// contentDir: 'docs',
|
|
50
|
-
graph: docsGraph,
|
|
51
|
-
})
|
|
52
99
|
```
|
|
53
100
|
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
A consumer should keep these files explicit and local:
|
|
57
|
-
|
|
58
|
-
- hand-authored: `pages/+docs.ts`, `docs/docs.graph.ts`, docs content, brand assets, and consumer CSS/Tailwind/theme files
|
|
59
|
-
- scaffolded once but still editable: `pages/+config.ts`, `pages/+Head.tsx`, `pages/+Layout.tsx`, `pages/+onCreateGlobalContext.ts`, `pages/+Wrapper.tsx`, and `global.d.ts`
|
|
60
|
-
|
|
61
|
-
Only `(nivel-generated)` stays engine-generated.
|
|
62
|
-
|
|
63
|
-
## Standard Vike Config
|
|
64
|
-
|
|
65
|
-
Keep `pages/+config.ts` looking like normal Vike config and spread in the engine-owned config from `@unterberg/nivel/vike`:
|
|
101
|
+
`pages/+docs.ts`
|
|
66
102
|
|
|
67
103
|
```ts
|
|
68
|
-
// pages/+docs.ts
|
|
69
104
|
import { defineDocsConfig } from '@unterberg/nivel/config'
|
|
70
105
|
import { docsGraph } from '../docs/docs.graph'
|
|
71
106
|
|
|
72
|
-
|
|
107
|
+
const docsConfig = defineDocsConfig({
|
|
108
|
+
graph: docsGraph,
|
|
73
109
|
siteTitle: 'My Docs',
|
|
74
110
|
siteDescription: 'Documentation site powered by @unterberg/nivel.',
|
|
75
111
|
basePath: '/docs',
|
|
76
|
-
graph: docsGraph,
|
|
77
112
|
})
|
|
113
|
+
|
|
114
|
+
export default docsConfig
|
|
78
115
|
```
|
|
79
116
|
|
|
80
|
-
`
|
|
117
|
+
`pages/+config.ts`
|
|
81
118
|
|
|
82
119
|
```ts
|
|
83
|
-
// pages/+config.ts
|
|
84
120
|
import nivel from '@unterberg/nivel/vike'
|
|
85
121
|
import type { Config } from 'vike/types'
|
|
86
122
|
import vikeReact from 'vike-react/config'
|
|
@@ -101,42 +137,101 @@ const config: Config = {
|
|
|
101
137
|
description: docsConfig.siteDescription ?? `${docsConfig.siteTitle} documentation`,
|
|
102
138
|
htmlAttributes: { 'data-theme': dataTheme },
|
|
103
139
|
passToClient: ['docs'],
|
|
104
|
-
|
|
105
|
-
// User-facing Vike levers stay visible here.
|
|
106
140
|
prerender: true,
|
|
107
|
-
// ssr: true,
|
|
108
|
-
// prefetchStaticAssets: 'viewport',
|
|
109
141
|
}
|
|
110
142
|
```
|
|
111
143
|
|
|
112
|
-
|
|
144
|
+
`vite.config.ts`
|
|
113
145
|
|
|
114
|
-
|
|
146
|
+
```ts
|
|
147
|
+
import { nivelTailwindVite } from '@unterberg/nivel/tailwind'
|
|
148
|
+
import vike from 'vike/plugin'
|
|
115
149
|
|
|
116
|
-
|
|
150
|
+
process.env.VIKE_CRAWL ??= JSON.stringify({ git: false })
|
|
117
151
|
|
|
118
|
-
|
|
152
|
+
export default {
|
|
153
|
+
plugins: [nivelTailwindVite(), vike()],
|
|
154
|
+
}
|
|
155
|
+
```
|
|
119
156
|
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
157
|
+
`pages/+Head.tsx`
|
|
158
|
+
|
|
159
|
+
```tsx
|
|
160
|
+
import { MetaHead } from '@unterberg/nivel/client'
|
|
161
|
+
|
|
162
|
+
export const Head = () => {
|
|
163
|
+
return <MetaHead />
|
|
164
|
+
}
|
|
123
165
|
```
|
|
124
166
|
|
|
125
|
-
`
|
|
167
|
+
`pages/+Layout.tsx`
|
|
126
168
|
|
|
127
|
-
```
|
|
128
|
-
|
|
169
|
+
```tsx
|
|
170
|
+
import { AppLayout } from '@unterberg/nivel/client'
|
|
171
|
+
import type { ReactNode } from 'react'
|
|
172
|
+
|
|
173
|
+
const Layout = ({ children }: { children: ReactNode }) => {
|
|
174
|
+
return <AppLayout>{children}</AppLayout>
|
|
175
|
+
}
|
|
176
|
+
|
|
177
|
+
export default Layout
|
|
129
178
|
```
|
|
130
179
|
|
|
131
|
-
|
|
180
|
+
`pages/+Wrapper.tsx`
|
|
181
|
+
|
|
182
|
+
```tsx
|
|
183
|
+
import type { ReactNode } from 'react'
|
|
184
|
+
import '../styles/global.css'
|
|
185
|
+
|
|
186
|
+
const Wrapper = ({ children }: { children: ReactNode }) => {
|
|
187
|
+
return <>{children}</>
|
|
188
|
+
}
|
|
189
|
+
|
|
190
|
+
export default Wrapper
|
|
191
|
+
```
|
|
132
192
|
|
|
133
|
-
|
|
193
|
+
`styles/global.css`
|
|
194
|
+
|
|
195
|
+
```css
|
|
196
|
+
@import '@unterberg/nivel/tailwind.css';
|
|
197
|
+
@import './theme.css';
|
|
198
|
+
|
|
199
|
+
@source '../pages';
|
|
200
|
+
@source '../docs';
|
|
201
|
+
```
|
|
202
|
+
|
|
203
|
+
## CLI
|
|
134
204
|
|
|
135
205
|
```bash
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
pnpm typecheck
|
|
140
|
-
pnpm format
|
|
141
|
-
pnpm knip
|
|
206
|
+
nivel init [--root <path>] [--force]
|
|
207
|
+
nivel prepare [--root <path>]
|
|
208
|
+
nivel --help
|
|
142
209
|
```
|
|
210
|
+
|
|
211
|
+
- `nivel init` scaffolds the visible consumer files and patches the standard docs scripts in `package.json`
|
|
212
|
+
- `nivel init --force` overwrites scaffold-managed files if they already exist
|
|
213
|
+
- `nivel prepare` reads `pages/+docs.ts` and generates `pages/(nivel-generated)`
|
|
214
|
+
|
|
215
|
+
`nivel init` does not create or overwrite your brand assets or consumer-specific styling decisions beyond the initial scaffold. Theme and palette files stay consumer-owned.
|
|
216
|
+
|
|
217
|
+
## Public Entry Points
|
|
218
|
+
|
|
219
|
+
| Entry | Purpose |
|
|
220
|
+
| --- | --- |
|
|
221
|
+
| `@unterberg/nivel` | main types, docs helpers, MDX components, shared utilities |
|
|
222
|
+
| `@unterberg/nivel/config` | lean config-time entry for `defineDocsConfig()` and `defineDocsGraph()` |
|
|
223
|
+
| `@unterberg/nivel/vike` | engine-owned Vike config for the consumer's `pages/+config.ts` |
|
|
224
|
+
| `@unterberg/nivel/client` | `AppLayout`, `MetaHead`, `UserSettingsSync`, `DocsPage`, and client stores |
|
|
225
|
+
| `@unterberg/nivel/mdx` | MDX provider entry |
|
|
226
|
+
| `@unterberg/nivel/mdx/code-blocks` | code-block components and transforms |
|
|
227
|
+
| `@unterberg/nivel/tailwind` | `nivelTailwindVite()` helper |
|
|
228
|
+
| `@unterberg/nivel/daisyui-theme` | daisyUI theme plugin surface |
|
|
229
|
+
| `@unterberg/nivel/runtime/node` | lower-level runtime helpers for loading config, resolving docs, scaffolding, and codegen |
|
|
230
|
+
| `@unterberg/nivel/runtime/client` | lower-level client runtime entry |
|
|
231
|
+
|
|
232
|
+
## Notes
|
|
233
|
+
|
|
234
|
+
- `basePath` controls the public docs route prefix.
|
|
235
|
+
- `contentDir` is optional and defaults to `docs`.
|
|
236
|
+
- If you configure Algolia, `apiKey` must be a browser-safe search key.
|
|
237
|
+
- The repo validates this package through both the in-repo consumer at `packages/consumer-dev` and the standalone fixture at `tests/npm-consumer`.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@unterberg/nivel",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.5",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"repository": {
|
|
@@ -74,7 +74,7 @@
|
|
|
74
74
|
"scripts": {
|
|
75
75
|
"build": "tsup",
|
|
76
76
|
"dev": "tsup --watch",
|
|
77
|
-
"test": "
|
|
77
|
+
"test": "node --import tsx --test tests/*.test.mjs tests/*.test.ts",
|
|
78
78
|
"typecheck": "tsc --noEmit -p tsconfig.json"
|
|
79
79
|
},
|
|
80
80
|
"dependencies": {
|