3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-06-13 08:12:48 +02:00
Code Issues Projects Releases Packages Wiki Activity

feat(v2): support rightToc, emoji, slug for docs (#1382)

Browse source 
* add remark-slug and remark-emoji

* implement right TOC remark plugin

* use rehype-slug ecosystem instead of remark for perf

* first rough implementation for right toc

* nits

* remove unwanted changes

* fix left border styling

* remove depths

* inline snapshot
This commit is contained in:
Endilie Yacop Sucipto 2019-04-23 15:22:11 +07:00 • committed by GitHub
parent 37897ffc96
commit 745f32b010
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
12 changed files with 570 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

48
packages/docusaurus/lib/default-theme/DocBody/index.js
View file

@ -13,6 +13,22 @@ import Head from '@docusaurus/Head';
import styles from './styles.module.css';
const 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 DocBody(props) {
const {metadata, content} = props;
const {language, version} = metadata;
@ -42,37 +58,7 @@ function DocBody(props) {
</div>
</div>
<div className="col col--2 col--offset-1">
<ul className="contents contents__left-border">
<li>
<a className="contents__link" href="#url">
Dummy Text
</a>
</li>
<li>
<a className="contents__link" href="#url">
Dummy Text
</a>
<ul>
<li>
<a
className="contents__link contents__link--active"
href="#url">
Dummy Text
</a>
</li>
<li>
<a className="contents__link" href="#url">
Dummy Text
</a>
</li>
</ul>
</li>
<li>
<a className="contents__link" href="#url">
Dummy Text
</a>
</li>
</ul>
{content.rightToc && <Headings headings={content.rightToc} />}
</div>
</div>
</div>