From 85fbb4a9b65c22b3584ab6a07edc3157508382d7 Mon Sep 17 00:00:00 2001 From: Giampaolo Bellavite Date: Thu, 14 Nov 2024 18:21:31 -0500 Subject: [PATCH] docs: use Shadow DOM to display examples (#2588) --- pnpm-lock.yaml | 45 +++++++++++++++++++-- website/package.json | 2 + website/src/components/ShadowDomWrapper.tsx | 22 +++++++++- website/src/css/custom.css | 1 + 4 files changed, 65 insertions(+), 5 deletions(-) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5835b02e4f..dc33e6e841 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -223,6 +223,9 @@ importers: react-dom: specifier: ^18.3.1 version: 18.3.1(react@18.3.1) + react-shadow: + specifier: ^20.5.0 + version: 20.5.0(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1) remark-github: specifier: ^12.0.0 version: 12.0.0 @@ -242,6 +245,9 @@ importers: identity-obj-proxy: specifier: ^3.0.0 version: 3.0.0 + raw-loader: + specifier: ^4.0.2 + version: 4.0.2(webpack@5.92.1(@swc/core@1.7.35)) typedoc: specifier: ^0.26.10 version: 0.26.10(typescript@5.6.3) @@ -4335,6 +4341,9 @@ packages: resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==} engines: {node: '>=10.17.0'} + humps@2.0.1: + resolution: {integrity: sha512-E0eIbrFWUhwfXJmsbdjRQFQPrl5pTEoKlz163j1mTqqUnU9PgR4AgB8AIITzuB3vLBdxZXyZ9TDIrwB2OASz4g==} + iconv-lite@0.4.24: resolution: {integrity: sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==} engines: {node: '>=0.10.0'} @@ -6092,6 +6101,12 @@ packages: resolution: {integrity: sha512-8zGqypfENjCIqGhgXToC8aB2r7YrBX+AQAfIPs/Mlk+BtPTztOvTS01NRW/3Eh60J+a48lt8qsCzirQ6loCVfA==} engines: {node: '>= 0.8'} + raw-loader@4.0.2: + resolution: {integrity: sha512-ZnScIV3ag9A4wPX/ZayxL/jZH+euYb6FcUinPcgiQW0+UBtEv0O6Q3lGd3cqJ+GHH+rksEv3Pj99oxJ3u3VIKA==} + engines: {node: '>= 10.13.0'} + peerDependencies: + webpack: ^4.0.0 || ^5.0.0 + rc@1.2.8: resolution: {integrity: sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==} hasBin: true @@ -6176,6 +6191,13 @@ packages: peerDependencies: react: '>=15' + react-shadow@20.5.0: + resolution: {integrity: sha512-DHukRfWpJrFtZMcZrKrqU3ZwuHjTpTbrjnJdTGZQE3lqtC5ivBDVWqAVVW6lR3Lq6bhphjAbqaJU8NOoTRSCsg==} + peerDependencies: + prop-types: ^15.0.0 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + react-dom: ^16.0.0 || ^17.0.0 || ^18.0.0 + react@18.3.1: resolution: {integrity: sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==} engines: {node: '>=0.10.0'} @@ -12803,7 +12825,7 @@ snapshots: debug: 4.3.5 enhanced-resolve: 5.17.0 eslint: 8.57.1 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.5.4))(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) fast-glob: 3.3.2 get-tsconfig: 4.7.5 is-bun-module: 1.1.0 @@ -12816,7 +12838,7 @@ snapshots: - eslint-import-resolver-webpack - supports-color - eslint-module-utils@2.12.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.5.4))(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1): + eslint-module-utils@2.12.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: @@ -12827,7 +12849,7 @@ snapshots: transitivePeerDependencies: - supports-color - eslint-module-utils@2.8.1(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.5.4))(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1): + eslint-module-utils@2.8.1(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1): dependencies: debug: 3.2.7 optionalDependencies: @@ -12848,7 +12870,7 @@ snapshots: doctrine: 2.1.0 eslint: 8.57.1 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.5.4))(eslint-plugin-import@2.31.0)(eslint@8.57.1))(eslint@8.57.1) + eslint-module-utils: 2.12.0(@typescript-eslint/parser@8.10.0(eslint@8.57.1)(typescript@5.5.4))(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.3)(eslint@8.57.1) hasown: 2.0.2 is-core-module: 2.15.1 is-glob: 4.0.3 @@ -13759,6 +13781,8 @@ snapshots: human-signals@2.1.0: {} + humps@2.0.1: {} + iconv-lite@0.4.24: dependencies: safer-buffer: 2.1.2 @@ -16104,6 +16128,12 @@ snapshots: iconv-lite: 0.4.24 unpipe: 1.0.0 + raw-loader@4.0.2(webpack@5.92.1(@swc/core@1.7.35)): + dependencies: + loader-utils: 2.0.4 + schema-utils: 3.3.0 + webpack: 5.92.1(@swc/core@1.7.35) + rc@1.2.8: dependencies: deep-extend: 0.6.0 @@ -16225,6 +16255,13 @@ snapshots: tiny-invariant: 1.3.3 tiny-warning: 1.0.3 + react-shadow@20.5.0(prop-types@15.8.1)(react-dom@18.3.1(react@18.3.1))(react@18.3.1): + dependencies: + humps: 2.0.1 + prop-types: 15.8.1 + react: 18.3.1 + react-dom: 18.3.1(react@18.3.1) + react@18.3.1: dependencies: loose-envify: 1.4.0 diff --git a/website/package.json b/website/package.json index 18e38e798f..2eb214611f 100644 --- a/website/package.json +++ b/website/package.json @@ -28,6 +28,7 @@ "react-day-picker": "workspace:^", "react-day-picker-v8": "npm:react-day-picker@8.10.1", "react-dom": "^18.3.1", + "react-shadow": "^20.5.0", "remark-github": "^12.0.0" }, "devDependencies": { @@ -36,6 +37,7 @@ "@docusaurus/types": "3.5.2", "docusaurus-plugin-typedoc": "^1.0.5", "identity-obj-proxy": "^3.0.0", + "raw-loader": "^4.0.2", "typedoc": "^0.26.10", "typedoc-plugin-frontmatter": "^1.0.0", "typedoc-plugin-markdown": "^4.2.9", diff --git a/website/src/components/ShadowDomWrapper.tsx b/website/src/components/ShadowDomWrapper.tsx index fcc40df988..26b7b7048c 100644 --- a/website/src/components/ShadowDomWrapper.tsx +++ b/website/src/components/ShadowDomWrapper.tsx @@ -1,3 +1,23 @@ +import style from "!raw-loader!react-day-picker/style.css"; +import { useColorMode } from "@docusaurus/theme-common"; +import root from "react-shadow"; + export function ShadowDomWrapper({ children }: { children: React.ReactNode }) { - return children; + const colorMode = useColorMode(); + return ( + + {children} + + {colorMode.isDarkTheme && ( + + )} + + ); } diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 5cbe7eefcc..cb1f6a545c 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -79,6 +79,7 @@ html[data-theme="dark"] { .rdp-footer { margin: 1rem 0; } + html[data-theme="dark"] .rdp-root { --rdp-accent-color: var(--ifm-color-primary); --rdp-accent-background-color: #073845;