EthicalAd: add support for fixed footer ad in all the themes (#641)

This is the logic we follow to show the fixed footer ad:

* We detect the doctool/theme using our common heuristic.
* The image nav bar ad is below the fold.
* Inject the fixed footer ad on a specific selector (if needed, eg.
"body").
* Add `padding-bottom` to specific CSS selectors to not cover content.

## Examples

### VitePress

<img width="1331" height="643" alt="Screenshot_2025-09-30_13-14-45"
src="https://github.com/user-attachments/assets/5d83f00e-23fb-4c2a-9124-de93d9abe721"
/>

### Material for MkDocs

<img width="1329" height="640" alt="Screenshot_2025-09-30_13-15-06"
src="https://github.com/user-attachments/assets/bea6a67d-f7e5-4d0e-aeef-766fa25f5436"
/>


Closes readthedocs/meta#192

Author: humitos

src/ethicalads.js

@@ -44,7 +44,7 @@ export class EthicalAdsAddon extends AddonBase {
 
   createAdPlacement() {
     let placement;
-    let selectors;
+    let fixedFooterAdSelectors;
 
     const placementIdSuffix = docTool.getDocumentationTool() || "nodoctool";
 
@@ -89,8 +89,8 @@ export class EthicalAdsAddon extends AddonBase {
         } else {
           // We know it's RTD theme and the ad in the navbar is not above the fold at this point.
           // Then, we render the ad as fixed footer.
-          selectors = ["section", "nav"];
-          this.setFixedFooterAdProperties(selectors, placement);
+          fixedFooterAdSelectors = ["section", "nav"];
+          this.setFixedFooterAdProperties(placement);
           knownPlacementFound = true;
         }
       } else if (docTool.isSphinxFuroLikeTheme()) {
@@ -110,6 +110,10 @@ export class EthicalAdsAddon extends AddonBase {
           // placement.setAttribute("data-ea-type", "readthedocs-sidebar");
           placement.setAttribute("data-ea-type", "image");
           knownPlacementFound = true;
+        } else {
+          fixedFooterAdSelectors = ["div.main", "aside.sidebar-drawer"];
+          this.setFixedFooterAdProperties(placement);
+          knownPlacementFound = true;
         }
       } else if (docTool.isSphinxBookThemeLikeTheme()) {
         selector = ".sidebar-primary-items__start.sidebar-primary__section";
@@ -119,6 +123,10 @@ export class EthicalAdsAddon extends AddonBase {
           placement.classList.add("ethical-alabaster");
           placement.setAttribute("data-ea-type", "readthedocs-sidebar");
           knownPlacementFound = true;
+        } else {
+          fixedFooterAdSelectors = ["div.bd-container__inner"];
+          this.setFixedFooterAdProperties(placement);
+          knownPlacementFound = true;
         }
       } else if (docTool.isSphinxAlabasterLikeTheme()) {
         selector = "div.sphinxsidebar > div.sphinxsidebarwrapper";
@@ -128,6 +136,10 @@ export class EthicalAdsAddon extends AddonBase {
           placement.classList.add("ethical-alabaster");
           placement.setAttribute("data-ea-type", "readthedocs-sidebar");
           knownPlacementFound = true;
+        } else {
+          fixedFooterAdSelectors = ["div.footer"];
+          this.setFixedFooterAdProperties(placement);
+          knownPlacementFound = true;
         }
       } else if (docTool.isMaterialMkDocsTheme()) {
         // Detect the left navbar if it's not hidden or grab the navbar from a post page
@@ -142,6 +154,12 @@ export class EthicalAdsAddon extends AddonBase {
 
           placement.setAttribute("data-ea-type", "readthedocs-sidebar");
           knownPlacementFound = true;
+          // TODO: re-enable fixed footer ad for Material for MkDocs when we are ready.
+          // https://github.com/readthedocs/addons/pull/641#pullrequestreview-3288251971
+          // } else {
+          //   fixedFooterAdSelectors = ["footer.md-footer"];
+          //   this.setFixedFooterAdProperties(placement);
+          //   knownPlacementFound = true;
         }
       } else if (docTool.isDocusaurusTheme()) {
         selector = ".menu.thin-scrollbar.menu_SIkG";
@@ -155,6 +173,16 @@ export class EthicalAdsAddon extends AddonBase {
 
           placement.setAttribute("data-ea-type", "image");
           knownPlacementFound = true;
+        } else {
+          // TODO
+          // We need this to avois other elements being show on top of the ad.
+          // We can probably always use `body` for the fixed footer ad in a
+          // generic way at the bottom of this function.
+          selector = "body";
+
+          fixedFooterAdSelectors = ["footer.footer"];
+          this.setFixedFooterAdProperties(placement);
+          knownPlacementFound = true;
         }
       } else if (docTool.isDocsify()) {
         selector = "main > aside > div.sidebar-nav";
@@ -167,6 +195,15 @@ export class EthicalAdsAddon extends AddonBase {
           placement.setAttribute("data-ea-type", "readthedocs-sidebar");
           placement.setAttribute("data-ea-style", "image");
           knownPlacementFound = true;
+        } else {
+          selector = "body";
+          fixedFooterAdSelectors = [
+            "section.content",
+            "aside.sidebar",
+            "button.sidebar-toggle",
+          ];
+          this.setFixedFooterAdProperties(placement);
+          knownPlacementFound = true;
         }
       } else if (docTool.isAntora()) {
         selector = "aside nav.nav-menu";
@@ -178,6 +215,10 @@ export class EthicalAdsAddon extends AddonBase {
           placement.setAttribute("data-ea-type", "readthedocs-sidebar");
           placement.setAttribute("data-ea-style", "image");
           knownPlacementFound = true;
+        } else {
+          fixedFooterAdSelectors = ["footer.footer"];
+          this.setFixedFooterAdProperties(placement);
+          knownPlacementFound = true;
         }
       } else if (docTool.isMdBook()) {
         selector = "nav#sidebar mdbook-sidebar-scrollbox";
@@ -189,6 +230,10 @@ export class EthicalAdsAddon extends AddonBase {
           placement.setAttribute("data-ea-type", "readthedocs-sidebar");
           placement.setAttribute("data-ea-style", "image");
           knownPlacementFound = true;
+        } else {
+          fixedFooterAdSelectors = ["div#body-container"];
+          this.setFixedFooterAdProperties(placement);
+          knownPlacementFound = true;
         }
       } else if (docTool.isVitePress()) {
         selector = "aside";
@@ -200,6 +245,11 @@ export class EthicalAdsAddon extends AddonBase {
           placement.setAttribute("data-ea-type", "readthedocs-sidebar");
           placement.setAttribute("data-ea-style", "image");
           knownPlacementFound = true;
+        } else {
+          selector = "body";
+          fixedFooterAdSelectors = ["div#VPContent"];
+          this.setFixedFooterAdProperties(placement);
+          knownPlacementFound = true;
         }
       }
 
@@ -272,7 +322,7 @@ export class EthicalAdsAddon extends AddonBase {
                 mutation.target,
               ).height;
               console.debug("fixedFooterAdHeight", fixedFooterAdHeight);
-              for (const selector of selectors) {
+              for (const selector of fixedFooterAdSelectors) {
                 const element = document.querySelector(selector);
                 element.style.setProperty(
                   "padding-bottom",
@@ -316,7 +366,7 @@ export class EthicalAdsAddon extends AddonBase {
     return true;
   }
 
-  setFixedFooterAdProperties(selectors, placement) {
+  setFixedFooterAdProperties(placement) {
     placement.setAttribute("data-ea-type", "text");
     placement.setAttribute("data-ea-style", "fixedfooter");
   }