Merge pull request #524 from mathuo/475-improved-docs-1

chore: fix docs
This commit is contained in:
mathuo 2024-02-25 15:25:52 +00:00 committed by GitHub
commit d2baa1371c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
20 changed files with 206 additions and 1169 deletions

File diff suppressed because it is too large Load Diff

View File

@ -1,87 +1 @@
--- landing
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>

View File

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

View File

@ -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.

View File

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

View File

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

View File

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

View File

@ -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.

View File

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

View File

@ -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>

View File

@ -30,6 +30,14 @@ const sidebars = {
className: 'sidebar-section-header', className: 'sidebar-section-header',
items: [{ type: 'autogenerated', dirName: 'core' }], 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', type: 'category',
label: 'Advanced Features', label: 'Advanced Features',

View File

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

View File

@ -1,5 +1,6 @@
import * as React from 'react'; import * as React from 'react';
import { CodeSandboxButton } from './codeSandboxButton'; import { CodeSandboxButton } from './codeSandboxButton';
import BrowserOnly from '@docusaurus/BrowserOnly';
const ExampleFrame = (props: { const ExampleFrame = (props: {
framework: string; framework: string;
@ -19,34 +20,43 @@ const ExampleFrame = (props: {
); );
return ( return (
<React.Suspense> <BrowserOnly>
<div {() => (
style={{ <React.Suspense>
display: 'flex', <div
flexDirection: 'column', style={{
flexGrow: 1, display: 'flex',
}} flexDirection: 'column',
> flexGrow: 1,
<div }}
style={{ >
height: props.height ?? '500px', <div
flexGrow: 1, style={{
display: 'flex', height: props.height ?? '500px',
flexDirection: 'column', flexGrow: 1,
}} display: 'flex',
> flexDirection: 'column',
<Component theme={props.theme} /> }}
</div> >
<div style={{ display: 'flex', justifyContent: 'flex-end' }}> <Component theme={props.theme} />
<span style={{ width: '220px' }}> </div>
<CodeSandboxButton <div
id={`${props.framework}/${props.id}`} style={{
hideThemePicker={true} display: 'flex',
/> justifyContent: 'flex-end',
</span> }}
</div> >
</div> <span style={{ width: '220px' }}>
</React.Suspense> <CodeSandboxButton
id={`${props.framework}/${props.id}`}
hideThemePicker={true}
/>
</span>
</div>
</div>
</React.Suspense>
)}
</BrowserOnly>
); );
}; };

View File

@ -4,9 +4,9 @@ import { themeConfig } from '../config/theme.config';
import ExampleFrame from '../components/ui/exampleFrame'; import ExampleFrame from '../components/ui/exampleFrame';
export default function Popout() { export default function Popout() {
const [theme, setTheme] = React.useState<string>( // const [theme, setTheme] = React.useState<string>(
new URLSearchParams(location.search).get('theme') ?? themeConfig[3].id // new URLSearchParams(location.search).get('theme') ?? themeConfig[3].id
); // );
return ( return (
<Layout noFooter={true}> <Layout noFooter={true}>
@ -32,7 +32,7 @@ export default function Popout() {
url.searchParams.set('theme', event.target.value); url.searchParams.set('theme', event.target.value);
window.location.href = url.toString(); window.location.href = url.toString();
}} }}
value={theme} // value={theme}
> >
{themeConfig.map((theme) => { {themeConfig.map((theme) => {
return <option>{theme.id}</option>; return <option>{theme.id}</option>;
@ -41,7 +41,7 @@ export default function Popout() {
</div> </div>
<ExampleFrame <ExampleFrame
theme={theme} // theme={theme}
framework="react" framework="react"
height="100%" height="100%"
id="dockview/demo-dockview" id="dockview/demo-dockview"

View File

@ -1 +0,0 @@
[]