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): wrap mdx content title (# Title) in <header> for concistency #10335

Merged
merged 5 commits into from
Jul 25, 2024

Conversation

OzakIOne
Copy link
Contributor

@OzakIOne OzakIOne commented Jul 23, 2024

Motivation

Fix #8476

For consistency, we want to wrap it all h1 in a <header> tag, for both of these cases:

  • using title: Title front matter (already wrapped in <header>
  • using # Title in the MDX doc (previously not wrapped in <header>, now fixed)

Test Plan

CI & argos

Test links

https://deploy-preview-10335--docusaurus-2.netlify.app/docs

CleanShot 2024-07-25 at 14 14 57

We now have <header><h1> and not just <h1>

Argos reports small visual changes on # Title immediately followed by ## Section, but in practice this is an improvement, consistent with front matter title behavior (less spacing)

@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label Jul 23, 2024
Copy link

netlify bot commented Jul 23, 2024

[V2]

Name Link
🔨 Latest commit 8fae018
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/66a24ad6d5ca5700085aa25b
😎 Deploy Preview https://deploy-preview-10335--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.

Copy link

github-actions bot commented Jul 23, 2024

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO Report
/ 🟠 72 🟢 98 🟢 96 🟢 100 Report
/docs/installation 🟠 56 🟢 97 🟢 100 🟢 100 Report
/docs/category/getting-started 🟠 75 🟢 100 🟢 100 🟠 86 Report
/blog 🟠 69 🟢 96 🟢 100 🟠 86 Report
/blog/preparing-your-site-for-docusaurus-v3 🔴 48 🟢 92 🟢 100 🟢 100 Report
/blog/tags/release 🟠 69 🟢 96 🟢 100 🟠 86 Report
/blog/tags 🟠 75 🟢 100 🟢 100 🟠 86 Report

Copy link

github-actions bot commented Jul 23, 2024

Size Change: +581 B (+0.01%)

Total Size: 10.9 MB

Filename Size Change
website/build/assets/js/main.********.js 668 kB +54 B (+0.01%)
ℹ️ View Unchanged
Filename Size Change
website/.docusaurus/codeTranslations.json 2 B 0 B
website/.docusaurus/docusaurus.config.mjs 27.4 kB 0 B
website/.docusaurus/globalData.json 30 kB 0 B
website/.docusaurus/i18n.json 930 B 0 B
website/.docusaurus/registry.js 147 kB 0 B
website/.docusaurus/routes.js 71.6 kB 0 B
website/.docusaurus/routesChunkNames.json 75 kB 0 B
website/.docusaurus/site-metadata.json 2.17 kB 0 B
website/build/assets/css/styles.********.css 112 kB 0 B
website/build/blog.html 62.2 kB 0 B
website/build/blog/2017/12/14/introducing-docusaurus.html 74.8 kB -13 B (-0.02%)
website/build/blog/2018/04/30/How-I-Converted-Profilo-To-Docusaurus.html 47.2 kB 0 B
website/build/blog/2018/09/11/Towards-Docusaurus-2.html 51.5 kB 0 B
website/build/blog/2018/12/14/Happy-First-Birthday-Slash.html 33.2 kB -13 B (-0.04%)
website/build/blog/2019/12/30/docusaurus-2019-recap.html 39.6 kB -13 B (-0.03%)
website/build/blog/2020/01/07/tribute-to-endi.html 34 kB -13 B (-0.04%)
website/build/blog/2021/01/19/docusaurus-2020-recap.html 48.9 kB -13 B (-0.03%)
website/build/blog/2021/03/09/releasing-docusaurus-i18n.html 45.1 kB -13 B (-0.03%)
website/build/blog/2021/05/12/announcing-docusaurus-two-beta.html 52 kB -13 B (-0.02%)
website/build/blog/2021/11/21/algolia-docsearch-migration.html 52.9 kB 0 B
website/build/blog/2022/01/24/docusaurus-2021-recap.html 44.4 kB -13 B (-0.03%)
website/build/blog/2022/08/01/announcing-docusaurus-2.0.html 142 kB -13 B (-0.01%)
website/build/blog/2022/09/01/docusaurus-2.1.html 50.8 kB -13 B (-0.03%)
website/build/blog/archive.html 24.6 kB 0 B
website/build/blog/page/2.html 65.4 kB 0 B
website/build/blog/page/3.html 83.5 kB 0 B
website/build/blog/page/4.html 58.7 kB 0 B
website/build/blog/page/5.html 39.1 kB 0 B
website/build/blog/preparing-your-site-for-docusaurus-v3.html 138 kB -13 B (-0.01%)
website/build/blog/releases/2.2.html 49.6 kB -12 B (-0.02%)
website/build/blog/releases/2.3.html 60.8 kB -12 B (-0.02%)
website/build/blog/releases/2.4.html 65.3 kB -12 B (-0.02%)
website/build/blog/releases/3.0.html 111 kB 0 B
website/build/blog/releases/3.1.html 52 kB -11 B (-0.02%)
website/build/blog/releases/3.2.html 48.7 kB -12 B (-0.02%)
website/build/blog/releases/3.3.html 55.5 kB -12 B (-0.02%)
website/build/blog/releases/3.4.html 55.6 kB -5 B (-0.01%)
website/build/blog/tags.html 28.4 kB 0 B
website/build/blog/upgrading-frontend-dependencies-with-confidence-using-visual-regression-testing.html 128 kB -12 B (-0.01%)
website/build/docs.html 49.4 kB +15 B (+0.03%)
website/build/docs/advanced.html 31.1 kB +5 B (+0.02%)
website/build/docs/advanced/architecture.html 30.7 kB +9 B (+0.03%)
website/build/docs/advanced/client.html 76 kB +5 B (+0.01%)
website/build/docs/advanced/plugins.html 58.6 kB +5 B (+0.01%)
website/build/docs/advanced/routing.html 73.9 kB +13 B (+0.02%)
website/build/docs/advanced/ssg.html 81.5 kB +5 B (+0.01%)
website/build/docs/api/docusaurus-config.html 200 kB +5 B (0%)
website/build/docs/api/misc/@docusaurus/eslint-plugin.html 48.3 kB +9 B (+0.02%)
website/build/docs/api/misc/@docusaurus/eslint-plugin/no-html-links.html 38.1 kB +5 B (+0.01%)
website/build/docs/api/misc/@docusaurus/eslint-plugin/no-untranslated-text.html 37 kB +5 B (+0.01%)
website/build/docs/api/misc/@docusaurus/eslint-plugin/prefer-docusaurus-heading.html 38.3 kB +9 B (+0.02%)
website/build/docs/api/misc/@docusaurus/eslint-plugin/string-literal-i18n-messages.html 41.9 kB +5 B (+0.01%)
website/build/docs/api/misc/@docusaurus/logger.html 39.8 kB +5 B (+0.01%)
website/build/docs/api/misc/create-docusaurus.html 34.9 kB +5 B (+0.01%)
website/build/docs/api/plugin-methods.html 67.4 kB +9 B (+0.01%)
website/build/docs/api/plugin-methods/extend-infrastructure.html 63 kB +9 B (+0.01%)
website/build/docs/api/plugin-methods/i18n-lifecycles.html 60.6 kB +9 B (+0.01%)
website/build/docs/api/plugin-methods/lifecycle-apis.html 170 kB +5 B (0%)
website/build/docs/api/plugin-methods/static-methods.html 46.5 kB +9 B (+0.02%)
website/build/docs/api/plugins.html 31.6 kB +5 B (+0.02%)
website/build/docs/api/plugins/@docusaurus/plugin-client-redirects.html 62.6 kB +18 B (+0.03%)
website/build/docs/api/plugins/@docusaurus/plugin-content-blog.html 172 kB +17 B (+0.01%)
website/build/docs/api/plugins/@docusaurus/plugin-content-docs.html 202 kB +5 B (0%)
website/build/docs/api/plugins/@docusaurus/plugin-content-pages.html 78 kB +5 B (+0.01%)
website/build/docs/api/plugins/@docusaurus/plugin-debug.html 50.5 kB +5 B (+0.01%)
website/build/docs/api/plugins/@docusaurus/plugin-google-analytics.html 51.5 kB +5 B (+0.01%)
website/build/docs/api/plugins/@docusaurus/plugin-google-gtag.html 51 kB -14 B (-0.03%)
website/build/docs/api/plugins/@docusaurus/plugin-google-tag-manager.html 49.8 kB +5 B (+0.01%)
website/build/docs/api/plugins/@docusaurus/plugin-ideal-image.html 51.1 kB +9 B (+0.02%)
website/build/docs/api/plugins/@docusaurus/plugin-pwa.html 122 kB +9 B (+0.01%)
website/build/docs/api/plugins/@docusaurus/plugin-sitemap.html 68.5 kB +11 B (+0.02%)
website/build/docs/api/plugins/@docusaurus/plugin-vercel-analytics.html 42.2 kB +17 B (+0.04%)
website/build/docs/api/themes.html 30.4 kB +5 B (+0.02%)
website/build/docs/api/themes/@docusaurus/theme-classic.html 46.4 kB +9 B (+0.02%)
website/build/docs/api/themes/@docusaurus/theme-live-codeblock.html 38.6 kB +9 B (+0.02%)
website/build/docs/api/themes/@docusaurus/theme-mermaid.html 37.5 kB +9 B (+0.02%)
website/build/docs/api/themes/@docusaurus/theme-search-algolia.html 34.7 kB +5 B (+0.01%)
website/build/docs/api/themes/configuration.html 256 kB +12 B (0%)
website/build/docs/blog.html 211 kB +17 B (+0.01%)
website/build/docs/browser-support.html 51 kB +5 B (+0.01%)
website/build/docs/category/getting-started.html 28.3 kB 0 B
website/build/docs/category/guides.html 36.4 kB 0 B
website/build/docs/cli.html 63.8 kB +6 B (+0.01%)
website/build/docs/configuration.html 98.5 kB +9 B (+0.01%)
website/build/docs/create-doc.html 65.3 kB +17 B (+0.03%)
website/build/docs/creating-pages.html 59.1 kB +6 B (+0.01%)
website/build/docs/deployment.html 211 kB +14 B (+0.01%)
website/build/docs/docs-introduction.html 53.6 kB +5 B (+0.01%)
website/build/docs/docs-multi-instance.html 78.7 kB +9 B (+0.01%)
website/build/docs/docusaurus-core.html 245 kB +5 B (0%)
website/build/docs/guides/whats-next.html 32.8 kB +5 B (+0.02%)
website/build/docs/i18n/crowdin.html 151 kB +17 B (+0.01%)
website/build/docs/i18n/git.html 82.6 kB +9 B (+0.01%)
website/build/docs/i18n/introduction.html 50.7 kB +5 B (+0.01%)
website/build/docs/i18n/tutorial.html 171 kB +18 B (+0.01%)
website/build/docs/installation.html 73 kB +17 B (+0.02%)
website/build/docs/introduction/index.html 280 B 0 B
website/build/docs/markdown-features.html 83.2 kB +6 B (+0.01%)
website/build/docs/markdown-features/admonitions.html 118 kB +9 B (+0.01%)
website/build/docs/markdown-features/assets.html 93.5 kB +7 B (+0.01%)
website/build/docs/markdown-features/code-blocks.html 245 kB +9 B (0%)
website/build/docs/markdown-features/diagrams.html 56 kB +19 B (+0.03%)
website/build/docs/markdown-features/head-metadata.html 52.8 kB +5 B (+0.01%)
website/build/docs/markdown-features/links.html 43.1 kB +5 B (+0.01%)
website/build/docs/markdown-features/math-equations.html 95.4 kB +16 B (+0.02%)
website/build/docs/markdown-features/plugins.html 101 kB +13 B (+0.01%)
website/build/docs/markdown-features/react.html 144 kB +5 B (0%)
website/build/docs/markdown-features/tabs.html 148 kB +5 B (0%)
website/build/docs/markdown-features/toc.html 88.8 kB +9 B (+0.01%)
website/build/docs/migration.html 43 kB +4 B (+0.01%)
website/build/docs/migration/v2.html 41.2 kB +5 B (+0.01%)
website/build/docs/migration/v2/automated.html 42.6 kB +5 B (+0.01%)
website/build/docs/migration/v2/manual.html 207 kB +5 B (0%)
website/build/docs/migration/v2/translated-sites.html 52.8 kB +5 B (+0.01%)
website/build/docs/migration/v2/versioned-sites.html 67.2 kB +5 B (+0.01%)
website/build/docs/migration/v3.html 218 kB +7 B (0%)
website/build/docs/playground.html 32.5 kB +5 B (+0.02%)
website/build/docs/resources/index.html 325 B 0 B
website/build/docs/search.html 121 kB +17 B (+0.01%)
website/build/docs/seo.html 93 kB +18 B (+0.02%)
website/build/docs/sidebar.html 136 kB +9 B (+0.01%)
website/build/docs/sidebar/autogenerated.html 156 kB +18 B (+0.01%)
website/build/docs/sidebar/items.html 188 kB +5 B (0%)
website/build/docs/sidebar/multiple-sidebars.html 67.1 kB +9 B (+0.01%)
website/build/docs/static-assets.html 56.2 kB +9 B (+0.02%)
website/build/docs/styling-layout.html 140 kB +8 B (+0.01%)
website/build/docs/support/index.html 319 B 0 B
website/build/docs/swizzling.html 120 kB +19 B (+0.02%)
website/build/docs/team/index.html 310 B 0 B
website/build/docs/typescript-support.html 65.4 kB +5 B (+0.01%)
website/build/docs/using-plugins.html 115 kB +18 B (+0.02%)
website/build/docs/versioning.html 87.1 kB +18 B (+0.02%)
website/build/index.html 37.8 kB 0 B

compressed-size-action

Comment on lines 31 to 33
`,
{removeContentTitle: true},
);
Copy link
Collaborator

Choose a reason for hiding this comment

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

Some test needed removeContentTitle: true throw Cannot handle unknown node 'mdxJsxFlowElement' and test returns content unmodified still fails thrown: "Exceeded timeout of 15000 ms for a test.

Why would that test now need removeContentTitle: true. I tested locally and if it now timeouts, there must be a very good reason that we should find out.

Copy link
Collaborator

Choose a reason for hiding this comment

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

At first I couldn't really understand, and thought the timeout was coming from the visitor, but it turns out our test setup is not good and does not permit to stringify back to Markdown elements such as mdxJsxFlowElement

Going to fix it

@slorber slorber added the pr: new feature This PR adds a new API or behavior. label Jul 25, 2024
@slorber slorber changed the title feat: wrap mdx title h1 in header feat: wrap mdx content title (# Title) in <header> for concistency Jul 25, 2024
@slorber slorber marked this pull request as ready for review July 25, 2024 12:12
@slorber slorber requested a review from Josh-Cena as a code owner July 25, 2024 12:12
@slorber slorber added the Argos Add this label to run UI visual regression tests. See argos.yml GH action. label Jul 25, 2024
@slorber
Copy link
Collaborator

slorber commented Jul 25, 2024

Note for the future:

  • it's possible that in some cases it doesn't make sense to wrap in a <header> automatically. We'll see if anyone complains
  • blog uses removeContentTitle so it opt-out of this logic and always apply the <header> in the theme
  • it's awkward to handle the <header> wrapping in 2 distinct places (theme + mdx loader). In the future we might export a export contentTitle = jsx export so that we can move all this to the theme, and remove this logic from mdx-loader

For now the implementation is probably enough.

Copy link

argos-ci bot commented Jul 25, 2024

The latest updates on your projects. Learn more about Argos notifications ↗︎

Build Status Details Updated (UTC)
default (Inspect) 👍 Changes approved 4 changed Jul 25, 2024, 1:00 PM

@slorber slorber changed the title feat: wrap mdx content title (# Title) in <header> for concistency feat(mdx-loader): wrap mdx content title (# Title) in <header> for concistency Jul 25, 2024
@slorber slorber merged commit 23dbf9c into main Jul 25, 2024
33 checks passed
@slorber slorber deleted the ozaki/wrapHeadingInJSX branch July 25, 2024 13:14
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Argos Add this label to run UI visual regression tests. See argos.yml GH action. CLA Signed Signed Facebook CLA pr: new feature This PR adds a new API or behavior.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Theme Classic inconsistently wraps the doc page title into <header>
3 participants