chore: fix docs

Author: mathuo

packages/docs/docs/components/dockview.mdx

@@ -1,87 +1 @@
----
-sidebar_position: 0
-description: A zero dependency layout manager supporting ReactJS and Vanilla TypeScript
-title: Introduction
----
-
-import { MultiFrameworkContainer } from '@site/src/components/ui/container';
-
-import { SimpleSplitview } from '@site/src/components/simpleSplitview';
-import { SimpleGridview } from '@site/src/components/simpleGridview';
-import { SimplePaneview } from '@site/src/components/simplePaneview';
-// import DockviewDemo from '@site/sandboxes/demo-dockview/src/app';
-import Link from '@docusaurus/Link';
-
-**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
-
-## Quick start
-
-`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run:
-
-```shell
-npm install dockview
-```
-
-You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css),
-depending on your solution this might be:
-
-```css
-@import './node_modules/dockview/dist/styles/dockview.css';
-```
-
-There are 4 components you may want to use:
-
-<Link to="./components/dockview">
-    <h2>Dockview</h2>
-</Link>
-
-{/* <MultiFrameworkContainer
-  height={500}
-  sandboxId="demo-dockview"
-  react={DockviewDemo}
-/> */}
-
-<Link to="./components/splitview">
-    <h2>Splitview</h2>
-</Link>
-
-<div
-    style={{
-        height: '100px',
-        backgroundColor: 'rgb(30,30,30)',
-        color: 'white',
-        margin: '20px 0px',
-    }}
->
-    <SimpleSplitview />
-</div>
-
-<Link to="./components/gridview">
-    <h2>Gridview</h2>
-</Link>
-
-<div
-    style={{
-        height: '300px',
-        backgroundColor: 'rgb(30,30,30)',
-        color: 'white',
-        margin: '20px 0px',
-    }}
->
-    <SimpleGridview />
-</div>
-
-<Link to="./components/paneview">
-    <h2>Paneview</h2>
-</Link>
-
-<div
-    style={{
-        height: '300px',
-        backgroundColor: 'rgb(30,30,30)',
-        color: 'white',
-        margin: '20px 0px',
-    }}
->
-    <SimplePaneview />
-</div>
+landing

packages/docs/docs/index.mdx

@@ -0,0 +1,6 @@
+{
+  "position": 1,
+  "label": "Gridview",
+  "collapsible": true,
+  "collapsed": true
+}

packages/docs/docs/other/gridview/_category_.json

@@ -0,0 +1,7 @@
+---
+title: Overview
+sidebar_position: 0
+---
+
+The implementation of the dock is a collection of nested *splitview* controls forming a *gridview*
+which is exposed as a seperate component to be used independantly.

packages/docs/docs/other/gridview/overview.mdx

@@ -0,0 +1,6 @@
+{
+  "position": 2,
+  "label": "Paneview",
+  "collapsible": true,
+  "collapsed": true
+}

packages/docs/docs/other/paneview/_category_.json

@@ -0,0 +1,6 @@
+---
+title: Overview
+sidebar_position: 0
+---
+
+A *splitview* control where each panel contains a header and collapsable content.

packages/docs/docs/other/paneview/overview.mdx

@@ -0,0 +1,6 @@
+{
+  "position": 0,
+  "label": "Splitview",
+  "collapsible": true,
+  "collapsed": true
+}

packages/docs/docs/other/splitview/_category_.json

@@ -0,0 +1,7 @@
+---
+title: Overview
+sidebar_position: 0
+---
+
+The implementation of the dock is a collection of nested *splitview* controls
+which is exposed as a seperate component to be used independantly.

packages/docs/docs/other/splitview/overview.mdx

@@ -106,11 +106,11 @@ const config = {
                     // Remove this to remove the "edit this page" links.
                     editUrl:
                         'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
-                    versions: {
-                        current: {
-                            label: `Development 🚧`,
-                        },
-                    },
+                    // versions: {
+                    //     current: {
+                    //         label: `Development 🚧`,
+                    //     },
+                    // },
                 },
                 blog: {
                     showReadingTime: true,
@@ -188,10 +188,10 @@ const config = {
                     //     position: 'left',
                     // },
 
-                    {
-                        type: 'docsVersionDropdown',
-                        position: 'right',
-                    },
+                    // {
+                    //     type: 'docsVersionDropdown',
+                    //     position: 'right',
+                    // },
                     {
                         href: 'https://github.com/mathuo/dockview',
                         position: 'right',

packages/docs/docusaurus.config.js

@@ -0,0 +1,87 @@
+---
+sidebar_position: 0
+description: A zero dependency layout manager supporting ReactJS and Vanilla TypeScript
+title: Introduction
+---
+
+import { MultiFrameworkContainer } from '@site/src/components/ui/container';
+
+import { SimpleSplitview } from '@site/src/components/simpleSplitview';
+import { SimpleGridview } from '@site/src/components/simpleGridview';
+import { SimplePaneview } from '@site/src/components/simplePaneview';
+// import DockviewDemo from '@site/sandboxes/demo-dockview/src/app';
+import Link from '@docusaurus/Link';
+
+**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
+
+## Quick start
+
+`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run:
+
+```shell
+npm install dockview
+```
+
+You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css),
+depending on your solution this might be:
+
+```css
+@import './node_modules/dockview/dist/styles/dockview.css';
+```
+
+There are 4 components you may want to use:
+
+<Link to="./components/dockview">
+    <h2>Dockview</h2>
+</Link>
+
+{/* <MultiFrameworkContainer
+  height={500}
+  sandboxId="demo-dockview"
+  react={DockviewDemo}
+/> */}
+
+<Link to="./components/splitview">
+    <h2>Splitview</h2>
+</Link>
+
+<div
+    style={{
+        height: '100px',
+        backgroundColor: 'rgb(30,30,30)',
+        color: 'white',
+        margin: '20px 0px',
+    }}
+>
+    <SimpleSplitview />
+</div>
+
+<Link to="./components/gridview">
+    <h2>Gridview</h2>
+</Link>
+
+<div
+    style={{
+        height: '300px',
+        backgroundColor: 'rgb(30,30,30)',
+        color: 'white',
+        margin: '20px 0px',
+    }}
+>
+    <SimpleGridview />
+</div>
+
+<Link to="./components/paneview">
+    <h2>Paneview</h2>
+</Link>
+
+<div
+    style={{
+        height: '300px',
+        backgroundColor: 'rgb(30,30,30)',
+        color: 'white',
+        margin: '20px 0px',
+    }}
+>
+    <SimplePaneview />
+</div>

packages/docs/docs/components/_category_.json packages/docs/old_docs_DELETE_SOON/components/_category_.json

@@ -30,6 +30,14 @@ const sidebars = {
             className: 'sidebar-section-header',
             items: [{ type: 'autogenerated', dirName: 'core' }],
         },
+        {
+            type: 'category',
+            label: 'Auxilliary Components',
+            collapsible: false,
+            collapsed: false,
+            className: 'sidebar-section-header',
+            items: [{ type: 'autogenerated', dirName: 'other' }],
+        },
         {
             type: 'category',
             label: 'Advanced Features',

packages/docs/docs/components/gridview/gridview.mdx packages/docs/old_docs_DELETE_SOON/components/gridview/gridview.mdx

@@ -1,4 +1,5 @@
-import { Emitter } from 'dockview-core/dist/cjs/events';
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import { DockviewEmitter } from 'dockview';
 import * as React from 'react';
 
 const frameworks = [
@@ -7,11 +8,7 @@ const frameworks = [
     { value: 'Angular', label: 'Angular' },
 ];
 
-const activeFrameworkGlobal = new Emitter<string>({ replay: true });
-
-activeFrameworkGlobal.fire(
-    localStorage.getItem('dv-docs-framework') ?? frameworks[0].value
-);
+const activeFrameworkGlobal = new DockviewEmitter<string>({ replay: true });
 
 function useActiveFramework(): [string, (value: string) => void] {
     const [value, setValue] = React.useState<string>(
@@ -23,6 +20,10 @@ function useActiveFramework(): [string, (value: string) => void] {
             setValue(value),
         ]);
 
+        activeFrameworkGlobal.fire(
+            localStorage.getItem('dv-docs-framework') ?? frameworks[0].value
+        );
+
         return () => {
             disposable.dispose();
         };
@@ -37,16 +38,7 @@ function useActiveFramework(): [string, (value: string) => void] {
     return [value, setter];
 }
 
-export const Header = (props: { title: string }) => {
-    return (
-        <header>
-            <h1>{props.title}</h1>
-            <FrameworkSelector />
-        </header>
-    );
-};
-
-export const FrameworkSelector = () => {
+const FrameworkSelector1 = () => {
     const [activeFramework, setActiveFramework] = useActiveFramework();
 
     const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => [
@@ -64,7 +56,11 @@ export const FrameworkSelector = () => {
     );
 };
 
-export const FrameworkSpecific = (props: {
+export const FrameworkSelector = () => {
+    return <BrowserOnly>{() => <FrameworkSelector1 />}</BrowserOnly>;
+};
+
+const FrameworkSpecific1 = (props: {
     framework: string;
     children: React.ReactNode;
 }) => {
@@ -76,3 +72,10 @@ export const FrameworkSpecific = (props: {
 
     return null;
 };
+
+export const FrameworkSpecific = (props: {
+    framework: string;
+    children: React.ReactNode;
+}) => {
+    return <BrowserOnly>{() => <FrameworkSpecific1 {...props} />}</BrowserOnly>;
+};