Initial api docs in vitepress

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

@@ -15,7 +15,12 @@ export default defineConfig({
         text: 'API',
         activeMatch: `^/api/`,
         items: [
+          { text: '@schlechtenburg/standalone', link: '/api/@schlechtenburg/standalone' },
           { text: '@schlechtenburg/core', link: '/api/@schlechtenburg/core' },
+          { 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' },
         ],
       },
     ],
@@ -34,7 +39,12 @@ export default defineConfig({
         {
           text: 'API',
           children: [
-            { text: 'Core', link: '/api/core' },
+            { text: '@schlechtenburg/standalone', link: '/api/@schlechtenburg/standalone' },
+            { text: '@schlechtenburg/core', link: '/api/@schlechtenburg/core' },
+            { 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' },
           ],
         }
       ],

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

@@ -0,0 +1,6 @@
+<script setup>
+import Package from '../Package'
+</script>
+
+<Package name="@schlechtenburg/core" />
+

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

@@ -0,0 +1,6 @@
+<script setup>
+import Package from '../Package'
+</script>
+
+<Package name="@schlechtenburg/heading" />
+

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

@@ -0,0 +1,6 @@
+<script setup>
+import Package from '../Package'
+</script>
+
+<Package name="@schlechtenburg/image" />
+

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

@@ -0,0 +1,6 @@
+<script setup>
+import Package from '../Package'
+</script>
+
+<Package name="@schlechtenburg/layout" />
+

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

@@ -0,0 +1,6 @@
+<script setup>
+import Package from '../Package'
+</script>
+
+<Package name="@schlechtenburg/paragraph" />
+

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

@@ -0,0 +1,6 @@
+<script setup>
+import Package from '../Package'
+</script>
+
+<Package name="@schlechtenburg/standalone" />
+

packages/docs/lib/api/Package.tsx

@@ -1,21 +1,28 @@
 import { defineComponent } from 'vue';
-import { useRoute } from 'vue-router';
+
 import { ComponentDoc } from 'vue-docgen-api';
 import { DeclarationReflection } from 'typedoc';
 
 import { getByName } from '../docs';
-import ComponentDocs from '../ComponentDocs';
+import { getShortPackageName } from './package';
-import TsDocs from '../TsDocs';
+import ComponentDocs from './ComponentDocs';
+import TSDocs from './TSDocs';
 
 import './Package.scss';
 
 export default defineComponent({
   name: 'Package',
 
-  setup() {
+  props: {
-    const route = useRoute();
+    name: {
-    const packageName = route.params.package;
+      type: String,
-    const docs = getByName(Array.isArray(packageName) ? packageName[0] : packageName);
+      required: true,
+    },
+  },
+
+  setup(props) {
+    const packageName = props.name;
+    const docs = getByName(getShortPackageName(Array.isArray(packageName) ? packageName[0] : packageName));
     if (!docs) {
       return () => <div>Unknown package name {packageName}</div>;
     }
@@ -31,7 +38,7 @@ export default defineComponent({
           return <ComponentDocs docs={componentDocs}></ComponentDocs>
         }
 
-        return <TsDocs docs={child}></TsDocs>
+        return <TSDocs docs={child}></TSDocs>
       })}
     </main>;
   },

packages/docs/lib/api/TSDocs.tsx

@@ -7,12 +7,12 @@ import {
   TypeParameterReflection,
 } from 'typedoc';
 
-import './TsDocs.scss';
+import './TSDocs.scss';
 
 const getTypeParamString = (params: TypeParameterReflection[]) => `<${params.map(p => p.name).join(', ')}>`;
 
 export default defineComponent({
-  name: 'TsDocs',
+  name: 'TSDocs',
 
   props: {
     docs: {

packages/docs/lib/guide/examples.md

@@ -5,14 +5,14 @@ import ExampleStandaloneEditor from '../ExampleStandaloneEditor'
 
 # Examples
 
-## Vue Component without wrapper
+## As a View Component
 
 This documentation website already uses Vue under the hood, so Schlechtenburg can just imported as
 any other component:
 
 <ExampleEditor></ExampleEditor>
 
-## Wrapped with Vue
+## Standalone
 
 `@schlechtenburg/standalone` gives you a wrapped version of the editor in case you don't have Vue
 already installed in your application

packages/docs/lib/pages/Introduction.tsx

@@ -1,11 +0,0 @@
-import { defineComponent } from 'vue';
-
-import './Introduction.scss';
-
-export default defineComponent({
-  name: 'Introduction',
-
-  setup() {
-    return () => <div class="introduction">Introduction</div>;
-  },
-});

packages/docs/lib/routes.ts

@@ -1,12 +0,0 @@
-export default [
-  {
-    name: 'home',
-    path: '/',
-    component: () => import('./pages/Introduction'),
-  },
-  {
-    name: 'package',
-    path: '/@schlechtenburg/:package',
-    component: () => import('./pages/Package'),
-  },
-]

packages/standalone/lib/get-wrapper.tsx

@@ -1,6 +1,7 @@
 import {
   defineComponent,
   ref,
+  Ref,
   PropType,
 } from 'vue'
 import {
@@ -9,17 +10,17 @@ import {
   SbMain,
   SbMode,
   OnUpdateBlockCb,
+  ISbMainProps,
 } from '@schlechtenburg/core';
 
 /**
  *
  */
-export default function getWrapper({
+export default function getWrapper() {
-  block,
+  const refBlock: Ref<IBlockData<any>|null> = ref(null);
-  mode,
+  const refMode = ref(SbMode.View);
-  availableBlocks,
+
-}) {
+  const SchlechtenburgWrapper = defineComponent({
-  return defineComponent({
     name: 'SchlechtenburgWrapper',
 
     props: {
@@ -47,15 +48,39 @@ export default function getWrapper({
       },
     },
 
-    setup(props) {
+    setup(props: ISbMainProps) {
-      const refBlock = ref({ ...block });
+      refBlock.value = { ...(props.block) };
-      const refMode = ref({ ...block });
+      refMode.value = props.mode;
+
+      if (!refBlock.value) {
+        return () => <div class="sb-message sb-message_error">An Error occurred</div>;
+      }
 
       return () => <SbMain
-        block={refBlock}
+        block={refBlock.value as IBlockData<any>}
         availableBlocks={props.availableBlocks}
-        mode={mode}
+        mode={refMode.value}
+        onUpdate={(newBlock: IBlockData<any>) => {
+          refBlock.value = { ...newBlock };
+
+        }}
       />
     }
   });
+
+  return {
+    SchlechtenburgWrapper,
+    getBlock() {
+      return refBlock.value;
+    },
+    setBlock(block: IBlockData<any>) {
+      refBlock.value = { ...block };
+    },
+    getMode() {
+      return refMode.value;
+    },
+    setMode(mode: SbMode) {
+      refMode.value = mode;
+    },
+  };
 }

packages/standalone/lib/main.ts

@@ -1,11 +1,6 @@
-import {
+import { createApp } from 'vue'
-  createApp,
+import { ISbMainProps } from '@schlechtenburg/core';
-} from 'vue'
+import getWrapper from './get-wrapper';
-import {
-  ISbMainProps,
-  IBlockData,
-  SbMain,
-} from '@schlechtenburg/core';
 
 /**
  *
@@ -21,19 +16,25 @@ export const startSchlechtenburg = async (
    */
   props:ISbMainProps,
 ) => {
-  let block = { ...props.block };
+  const {
-  const app = createApp(SbMain, {
+    SchlechtenburgWrapper,
-    ...props,
+    getBlock,
-    onUpdate: (update: IBlockData<any>) => {
+    setBlock,
-      block = update;
+    getMode,
-      props.onUpdate(update);
+    setMode,
-    },
+  } = getWrapper();
-  }as unknown as Record<string, unknown>);
+
+  const app = createApp(
+    SchlechtenburgWrapper,
+    { ...props, } as unknown as Record<string, unknown>,
+  );
   app.mount(el);
 
   return {
-    getBlock() {
+    app,
-      return block;
+    getBlock,
-    },
+    setBlock,
+    getMode,
+    setMode,
   };
 }