Skip to content

Commit d2baa13

Browse files
mathuomathuo
authored
Merge pull request #524 from mathuo/475-improved-docs-1
chore: fix docs
2 parents e85863b + 814a8e4 commit d2baa13

File tree

20 files changed

+206
-1169
lines changed

20 files changed

+206
-1169
lines changed

‎packages/docs/docs/components/dockview.mdx

-1,022
This file was deleted.

‎packages/docs/docs/index.mdx

+1-87
Original file line numberDiff line numberDiff line change
@@ -1,87 +1 @@
1-
---
2-
sidebar_position: 0
3-
description: A zero dependency layout manager supporting ReactJS and Vanilla TypeScript
4-
title: Introduction
5-
---
6-
7-
import { MultiFrameworkContainer } from '@site/src/components/ui/container';
8-
9-
import { SimpleSplitview } from '@site/src/components/simpleSplitview';
10-
import { SimpleGridview } from '@site/src/components/simpleGridview';
11-
import { SimplePaneview } from '@site/src/components/simplePaneview';
12-
// import DockviewDemo from '@site/sandboxes/demo-dockview/src/app';
13-
import Link from '@docusaurus/Link';
14-
15-
**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
16-
17-
## Quick start
18-
19-
`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run:
20-
21-
```shell
22-
npm install dockview
23-
```
24-
25-
You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css),
26-
depending on your solution this might be:
27-
28-
```css
29-
@import './node_modules/dockview/dist/styles/dockview.css';
30-
```
31-
32-
There are 4 components you may want to use:
33-
34-
<Link to="./components/dockview">
35-
<h2>Dockview</h2>
36-
</Link>
37-
38-
{/* <MultiFrameworkContainer
39-
height={500}
40-
sandboxId="demo-dockview"
41-
react={DockviewDemo}
42-
/> */}
43-
44-
<Link to="./components/splitview">
45-
<h2>Splitview</h2>
46-
</Link>
47-
48-
<div
49-
style={{
50-
height: '100px',
51-
backgroundColor: 'rgb(30,30,30)',
52-
color: 'white',
53-
margin: '20px 0px',
54-
}}
55-
>
56-
<SimpleSplitview />
57-
</div>
58-
59-
<Link to="./components/gridview">
60-
<h2>Gridview</h2>
61-
</Link>
62-
63-
<div
64-
style={{
65-
height: '300px',
66-
backgroundColor: 'rgb(30,30,30)',
67-
color: 'white',
68-
margin: '20px 0px',
69-
}}
70-
>
71-
<SimpleGridview />
72-
</div>
73-
74-
<Link to="./components/paneview">
75-
<h2>Paneview</h2>
76-
</Link>
77-
78-
<div
79-
style={{
80-
height: '300px',
81-
backgroundColor: 'rgb(30,30,30)',
82-
color: 'white',
83-
margin: '20px 0px',
84-
}}
85-
>
86-
<SimplePaneview />
87-
</div>
1+
landing

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"position": 1,
3+
"label": "Gridview",
4+
"collapsible": true,
5+
"collapsed": true
6+
}

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: Overview
3+
sidebar_position: 0
4+
---
5+
6+
The implementation of the dock is a collection of nested *splitview* controls forming a *gridview*
7+
which is exposed as a seperate component to be used independantly.

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"position": 2,
3+
"label": "Paneview",
4+
"collapsible": true,
5+
"collapsed": true
6+
}

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
title: Overview
3+
sidebar_position: 0
4+
---
5+
6+
A *splitview* control where each panel contains a header and collapsable content.

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

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{
2+
"position": 0,
3+
"label": "Splitview",
4+
"collapsible": true,
5+
"collapsed": true
6+
}

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

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
title: Overview
3+
sidebar_position: 0
4+
---
5+
6+
The implementation of the dock is a collection of nested *splitview* controls
7+
which is exposed as a seperate component to be used independantly.

‎packages/docs/docusaurus.config.js

+9-9
Original file line numberDiff line numberDiff line change
@@ -106,11 +106,11 @@ const config = {
106106
// Remove this to remove the "edit this page" links.
107107
editUrl:
108108
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
109-
versions: {
110-
current: {
111-
label: `Development 🚧`,
112-
},
113-
},
109+
// versions: {
110+
// current: {
111+
// label: `Development 🚧`,
112+
// },
113+
// },
114114
},
115115
blog: {
116116
showReadingTime: true,
@@ -188,10 +188,10 @@ const config = {
188188
// position: 'left',
189189
// },
190190

191-
{
192-
type: 'docsVersionDropdown',
193-
position: 'right',
194-
},
191+
// {
192+
// type: 'docsVersionDropdown',
193+
// position: 'right',
194+
// },
195195
{
196196
href: 'https://github.com/mathuo/dockview',
197197
position: 'right',

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

File renamed without changes.

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

File renamed without changes.

‎packages/docs/docs/components/intro.mdx ‎packages/docs/old_docs_DELETE_SOON/components/intro.mdx

File renamed without changes.

‎packages/docs/docs/components/paneview/paneview.mdx ‎packages/docs/old_docs_DELETE_SOON/components/paneview/paneview.mdx

File renamed without changes.

‎packages/docs/docs/components/splitview/splitview.mdx ‎packages/docs/old_docs_DELETE_SOON/components/splitview/splitview.mdx

File renamed without changes.

‎packages/docs/old_docs_DELETE_SOON/index.mdx

+87
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
---
2+
sidebar_position: 0
3+
description: A zero dependency layout manager supporting ReactJS and Vanilla TypeScript
4+
title: Introduction
5+
---
6+
7+
import { MultiFrameworkContainer } from '@site/src/components/ui/container';
8+
9+
import { SimpleSplitview } from '@site/src/components/simpleSplitview';
10+
import { SimpleGridview } from '@site/src/components/simpleGridview';
11+
import { SimplePaneview } from '@site/src/components/simplePaneview';
12+
// import DockviewDemo from '@site/sandboxes/demo-dockview/src/app';
13+
import Link from '@docusaurus/Link';
14+
15+
**dockview** is a zero dependency layout manager that supports tab, grids and splitviews.
16+
17+
## Quick start
18+
19+
`dockview` has a peer dependency on `react >= 16.8.0` and `react-dom >= 16.8.0`. To install `dockview` you can run:
20+
21+
```shell
22+
npm install dockview
23+
```
24+
25+
You must also import the dockview stylesheet found under [`dockview/dict/styles/dockview.css`](https://unpkg.com/browse/dockview@latest/dist/styles/dockview.css),
26+
depending on your solution this might be:
27+
28+
```css
29+
@import './node_modules/dockview/dist/styles/dockview.css';
30+
```
31+
32+
There are 4 components you may want to use:
33+
34+
<Link to="./components/dockview">
35+
<h2>Dockview</h2>
36+
</Link>
37+
38+
{/* <MultiFrameworkContainer
39+
height={500}
40+
sandboxId="demo-dockview"
41+
react={DockviewDemo}
42+
/> */}
43+
44+
<Link to="./components/splitview">
45+
<h2>Splitview</h2>
46+
</Link>
47+
48+
<div
49+
style={{
50+
height: '100px',
51+
backgroundColor: 'rgb(30,30,30)',
52+
color: 'white',
53+
margin: '20px 0px',
54+
}}
55+
>
56+
<SimpleSplitview />
57+
</div>
58+
59+
<Link to="./components/gridview">
60+
<h2>Gridview</h2>
61+
</Link>
62+
63+
<div
64+
style={{
65+
height: '300px',
66+
backgroundColor: 'rgb(30,30,30)',
67+
color: 'white',
68+
margin: '20px 0px',
69+
}}
70+
>
71+
<SimpleGridview />
72+
</div>
73+
74+
<Link to="./components/paneview">
75+
<h2>Paneview</h2>
76+
</Link>
77+
78+
<div
79+
style={{
80+
height: '300px',
81+
backgroundColor: 'rgb(30,30,30)',
82+
color: 'white',
83+
margin: '20px 0px',
84+
}}
85+
>
86+
<SimplePaneview />
87+
</div>

‎packages/docs/sidebars.js

+8
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,14 @@ const sidebars = {
3030
className: 'sidebar-section-header',
3131
items: [{ type: 'autogenerated', dirName: 'core' }],
3232
},
33+
{
34+
type: 'category',
35+
label: 'Auxilliary Components',
36+
collapsible: false,
37+
collapsed: false,
38+
className: 'sidebar-section-header',
39+
items: [{ type: 'autogenerated', dirName: 'other' }],
40+
},
3341
{
3442
type: 'category',
3543
label: 'Advanced Features',

‎packages/docs/src/components/frameworkSpecific.tsx

+20-17
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
import { Emitter } from 'dockview-core/dist/cjs/events';
1+
import BrowserOnly from '@docusaurus/BrowserOnly';
2+
import { DockviewEmitter } from 'dockview';
23
import * as React from 'react';
34

45
const frameworks = [
@@ -7,11 +8,7 @@ const frameworks = [
78
{ value: 'Angular', label: 'Angular' },
89
];
910

10-
const activeFrameworkGlobal = new Emitter<string>({ replay: true });
11-
12-
activeFrameworkGlobal.fire(
13-
localStorage.getItem('dv-docs-framework') ?? frameworks[0].value
14-
);
11+
const activeFrameworkGlobal = new DockviewEmitter<string>({ replay: true });
1512

1613
function useActiveFramework(): [string, (value: string) => void] {
1714
const [value, setValue] = React.useState<string>(
@@ -23,6 +20,10 @@ function useActiveFramework(): [string, (value: string) => void] {
2320
setValue(value),
2421
]);
2522

23+
activeFrameworkGlobal.fire(
24+
localStorage.getItem('dv-docs-framework') ?? frameworks[0].value
25+
);
26+
2627
return () => {
2728
disposable.dispose();
2829
};
@@ -37,16 +38,7 @@ function useActiveFramework(): [string, (value: string) => void] {
3738
return [value, setter];
3839
}
3940

40-
export const Header = (props: { title: string }) => {
41-
return (
42-
<header>
43-
<h1>{props.title}</h1>
44-
<FrameworkSelector />
45-
</header>
46-
);
47-
};
48-
49-
export const FrameworkSelector = () => {
41+
const FrameworkSelector1 = () => {
5042
const [activeFramework, setActiveFramework] = useActiveFramework();
5143

5244
const onChange = (event: React.ChangeEvent<HTMLSelectElement>) => [
@@ -64,7 +56,11 @@ export const FrameworkSelector = () => {
6456
);
6557
};
6658

67-
export const FrameworkSpecific = (props: {
59+
export const FrameworkSelector = () => {
60+
return <BrowserOnly>{() => <FrameworkSelector1 />}</BrowserOnly>;
61+
};
62+
63+
const FrameworkSpecific1 = (props: {
6864
framework: string;
6965
children: React.ReactNode;
7066
}) => {
@@ -76,3 +72,10 @@ export const FrameworkSpecific = (props: {
7672

7773
return null;
7874
};
75+
76+
export const FrameworkSpecific = (props: {
77+
framework: string;
78+
children: React.ReactNode;
79+
}) => {
80+
return <BrowserOnly>{() => <FrameworkSpecific1 {...props} />}</BrowserOnly>;
81+
};

0 commit comments

Comments
 (0)