Add styles based on the documentation tool

src/constants.js

@@ -8,4 +8,11 @@ export const ASCIIDOCTOR = "asciidoctor";
 export const JEKYLL = "jekyll";
 export const DOCSIFY = "docsify";
 export const ANTORA = "antora";
+export const MDBOOK = "mdbook";
 export const FALLBACK_DOCTOOL = "fallback";
+
+// Known documentation tools themes
+export const SPHINX_ALABASTER = "alabaster";
+export const SPHINX_FURO = "furo";
+export const SPHINX_READTHEDOCS = "readthedocs";
+export const SPHINX_IMMATERIAL = "immaterial";

src/flyout.css

@@ -7,6 +7,7 @@
   height: auto;
   max-height: calc(100% - 100px);
   overflow-y: auto;
+  line-height: 1rem;
 }
 
 .container.bottom-right {
@@ -155,3 +156,27 @@ small a {
   text-decoration: none;
   color: var(--readthedocs-flyout-link-color, rgb(42, 128, 185));
 }
+
+/* Specific styles based on documentation tools and themes */
+div[tool="mkdocs-material"] {
+  --addons-flyout-font-size: 0.65rem;
+  line-height: 0.8rem;
+}
+
+div[tool="antora"] {
+  --addons-flyout-font-size: 0.7rem;
+  line-height: 0.9rem;
+}
+
+div[tool="mdbook"] {
+  --addons-flyout-font-size: 1.3rem;
+}
+
+div[tool="sphinx"][tool-theme="furo"] {
+  --addons-flyout-font-size: 0.75rem;
+}
+
+div[tool="sphinx"][tool-theme="immaterial"] {
+  --addons-flyout-font-size: 0.65rem;
+  line-height: 0.8rem;
+}

src/flyout.js

@@ -8,7 +8,13 @@ import { classMap } from "lit/directives/class-map.js";
 import { default as objectPath } from "object-path";
 
 import styleSheet from "./flyout.css";
-import { AddonBase, addUtmParameters, getLinkWithFilename } from "./utils";
+import {
+  AddonBase,
+  addUtmParameters,
+  getLinkWithFilename,
+  docTool,
+} from "./utils";
+import { SPHINX, MKDOCS_MATERIAL } from "./constants";
 import {
   EVENT_READTHEDOCS_SEARCH_SHOW,
   EVENT_READTHEDOCS_FLYOUT_HIDE,
@@ -31,9 +37,12 @@ export class FlyoutElement extends LitElement {
     super();
 
     this.config = null;
+    this.classes = {};
     this.opened = false;
     this.floating = true;
     this.position = "bottom-right";
+    this.classes = { floating: this.floating, container: true };
+    this.classes[this.position] = true;
     this.readthedocsLogo = READTHEDOCS_LOGO;
   }
 
@@ -310,11 +319,12 @@ export class FlyoutElement extends LitElement {
       return nothing;
     }
 
-    const classes = { floating: this.floating, container: true };
-    classes[this.position] = true;
-
     return html`
-      <div class=${classMap(classes)}>
+      <div
+        tool="${docTool.documentationTool}"
+        tool-theme="${docTool.documentationTheme}"
+        class=${classMap(this.classes)}
+      >
         ${this.renderHeader()}
         <main class=${classMap({ closed: !this.opened })}>
           ${this.renderLanguages()} ${this.renderVersions()}

src/utils.js

@@ -2,6 +2,11 @@ import { ajv } from "./data-validation";
 import { default as objectPath } from "object-path";
 import {
   SPHINX,
+  SPHINX_FURO,
+  SPHINX_ALABASTER,
+  SPHINX_READTHEDOCS,
+  SPHINX_IMMATERIAL,
+  MDBOOK,
   MKDOCS,
   MKDOCS_MATERIAL,
   DOCUSAURUS,
@@ -297,6 +302,7 @@ export class DocumentationTool {
 
   constructor() {
     this.documentationTool = this.getDocumentationTool();
+    this.documentationTheme = this.getDocumentationTheme();
     console.debug(`Documentation tool detected: ${this.documentationTool}`);
   }
 
@@ -411,10 +417,63 @@ export class DocumentationTool {
       return DOCSIFY;
     }
 
+    if (this.isMdBook()) {
+      return MDBOOK;
+    }
+
+    if (this.isAntora()) {
+      return ANTORA;
+    }
+
     console.debug("We were not able to detect the documentation tool.");
     return null;
   }
 
+  getDocumentationTheme() {
+    const documentationTool =
+      this.documentationTool || this.getDocumentationTool();
+
+    if (documentationTool === SPHINX) {
+      if (this.isSphinxAlabasterLikeTheme()) {
+        return SPHINX_ALABASTER;
+      } else if (this.isSphinxReadTheDocsLikeTheme()) {
+        return SPHINX_READTHEDOCS;
+      } else if (this.isSphinxFuroLikeTheme()) {
+        return SPHINX_FURO;
+      } else if (this.isSphinxImmaterialLikeTheme()) {
+        return SPHINX_IMMATERIAL;
+      }
+    }
+
+    // TODO: add the other known themes
+    return null;
+  }
+
+  isAntora() {
+    if (
+      document.querySelectorAll('meta[name="generator"][content^="Antora"]')
+        .length
+    ) {
+      return true;
+    }
+    return false;
+  }
+
+  isMdBook() {
+    // <head>
+    // <!-- Book generated using mdBook -->
+    // <meta charset="UTF-8">
+    // ...
+    if (
+      document.head.firstChild.nextSibling.textContent.includes(
+        "Book generated using mdBook",
+      )
+    ) {
+      return true;
+    }
+    return false;
+  }
+
   isDocsify() {
     if (document.querySelectorAll("head > link[href*=docsify]").length) {
       return true;
@@ -427,7 +486,8 @@ export class DocumentationTool {
       this.isSphinxAlabasterLikeTheme() ||
       this.isSphinxReadTheDocsLikeTheme() ||
       this.isSphinxFuroLikeTheme() ||
-      this.isSphinxBookThemeLikeTheme()
+      this.isSphinxBookThemeLikeTheme() ||
+      this.isSphinxImmaterialLikeTheme()
     );
   }
 
@@ -531,6 +591,18 @@ export class DocumentationTool {
     return false;
   }
 
+  isSphinxImmaterialLikeTheme() {
+    if (
+      document.querySelectorAll(
+        'link[href^="_static/sphinx_immaterial_theme"]',
+        'a[href="https://github.com/jbms/sphinx-immaterial/"][rel="noopener"]',
+      ).length
+    ) {
+      return true;
+    }
+    return false;
+  }
+
   isMaterialMkDocsTheme() {
     if (
       document.querySelectorAll(

tests/__snapshots__/flyout.test.snap.js

@@ -2,7 +2,11 @@
 export const snapshots = {};
 
 snapshots["Flyout addon snapshot flyout completely"] = 
-`<div class="bottom-right container floating">
+`<div
+  class="bottom-right container floating"
+  tool=""
+  tool-theme=""
+>
   <header>
     <img
       alt="Read the Docs"
@@ -119,7 +123,11 @@ snapshots["Flyout addon snapshot flyout completely"] =
 /* end snapshot Flyout addon snapshot flyout completely */
 
 snapshots["Flyout addon snapshot flyout with search disabled"] = 
-`<div class="bottom-right container floating">
+`<div
+  class="bottom-right container floating"
+  tool=""
+  tool-theme=""
+>
   <header>
     <img
       alt="Read the Docs"