Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(v2): inline table-of-contents + refactor TOC #3904

Merged
merged 5 commits into from
Dec 11, 2020
Merged

Conversation

slorber
Copy link
Collaborator

@slorber slorber commented Dec 11, 2020

Docusaurus v1 had a feature to add table of contents directly to the body of a document.

https://docusaurus.io/docs/en/doc-markdown#generating-table-of-contents

Put a <AUTOGENERATED_TABLE_OF_CONTENTS> somewhere in a md doc, and it renders an inline TOC.

This is used on Jest, and required for the v2 migration.

image

This is actually pretty easy to implement with MDX, as the TOC tree is already exposed to each md doc thanks to the mdx loader.

import TOCInline from '@theme/TOCInline';

<TOCInline toc={rightToc} />;

It can also display a partial TOC derived from the original TOC, and gives flexibility to the user:

image

Related to: #1549

Doc: https://deploy-preview-3904--docusaurus-2.netlify.app/classic/docs/markdown-features#inline-table-of-contents

Breaking changes

  • MDX variable rightToc renamed to just toc (as the position of the toc depends on the theme, not always on the right
  • TOC theme component prop renamed from headings to toc.

<TOC headings={rightToc}/> becomes <TOC toc={toc}/>

@slorber slorber added the pr: new feature This PR adds a new API or behavior. label Dec 11, 2020
@slorber slorber requested a review from lex111 as a code owner December 11, 2020 14:33
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Dec 11, 2020
@netlify
Copy link

netlify bot commented Dec 11, 2020

✔️ Deploy preview for docusaurus-2 ready!

🔨 Explore the source changes: 2127893

🔍 Inspect the deploy logs: https://app.netlify.com/sites/docusaurus-2/deploys/5fd38cb5a7cc8100086daa56

😎 Browse the preview: https://deploy-preview-3904--docusaurus-2.netlify.app

@github-actions
Copy link

github-actions bot commented Dec 11, 2020

Size Change: +15 B (0%)

Total Size: 154 kB

ℹ️ View Unchanged
Filename Size Change
website/build/blog/2017/12/14/introducing-docusaurus/index.html 20.7 kB -3 B (0%)
website/build/docs/introduction/index.html 180 B 0 B
website/build/index.html 5.82 kB -1 B
website/build/main.********.js 109 kB +19 B (0%)
website/build/styles.********.css 17.5 kB 0 B

compressed-size-action

@slorber slorber added the pr: breaking change Existing sites may not build successfully in the new version. Description contains more details. label Dec 11, 2020
@github-actions
Copy link

⚡️ Lighthouse report for the changes in this PR:

Category Score
🟠 Performance 88
🟢 Accessibility 99
🟢 Best practices 100
🟢 SEO 100
🟢 PWA 95

Lighthouse ran on https://deploy-preview-3904--docusaurus-2.netlify.app/classic/

@slorber slorber merged commit 41ef333 into master Dec 11, 2020
slorber added a commit to jest-website-migration/jest that referenced this pull request Dec 11, 2020
@eightbit
Copy link

Is it possible to add additional indentation levels beyond H3?

@slorber
Copy link
Collaborator Author

slorber commented Dec 12, 2020 via email

@slorber slorber deleted the slorber/inline-toc branch August 17, 2021 17:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA pr: breaking change Existing sites may not build successfully in the new version. Description contains more details. pr: new feature This PR adds a new API or behavior.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants