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(theme): add ability to inject data attributes from query-string - possibility to create an iframe/embed variant of a page #9028

Merged
merged 3 commits into from
May 31, 2023

Conversation

slorber
Copy link
Collaborator

@slorber slorber commented May 31, 2023

Motivation

We should be able to use /docs/someDoc?docusaurus-data-mode=iframe and then provide alternate styling for iframe/embedded rendering mode

html[data-mode='iframe'] .navbar {
  display: none;
}

html[data-mode='iframe'] .footer {
  display: none;
}

The system implemented allows you to inject arbitrary data-attribute values in the HTML, inlined (no FOUC / layout shifts expected), as long as they follow the ?docusaurus-data-<key>=<value> pattern (value can be omitted)

Note: it was chosen to allow injecting data attributes over classes because classes would solve the same use case and class injection was more complicated to implement (React-Helmet would erase the injected classes after React hydration).

Test Plan

Preview + CI

The docs dogfood the feature:

CleanShot 2023-05-31 at 16 04 08

Test links

https://deploy-preview-9028--docusaurus-2.netlify.app/docs/styling-layout#data-attributes

Related issues/PRs

#7480 (comment)

@slorber slorber added the pr: new feature This PR adds a new API or behavior. label May 31, 2023
@facebook-github-bot facebook-github-bot added the CLA Signed Signed Facebook CLA label May 31, 2023
@netlify
Copy link

netlify bot commented May 31, 2023

[V2]

Name Link
🔨 Latest commit 6d62343
🔍 Latest deploy log https://app.netlify.com/sites/docusaurus-2/deploys/6477539008c92e0008502a02
😎 Deploy Preview https://deploy-preview-9028--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 settings.

@github-actions
Copy link

github-actions bot commented May 31, 2023

⚡️ Lighthouse report for the deploy preview of this PR

URL Performance Accessibility Best Practices SEO PWA Report
/ 🟠 88 🟢 97 🟢 100 🟢 100 🟠 89 Report
/docs/installation 🟠 81 🟢 100 🟢 100 🟢 100 🟠 89 Report

@slorber slorber added the to backport This PR is planned to be backported to a stable version of Docusaurus label May 31, 2023
@slorber slorber merged commit 2d35edf into main May 31, 2023
@slorber slorber deleted the slorber/inject-html-from-querystring branch May 31, 2023 14:22
@github-actions
Copy link

Size Change: +299 B (0%)

Total Size: 1.01 MB

Filename Size Change
website/build/assets/css/styles.********.css 113 kB +94 B (0%)
website/build/index.html 41 kB +205 B (+1%)
ℹ️ View Unchanged
Filename Size
website/.docusaurus/globalData.json 101 kB
website/build/assets/js/main.********.js 752 kB

compressed-size-action

This was referenced Oct 19, 2023
@slorber slorber removed the to backport This PR is planned to be backported to a stable version of Docusaurus label Nov 10, 2023
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: new feature This PR adds a new API or behavior.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants