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(mdx-loader): the table-of-contents should display props passed to headings of imported MDX partials #9773

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

anatolykopyl
Copy link
Contributor

@anatolykopyl anatolykopyl commented Jan 21, 2024

Pre-flight checklist

  • I have read the Contributing Guidelines on pull requests.
  • If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
  • If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

This PR allows the usage of props in partial MDX files.

Test Plan

This PR will be tested via dogfooding.

Test links

Deploy preview: https://deploy-preview-9773--docusaurus-2.netlify.app/
Relevant dogfooding page: https://deploy-preview-9773--docusaurus-2.netlify.app/tests/docs/tests/toc-partials/props

Related issues/PRs

fix #9772

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Jan 21, 2024
Copy link

netlify bot commented Jan 21, 2024

[V2]

Built without sensitive environment variables

Name Link
🔨 Latest commit f17140f
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/65ad7e28b0a0f80008481aa5
😎 Deploy Preview https://deploy-preview-9773--docusaurus-2.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.

@anatolykopyl
Copy link
Contributor Author

anatolykopyl commented Jan 21, 2024

I've come up with a crude way of preserving the data passed to props of Markdown partials. For now, this method only works if the prop is a literal, since the prop values are collected at build time.

While not perfect, having only literals is almost always all that is needed when working with partials.

Nonetheless, I think some work can be moved to runtime, to allow the use of any arbitrary expressions.

Copy link

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟢 91 🟢 98 🟢 100 🟢 100 🟠 89 Report
/docs/installation 🟠 66 🟢 98 🟢 100 🟢 100 🟠 89 Report
/docs/category/getting-started 🟠 76 🟢 100 🟢 100 🟢 90 🟠 89 Report
/blog 🟠 70 🟢 100 🟢 100 🟢 90 🟠 89 Report
/blog/preparing-your-site-for-docusaurus-v3 🟠 64 🟢 97 🟢 100 🟢 100 🟠 89 Report
/blog/tags/release 🟠 71 🟢 100 🟢 100 🟠 80 🟠 89 Report
/blog/tags 🟠 77 🟢 100 🟢 100 🟢 90 🟠 89 Report

Copy link
Collaborator

@slorber slorber left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😅 to be honest I'm not super fan of this

This only works in some cases and does not feel super robust either, and we'll have to handle the users complaining about things it does not support.

I'd prefer to explore another solution: what if we didn't stringify the headings in the first place?

What if we converted headings to JSX instead?

The TOC structure could look like:

export const toc = [
  {
    "value": <>Doc Heading</>,
    "id": "doc-heading",
    "level": 2
  }, 
  ...__tocPartial(props),
]

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
CLA Signed Signed Facebook CLA
Projects
None yet
Development

Successfully merging this pull request may close these issues.

TOC should render statically analyzable embedded expressions in headings (esp. imported partials)
3 participants