Skip to content

Commit a5876ad

Browse files
mathuomathuo
committed
chore: docs
1 parent 6946fc3 commit a5876ad

File tree

6 files changed

+136
-88
lines changed

6 files changed

+136
-88
lines changed

‎packages/docs/docs/core/overview.mdx

+2
Original file line numberDiff line numberDiff line change
@@ -38,3 +38,5 @@ const component = new DockviewComponent({
3838
The component will automatically resize to it's container.
3939

4040
<LiveExample framework="react" id="dockview/resize-container"/>
41+
42+
# Disposal Pattern

‎packages/docs/src/components/ui/exampleFrame.tsx

+2-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { CodeSandboxButton } from './codeSandboxButton';
33

44
const ExampleFrame = (props: {
55
framework: string;
6+
theme?: string;
67
id: string;
78
height?: string;
89
}) => {
@@ -34,7 +35,7 @@ const ExampleFrame = (props: {
3435
flexDirection: 'column',
3536
}}
3637
>
37-
<Component />
38+
<Component theme={props.theme} />
3839
</div>
3940
<div style={{ display: 'flex', justifyContent: 'flex-end' }}>
4041
<span style={{ width: '220px' }}>

‎packages/docs/src/css/custom.scss

+5
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,11 @@
1111

1212
/* You can override the default Infima variables here. */
1313
:root {
14+
--ifm-font-family-base: ui-sans-serif, system-ui, -apple-system,
15+
BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans,
16+
sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol,
17+
Noto Color Emoji;
18+
1419
--ifm-font-weight-bold: 600;
1520

1621
--ifm-alert-padding-vertical: 8px;

‎packages/docs/src/pages/demo.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import ExampleFrame from '../components/ui/exampleFrame';
55

66
export default function Popout() {
77
const [theme, setTheme] = React.useState<string>(
8-
new URLSearchParams(location.search).get('theme') ?? themeConfig[0].id
8+
new URLSearchParams(location.search).get('theme') ?? themeConfig[3].id
99
);
1010

1111
return (
@@ -40,13 +40,13 @@ export default function Popout() {
4040
</select>
4141
</div>
4242

43-
<ExampleFrame
44-
framework="react"
45-
height="100%"
46-
id="dockview/demo-dockview"
47-
/>
48-
</div>
49-
43+
<ExampleFrame
44+
theme={theme}
45+
framework="react"
46+
height="100%"
47+
id="dockview/demo-dockview"
48+
/>
49+
</div>
5050
</Layout>
5151
);
5252
}

‎packages/docs/src/pages/index.scss

+89-14
Original file line numberDiff line numberDiff line change
@@ -32,24 +32,99 @@
3232
}
3333
}
3434

35-
.intro-container {
36-
display: flex;
37-
flex-direction: column;
38-
margin: auto auto;
39-
max-width: 1400px;
40-
}
35+
.home-page {
36+
// display: flex;
37+
// justify-content: center;
38+
// padding-top: 100px;
39+
// padding-bottom: 50px;
40+
41+
.splashscreen {
42+
display: grid;
43+
grid-auto-flow: row;
44+
grid-gap: 40px;
45+
padding-top: 100px;
46+
padding-bottom: 50px;
4147

42-
@media screen and (min-width: 1020px) {
43-
.intro-container {
44-
flex-direction: row;
48+
.splashscreen-title {
49+
h1 {
50+
font-size: 54px;
51+
}
4552

46-
div {
47-
width: 400px;
53+
h2 {
54+
font-size: 26px;
55+
}
4856
}
4957

50-
img {
51-
min-width: 600px;
52-
max-width: 800px;
58+
.splashscreen-video {
59+
position: relative;
60+
61+
button {
62+
display: none;
63+
position: absolute;
64+
top: 50%;
65+
left: 50%;
66+
transform: translate(-50%, -50%);
67+
padding: 20px;
68+
border-radius: 10px;
69+
font-size: 1.2em;
70+
background-color: dodgerblue;
71+
margin: 0px;
72+
border: none;
73+
cursor: pointer;
74+
opacity: 0.8;
75+
}
76+
77+
&:hover {
78+
button {
79+
background-color: rgb(27, 122, 218);
80+
}
81+
}
82+
83+
&:hover {
84+
button {
85+
display: block;
86+
}
87+
}
88+
89+
img {
90+
pointer-events: none;
91+
user-select: none;
92+
width: 100%;
93+
border-radius: 8px;
94+
}
5395
}
5496
}
97+
98+
@media screen and (min-width: 1020px) {
99+
.splashscreen {
100+
grid-auto-flow: column;
101+
102+
.splashscreen-title {
103+
width: 400px;
104+
105+
h1 {
106+
font-size: min(54px, 3vw);
107+
}
108+
109+
h2 {
110+
font-size: min(26px, 2vw);
111+
}
112+
}
113+
114+
.splashscreen-video {
115+
img {
116+
min-width: 600px;
117+
max-width: 800px;
118+
}
119+
}
120+
}
121+
}
122+
}
123+
124+
.key-features-list {
125+
padding: 20px;
126+
display: inline-block;
127+
border: 4px solid #141d2c;
128+
color: #aeb5c2;
129+
border-radius: 20px;
55130
}

‎packages/docs/src/pages/index.tsx

+30-65
Original file line numberDiff line numberDiff line change
@@ -8,77 +8,42 @@ import { Introduction } from '../components/HomepageFeatures/introduction';
88
import styles from './index.module.css';
99
import './index.scss';
1010

11-
import Splashscreen from '@site/static/img/splashscreen.svg';
12-
13-
function HomepageHeader2() {
14-
const { siteConfig } = useDocusaurusContext();
15-
return (
16-
<header className={clsx('hero hero--primary', styles.heroBanner)}>
17-
<div className="container homepage">
18-
<img src={useBaseUrl('/img/dockview_logo.svg')} />
19-
<h1 className="hero__title">{siteConfig.title}</h1>
20-
21-
<p className="hero__subtitle">{siteConfig.tagline}</p>
22-
<div className={styles.buttons}>
23-
<Link
24-
className="button button--secondary button--lg"
25-
to={useBaseUrl('docs/')}
26-
>
27-
Get Started
28-
</Link>
29-
<Link
30-
className="button button--secondary button--lg"
31-
to={'#live-demo'}
32-
>
33-
Live Demo
34-
</Link>
35-
</div>
36-
</div>
37-
</header>
38-
);
39-
}
40-
4111
export default function Home(): JSX.Element {
4212
const { siteConfig } = useDocusaurusContext();
4313
return (
4414
<Layout title={`${siteConfig.tagline}`}>
45-
<div
46-
style={{
47-
paddingTop: '100px',
48-
paddingBottom: '50px',
49-
display: 'flex',
50-
justifyContent: 'center',
51-
}}
52-
>
53-
<div className="intro-container">
54-
<div>
55-
<h1>Fully Featured Docking Layout Manager</h1>
56-
<h3>
57-
Zero dependency layout managment and docking
58-
controls
59-
</h3>
15+
<div className="home-page">
16+
<main>
17+
<div className="container">
18+
<div className="splashscreen">
19+
<div className="splashscreen-title">
20+
<h1>Fully Featured Docking Layout Manager</h1>
21+
<h2>
22+
Zero dependency layout managment and docking
23+
controls
24+
</h2>
25+
</div>
26+
<div className="splashscreen-video">
27+
<img src={useBaseUrl('/img/Animation.gif')} />
28+
<Link to="/demo">
29+
<button>Go To Live Demo</button>
30+
</Link>
31+
</div>
32+
</div>
33+
</div>
34+
<div
35+
style={{
36+
backgroundColor: '#020c18',
37+
padding: '20px 0px',
38+
}}
39+
>
40+
<div className="container"></div>
6041
</div>
61-
<img
62-
// style={{ maxWidth: '800px' }}
63-
src={useBaseUrl('/img/Animation.gif')}
64-
/>
65-
</div>
42+
<div className="container">
43+
<Introduction />
44+
</div>
45+
</main>
6646
</div>
67-
68-
{/* <HomepageHeader2 /> */}
69-
70-
<main className="container">
71-
<Introduction />
72-
</main>
7347
</Layout>
7448
);
7549
}
76-
77-
const featureList = [
78-
'Popout Windows',
79-
'Floating Windows',
80-
'Custom Header Actions',
81-
'Serialization',
82-
'Themable',
83-
'Drag And Drop',
84-
];

0 commit comments

Comments
 (0)