3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-02 19:03:38 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): rewrite docs loading strategy (#1092)

Browse source 
* feat(v2): rewrite docs loading strategy

* Prettify

* Lint

* Allow resolving from library root

* minor changes, refactor

* copyright header
This commit is contained in:
Yangshun Tay 2018-11-07 00:39:47 -08:00 • committed by Endilie Yacop Sucipto
parent c9243e8922
commit 13a21b2374
36 changed files with 520 additions and 327 deletions
Download patch file Download diff file Expand all files Collapse all files

67
v2/lib/theme/BlogPage/index.js
View file

@ -5,46 +5,39 @@
* LICENSE file in the root directory of this source tree.
*/
/* eslint-disable */
import React from 'react';
import React, {useContext} from 'react';
import {Link} from 'react-router-dom';
import Helmet from 'react-helmet';
import Loadable from 'react-loadable';
import Head from '@docusaurus/head';
import Layout from '@theme/Layout'; // eslint-disable-line
import BlogPost from '@theme/BlogPost'; // eslint-disable-line
import Loading from '@theme/Loading';
export default class BlogPage extends React.Component {
render() {
const {
metadata,
blogMetadatas,
language,
children,
siteConfig = {},
} = this.props;
const {posts} = metadata;
import DocusaurusContext from '@docusaurus/context';
const {baseUrl, favicon} = siteConfig;
return (
<Layout {...this.props}>
<Helmet>
<title>{'Blog'}</title>
{favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
{language && <html lang={language} />}
{language && <meta name="docsearch:language" content={language} />}
</Helmet>
<div>
<ul>
{blogMetadatas.map(metadata => (
<li key={metadata.permalink}>
<Link to={metadata.permalink}>{metadata.permalink}</Link>
</li>
))}
</ul>
{children}
</div>
</Layout>
);
}
function BlogPage(props) {
const context = useContext(DocusaurusContext);
const {blogMetadatas, language, siteConfig = {}} = context;
const {baseUrl, favicon} = siteConfig;
return (
<Layout>
<Head>
<title>Blog</title>
{favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
{language && <html lang={language} />}
{language && <meta name="docsearch:language" content={language} />}
</Head>
<div>
<ul>
{blogMetadatas.map(metadata => (
<li key={metadata.permalink}>
<Link to={metadata.permalink}>{metadata.permalink}</Link>
</li>
))}
</ul>
{props.children}
</div>
</Layout>
);
}
export default BlogPage;

29
v2/lib/theme/BlogPost/index.js
View file

@ -5,18 +5,23 @@
* LICENSE file in the root directory of this source tree.
*/
/* eslint-disable */
import React from 'react';
import {Link} from 'react-router-dom';
import Helmet from 'react-helmet';
import Head from '@docusaurus/head';
import classnames from 'classnames';
import Layout from '@theme/Layout'; // eslint-disable-line
import DocusaurusContext from '@docusaurus/context';
import styles from './styles.module.css';
export default class BlogPost extends React.Component {
class BlogPost extends React.Component {
renderPostHeader() {
const {metadata, siteConfig} = this.props;
const {baseUrl} = siteConfig;
const {metadata} = this.context;
if (!metadata) {
return null;
}
const {
date,
author,
@ -80,19 +85,23 @@ export default class BlogPost extends React.Component {
}
render() {
const {metadata, children, siteConfig = {}} = this.props;
const {metadata = {}, siteConfig = {}} = this.context;
const {baseUrl, favicon} = siteConfig;
const {language, title} = metadata;
return (
<Layout {...this.props}>
<Helmet defaultTitle={siteConfig.title}>
<Layout>
<Head defaultTitle={siteConfig.title}>
{title && <title>{title}</title>}
{favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
{language && <html lang={language} />}
</Helmet>
</Head>
{this.renderPostHeader()}
{children}
{this.props.children}
</Layout>
);
}
}
BlogPost.contextType = DocusaurusContext;
export default BlogPost;

87
v2/lib/theme/Doc/index.js
View file

@ -5,74 +5,41 @@
* LICENSE file in the root directory of this source tree.
*/
/* eslint-disable */
import React from 'react';
import {Link} from 'react-router-dom';
import Helmet from 'react-helmet';
import React, {useContext} from 'react';
import {renderRoutes} from 'react-router-config';
import Head from '@docusaurus/head';
import DocsPaginator from '@theme/DocsPaginator'; // eslint-disable-line
import Footer from '@theme/Footer'; // eslint-disable-line
import Navbar from '@theme/Navbar'; // eslint-disable-line
import Sidebar from '@theme/Sidebar'; // eslint-disable-line
import DocusaurusContext from '@docusaurus/context';
import styles from './styles.module.css';
class Doc extends React.Component {
render() {
const {
docsMetadatas,
docsSidebars,
env,
location,
metadata,
pagesMetadatas,
siteConfig = {},
route,
} = this.props;
const {language, version} = metadata;
const {baseUrl, favicon} = siteConfig;
return (
<div>
<Helmet>
<title>{(metadata && metadata.title) || siteConfig.title}</title>
{favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
{language && <html lang={language} />}
{language && <meta name="docsearch:language" content={language} />}
{version && <meta name="docsearch:version" content={version} />}
</Helmet>
<Navbar
docsMetadatas={docsMetadatas}
env={env}
metadata={metadata}
siteConfig={siteConfig}
/>
<Sidebar
docsMetadatas={docsMetadatas}
docsSidebars={docsSidebars}
metadata={metadata}
/>
<div className={styles.mainContainer}>
<div className={styles.docContainer}>
<div className={styles.docContent}>
<h1>{metadata.title}</h1>
{this.props.children}
</div>
<div className={styles.paginatorContainer}>
<DocsPaginator
docsMetadatas={docsMetadatas}
metadata={metadata}
/>
</div>
</div>
<Footer
docsMetadatas={docsMetadatas}
location={location}
pagesMetadatas={pagesMetadatas}
/>
</div>
function Doc(props) {
const {metadata = {}, siteConfig = {}} = useContext(DocusaurusContext);
const {route} = props;
const {language, version} = metadata;
const {baseUrl, favicon} = siteConfig;
return (
<div>
<Head>
<title>{(metadata && metadata.title) || siteConfig.title}</title>
{favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
{language && <html lang={language} />}
{language && <meta name="docsearch:language" content={language} />}
{version && <meta name="docsearch:version" content={version} />}
</Head>
<Navbar />
<Sidebar />
<div className={styles.mainContainer}>
<div className={styles.docContainer}>{renderRoutes(route.routes)}</div>
<Footer />
</div>
);
}
</div>
);
}
export default Doc;

8
v2/lib/theme/Doc/styles.module.css
View file

@ -13,11 +13,3 @@
flex-grow: 1;
padding: 0 40px;
}
.docContent {
margin-bottom: 48px;
}
.paginatorContainer {
margin: 48px 0;
}

37
v2/lib/theme/DocBody/index.js Normal file
View file

@ -0,0 +1,37 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
import React, {useContext, useEffect} from 'react';
import DocsPaginator from '@theme/DocsPaginator'; // eslint-disable-line
import DocusaurusContext from '@docusaurus/context';
import styles from './styles.module.css';
function DocBody(props) {
const {children, metadata} = props;
const context = useContext(DocusaurusContext);
useEffect(() => {
context.setContext({
metadata,
});
}, []);
return (
<div>
<div className={styles.docContent}>
<h1>{metadata.title}</h1>
{children}
</div>
<div className={styles.paginatorContainer}>
<DocsPaginator />
</div>
</div>
);
}
export default DocBody;

15
v2/lib/theme/DocBody/styles.module.css Normal file
View file

@ -0,0 +1,15 @@
/**
* Copyright (c) 2017-present, Facebook, Inc.
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
.docContent {
margin-bottom: 48px;
min-height: calc(100vh - 50px);
}
.paginatorContainer {
margin: 48px 0;
}

87
v2/lib/theme/DocsPaginator/index.js
View file

@ -5,49 +5,56 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {useContext} from 'react';
import {Link} from 'react-router-dom';
import DocusaurusContext from '@docusaurus/context';
import styles from './styles.module.css';
export default class DocsPaginator extends React.Component {
render() {
const {docsMetadatas, metadata} = this.props;
return (
<div className={styles.paginatorContainer}>
<div>
{metadata.previous &&
docsMetadatas[metadata.previous] && (
<Link
className={styles.paginatorLink}
to={docsMetadatas[metadata.previous].permalink}>
<svg className={styles.arrow} viewBox="0 0 24 24">
<g>
<line x1="19" y1="12" x2="5" y2="12" />
<polyline points="12 19 5 12 12 5" />
</g>
</svg>{' '}
<span className={styles.label}>{metadata.previous_title}</span>
</Link>
)}
</div>
<div className={styles.paginatorRightContainer}>
{metadata.next &&
docsMetadatas[metadata.next] && (
<Link
className={styles.paginatorLink}
to={docsMetadatas[metadata.next].permalink}>
<span className={styles.label}>{metadata.next_title}</span>{' '}
<svg className={styles.arrow} viewBox="0 0 24 24">
<g>
<line x1="5" y1="12" x2="19" y2="12" />
<polyline points="12 5 19 12 12 19" />
</g>
</svg>
</Link>
)}
</div>
</div>
);
function DocsPaginator() {
const context = useContext(DocusaurusContext);
const {docsMetadatas, metadata} = context;
if (!metadata) {
return null;
}
return (
<div className={styles.paginatorContainer}>
<div>
{metadata.previous &&
docsMetadatas[metadata.previous] && (
<Link
className={styles.paginatorLink}
to={docsMetadatas[metadata.previous].permalink}>
<svg className={styles.arrow} viewBox="0 0 24 24">
<g>
<line x1="19" y1="12" x2="5" y2="12" />
<polyline points="12 19 5 12 12 5" />
</g>
</svg>{' '}
<span className={styles.label}>{metadata.previous_title}</span>
</Link>
)}
</div>
<div className={styles.paginatorRightContainer}>
{metadata.next &&
docsMetadatas[metadata.next] && (
<Link
className={styles.paginatorLink}
to={docsMetadatas[metadata.next].permalink}>
<span className={styles.label}>{metadata.next_title}</span>{' '}
<svg className={styles.arrow} viewBox="0 0 24 24">
<g>
<line x1="5" y1="12" x2="19" y2="12" />
<polyline points="12 5 19 12 12 19" />
</g>
</svg>
</Link>
)}
</div>
</div>
);
}
export default DocsPaginator;

11
v2/lib/theme/Footer/index.js
View file

@ -5,12 +5,17 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {useContext} from 'react';
import {Link} from 'react-router-dom';
import DocusaurusContext from '@docusaurus/context';
import styles from './styles.module.css';
function Footer(props) {
function Footer() {
const context = useContext(DocusaurusContext);
const {pagesMetadatas} = context;
return (
<footer className={styles.footer}>
<section className={styles.footerRow}>
@ -78,7 +83,7 @@ function Footer(props) {
<div className={styles.footerColumn}>
<h3 className={styles.footerColumnTitle}>Pages</h3>
<ul className={styles.footerList}>
{props.pagesMetadatas.map(metadata => (
{pagesMetadatas.map(metadata => (
<li key={metadata.permalink} className={styles.footerListItem}>
<Link className={styles.footerLink} to={metadata.permalink}>
{metadata.permalink}

39
v2/lib/theme/Layout/index.js
View file

@ -12,33 +12,14 @@ import Navbar from '@theme/Navbar'; // eslint-disable-line
import './styles.css';
/* eslint-disable react/prefer-stateless-function */
export default class Layout extends React.Component {
render() {
const {
children,
pagesMetadatas = [],
docsMetadatas = {},
env,
siteConfig,
location,
metadata,
} = this.props;
return (
<div>
<Navbar
docsMetadatas={docsMetadatas}
env={env}
metadata={metadata}
siteConfig={siteConfig}
/>
{children}
<Footer
docsMetadatas={docsMetadatas}
location={location}
pagesMetadatas={pagesMetadatas}
/>
</div>
);
}
function Layout({children}) {
return (
<div>
<Navbar />
{children}
<Footer />
</div>
);
}
export default Layout;

2
v2/lib/theme/Loading/index.js
View file

@ -14,6 +14,7 @@ export default props => {
console.log(props.error);
return <div align="center">Error</div>;
}
if (props.pastDelay) {
return (
<div className={styles.loader}>
@ -22,5 +23,6 @@ export default props => {
</div>
);
}
return null;
};

13
v2/lib/theme/Markdown/index.js
View file

@ -5,13 +5,14 @@
* LICENSE file in the root directory of this source tree.
*/
/* eslint-disable */
import React, {useContext} from 'react';
import Head from '@docusaurus/head';
import React from 'react';
import Helmet from 'react-helmet';
import DocusaurusContext from '@docusaurus/context';
function Markdown(props) {
const {siteConfig} = props;
const context = useContext(DocusaurusContext);
const {siteConfig} = context;
const highlight = Object.assign(
{},
{
@ -30,9 +31,9 @@ function Markdown(props) {
return (
<div>
<Helmet>
<Head>
<link rel="stylesheet" type="text/css" href={highlightThemeURL} />
</Helmet>
</Head>
<div>{props.children}</div>
</div>
);

11
v2/lib/theme/Navbar/index.js
View file

@ -5,14 +5,21 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {useContext} from 'react';
import {NavLink} from 'react-router-dom';
import Search from '@theme/Search';
import DocusaurusContext from '@docusaurus/context';
import styles from './styles.module.css';
function Navbar(props) {
const {siteConfig = {}, env = {}, metadata = {}, docsMetadatas = {}} = props;
const context = useContext(DocusaurusContext);
const {
siteConfig = {},
env = {},
metadata = {},
docsMetadatas = {},
} = context;
const {baseUrl, headerLinks, headerIcon, algolia} = siteConfig;
const {language: thisLanguage, version: thisVersion} = metadata;

28
v2/lib/theme/NotFound.js
View file

@ -8,18 +8,18 @@
import React from 'react';
import Layout from '@theme/Layout';
export default class NotFound extends React.Component {
render() {
return (
<Layout {...this.props}>
<div>404 Page Not Found</div>
<div>
<img
alt="Not found"
src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX3889253.jpg"
/>
</div>
</Layout>
);
}
function NotFound() {
return (
<Layout>
<div>404 Page Not Found</div>
<div>
<img
alt="Not found"
src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX3889253.jpg"
/>
</div>
</Layout>
);
}
export default NotFound;

42
v2/lib/theme/Pages/index.js
View file

@ -5,26 +5,28 @@
* LICENSE file in the root directory of this source tree.
*/
/* eslint-disable */
import React from 'react';
import {Link} from 'react-router-dom';
import Helmet from 'react-helmet';
import React, {useContext} from 'react';
import Head from '@docusaurus/head';
import Layout from '@theme/Layout'; // eslint-disable-line
export default class Pages extends React.Component {
render() {
const {metadata, children, siteConfig = {}} = this.props;
const {baseUrl, favicon} = siteConfig;
const {language} = metadata;
return (
<Layout {...this.props}>
<Helmet defaultTitle={siteConfig.title}>
{favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
{language && <html lang={language} />}
{language && <meta name="docsearch:language" content={language} />}
</Helmet>
{children}
</Layout>
);
}
import DocusaurusContext from '@docusaurus/context';
function Pages({children}) {
const context = useContext(DocusaurusContext);
const {metadata = {}, siteConfig = {}} = context;
const {baseUrl, favicon} = siteConfig;
const {language} = metadata;
return (
<Layout>
<Head defaultTitle={siteConfig.title}>
{favicon && <link rel="shortcut icon" href={baseUrl + favicon} />}
{language && <html lang={language} />}
{language && <meta name="docsearch:language" content={language} />}
</Head>
{children}
</Layout>
);
}
export default Pages;

10
v2/lib/theme/Search/index.js
View file

@ -7,18 +7,20 @@
import React from 'react';
import DocusaurusContext from '@docusaurus/context';
import './styles.css';
class Search extends React.Component {
constructor() {
super();
constructor(props) {
super(props);
this.state = {
enabled: true,
};
}
componentDidMount() {
const {siteConfig = {}, metadata = {}} = this.props;
const {siteConfig = {}, metadata = {}} = this.context;
const {version: thisVersion, language: thisLanguage} = metadata;
const {algolia} = siteConfig;
@ -58,4 +60,6 @@ class Search extends React.Component {
}
}
Search.contextType = DocusaurusContext;
export default Search;

9
v2/lib/theme/Sidebar/index.js
View file

@ -5,14 +5,17 @@
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import React, {useContext} from 'react';
import DocusaurusContext from '@docusaurus/context';
import SidebarLink from './SidebarLink';
import SidebarCategory from './SidebarCategory';
import styles from './styles.module.css';
function Sidebar(props) {
const {metadata, docsSidebars, docsMetadatas} = props;
function Sidebar() {
const context = useContext(DocusaurusContext);
const {metadata = {}, docsSidebars, docsMetadatas} = context;
const {sidebar, language} = metadata;
if (!sidebar) {