feat: add docs sidebar

This commit is contained in:
endiliey 2018-09-15 16:19:48 +08:00
parent c132c7445f
commit 85f0fd69c0
4 changed files with 62 additions and 6 deletions

View file

@ -2,8 +2,14 @@ import {renderRoutes} from 'react-router-config';
import routes from '@generated/routes'; // eslint-disable-line
import docsMetadatas from '@generated/docsMetadatas'; // eslint-disable-line
import docsSidebars from '@generated/docsSidebars'; // eslint-disable-line
import pagesMetadatas from '@generated/pagesMetadatas'; // eslint-disable-line
import siteConfig from '@generated/siteConfig'; //eslint-disable-line
export default () =>
renderRoutes(routes, {docsMetadatas, pagesMetadatas, siteConfig});
renderRoutes(routes, {
docsMetadatas,
docsSidebars,
pagesMetadatas,
siteConfig
});

View file

@ -20,11 +20,20 @@ module.exports = async function load(siteDir) {
// docs
const docsDir = path.resolve(siteDir, '..', siteConfig.customDocsPath);
const {docsMetadatas, docsSidebars} = await loadDocs({siteDir, docsDir, env, siteConfig});
const {docsMetadatas, docsSidebars} = await loadDocs({
siteDir,
docsDir,
env,
siteConfig
});
await generate(
'docsMetadatas.js',
`export default ${JSON.stringify(docsMetadatas, null, 2)};`
);
await generate(
'docsSidebars.js',
`export default ${JSON.stringify(docsSidebars, null, 2)};`
);
/* Create source to metadata mapping */
const sourceToMetadata = {};

View file

@ -6,13 +6,55 @@ import styles from './styles.css';
import Layout from '@theme/Layout'; // eslint-disable-line
export default class Docs extends React.Component {
renderSidebar(metadata, docsSidebars, docsMetadatas) {
const {sidebar, language, id: thisID} = metadata;
if (!sidebar || !docsSidebars) {
return null;
}
const thisSidebar = docsSidebars[sidebar];
return (
thisSidebar &&
Object.keys(thisSidebar).map(categoryName => {
return (
<div className="navGroup" key={categoryName}>
<h3 className="navGroupCategoryTitle">{categoryName}</h3>
<ul>
{thisSidebar[categoryName].map(rawLinkID => {
const linkID = (language ? `${language}-` : '') + rawLinkID;
const linkMetadata = docsMetadatas[linkID];
const linkClassName =
linkID === thisID ? 'navListItemActive' : 'navListItem';
return (
linkMetadata && (
<li className={linkClassName} key={linkID}>
<Link className="navItem" to={linkMetadata.permalink}>
{linkMetadata.sidebar_label || linkMetadata.title}
</Link>
</li>
)
);
})}
</ul>
</div>
);
})
);
}
render() {
const {route, siteConfig, docsMetadatas, metadata} = this.props;
const {
route,
siteConfig,
docsMetadatas,
docsSidebars,
metadata
} = this.props;
return (
<Layout {...this.props}>
<Helmet>
<title>{(metadata && metadata.title) || siteConfig.title}</title>
</Helmet>
<div>{this.renderSidebar(metadata, docsSidebars, docsMetadatas)}</div>
<div>
{metadata.previous &&
docsMetadatas[metadata.previous] && (
@ -20,8 +62,7 @@ export default class Docs extends React.Component {
<span> {metadata.previous_title}</span>
</Link>
)}
</div>
<div>
{' ⚫️ '}
{metadata.next &&
docsMetadatas[metadata.next] && (
<Link to={docsMetadatas[metadata.next].permalink}>