EthicalAd: better ad position for Docsify (#470)

Show how simple is to add a better ad positioning for a documentation
tool that we know.

1. Find the CSS selector that allows to detect the framework
2. Find the CSS selector for the ad position
3. Add small CSS for styling if required


![Screenshot_2024-12-12_12-12-47](https://github.com/user-attachments/assets/7b3dac1f-701f-4e55-83b4-13bb86e96690)


Related #447

Author: humitos

src/ethicalads.css

@@ -242,3 +242,9 @@ div.ethical-footer {
   margin-left: 10% !important;
   margin-right: 10% !important;
 }
+
+/* Docsify */
+.ethical-docsify {
+  margin-left: 10% !important;
+  margin-right: 10% !important;
+}

src/ethicalads.js

@@ -135,6 +135,18 @@ export class EthicalAdsAddon extends AddonBase {
           placement.classList.add("ethical-alabaster");
           placement.classList.add("ethical-docusaurus");
 
+          placement.setAttribute("data-ea-type", "readthedocs-sidebar");
+          placement.setAttribute("data-ea-style", "image");
+          knownPlacementFound = true;
+        }
+      } else if (docTool.isDocsify()) {
+        selector = "main > aside > div.sidebar-nav";
+        element = document.querySelector(selector);
+
+        if (this.elementAboveTheFold(element)) {
+          placement.classList.add("ethical-alabaster");
+          placement.classList.add("ethical-docsify");
+
           placement.setAttribute("data-ea-type", "readthedocs-sidebar");
           placement.setAttribute("data-ea-style", "image");
           knownPlacementFound = true;

src/utils.js

@@ -407,10 +407,21 @@ export class DocumentationTool {
       return MKDOCS;
     }
 
+    if (this.isDocsify()) {
+      return DOCSIFY;
+    }
+
     console.debug("We were not able to detect the documentation tool.");
     return null;
   }
 
+  isDocsify() {
+    if (document.querySelectorAll("head > link[href*=docsify]").length) {
+      return true;
+    }
+    return false;
+  }
+
   isSphinx() {
     return (
       this.isSphinxAlabasterLikeTheme() ||