mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-28 16:37:07 +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 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
|
||||||
|
});
|
||||||
|
|
|
@ -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 */
|
||||||
|
|
|
@ -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 = {};
|
||||||
|
|
|
@ -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}>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue