3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-08-02 16:29:47 +02:00
Code Issues Projects Releases Packages Wiki Activity

refactor(v2): use React hooks! (#1072)

Browse source
This commit is contained in:
Yangshun Tay 2018-10-27 00:06:05 -07:00 • committed by Endilie Yacop Sucipto
parent f84332d0a0
commit 40f620047a
4 changed files with 145 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

2
v2/.eslintrc.js
View file

@ -17,6 +17,7 @@ module.exports = {
node: true,
},
extends: ['airbnb', 'prettier', 'prettier/react'],
plugins: ['react-hooks'],
rules: {
'no-console': OFF,
'func-names': OFF,
@ -27,5 +28,6 @@ module.exports = {
'react/destructuring-assignment': OFF, // Too many lines.
'import/no-unresolved': WARNING, // Because it couldn't resolve webpack alias.
'react/prefer-stateless-function': WARNING,
'react-hooks/rules-of-hooks': ERROR,
},
};

7
v2/package.json
View file

@ -26,7 +26,7 @@
"eject": "node bin/docusaurus eject website",
"deploy": "node bin/docusaurus deploy website",
"prettier": "prettier --config ../.prettierrc --write \"**/*.js\"",
"lint": "eslint --cache \"lib/**/*.js\" \"bin/**/*.js\" \"test/**/*.js\"",
"lint": "eslint --cache \"{lib,bin,test,website}/**/*.js\"",
"test": "jest --config test/jest.config.js"
},
"bugs": {
@ -40,6 +40,7 @@
"eslint-plugin-import": "^2.12.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
"eslint-plugin-react": "^7.11.1",
"eslint-plugin-react-hooks": "^0.0.0",
"jest": "^23.4.2",
"prettier": "^1.13.7"
},
@ -74,8 +75,8 @@
"mini-css-extract-plugin": "^0.4.1",
"portfinder": "^1.0.13",
"prismjs": "^1.15.0",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react": "^16.7.0-alpha.0",
"react-dom": "^16.7.0-alpha.0",
"react-helmet": "^5.2.0",
"react-loadable": "^5.5.0",
"react-router-config": "^1.0.0-beta.4",

240
v2/website/pages/index.js
View file

@ -5,62 +5,63 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {useEffect, useState} from 'react';
import Helmet from 'react-helmet';
import classnames from 'classnames';
import styles from './styles.module.css';
const FEATURE_INTERVAL = 3000;
const FEATURES = [
{
title: 'Powered by Markdown',
description: (
<>
<p>
Save time and focus on your projects documentation. Simply write docs
and blog posts with Markdown and Docusaurus will publish a set of static
html files ready to serve.
</>
</p>
),
icon: '/img/markdown.png',
},
{
title: 'Built Using React',
description: (
<>
<p>
Extend or customize your project's layout by reusing React. Docusaurus
can be extended while reusing the same header and footer.
</>
</p>
),
icon: '/img/react.svg',
},
{
title: 'Ready for Translations',
description: (
<>
<p>
Localization comes pre-configured. Use Crowdin to translate your docs
into over 70 languages.
</>
</p>
),
icon: '/img/translation.svg',
},
{
title: 'Document Versioning',
description: (
<>
<p>
Support users on all versions of your project. Document versioning helps
you keep documentation in sync with project releases.
</>
</p>
),
icon: '/img/versioning.svg',
},
{
title: 'Document Search',
description: (
<>
<p>
Make it easy for your community to find what they need in your
documentation. We proudly support Algolia documentation search.
</>
</p>
),
icon: '/img/search.svg',
},
@ -72,14 +73,14 @@ const QUOTES = [
name: 'Christopher "vjeux" Chedeau',
title: 'Lead Prettier Developer',
text: (
<>
<p>
I've helped open source many projects at Facebook and every one needed a
website. They all had very similar constraints: the documentation should
be written in markdown and be deployed via GitHub pages. None of the
existing solutions were great, so I hacked my own and then forked it
whenever we needed a new website. I’m so glad that Docusaurus now exists
so that I don’t have to spend a week each time spinning up a new one.
</>
</p>
),
},
{
@ -87,12 +88,12 @@ const QUOTES = [
name: 'Hector Ramos',
title: 'Lead React Native Advocate',
text: (
<>
<p>
Open source contributions to the React Native docs have skyrocketed
after our move to Docusaurus. The docs are now hosted on a small repo in
plain markdown, with none of the clutter that a typical static site
generator would require. Thanks Slash!
</>
</p>
),
},
{
@ -100,130 +101,117 @@ const QUOTES = [
name: 'Ricky Vetter',
title: 'ReasonReact Developer',
text: (
<>
<p>
Docusaurus has been a great choice for the ReasonML family of projects.
It makes our documentation consistent, i18n-friendly, easy to maintain,
and friendly for new contributors.
</>
</p>
),
},
];
export default class Home extends React.Component {
constructor(props) {
super(props);
this.state = {featureIndex: 0};
}
function Home() {
const [featureIndex, setFeatureIndex] = useState(0);
useEffect(() => {
const timer = window.setInterval(() => {
setFeatureIndex(
prevFeatureIndex => (prevFeatureIndex + 1) % FEATURES.length,
);
}, FEATURE_INTERVAL);
return () => {
window.clearInterval(timer);
};
}, []);
componentDidMount() {
this.interval = setInterval(() => {
this.setState(prevState => ({
featureIndex: (prevState.featureIndex + 1) % FEATURES.length,
}));
}, 3000);
}
componentWillUnmount() {
clearInterval(this.interval);
}
render() {
return (
<div>
<Helmet>
<title>Docusaurus</title>
</Helmet>
<div className={classnames(styles.section, styles.banner)}>
<div className={classnames(styles.sectionInner, styles.bannerInner)}>
<h1 className={styles.header}>Docusaurus</h1>
<h2 className={styles.subtitle}>
Easy to maintain Open Source
<br />
Documentation websites
</h2>
<div className={styles.headerLinksContainer}>
<a className={styles.headerLink} href="">
Get Started
</a>
<a
className={classnames(styles.headerLink, styles.gitHubLink)}
href="https://github.com/facebook/docusaurus"
target="_blank">
GitHub
</a>
<div />
</div>
return (
<div>
<Helmet key={featureIndex}>
<title>Docusaurus</title>
</Helmet>
<div className={classnames(styles.section, styles.banner)}>
<div className={classnames(styles.sectionInner, styles.bannerInner)}>
<h1 className={styles.header}>Docusaurus</h1>
<h2 className={styles.subtitle}>
Easy to maintain Open Source
<br />
Documentation websites
</h2>
<div className={styles.headerLinksContainer}>
<a className={styles.headerLink} href="">
Get Started
</a>
<a
className={classnames(styles.headerLink, styles.gitHubLink)}
href="https://github.com/facebook/docusaurus"
target="_blank">
GitHub
</a>
<div />
</div>
</div>
<div className={styles.section}>
<div className={styles.sectionInner}>
<div className={styles.row}>
<div className={styles.column}>
<ul className={styles.featureList}>
{FEATURES.map((feature, index) => (
<li
className={styles.featureListItem}
key={feature.title}
onClick={() => {
this.setState({
featureIndex: index,
});
}}>
<a
className={classnames(styles.featureListLink, {
[styles.featureListLinkSelected]:
index === this.state.featureIndex,
})}
role="button">
{feature.title}
</a>
</li>
))}
</ul>
</div>
<div className={styles.column}>
{(() => {
const feature = FEATURES[this.state.featureIndex];
return (
<div>
<div className={styles.featureIconContainer}>
<img
className={styles.featureIcon}
src={feature.icon}
/>
</div>
<h3 className={styles.featureTitle}>{feature.title}</h3>
<p>{feature.description}</p>
</div>
<div className={styles.section}>
<div className={styles.sectionInner}>
<div className={styles.row}>
<div className={styles.column}>
<ul className={styles.featureList}>
{FEATURES.map((feature, index) => (
<li
className={styles.featureListItem}
key={feature.title}
onClick={() => {
setFeatureIndex(index);
}}>
<a
className={classnames(styles.featureListLink, {
[styles.featureListLinkSelected]:
index === featureIndex,
})}
role="button">
{feature.title}
</a>
</li>
))}
</ul>
</div>
<div className={styles.column}>
{(() => {
const feature = FEATURES[featureIndex];
return (
<div>
<div className={styles.featureIconContainer}>
<img className={styles.featureIcon} src={feature.icon} />
</div>
);
})()}
</div>
</div>
</div>
</div>
<div
className={classnames(
styles.section,
styles.sectionAlt,
styles.quotes,
)}>
<div className={styles.sectionInner}>
<div className={styles.row}>
{QUOTES.map((quote, index) => (
<div key={index} className={styles.column}>
<img
className={styles.quoteThumbnail}
src={quote.thumbnail}
/>
<h3 className={styles.quoteName}>{quote.name}</h3>
<h4 className={styles.quoteTitle}>{quote.title}</h4>
<p className={styles.quoteText}>{quote.text}</p>
</div>
))}
<h3 className={styles.featureTitle}>{feature.title}</h3>
<p>{feature.description}</p>
</div>
);
})()}
</div>
</div>
</div>
</div>
);
}
<div
className={classnames(
styles.section,
styles.sectionAlt,
styles.quotes,
)}>
<div className={styles.sectionInner}>
<div className={styles.row}>
{QUOTES.map(quote => (
<div className={styles.column} key={quote.name}>
<img className={styles.quoteThumbnail} src={quote.thumbnail} />
<h3 className={styles.quoteName}>{quote.name}</h3>
<h4 className={styles.quoteTitle}>{quote.title}</h4>
<p className={styles.quoteText}>{quote.text}</p>
</div>
))}
</div>
</div>
</div>
</div>
);
}
export default Home;

93
v2/yarn.lock
View file

@ -1040,10 +1040,6 @@ arrify@^1.0.0, arrify@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
asap@~2.0.3:
version "2.0.6"
resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
asn1.js@^4.0.0:
version "4.10.1"
resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-4.10.1.tgz#b9c2bf5805f1e64aadeed6df3a2bfafb5a73f5a0"
@ -1898,10 +1894,6 @@ copy-descriptor@^0.1.0:
version "0.1.1"
resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d"
core-js@^1.0.0:
version "1.2.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
core-js@^2.4.0, core-js@^2.5.0, core-js@^2.5.7:
version "2.5.7"
resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e"
@ -2363,12 +2355,6 @@ emojis-list@^2.0.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
encoding@^0.1.11:
version "0.1.12"
resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.12.tgz#538b66f3ee62cd1ab51ec323829d1f9480c74beb"
dependencies:
iconv-lite "~0.4.13"
end-of-stream@^1.0.0, end-of-stream@^1.1.0:
version "1.4.1"
resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43"
@ -2527,6 +2513,10 @@ eslint-plugin-jsx-a11y@^6.0.3:
has "^1.0.3"
jsx-ast-utils "^2.0.1"
eslint-plugin-react-hooks@^0.0.0:
version "0.0.0"
resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-0.0.0.tgz#9988f14082a159931c3dfa9ba699130457da927a"
eslint-plugin-react@^7.11.1:
version "7.11.1"
resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.11.1.tgz#c01a7af6f17519457d6116aa94fc6d2ccad5443c"
@ -2834,18 +2824,6 @@ fb-watchman@^2.0.0:
dependencies:
bser "^2.0.0"
fbjs@^0.8.16:
version "0.8.17"
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
dependencies:
core-js "^1.0.0"
isomorphic-fetch "^2.1.1"
loose-envify "^1.0.0"
object-assign "^4.1.0"
promise "^7.1.1"
setimmediate "^1.0.5"
ua-parser-js "^0.7.18"
figures@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/figures/-/figures-2.0.0.tgz#3ab1a2d2a62c8bfb431a0c94cb797a2fce27c962"
@ -3424,7 +3402,7 @@ iconv-lite@0.4.19:
version "0.4.19"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
iconv-lite@^0.4.17, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
iconv-lite@^0.4.17, iconv-lite@^0.4.4:
version "0.4.23"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.23.tgz#297871f63be507adcfbfca715d0cd0eed84e9a63"
dependencies:
@ -3772,7 +3750,7 @@ is-root@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/is-root/-/is-root-1.0.0.tgz#07b6c233bc394cd9d02ba15c966bd6660d6342d5"
is-stream@^1.0.0, is-stream@^1.0.1, is-stream@^1.1.0:
is-stream@^1.0.0, is-stream@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
@ -3818,13 +3796,6 @@ isobject@^3.0.0, isobject@^3.0.1:
version "3.0.1"
resolved "https://registry.yarnpkg.com/isobject/-/isobject-3.0.1.tgz#4e431e92b11a9731636aa1f9c8d1ccbcfdab78df"
isomorphic-fetch@^2.1.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
dependencies:
node-fetch "^1.0.1"
whatwg-fetch ">=0.10.0"
isstream@~0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@ -5008,13 +4979,6 @@ no-case@^2.2.0:
dependencies:
lower-case "^1.1.1"
node-fetch@^1.0.1:
version "1.7.3"
resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
dependencies:
encoding "^0.1.11"
is-stream "^1.0.1"
node-int64@^0.4.0:
version "0.4.0"
resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
@ -5629,12 +5593,6 @@ promise-inflight@^1.0.1:
version "1.0.1"
resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
promise@^7.1.1:
version "7.3.1"
resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
dependencies:
asap "~2.0.3"
prompts@^0.1.9:
version "0.1.13"
resolved "https://registry.yarnpkg.com/prompts/-/prompts-0.1.13.tgz#7fad7ee1c6cafe49834ca0b2a6a471262de57620"
@ -5642,7 +5600,7 @@ prompts@^0.1.9:
kleur "^2.0.1"
sisteransi "^0.1.1"
prop-types@^15.5.0, prop-types@^15.5.3, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
prop-types@^15.5.0, prop-types@^15.5.3, prop-types@^15.5.4, prop-types@^15.6.1, prop-types@^15.6.2:
version "15.6.2"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
dependencies:
@ -5775,14 +5733,14 @@ react-dev-utils@^5.0.1:
strip-ansi "3.0.1"
text-table "0.2.0"
react-dom@^16.4.1:
version "16.4.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.4.1.tgz#7f8b0223b3a5fbe205116c56deb85de32685dad6"
react-dom@^16.7.0-alpha.0:
version "16.7.0-alpha.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.7.0-alpha.0.tgz#8379158d4c76d63c989f325f45dfa5762582584f"
dependencies:
fbjs "^0.8.16"
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.0"
prop-types "^15.6.2"
scheduler "^0.11.0-alpha.0"
react-error-overlay@^4.0.0:
version "4.0.0"
@ -5845,14 +5803,14 @@ react-youtube@^7.6.0:
prop-types "^15.5.3"
youtube-player "^5.4.0"
react@^16.4.1:
version "16.4.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.4.1.tgz#de51ba5764b5dbcd1f9079037b862bd26b82fe32"
react@^16.7.0-alpha.0:
version "16.7.0-alpha.0"
resolved "https://registry.yarnpkg.com/react/-/react-16.7.0-alpha.0.tgz#e2ed4abe6f268c9b092a1d1e572953684d1783a9"
dependencies:
fbjs "^0.8.16"
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.0"
prop-types "^15.6.2"
scheduler "^0.11.0-alpha.0"
read-pkg-up@^1.0.1:
version "1.0.1"
@ -6283,6 +6241,13 @@ sax@^1.2.4:
version "1.2.4"
resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
scheduler@^0.11.0-alpha.0:
version "0.11.0-alpha.0"
resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.0-alpha.0.tgz#7b132c726608993471db07866f2d59a52b9e190b"
dependencies:
loose-envify "^1.1.0"
object-assign "^4.1.1"
schema-utils@^0.4.4, schema-utils@^0.4.5:
version "0.4.5"
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.5.tgz#21836f0608aac17b78f9e3e24daff14a5ca13a3e"
@ -6334,7 +6299,7 @@ set-value@^2.0.0:
is-plain-object "^2.0.3"
split-string "^3.0.1"
setimmediate@^1.0.4, setimmediate@^1.0.5:
setimmediate@^1.0.4:
version "1.0.5"
resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
@ -6927,10 +6892,6 @@ typedarray@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
ua-parser-js@^0.7.18:
version "0.7.18"
resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.18.tgz#a7bfd92f56edfb117083b69e31d2aa8882d4b1ed"
uglify-es@^3.3.4:
version "3.3.9"
resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677"
@ -7396,10 +7357,6 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
dependencies:
iconv-lite "0.4.19"
whatwg-fetch@>=0.10.0:
version "2.0.4"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
whatwg-mimetype@^2.0.0, whatwg-mimetype@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.1.0.tgz#f0f21d76cbba72362eb609dbed2a30cd17fcc7d4"