Better link handling

packages/docgen/support/generate-pkg-md.mjs

@@ -5,11 +5,7 @@ const generateComponentDoc = (docs) => `
 
 ${docs.description || ''}
 
-- **Type**
+- **Type**: \`Component\`
-
-  \`\`\`
-    Component
-  \`\`\`
 
 ### Props
 
@@ -19,35 +15,30 @@ ${(docs.props || []).map(prop => `
 ${prop.description || ''}
 
 ${prop.type ? `
-- **Type**
+- **Type** \`${prop.type.name}\`
-  \`\`\`
-    ${prop.type.name}
-  \`\`\`
 ` : ''}
 ${prop.defaultValue ? `
-- **Default value**
+- **Default value** \`${prop.defaultValue.value}\`
-  \`\`\`
-    ${prop.defaultValue.value}
-  \`\`\`
 ` : ''}
 
 `).join('\n')}
 `;
 
+const generateMembersDocs = (children) => children ? `
+- **Members**
+${(children)
+  .map((child) => `   - **${child.name}**: \`${child.type?.name}\``)
+  .join('\n')}
+` : '';
+
 const generateTSDocs = (docs) => `
 ## ${docs.name}${docs.typeParameters ? getTypeParamString(docs.typeParameters) : ''}
 
 ${docs.comment?.shortText || ''}
 
-- **Type**
+- **Type** \`${docs.kindString}\`
-  \`\`\`
-    ${docs.kindString}
-  \`\`\`
 
-- **Members**
+${generateMembersDocs(docs.children)}
-${(docs.children || [])
-  .map((child) => `   - **${child.name}**: \`${child.type?.name}\``)
-  .join('\n')}
 `;
 
 const generateChildren = (

packages/docs/lib/.vitepress/config.ts

@@ -18,7 +18,7 @@ export default defineConfig({
       {
         text: 'Guide',
         activeMatch: '^/guide/',
-        link: '/guide/introduction'
+        link: '/guide/why'
       },
       {
         text: 'API',
@@ -35,22 +35,18 @@ export default defineConfig({
           text: 'Getting Started',
           children: [
             { text: 'Why Schlechtenburg?', link: '/guide/why' },
-            { text: 'Examples', link: '/guide/examples' },
             { text: 'Installation', link: '/guide/installation' },
+            { text: 'Examples', link: '/guide/examples' },
           ],
         }
       ],
       '/api/': [
         {
           text: 'API',
-          children: [
+          children: DOCS_PACKAGES.map((name) => ({
-            { text: '@schlechtenburg/standalone', link: '/api/@schlechtenburg/standalone' },
+            text: `@schlechtenburg/${name}`,
-            { text: '@schlechtenburg/core', link: '/api/@schlechtenburg/core' },
+            link: `/api/@schlechtenburg/${name}`,
-            { text: '@schlechtenburg/layout', link: '/api/@schlechtenburg/layout' },
+          })),
-            { text: '@schlechtenburg/heading', link: '/api/@schlechtenburg/heading' },
-            { text: '@schlechtenburg/paragraph', link: '/api/@schlechtenburg/paragraph' },
-            { text: '@schlechtenburg/image', link: '/api/@schlechtenburg/image' },
-          ],
         }
       ],
       '/': false,

packages/docs/lib/api/@schlechtenburg/core.md

@@ -4,38 +4,34 @@
 
 The mode the Schlechtenburg editor is currently in
 
-- **Type**
+- **Type** `Enumeration`
-  ```
+
-    Enumeration
-  ```
 
 - **Members**
    - **Edit**: `undefined`
    - **View**: `undefined`
 
+
 ## IBlockData<T>
 
 Schlechtenburg inputs and outputs a plain JS Object that can be JSON stringified. This is the
 interface type for that data structure. `T` will be the data type of the specific block being
 
-- **Type**
+- **Type** `Interface`
-  ```
+
-    Interface
-  ```
 
 - **Members**
    - **data**: `T`
    - **id**: `string`
    - **name**: `string`
 
+
 ## IBlockDefinition<T>
 
 Any Block that you create
 
-- **Type**
+- **Type** `Interface`
-  ```
+
-    Interface
-  ```
 
 - **Members**
    - **edit**: `Component`
@@ -44,26 +40,21 @@ Any Block that you create
    - **name**: `string`
    - **view**: `Component`
 
+
 ## IBlockLibrary
 
 Schlechtenburg maintains a library of blocks that are available
 
-- **Type**
+- **Type** `Interface`
-  ```
-    Interface
-  ```
 
-- **Members**
 
 
 ## IBlockProps<T>
 
 Any Block that you create
 
-- **Type**
+- **Type** `Interface`
-  ```
+
-    Interface
-  ```
 
 - **Members**
    - **blockId**: `string`
@@ -75,14 +66,13 @@ Any Block that you create
    - **onRemoveSelf**: `OnRemoveSelfCb`
    - **onUpdate**: `OnUpdateSelfCb`
 
+
 ## ISbMainProps
 
 
 
-- **Type**
+- **Type** `Interface`
-  ```
+
-    Interface
-  ```
 
 - **Members**
    - **availableBlocks**: `undefined`
@@ -90,15 +80,14 @@ Any Block that you create
    - **mode**: `SbMode`
    - **onUpdate**: `OnUpdateBlockCb`
 
+
 ## ITreeNode
 
 Schlechtenburg keeps track of the rendered block tree.
 This is useful for e.g. the tree select component in the editor header.
 
-- **Type**
+- **Type** `Interface`
-  ```
+
-    Interface
-  ```
 
 - **Members**
    - **children**: `undefined`
@@ -106,88 +95,61 @@ This is useful for e.g. the tree select component in the editor header.
    - **id**: `string`
    - **name**: `string`
 
+
 ## OnActivateNextCb
 
 
 
-- **Type**
+- **Type** `Type alias`
-  ```
-    Type alias
-  ```
 
-- **Members**
 
 
 ## OnActivatePreviousCb
 
 
 
-- **Type**
+- **Type** `Type alias`
-  ```
-    Type alias
-  ```
 
-- **Members**
 
 
 ## OnAppendBlockCb
 
 
 
-- **Type**
+- **Type** `Type alias`
-  ```
-    Type alias
-  ```
 
-- **Members**
 
 
 ## OnPrependBlockCb
 
 
 
-- **Type**
+- **Type** `Type alias`
-  ```
-    Type alias
-  ```
 
-- **Members**
 
 
 ## OnRemoveSelfCb
 
 
 
-- **Type**
+- **Type** `Type alias`
-  ```
-    Type alias
-  ```
 
-- **Members**
 
 
 ## OnUpdateBlockCb
 
 
 
-- **Type**
+- **Type** `Type alias`
-  ```
-    Type alias
-  ```
 
-- **Members**
 
 
 ## OnUpdateSelfCb<T>
 
 
 
-- **Type**
+- **Type** `Type alias`
-  ```
-    Type alias
-  ```
 
-- **Members**
 
 
 ## SbBlock
@@ -195,11 +157,7 @@ This is useful for e.g. the tree select component in the editor header.
 Displays a Schlechtenburg block either the mode of the schlechtenburg instance.
 You can use this to display child blocks inside your own blocks.
 
-- **Type**
+- **Type**: `Component`
-
-  ```
-    Component
-  ```
 
 ### Props
 
@@ -209,10 +167,7 @@ You can use this to display child blocks inside your own blocks.
 The state for the block.
 
 
-- **Type**
+- **Type** `IBlockData<any>`
-  ```
-    IBlockData<any>
-  ```
 
 
 
@@ -223,16 +178,10 @@ The state for the block.
 Called when the block should be updated.
 
 
-- **Type**
+- **Type** `OnUpdateBlockCb`
-  ```
-    OnUpdateBlockCb
-  ```
 
 
-- **Default value**
+- **Default value** `() => {}`
-  ```
-    () => {}
-  ```
 
 
 
@@ -242,16 +191,10 @@ Called when the block should be updated.
 Called when a sibling block should be inserted before the block
 
 
-- **Type**
+- **Type** `OnPrependBlockCb`
-  ```
-    OnPrependBlockCb
-  ```
 
 
-- **Default value**
+- **Default value** `() => {}`
-  ```
-    () => {}
-  ```
 
 
 
@@ -261,16 +204,10 @@ Called when a sibling block should be inserted before the block
 Called when a sibling block should be inserted after the block
 
 
-- **Type**
+- **Type** `OnAppendBlockCb`
-  ```
-    OnAppendBlockCb
-  ```
 
 
-- **Default value**
+- **Default value** `() => {}`
-  ```
-    () => {}
-  ```
 
 
 
@@ -280,16 +217,10 @@ Called when a sibling block should be inserted after the block
 Called when the block should be removed
 
 
-- **Type**
+- **Type** `OnRemoveSelfCb`
-  ```
-    OnRemoveSelfCb
-  ```
 
 
-- **Default value**
+- **Default value** `() => {}`
-  ```
-    () => {}
-  ```
 
 
 
@@ -299,16 +230,10 @@ Called when the block should be removed
 Called when the previous sibling block should be activated
 
 
-- **Type**
+- **Type** `OnActivatePreviousCb`
-  ```
-    OnActivatePreviousCb
-  ```
 
 
-- **Default value**
+- **Default value** `() => {}`
-  ```
-    () => {}
-  ```
 
 
 
@@ -318,16 +243,10 @@ Called when the previous sibling block should be activated
 Called when the next sibling block should be activated
 
 
-- **Type**
+- **Type** `OnActivateNextCb`
-  ```
-    OnActivateNextCb
-  ```
 
 
-- **Default value**
+- **Default value** `() => {}`
-  ```
-    () => {}
-  ```
 
 
 
@@ -336,11 +255,7 @@ Called when the next sibling block should be activated
 
 
 
-- **Type**
+- **Type**: `Component`
-
-  ```
-    Component
-  ```
 
 ### Props
 
@@ -350,16 +265,10 @@ Called when the next sibling block should be activated
 
 
 
-- **Type**
+- **Type** `string`
-  ```
-    string
-  ```
 
 
-- **Default value**
+- **Default value** `null`
-  ```
-    null
-  ```
 
 
 
@@ -369,16 +278,10 @@ Called when the next sibling block should be activated
 
 
 
-- **Type**
+- **Type** `func`
-  ```
-    func
-  ```
 
 
-- **Default value**
+- **Default value** `() => {}`
-  ```
-    () => {}
-  ```
 
 
 
@@ -388,16 +291,10 @@ Called when the next sibling block should be activated
 
 
 
-- **Type**
+- **Type** `func`
-  ```
-    func
-  ```
 
 
-- **Default value**
+- **Default value** `() => {}`
-  ```
-    () => {}
-  ```
 
 
 
@@ -407,16 +304,10 @@ Called when the next sibling block should be activated
 
 
 
-- **Type**
+- **Type** `func`
-  ```
-    func
-  ```
 
 
-- **Default value**
+- **Default value** `() => {}`
-  ```
-    () => {}
-  ```
 
 
 
@@ -425,11 +316,7 @@ Called when the next sibling block should be activated
 
 
 
-- **Type**
+- **Type**: `Component`
-
-  ```
-    Component
-  ```
 
 ### Props
 
@@ -439,16 +326,10 @@ Called when the next sibling block should be activated
 
 
 
-- **Type**
+- **Type** `func`
-  ```
-    func
-  ```
 
 
-- **Default value**
+- **Default value** `() => {}`
-  ```
-    () => {}
-  ```
 
 
 
@@ -458,11 +339,7 @@ Called when the next sibling block should be activated
 A placeholder for a block.
 Displays a placeholder for a block, allowing the user to select a block to insert.
 
-- **Type**
+- **Type**: `Component`
-
-  ```
-    Component
-  ```
 
 ### Props
 
@@ -472,16 +349,10 @@ Displays a placeholder for a block, allowing the user to select a block to inser
 Called when the user picked a block that should be inserted here.
 
 
-- **Type**
+- **Type** `func`
-  ```
-    func
-  ```
 
 
-- **Default value**
+- **Default value** `() => {}`
-  ```
-    () => {}
-  ```
 
 
 
@@ -490,11 +361,7 @@ Called when the user picked a block that should be inserted here.
 
 A button in the schlechtenburg theme
 
-- **Type**
+- **Type**: `Component`
-
-  ```
-    Component
-  ```
 
 ### Props
 
@@ -504,23 +371,15 @@ A button in the schlechtenburg theme
 
 
 
-- **Type**
+- **Type** `Variable`
-  ```
-    Variable
-  ```
 
-- **Members**
 
 
 ## SbSelect
 
 A select input in the schlechtenburg theme
 
-- **Type**
+- **Type**: `Component`
-
-  ```
-    Component
-  ```
 
 ### Props
 
@@ -530,11 +389,7 @@ A select input in the schlechtenburg theme
 
 Toolbar in the schlechtenburg theme
 
-- **Type**
+- **Type**: `Component`
-
-  ```
-    Component
-  ```
 
 ### Props
 
@@ -544,141 +399,92 @@ Toolbar in the schlechtenburg theme
 
 
 
-- **Type**
+- **Type** `Variable`
-  ```
-    Variable
-  ```
 
-- **Members**
 
 
 ## SymBlockDimensions
 
 
 
-- **Type**
+- **Type** `Variable`
-  ```
-    Variable
-  ```
 
-- **Members**
 
 
 ## SymBlockLibrary
 
 
 
-- **Type**
+- **Type** `Variable`
-  ```
-    Variable
-  ```
 
-- **Members**
 
 
 ## SymEditorDimensions
 
 
 
-- **Type**
+- **Type** `Variable`
-  ```
-    Variable
-  ```
 
-- **Members**
 
 
 ## SymMode
 
 
 
-- **Type**
+- **Type** `Variable`
-  ```
-    Variable
-  ```
 
-- **Members**
 
 
 ## blockProps
 
 
 
-- **Type**
+- **Type** `Variable`
-  ```
-    Variable
-  ```
 
-- **Members**
 
 
 ## model
 
 
 
-- **Type**
+- **Type** `Variable`
-  ```
-    Variable
-  ```
 
-- **Members**
 
 
 ## generateBlockId
 
 
 
-- **Type**
+- **Type** `Function`
-  ```
-    Function
-  ```
 
-- **Members**
 
 
 ## useActivation
 
 
 
-- **Type**
+- **Type** `Function`
-  ```
-    Function
-  ```
 
-- **Members**
 
 
 ## useBlockSizing
 
 
 
-- **Type**
+- **Type** `Function`
-  ```
-    Function
-  ```
 
-- **Members**
 
 
 ## useDynamicBlocks
 
 
 
-- **Type**
+- **Type** `Function`
-  ```
-    Function
-  ```
 
-- **Members**
 
 
 ## useResizeObserver
 
 
 
-- **Type**
+- **Type** `Function`
-  ```
-    Function
-  ```
-
-- **Members**

packages/docs/lib/api/@schlechtenburg/heading.md

@@ -4,47 +4,33 @@
 
 
 
-- **Type**
+- **Type** `Interface`
-  ```
+
-    Interface
-  ```
 
 - **Members**
    - **align**: `string`
    - **level**: `number`
    - **value**: `string`
 
+
 ## default
 
 
 
-- **Type**
+- **Type** `Property`
-  ```
-    Property
-  ```
 
-- **Members**
 
 
 ## name
 
 
 
-- **Type**
+- **Type** `Variable`
-  ```
-    Variable
-  ```
 
-- **Members**
 
 
 ## getDefaultData
 
 
 
-- **Type**
+- **Type** `Function`
-  ```
-    Function
-  ```
-
-- **Members**

packages/docs/lib/api/@schlechtenburg/image.md

@@ -4,47 +4,33 @@
 
 
 
-- **Type**
+- **Type** `Interface`
-  ```
+
-    Interface
-  ```
 
 - **Members**
    - **alt**: `string`
    - **description**: `IBlockData`
    - **src**: `string`
 
+
 ## default
 
 
 
-- **Type**
+- **Type** `Property`
-  ```
-    Property
-  ```
 
-- **Members**
 
 
 ## name
 
 
 
-- **Type**
+- **Type** `Variable`
-  ```
-    Variable
-  ```
 
-- **Members**
 
 
 ## getDefaultData
 
 
 
-- **Type**
+- **Type** `Function`
-  ```
-    Function
-  ```
-
-- **Members**

packages/docs/lib/api/@schlechtenburg/layout.md

@@ -4,46 +4,32 @@
 
 
 
-- **Type**
+- **Type** `Interface`
-  ```
+
-    Interface
-  ```
 
 - **Members**
    - **children**: `undefined`
    - **orientation**: `string`
 
+
 ## default
 
 
 
-- **Type**
+- **Type** `Property`
-  ```
-    Property
-  ```
 
-- **Members**
 
 
 ## name
 
 
 
-- **Type**
+- **Type** `Variable`
-  ```
-    Variable
-  ```
 
-- **Members**
 
 
 ## getDefaultData
 
 
 
-- **Type**
+- **Type** `Function`
-  ```
-    Function
-  ```
-
-- **Members**

packages/docs/lib/api/@schlechtenburg/paragraph.md

@@ -4,46 +4,32 @@
 
 
 
-- **Type**
+- **Type** `Interface`
-  ```
+
-    Interface
-  ```
 
 - **Members**
    - **align**: `string`
    - **value**: `string`
 
+
 ## default
 
 
 
-- **Type**
+- **Type** `Property`
-  ```
-    Property
-  ```
 
-- **Members**
 
 
 ## name
 
 
 
-- **Type**
+- **Type** `Variable`
-  ```
-    Variable
-  ```
 
-- **Members**
 
 
 ## getDefaultData
 
 
 
-- **Type**
+- **Type** `Function`
-  ```
-    Function
-  ```
-
-- **Members**

packages/docs/lib/api/@schlechtenburg/standalone.md

@@ -4,9 +4,4 @@
 
 
 
-- **Type**
+- **Type** `Function`
-  ```
-    Function
-  ```
-
-- **Members**

packages/docs/lib/guide/introduction.md

@@ -1,3 +0,0 @@
-# Introduction
-
-

packages/docs/lib/index.md

@@ -1,5 +1,6 @@
 <script setup>
-import ExampleEditor from './ExampleEditor'
+import { withBase } from 'vitepress';
+import ExampleEditor from './ExampleEditor';
 </script>
 
 # Yet another WYSIWYG editor
@@ -11,9 +12,9 @@ It inputs and outputs a tree of JSON-serializable data.
 This is still in the Proof-of-concept phase.
 
 <div class="cta-row">
-  <a href="/schlechtenburg/guide/why" class="button button_cta">Why Schlechtenburg?</a>
+  <a :href="withBase('/guide/why')" class="button button_cta">Why Schlechtenburg?</a>
-  <a href="/schlechtenburg/guide/introduction" class="button">Get Started</a>
+  <a :href="withBase('guide/introduction')" class="button">Get Started</a>
-  <a href="/schlechtenburg/api" class="button">See the API docs</a>
+  <a :href="withBase('api')" class="button">See the API docs</a>
 </div>
 
 <ExampleEditor></ExampleEditor>