From fe1319f277ea24181ddd535b6ad64c30e8a36d20 Mon Sep 17 00:00:00 2001 From: Anthony Johnson Date: Wed, 8 Jan 2025 12:43:53 -0800 Subject: [PATCH 1/2] Show example of setting attributes and variables at parent DOM This moves the inner CSS rules from inside the shadow DOM to the parent DOM. This allows users to still set a `--readthedocs-font-size` and similar variables. --- src/doctools.css | 25 +++++++++++++++++++++++++ src/flyout.css | 46 ++++++++++++---------------------------------- src/flyout.js | 13 ++----------- src/index.js | 25 +++++++++++++++++++++++++ 4 files changed, 64 insertions(+), 45 deletions(-) create mode 100644 src/doctools.css diff --git a/src/doctools.css b/src/doctools.css new file mode 100644 index 00000000..393b9259 --- /dev/null +++ b/src/doctools.css @@ -0,0 +1,25 @@ +/* Specific styles based on documentation tools and themes */ +html[data-readthedocs-tool="mkdocs-material"] { + --readthedocs-font-size: 0.6rem; + --readthedocs-flyout-font-size: 0.6rem; +} + +html[data-readthedocs-tool="antora"] { + --readthedocs-font-size: 0.7rem; + --readthedocs-flyout-font-size: 0.7rem; +} + +html[data-readthedocs-tool="mdbook"] { + --readthedocs-font-size: 1.3rem; + --readthedocs-flyout-font-size: 1.3rem; +} + +html[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="furo"] { + --readthedocs-font-size: 0.75rem; + --readthedocs-flyout-font-size: 0.75rem; +} + +html[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="immaterial"] { + --readthedocs-font-size: 0.65rem; + --readthedocs-flyout-font-size: 0.65rem; +} diff --git a/src/flyout.css b/src/flyout.css index b347969a..d174fc0c 100644 --- a/src/flyout.css +++ b/src/flyout.css @@ -1,4 +1,14 @@ -/* New */ +/* Flyout styles */ + +:host { + /* These variables are used more than once, use a local variable so we can set + * a default in this addon */ + --addons-flyout-font-size: var( + --readthedocs-flyout-font-size, + var(--readthedocs-font-size, 0.8rem) + ); + --addons-flyout-line-height: var(--readthedocs-flyout-line-height, 1.25em); +} .container { position: fixed; @@ -7,7 +17,7 @@ height: auto; max-height: calc(100% - 100px); overflow-y: auto; - line-height: 1rem; + line-height: var(--addons-flyout-line-height); } .container.bottom-right { @@ -30,13 +40,6 @@ top: 50px; } -:host { - --addons-flyout-font-size: var( - --readthedocs-flyout-font-size, - var(--readthedocs-font-size, 0.8rem) - ); -} - :host > div { font-family: var( --readthedocs-flyout-font-family, @@ -156,28 +159,3 @@ small a { text-decoration: none; color: var(--readthedocs-flyout-link-color, rgb(42, 128, 185)); } - -/* Specific styles based on documentation tools and themes */ -div[data-tool="mkdocs-material"] { - --addons-flyout-font-size: 0.6rem; - line-height: 0.7rem; -} - -div[data-tool="antora"] { - --addons-flyout-font-size: 0.7rem; - line-height: 0.9rem; -} - -div[data-tool="mdbook"] { - --addons-flyout-font-size: 1.3rem; -} - -div[data-tool="sphinx"][data-tool-theme="furo"] { - --addons-flyout-font-size: 0.75rem; - line-height: 0.9rem; -} - -div[data-tool="sphinx"][data-tool-theme="immaterial"] { - --addons-flyout-font-size: 0.65rem; - line-height: 0.8rem; -} diff --git a/src/flyout.js b/src/flyout.js index 1f55cf23..3f0f41ba 100644 --- a/src/flyout.js +++ b/src/flyout.js @@ -8,12 +8,7 @@ import { classMap } from "lit/directives/class-map.js"; import { default as objectPath } from "object-path"; import styleSheet from "./flyout.css"; -import { - AddonBase, - addUtmParameters, - getLinkWithFilename, - docTool, -} from "./utils"; +import { AddonBase, addUtmParameters, getLinkWithFilename } from "./utils"; import { SPHINX, MKDOCS_MATERIAL } from "./constants"; import { EVENT_READTHEDOCS_SEARCH_SHOW, @@ -320,11 +315,7 @@ export class FlyoutElement extends LitElement { } return html` -
+
${this.renderHeader()}
${this.renderLanguages()} ${this.renderVersions()} diff --git a/src/index.js b/src/index.js index b6827651..5e2a6267 100644 --- a/src/index.js +++ b/src/index.js @@ -11,6 +11,7 @@ import * as filetreediff from "./filetreediff"; import * as customscript from "./customscript"; import { default as objectPath } from "object-path"; import { + docTool, domReady, isEmbedded, IS_PRODUCTION, @@ -18,6 +19,8 @@ import { getMetadataValue, } from "./utils"; +import doctoolsStyleSheet from "./doctools.css"; + export function setup() { const addons = [ flyout.FlyoutAddon, @@ -50,6 +53,28 @@ export function setup() { } } + // Apply fixes to variables for individual documentation tools + const elementHtml = document.querySelector("html"); + if (elementHtml) { + // Inject styles at the parent DOM to set variables at :root + document.adoptedStyleSheets = [doctoolsStyleSheet]; + + // If we detect a documentation tool, set attributes on :root to allow + // for CSS selectors to utilize these values. + if (docTool.documentationTool) { + elementHtml.setAttribute( + "data-readthedocs-tool", + docTool.documentationTool, + ); + } + if (docTool.documentationTheme) { + elementHtml.setAttribute( + "data-readthedocs-tool-theme", + docTool.documentationTheme, + ); + } + } + return getReadTheDocsConfig(sendUrlParam); }) .then((config) => { From 6b5db3915a1cfaba231315b3a31e61c22c8ab7c4 Mon Sep 17 00:00:00 2001 From: Anthony Johnson Date: Thu, 9 Jan 2025 14:02:29 -0800 Subject: [PATCH 2/2] More fixes --- src/doctools.css | 48 ++++++++++++++----------- src/index.js | 8 ++++- src/utils.js | 4 +-- tests/__snapshots__/flyout.test.snap.js | 12 ++----- 4 files changed, 39 insertions(+), 33 deletions(-) diff --git a/src/doctools.css b/src/doctools.css index 393b9259..75da7c29 100644 --- a/src/doctools.css +++ b/src/doctools.css @@ -1,25 +1,33 @@ -/* Specific styles based on documentation tools and themes */ -html[data-readthedocs-tool="mkdocs-material"] { - --readthedocs-font-size: 0.6rem; - --readthedocs-flyout-font-size: 0.6rem; -} +/* + * Specific styles based on documentation tools and themes + * + * Usage of `@layer` at-rule pushes this rules down a step in + * precedence/priority. This allows a user `:root` rule to override these + * values. + **/ +@layer defaults { + :root[data-readthedocs-tool="mkdocs-material"] { + --readthedocs-font-size: 0.6rem; + --readthedocs-flyout-font-size: 0.6rem; + } -html[data-readthedocs-tool="antora"] { - --readthedocs-font-size: 0.7rem; - --readthedocs-flyout-font-size: 0.7rem; -} + :root[data-readthedocs-tool="antora"] { + --readthedocs-font-size: 0.7rem; + --readthedocs-flyout-font-size: 0.7rem; + } -html[data-readthedocs-tool="mdbook"] { - --readthedocs-font-size: 1.3rem; - --readthedocs-flyout-font-size: 1.3rem; -} + :root[data-readthedocs-tool="mdbook"] { + --readthedocs-font-size: 1.3rem; + --readthedocs-flyout-font-size: 1.3rem; + } -html[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="furo"] { - --readthedocs-font-size: 0.75rem; - --readthedocs-flyout-font-size: 0.75rem; -} + :root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="furo"] { + --readthedocs-font-size: 0.75rem; + --readthedocs-flyout-font-size: 0.75rem; + } -html[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="immaterial"] { - --readthedocs-font-size: 0.65rem; - --readthedocs-flyout-font-size: 0.65rem; + :root[data-readthedocs-tool="sphinx"][data-readthedocs-tool-theme="immaterial"] { + --readthedocs-font-size: 0.65rem; + --readthedocs-flyout-font-size: 0.65rem; + } } diff --git a/src/index.js b/src/index.js index 5e2a6267..78781d15 100644 --- a/src/index.js +++ b/src/index.js @@ -1,3 +1,5 @@ +import { CSSResult } from "lit"; + import { getReadTheDocsConfig } from "./readthedocs-config"; import * as notification from "./notification"; import * as analytics from "./analytics"; @@ -57,7 +59,11 @@ export function setup() { const elementHtml = document.querySelector("html"); if (elementHtml) { // Inject styles at the parent DOM to set variables at :root - document.adoptedStyleSheets = [doctoolsStyleSheet]; + let styleSheet = doctoolsStyleSheet; + if (doctoolsStyleSheet instanceof CSSResult) { + styleSheet = doctoolsStyleSheet.styleSheet; + } + document.adoptedStyleSheets = [styleSheet]; // If we detect a documentation tool, set attributes on :root to allow // for CSS selectors to utilize these values. diff --git a/src/utils.js b/src/utils.js index 27ec259b..0a4f3f33 100644 --- a/src/utils.js +++ b/src/utils.js @@ -465,7 +465,7 @@ export class DocumentationTool { // // ... if ( - document.head.firstChild.nextSibling.textContent.includes( + document?.head?.firstChild?.nextSibling?.textContent.includes( "Book generated using mdBook", ) ) { @@ -536,7 +536,7 @@ export class DocumentationTool { // MkDocs version : 1.4.2 // Build Date UTC : 2023-07-11 16:08:07.379780+00:00 // --> - if (document.lastChild.textContent.includes("MkDocs version :")) { + if (document?.lastChild?.textContent.includes("MkDocs version :")) { return true; } return false; diff --git a/tests/__snapshots__/flyout.test.snap.js b/tests/__snapshots__/flyout.test.snap.js index af61cd0a..827779aa 100644 --- a/tests/__snapshots__/flyout.test.snap.js +++ b/tests/__snapshots__/flyout.test.snap.js @@ -2,11 +2,7 @@ export const snapshots = {}; snapshots["Flyout addon snapshot flyout completely"] = -`
+`
Read the Docs +`