feat(theme): add ability to inject data attributes from query-string - possibility to create an iframe/embed variant of a page

[slorber]

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:

Test links

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

Related issues/PRs

#7480 (comment)

[netlify]

✅ [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... Use your smartphone camera to open QR code link.

---

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

[github-actions]

⚡️ 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

[github-actions]

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}