refactor(theme-{classic,common}): refactor site/page/search metadata + apply className on html element #6925
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
slorber
added
pr: breaking change
|
✔️ [V2] 🔨 Explore the source changes: 8d04740 🔍 Inspect the deploy log: https://app.netlify.com/sites/docusaurus-2/deploys/6234c353bdb141000950bd71 😎 Browse the preview: https://deploy-preview-6925--docusaurus-2.netlify.app |
|
⚡️ Lighthouse report for the changes in this PR:
Lighthouse ran on https://deploy-preview-6925--docusaurus-2.netlify.app/ |
|
Size Change: +108 B (0%) Total Size: 804 kB
ℹ️ View Unchanged
|
# Conflicts: # packages/docusaurus-theme-classic/src/theme/DocItem/index.tsx # packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx # packages/docusaurus-theme-common/src/index.ts
slorber
changed the title
|
👍 looks like it's working fine metadatas are good too, used an HTML diff tool to check a few pages |
slorber
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Breaking change:
Some CSS classes were previously applied to the Layout wrapper. For maximum flexibility, they are now applied on the top-level HTML element, so your custom CSS selectors might have to be updated accordingly.
Why do we do this change? Because now you have the ability to target the site layout elements too (ie customize the navbar/sidebar/footer based on classes added to the top-level HTML element
The existing
.main-wrapperclass remains applied as before around Layout children prop:<div className="main-wrapper">{children}</div>Example CSS selectors to update:
div.main-wrapper.blog-wrapper.blog-post-page { }=>html.blog-wrapper.blog-post-page .main-wrapper {}.main-wrapper.docs-wrapper { }=>.docs-wrapper .main-wrapper {}Note that
html.{docs,blog,pages}-wrappernow looks like a weird className on the HTML element, so we'll likely remove this class later.Now each plugin routes already provide a top-level HTML className:
plugin-{docs,blog,pages},For example a md doc page now has this HTML element:
The most future-proof way to target the "inner" content of a docs-route is:
The most future-proof way to target the "inner" content of a doc page (rendering a md doc) is:
Motivation
Docusaurus core should apply some basic default metadata
It should be possible for a theme or site to provide global site metadata, overriding Docusaurus defaults
It should be possible for a page to override global site metadata, overriding global site metadata.
It should not be the responsibility of the Layout to apply page metadata.
Site metadata should be applied consistently even if the user decides to use a different layout.
Wrapper/page class names should be applied at the very top for maximum flexibility, see also #4280
Have you read the Contributing Guidelines on pull requests?
yes
Test Plan
Preview: metadata should be exactly as before (apart page classNames moved upper to the html element)