Skip to content

feat(theme/toc)!: use dynamic toc generation#2018

Merged
SoonIter merged 7 commits intoweb-infra-dev:mainfrom
ktiays:cyx/dynamic-toc
Apr 30, 2025
Merged

feat(theme/toc)!: use dynamic toc generation#2018
SoonIter merged 7 commits intoweb-infra-dev:mainfrom
ktiays:cyx/dynamic-toc

Conversation

@ktiays
Copy link
Copy Markdown
Contributor

@ktiays ktiays commented Mar 28, 2025 •
edited by SoonIter
Loading

Summary

this is an associated PR with #2101 of mdx refactoring

Otherwise, the TOC is wrong

and then we get more features

1. dynamic TOC generation even in user's tsx component

rspress-gif

image

https://lynxjs.org/guide/start/integrate-with-existing-apps.html#platform=ios

2. the <Badge /> and more tsc component implementation in TOC

image

Related Issue

close #1320

close #1560

close #1729

close #2036

Checklist

  • Tests updated (or not required).
  • Documentation updated (or not required).

@CLAassistant
Copy link
Copy Markdown

CLAassistant commented Mar 28, 2025 •
edited
Loading

CLA assistant check
All committers have signed the CLA.

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 28, 2025 •
edited
Loading

✅ Deploy Preview for rspress-v2 ready!

Name Link
🔨 Latest commit cb8a5de
🔍 Latest deploy log https://app.netlify.com/sites/rspress-v2/deploys/6811ed187964e400089123ba
😎 Deploy Preview https://deploy-preview-2018--rspress-v2.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

@netlify
Copy link
Copy Markdown

netlify bot commented Mar 28, 2025 •
edited
Loading

✅ Deploy Preview for rspress ready!

Name Link
🔨 Latest commit cb8a5de
🔍 Latest deploy log https://app.netlify.com/sites/rspress/deploys/6811ed18e28d6700083b96b2
😎 Deploy Preview https://deploy-preview-2018--rspress.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 1 paths audited
Performance: 89 (🔴 down 3 from production)
Accessibility: 97 (no change from production)
Best Practices: 92 (🟢 up 9 from production)
SEO: 100 (no change from production)
PWA: -
View the detailed breakdown and full score reports

To edit notification comments on pull requests, go to your Netlify site configuration.

@SoonIter SoonIter force-pushed the cyx/dynamic-toc branch 3 times, most recently from 85ba15a to 1c6f4f8 Compare April 1, 2025 11:29
JounQin
JounQin reviewed Apr 29, 2025
View reviewed changes
@SoonIter SoonIter mentioned this pull request Apr 30, 2025
Closed
2 tasks
@SoonIter SoonIter changed the title refactor(theme/toc): use dynamic toc generation refactor(theme/toc)!: use dynamic toc generation Apr 30, 2025
@SoonIter
Copy link
Copy Markdown
Member

SoonIter commented Apr 30, 2025

#1527

@SoonIter
Copy link
Copy Markdown
Member

SoonIter commented Apr 30, 2025

This is currently an experimental breaking change (OS: lol, a little weird),

but it is expected that there will be no large-scale impact, but if there is an impact, it need to be reverted with #2101

At this time, this is a innovative use of mdx that no document site generator has this feature.

@SoonIter SoonIter changed the title refactor(theme/toc)!: use dynamic toc generation feat(theme/toc)!: use dynamic toc generation Apr 30, 2025
@JounQin
Copy link
Copy Markdown
Collaborator

JounQin commented Apr 30, 2025 •
edited
Loading

Can we ignore some headers? For example we add a <div class="doom-auto-toc">## TOC</div> header automatically with remark plugin for small screen.

@SoonIter Did you notice this part? We don't want TOC to be included in outline.

@SoonIter
Copy link
Copy Markdown
Member

SoonIter commented Apr 30, 2025

Can we ignore some headers? For example we add a <div class="doom-auto-toc">## TOC</div> header automatically with remark plugin for small screen.

@SoonIter Did you notice this part? We don't want TOC to be included in outline.

I think this issue can be solved with the customizing TOC in #1901, it is on my radar, but I haven't thought about a good configuration interface design yet.

@SoonIter
Copy link
Copy Markdown
Member

SoonIter commented Apr 30, 2025 •
edited
Loading

TODO:

  1. customizing TOC, [Feature]: Support customize outline item label #1901

  2. polishing the style in SSG to avoid CLS

There is no block point. I expect to merge this pr first, it has been pending for too long.

@SoonIter SoonIter requested review from Timeless0911 and yifancong and removed request for yifancong April 30, 2025 10:01
@SoonIter SoonIter merged commit 21e276c into web-infra-dev:main Apr 30, 2025
11 checks passed
@JounQin
Copy link
Copy Markdown
Collaborator

JounQin commented Jul 3, 2025

It seems this only supports static TOC on the first render, for real dynamic TOC generation, MutationObserver could be considered.

Use case: A dynamic component which fetches data on runtime like https://github.com/alauda/doom/blob/44d293aa9e458b9521dfce9f096442222db15dbb/src/runtime/hooks/useSiteOverrides.ts#L125

@JounQin JounQin mentioned this pull request Jul 3, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@SoonIter SoonIter SoonIter left review comments

@Timeless0911 Timeless0911 Timeless0911 approved these changes

+1 more reviewer

@JounQin JounQin JounQin left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

change: feat

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Feature]: Generating aside items when using the api-docgen plugin

5 participants

@ktiays @CLAassistant @SoonIter @JounQin @Timeless0911