mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-28 00:17:14 +02:00
feat: add docs sidebar
This commit is contained in:
parent
c132c7445f
commit
85f0fd69c0
4 changed files with 62 additions and 6 deletions
|
@ -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
|
||||
});
|
||||
|
|
|
@ -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 = {};
|
||||
|
|
|
@ -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}>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue