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 routes from '@generated/routes'; // eslint-disable-line
import docsMetadatas from '@generated/docsMetadatas'; // 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 pagesMetadatas from '@generated/pagesMetadatas'; // eslint-disable-line
import siteConfig from '@generated/siteConfig'; //eslint-disable-line import siteConfig from '@generated/siteConfig'; //eslint-disable-line
export default () => export default () =>
renderRoutes(routes, {docsMetadatas, pagesMetadatas, siteConfig}); renderRoutes(routes, {
docsMetadatas,
docsSidebars,
pagesMetadatas,
siteConfig
});

View file

@ -144,7 +144,7 @@ module.exports = async function processMetadata(
metadata.id = `version-${version}-${metadata.id}`; metadata.id = `version-${version}-${metadata.id}`;
} }
/* save localized id before adding language on it*/ /* save localized id before adding language on it */
metadata.localized_id = metadata.id; metadata.localized_id = metadata.id;
/* if language */ /* if language */

View file

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

View file

@ -6,13 +6,55 @@ import styles from './styles.css';
import Layout from '@theme/Layout'; // eslint-disable-line import Layout from '@theme/Layout'; // eslint-disable-line
export default class Docs extends React.Component { 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() { render() {
const {route, siteConfig, docsMetadatas, metadata} = this.props; const {
route,
siteConfig,
docsMetadatas,
docsSidebars,
metadata
} = this.props;
return ( return (
<Layout {...this.props}> <Layout {...this.props}>
<Helmet> <Helmet>
<title>{(metadata && metadata.title) || siteConfig.title}</title> <title>{(metadata && metadata.title) || siteConfig.title}</title>
</Helmet> </Helmet>
<div>{this.renderSidebar(metadata, docsSidebars, docsMetadatas)}</div>
<div> <div>
{metadata.previous && {metadata.previous &&
docsMetadatas[metadata.previous] && ( docsMetadatas[metadata.previous] && (
@ -20,8 +62,7 @@ export default class Docs extends React.Component {
<span> {metadata.previous_title}</span> <span> {metadata.previous_title}</span>
</Link> </Link>
)} )}
</div> {' ⚫️ '}
<div>
{metadata.next && {metadata.next &&
docsMetadatas[metadata.next] && ( docsMetadatas[metadata.next] && (
<Link to={docsMetadatas[metadata.next].permalink}> <Link to={docsMetadatas[metadata.next].permalink}>