Skip to content

Commit 0737d47

Browse files
PessimistressPessimistress
committed
Add docusaurus-website module
1 parent 5d80b3d commit 0737d47

27 files changed

+7872
-136
lines changed

‎.eslintrc.cjs

+1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
const {getESLintConfig} = require('@vis.gl/dev-tools/configuration');
22

33
module.exports = getESLintConfig({
4+
react: "18.0.0",
45
overrides: {
56
rules: {
67
'import/no-extraneous-dependencies': 0,

‎modules/docusaurus-website/README.md

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# @visgl/docusaurus-website
2+
3+
Shared Docusaurus components and configurations for vis.gl's open source Javascript frameworks
4+
5+
For documentation, see [https://github.com/visgl/dev-tools/tree/master/modules/docusaurus-website/docs]

‎modules/docusaurus-website/package.json

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
{
2+
"name": "@vis.gl/docusaurus-website",
3+
"description": "Docusaurus setup for vis.gl frameworks",
4+
"license": "MIT",
5+
"version": "1.0.0-alpha.3",
6+
"type": "module",
7+
"publishConfig": {
8+
"access": "public"
9+
},
10+
"keywords": [
11+
"typescript"
12+
],
13+
"repository": {
14+
"type": "git",
15+
"url": "https://github.com/visgl/dev-tools"
16+
},
17+
"files": [
18+
"src",
19+
"dist",
20+
"scripts",
21+
"static"
22+
],
23+
"exports": {
24+
".": {
25+
"types": "./dist/index.d.ts",
26+
"require": "./dist/index.cjs",
27+
"import": "./dist/index.js"
28+
},
29+
"./components": {
30+
"require": "./dist/components/index.cjs",
31+
"import": "./dist/components/index.js"
32+
},
33+
"./plugin-webpack-config": {
34+
"require": "./dist/plugin-webpack-config/index.cjs",
35+
"import": "./dist/plugin-webpack-config/index.js"
36+
}
37+
},
38+
"bin": {
39+
"ocular-doc-headers": "scripts/doc-headers.js"
40+
},
41+
"types": "./dist/index.d.ts",
42+
"main": "./dist/index.js",
43+
"scripts": {},
44+
"dependencies": {
45+
"@cmfcmf/docusaurus-search-local": "^1.0.0",
46+
"@docusaurus/plugin-client-redirects": "^2.0.0",
47+
"@docusaurus/plugin-content-docs": "^2.0.0",
48+
"@docusaurus/preset-classic": "^2.0.0",
49+
"@mdx-js/react": "^1.6.22",
50+
"babel-plugin-styled-components": "^2.0.0",
51+
"deepmerge": "^4.2.2",
52+
"glob": "^7.1.4",
53+
"styled-components": "^5.3.3"
54+
},
55+
"devDependencies": {
56+
"@docusaurus/core": "^2.0.0",
57+
"react": "^18.2.0",
58+
"react-dom": "^18.2.0"
59+
},
60+
"peerDependencies": {
61+
"@docusaurus/core": "^2.0.0",
62+
"react": "*",
63+
"react-dom": "*"
64+
},
65+
"engines": {
66+
"node": ">= 18"
67+
}
68+
}

‎modules/docusaurus-website/scripts/doc-headers.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import {processFile} from '../dist/write-heading-ids.js';
2+
import {glob} from 'glob';
3+
4+
const docsDir = process.argv[2];
5+
6+
main();
7+
8+
/** Traverse all files in the docs directory, append custom ids if necessary */
9+
async function main() {
10+
const files = await glob(`${docsDir}/**/*.{md,mdx}`);
11+
for (const f of files) {
12+
await processFile(f);
13+
}
14+
}

‎modules/docusaurus-website/src/components/common.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export const isMobile = `@media screen and (max-width: 480px)`;

‎modules/docusaurus-website/src/components/doc-item-component.jsx

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import React from 'react';
2+
import styled from 'styled-components';
3+
import useBaseUrl from '@docusaurus/useBaseUrl';
4+
5+
const DemoContainer = styled.div`
6+
position: absolute;
7+
overflow: hidden !important;
8+
left: 0;
9+
right: 0;
10+
top: 0;
11+
bottom: 0;
12+
13+
> h1 {
14+
display: none;
15+
}
16+
`;
17+
18+
/** Passed to @docusaurus/plugin-content-docs to render the mdx content */
19+
export default function ({content, route}) {
20+
const MDXComponent = content;
21+
const indexPath = useBaseUrl('/examples');
22+
23+
if (route.path === indexPath) {
24+
return (
25+
<div key="index">
26+
<MDXComponent />
27+
</div>
28+
);
29+
}
30+
31+
return (
32+
<DemoContainer key="demo">
33+
<MDXComponent />
34+
</DemoContainer>
35+
);
36+
}

‎modules/docusaurus-website/src/components/examples-index.jsx

+113
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,113 @@
1+
import React from 'react';
2+
// Note: this is internal API and may change in a future release
3+
// https://github.com/facebook/docusaurus/discussions/7457
4+
import {useDocsSidebar} from '@docusaurus/theme-common/internal';
5+
import useBaseUrl from '@docusaurus/useBaseUrl';
6+
import styled from 'styled-components';
7+
import {isMobile} from './common.js';
8+
9+
export const ExampleHeader = styled.div`
10+
font: bold 20px/28px var(--ifm-font-family-base);
11+
color: var(--ifm-color-gray-800);
12+
margin: 0 20px;
13+
border-bottom: 1px solid 20px;
14+
display: inline-block;
15+
padding: 20px 20px 4px 0;
16+
`;
17+
18+
export const MainExamples = styled.main`
19+
padding: 16px 0;
20+
`;
21+
22+
export const ExamplesGroup = styled.main`
23+
display: flex;
24+
flex-wrap: wrap;
25+
padding: 16px;
26+
`;
27+
28+
export const ExampleCard = styled.a`
29+
cursor: pointer;
30+
text-decoration: none;
31+
width: 50%;
32+
max-width: 240px;
33+
line-height: 0;
34+
outline: none;
35+
padding: 4px;
36+
position: relative;
37+
img {
38+
transition-property: filter;
39+
transition-duration: var(--ifm-transition-slow);
40+
transition-timing-function: var(--ifm-transition-timing-default);
41+
}
42+
&:hover {
43+
box-shadow: var(--ifm-global-shadow-md);
44+
}
45+
&:hover img {
46+
filter: contrast(0.2);
47+
}
48+
${isMobile} {
49+
width: 33%;
50+
min-width: 200px;
51+
}
52+
@media screen and (max-width: 632px) {
53+
width: 50%;
54+
}
55+
`;
56+
57+
export const ExampleTitle = styled.div`
58+
position: absolute;
59+
display: flex;
60+
justify-content: center;
61+
flex-direction: column;
62+
color: var(--ifm-color-white);
63+
font-size: 1.5em;
64+
text-align: center;
65+
line-height: initial;
66+
width: 90%;
67+
height: 90%;
68+
top: 5%;
69+
left: 5%;
70+
border: solid 1px var(--ifm-color-white);
71+
opacity: 0;
72+
transition-property: opacity;
73+
transition-duration: var(--ifm-transition-slow);
74+
transition-timing-function: var(--ifm-transition-timing-default);
75+
&:hover {
76+
opacity: 1;
77+
}
78+
`;
79+
80+
function renderItem(item, getThumbnail) {
81+
const imageUrl = useBaseUrl(getThumbnail(item));
82+
const {label, href} = item;
83+
84+
return (
85+
<ExampleCard key={label} href={href}>
86+
<img width="100%" src={imageUrl} alt={label} />
87+
<ExampleTitle>
88+
<span>{label}</span>
89+
</ExampleTitle>
90+
</ExampleCard>
91+
);
92+
}
93+
94+
function renderCategory({label, items}, getThumbnail) {
95+
return [
96+
<ExampleHeader key={`${label}-header`}>{label}</ExampleHeader>,
97+
<ExamplesGroup key={label}>{items.map((item) => renderItem(item, getThumbnail))}</ExamplesGroup>
98+
];
99+
}
100+
101+
export default function ExamplesIndex({getThumbnail}) {
102+
const sidebar = useDocsSidebar();
103+
104+
const pages = sidebar.items.filter((item) => item.type !== 'category' && item.docId !== 'index');
105+
const categories = sidebar.items.filter((item) => item.type === 'category');
106+
107+
return (
108+
<MainExamples>
109+
<ExamplesGroup>{pages.map((item) => renderItem(item, getThumbnail))}</ExamplesGroup>
110+
{categories.map((item) => renderCategory(item, getThumbnail))}
111+
</MainExamples>
112+
);
113+
}

‎modules/docusaurus-website/src/components/home.jsx

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
import React from 'react';
2+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
3+
import styled from 'styled-components';
4+
import {isMobile} from './common.js';
5+
6+
export const Banner = styled.section`
7+
position: relative;
8+
height: 30rem;
9+
background: var(--ifm-color-gray-400);
10+
color: var(--ifm-color-gray-900);
11+
z-index: 0;
12+
${isMobile} {
13+
height: 80vh;
14+
}
15+
`;
16+
17+
export const Container = styled.div`
18+
position: relative;
19+
padding: 2rem;
20+
max-width: 80rem;
21+
width: 100%;
22+
height: 100%;
23+
margin: 0;
24+
`;
25+
26+
export const BannerContainer = styled(Container)`
27+
position: absolute;
28+
bottom: 0;
29+
height: auto;
30+
padding-left: 4rem;
31+
z-index: 0;
32+
pointer-events: none;
33+
`;
34+
35+
export const HeroExampleContainer = styled.div`
36+
position: absolute;
37+
top: 0;
38+
left: 0;
39+
right: 0;
40+
bottom: 0;
41+
z-index: -1;
42+
`;
43+
44+
export const Section = styled.section`
45+
&:nth-child(2n + 1) {
46+
background: var(--ifm-color-gray-300);
47+
}
48+
`;
49+
50+
export const ProjectName = styled.h1`
51+
font-size: 5em;
52+
line-height: 1;
53+
text-transform: uppercase;
54+
letter-spacing: 4px;
55+
font-weight: 700;
56+
margin: 0;
57+
margin-bottom: 16px;
58+
`;
59+
60+
export const GetStartedLink = styled.a`
61+
pointer-events: all;
62+
font-size: 12px;
63+
line-height: 44px;
64+
letter-spacing: 2px;
65+
font-weight: bold;
66+
margin: 24px 0;
67+
padding: 0 4rem;
68+
pointer-events: all;
69+
display: inline-block;
70+
text-decoration: none;
71+
transition:
72+
background-color 250ms ease-in,
73+
color 250ms ease-in;
74+
border: solid 2px var(--ifm-color-primary);
75+
color: var(--ifm-color-gray-900);
76+
border-image: linear-gradient(
77+
to right,
78+
var(--ifm-color-gray-700) 0%,
79+
var(--ifm-color-gray-400) 100%
80+
);
81+
border-image-slice: 2;
82+
&:visited {
83+
color: var(--ifm-color-gray-900);
84+
}
85+
&:active {
86+
color: var(--ifm-color-white);
87+
}
88+
&:hover {
89+
color: var(--ifm-color-white);
90+
background-color: var(--ifm-color-primary);
91+
}
92+
`;
93+
94+
export default function renderPage({HeroExample, children}) {
95+
const {siteConfig} = useDocusaurusContext();
96+
97+
// Note: The Layout "wrapper" component adds header and footer etc
98+
return (
99+
<>
100+
<Banner>
101+
<HeroExampleContainer>{HeroExample && <HeroExample />}</HeroExampleContainer>
102+
<BannerContainer>
103+
<ProjectName>{siteConfig.title}</ProjectName>
104+
<p>{siteConfig.tagline}</p>
105+
<GetStartedLink href="./docs/developer-guide/get-started">GET STARTED</GetStartedLink>
106+
</BannerContainer>
107+
</Banner>
108+
{children}
109+
</>
110+
);
111+
}

‎modules/docusaurus-website/src/components/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export {default as ExamplesIndex} from './examples-index.js';
2+
export {default as Home} from './home.js';
3+
export {default as Spinner} from './spinner.js';
4+
export {default as InfoPanel} from './info-panel.js';

0 commit comments

Comments
 (0)