More work on docs

packages/core/lib/components/Schlechtenburg.tsx

@@ -13,7 +13,7 @@ import {
   ITreeNode,
 } from '../types';
 import { model } from '../block-helpers';
-import { Mode, SbMode } from '../mode';
+import { SymMode, SbMode } from '../mode';
 import { SymBlockLibrary} from '../use-dynamic-blocks';
 import {
   SymBlockTree,
@@ -58,7 +58,7 @@ export const SbMain = defineComponent({
     useResizeObserver(el, SymEditorDimensions);
 
     const mode = ref(props.mode);
-    provide(Mode, mode);
+    provide(SymMode, mode);
 
     const activeBlock = ref(null);
     provide(SymActiveBlock, activeBlock);

packages/core/lib/mode.ts

@@ -1,5 +1,8 @@
+/**
+ * The mode the Schlechtenburg editor is currently in
+ */
 export enum SbMode {
   Edit = 'edit',
   Display = 'display',
 }
-export const Mode = Symbol('Schlechtenburg mode');
+export const SymMode = Symbol('Schlechtenburg mode');

packages/core/lib/use-dynamic-blocks.ts

@@ -4,11 +4,11 @@ import {
   reactive,
 } from 'vue';
 import { IBlockLibrary } from './types';
-import { Mode, SbMode } from './mode';
+import { SymMode, SbMode } from './mode';
 
 export const SymBlockLibrary = Symbol('Schlechtenburg block library');
 export function useDynamicBlocks() {
-  const mode = inject(Mode, ref(SbMode.Edit));
+  const mode = inject(SymMode, ref(SbMode.Edit));
   const customBlocks: IBlockLibrary = inject(SymBlockLibrary, reactive({}));
   const getBlock = (name: string) => customBlocks[name];
 

packages/docs/lib/App.scss

@@ -3,9 +3,20 @@
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
-  padding: 3rem 4rem;
+  display: flex;
 
-  &--mode {
-    margin-bottom: 2rem;
+  &--sidemenu {
+    width: 300px;
+    padding: 3rem 1rem;
+  }
+
+  &--main {
+    padding: 3rem 4rem;
+    margin: 0 auto;
+    flex-basis: 700px;
+    flex-shrink: 1;
+    flex-grow: 0;
+    display: flex;
+    flex-direction: column;
   }
 }

packages/docs/lib/App.tsx

@@ -11,8 +11,8 @@ export default defineComponent({
 
   setup() {
     return () => <div class="app">
-      <SideMenu></SideMenu>
-      <RouterView></RouterView>
+      <SideMenu class="app--sidemenu"></SideMenu>
+      <RouterView class="app--main"></RouterView>
     </div>;
   },
 });

packages/docs/lib/ComponentDocs.tsx

@@ -18,8 +18,26 @@ export default defineComponent({
 
   setup(props) {
     const docs = props.docs;
+    console.log(docs);
     return () => <section class="docs component-docs">
-      <h2 id={docs.exportName}>{docs.exportName}</h2>
+      <header class="docs--header">
+        <h2
+          class="docs--title"
+          id={docs.exportName}
+        >{docs.exportName}</h2>
+        <p class="docs--type">Component <code>&lt;{docs.displayName} /&gt;</code></p>
+      </header>
+
+      <p class="docs--description">{docs.description}</p>
+
+      <h3>Props</h3>
+
+      {...(docs.props || []).map(prop => <div class="component-docs--prop">
+        <h4 class="component-docs--prop-name">{prop.name}</h4>
+        <p class="component-docs--prop-description">{prop.description}</p>
+        {prop.type ? <p>Type: <code>{prop.type.name}</code></p> : null}
+        {prop.defaultValue ? <p>Default: <code>{prop.defaultValue.value}</code></p>: null}
+      </div>)}
     </section>;
   },
 });

packages/docs/lib/TsDocs.tsx

@@ -23,14 +23,23 @@ export default defineComponent({
 
   setup(props) {
     const docs = props.docs;
-    console.log(docs);
     return () => <section class="docs ts-docs">
-      <h2 id={docs.name}>
-        {docs.name}
-        {docs.typeParameters ? getTypeParamString(docs.typeParameters) : ''}
-      </h2>
-      <p>{docs.kindString}</p>
-      <p>{docs.comment}</p>
+      <header class="docs--header">
+        <h2
+          class="docs--title"
+          id={docs.name}
+        >
+          {docs.name}
+          {docs.typeParameters ? getTypeParamString(docs.typeParameters) : ''}
+        </h2>
+        <p class="docs--type">{docs.kindString}</p>
+      </header>
+
+      <p class="docs--description">{docs.comment?.shortText || ''}</p>
+
+      {...(docs.children || []).map(child => <pre><code>
+        {child.name}: {child.type?.name}
+      </code></pre>)}
     </section>;
   },
 });

packages/docs/lib/package.ts

@@ -1,5 +1,4 @@
 export const getShortPackageName = (name: string) => {
   const parts = name.split('/');
-  console.log(parts);
   return parts[1] || parts[0] || name;
 }

packages/docs/lib/pages/Package.tsx

@@ -17,7 +17,7 @@ export default defineComponent({
     const packageName = route.params.package;
     const docs = getByName(Array.isArray(packageName) ? packageName[0] : packageName);
     if (!docs) {
-      return () => <div>Unknown package name {packageName}</div>
+      return () => <div>Unknown package name {packageName}</div>;
     }
 
     const { lib, components } = docs;

packages/docs/lib/routes.ts

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

packages/docs/lib/sidemenu/Sidemenu.scss

@@ -0,0 +1,10 @@
+.sidemenu {
+  &--link {
+    color: #0080ff;
+    padding: 
+  }
+
+  &--package-child {
+    
+  }
+}

packages/docs/lib/sidemenu/SidemenuPackage.tsx

@@ -19,18 +19,24 @@ export default defineComponent({
   setup(props) {
     const { lib, components } = props.package;
     const shortName = getShortPackageName(lib.name);
-    return () => <div class="sidemenu-package">
-      <RouterLink to={{
-        name: 'package',
-        params: { package: shortName },
-      }}>{lib.name}</RouterLink>
-      <ul>
-        {...(lib.children || []).map(child => <li>
-          <RouterLink to={{
-            name: 'package',
-            params: { package: shortName },
-            hash: '#' + child.name,
-          }}>{child.name}</RouterLink>
+    return () => <div>
+      <RouterLink
+        class="sidemenu--link sidemenu--link_package"
+        to={{
+          name: 'package',
+          params: { package: shortName },
+        }}
+      >{lib.name}</RouterLink>
+      <ul class="sidemenu--package-children">
+        {...(lib.children || []).map(child => <li class="sidemenu--package-child">
+          <RouterLink
+            class="sidemenu--link"
+            to={{
+              name: 'package',
+              params: { package: shortName },
+              hash: '#' + child.name,
+            }}
+          >{child.name}</RouterLink>
         </li>)}
       </ul>
     </div>;