3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-09 15:17:23 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): implement theme component overriding (#1435)

Browse source 
* feat(v2): implement component overriding

* siteDir theme overriding should work for > 1 level directory

* fallback for essential component like Loading

* rename default -> classic
This commit is contained in:
Yangshun Tay 2019-05-06 05:25:04 -07:00 • committed by Endi
parent 1697f9cebb
commit eedd4c481c
38 changed files with 529 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

11
packages/docusaurus-plugin-content-docs/src/index.js
View file

@ -153,6 +153,17 @@ class DocusaurusPluginContentDocs {
configureWebpack(config, isServer, {getBabelLoader, getCacheLoader}) {
return {
resolve: {
alias: {
'@theme/DocItem': path.resolve(__dirname, './theme/DocItem'),
'@theme/DocPage': path.resolve(__dirname, './theme/DocPage'),
'@theme/DocPaginator': path.resolve(
__dirname,
'./theme/DocPaginator',
),
'@theme/DocSidebar': path.resolve(__dirname, './theme/DocSidebar'),
},
},
module: {
rules: [
{

64
packages/docusaurus-plugin-content-docs/src/theme/DocItem/index.js Normal file
View file

@ -0,0 +1,64 @@
/**
* 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 from 'react';
import Head from '@docusaurus/Head';
import DocPaginator from '@theme/DocPaginator';
import styles from './styles.module.css';
function Headings({headings, isChild}) {
if (!headings.length) return null;
return (
<ul className={isChild ? 'contents' : 'contents contents__left-border'}>
{headings.map(heading => (
<li key={heading.id}>
<a href={`#${heading.id}`} className="contents__link">
{heading.value}
</a>
<Headings isChild headings={heading.children} />
</li>
))}
</ul>
);
}
function DocItem(props) {
const {metadata, content: DocContent, docsMetadata} = props;
return (
<div className={styles.docBody}>
<Head>
{metadata && metadata.title && <title>{metadata.title}</title>}
</Head>
<div className="container margin-vert--lg">
<div className="row">
<div className="col col--8">
<header>
<h1 className="margin-bottom--lg">{metadata.title}</h1>
</header>
<article>
<div className="markdown">
<DocContent />
</div>
</article>
<div className="margin-vert--lg" />
<DocPaginator docsMetadata={docsMetadata} metadata={metadata} />
</div>
<div className="col col--3 col--offset-1">
{DocContent.rightToc && <Headings headings={DocContent.rightToc} />}
</div>
</div>
</div>
</div>
);
}
export default DocItem;

10
packages/docusaurus-plugin-content-docs/src/theme/DocItem/styles.module.css Normal file
View file

@ -0,0 +1,10 @@
/**
* 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.
*/
.docBody {
min-height: calc(100vh - 50px);
}

34
packages/docusaurus-plugin-content-docs/src/theme/DocPage/index.js Normal file
View file

@ -0,0 +1,34 @@
/**
* 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 from 'react';
import {renderRoutes} from 'react-router-config';
import Layout from '@theme/Layout'; // eslint-disable-line
import DocSidebar from '@theme/DocSidebar';
function DocPage(props) {
const {route, docsMetadata, location} = props;
return (
<Layout noFooter>
<div className="container container--fluid">
<div className="row">
<div className="col col--3">
<DocSidebar docsMetadata={docsMetadata} location={location} />
</div>
<div className="col col--9">
{renderRoutes(route.routes, {docsMetadata})}
</div>
</div>
</div>
</Layout>
);
}
export default DocPage;

44
packages/docusaurus-plugin-content-docs/src/theme/DocPaginator/index.js Normal file
View file

@ -0,0 +1,44 @@
/**
* 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 from 'react';
import Link from '@docusaurus/Link';
function DocPaginator(props) {
const {
docsMetadata: {docs},
metadata,
} = props;
return (
<div className="row">
<div className="col col--6">
{metadata.previous && docs[metadata.previous] && (
<Link
className="button button--secondary"
to={docs[metadata.previous].permalink}>
<i className="fas fa-arrow-left" />
&nbsp;&nbsp;
{metadata.previous_title}
</Link>
)}
</div>
<div className="col col--6 text--right">
{metadata.next && docs[metadata.next] && (
<Link
className="button button--secondary"
to={docs[metadata.next].permalink}>
{metadata.next_title}&nbsp;&nbsp;
<i className="fas fa-arrow-right" />
</Link>
)}
</div>
</div>
);
}
export default DocPaginator;

88
packages/docusaurus-plugin-content-docs/src/theme/DocSidebar/index.js Normal file
View file

@ -0,0 +1,88 @@
/**
* 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 from 'react';
import Link from '@docusaurus/Link'; // eslint-disable-line
import './styles.css';
function DocSidebar(props) {
const {docsMetadata, location} = props;
const id =
docsMetadata.permalinkToId[location.pathname] ||
docsMetadata.permalinkToId[location.pathname.replace(/\/$/, '')];
const metadata = docsMetadata.docs[id] || {};
const {sidebar} = metadata;
if (!sidebar) {
return null;
}
const thisSidebar = docsMetadata.docsSidebars[sidebar];
if (!thisSidebar) {
throw new Error(`Can not find ${sidebar} config`);
}
const convertDocLink = item => {
const linkID = item.id;
const linkMetadata = docsMetadata.docs[linkID];
if (!linkMetadata) {
throw new Error(
`Improper sidebars file, document with id '${linkID}' not found.`,
);
}
return {
type: 'link',
label: linkMetadata.sidebar_label || linkMetadata.title,
href: linkMetadata.permalink,
};
};
const renderItem = item => {
switch (item.type) {
case 'category':
return (
<li className="menu__list-item" key={item.label}>
<a className="menu__link" href="#!">
{item.label}
</a>
<ul className="menu__list">{item.items.map(renderItem)}</ul>
</li>
);
case 'link':
return (
<li className="menu__list-item" key={item.label}>
<Link className="menu__link" to={item.href}>
{item.label}
</Link>
</li>
);
case 'ref':
default:
return renderItem(convertDocLink(item));
}
};
return (
<div className="container margin-vert--lg">
<div className="menu menu--responsive sidebar">
<ul className="menu__list">
{thisSidebar.map(item => renderItem(item, {root: true}))}
</ul>
</div>
</div>
);
}
export default DocSidebar;

21
packages/docusaurus-plugin-content-docs/src/theme/DocSidebar/styles.css Normal file
View file

@ -0,0 +1,21 @@
/**
* 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.
*/
@media (min-width: 996px) {
.sidebar {
border-right: 1px solid #dadde1;
bottom: 0;
box-sizing: border-box;
padding: 2rem 0.25rem 2rem 2rem;
left: 0;
position: fixed;
overflow-x: hidden;
overflow-y: auto;
top: var(--ifm-navbar-height);
width: 20rem;
}
}