f

theme/index.hbs

@@ -304,18 +304,26 @@
 
                     <div id="content" class="content">
                         <main>
-                            <div class="mobilesponsor-wrapper">
-
-                            <a class="mobilesponsor" href="" target="_blank">
-                                <img src="" alt="" srcset="">
-                                <div class="mobilesponsor-title">
-                                </div>
-                                <div class="mobilesponsor-description">
-                                </div>
-                                <div class="mobilesponsor-cta"></div>
-                            </a>
+                            <div class="topsponsor-bsa" aria-hidden="true">
+                                <div id="bsa-zone_1773736844679-9_123456"></div>
                             </div>
                             {{{ content }}}
+                            <div class="bottomsponsor-wrapper">
+                                <a class="bottomsponsor" href="" target="_blank" rel="noopener noreferrer">
+                                    <img src="" alt="" srcset="">
+                                    <div class="bottomsponsor-title">
+                                    </div>
+                                    <div class="bottomsponsor-description">
+                                    </div>
+                                    <div class="bottomsponsor-cta"></div>
+                                </a>
+                                <div class="bottomsponsor-bsa" aria-hidden="true">
+                                    <div id="bsa-zone_1773736987437-6_123456"></div>
+                                </div>
+                            </div>
+                            <div class="bsa-crawler-slot" aria-hidden="true">
+                                <div id="bsa-zone_1773065859037-5_123456"></div>
+                            </div>
                         </main>
 
                         <nav class="nav-wrapper" aria-label="Page navigation">
@@ -356,7 +364,7 @@
                         </button>
                         <div id="sidetoc-wrapper" class="sidetoc-wrapper">
                             <nav class="pagetoc"></nav>
-                            <a class="sidesponsor" href="" target="_blank">
+                            <a class="sidesponsor" href="" target="_blank" rel="noopener noreferrer">
                                 <img src="" alt="" srcset="">
                                 <div class="sponsor-title">
                                 </div>
@@ -364,6 +372,9 @@
                                 </div>
                                 <div class="sponsor-cta"></div>
                             </a>
+                            <div class="sidesponsor-bsa" aria-hidden="true">
+                                <div id="bsa-zone_1773737041447-5_123456"></div>
+                            </div>
                         </div>
                     </div>
                 </div>

theme/pagetoc.css

@@ -2,19 +2,36 @@
     .sidetoc {
         display: none !important;
     }
-    .mobilesponsor {
+    .topsponsor-bsa {
+        margin-top: 25px;
+        margin-bottom: 25px;
+        background-color: var(--bg);
+        border: 1px solid var(--table-border-color);
+        border-radius: 8px;
+        padding: 5px;
+        display: none; /*changed via JS once ad is loaded*/
+        overflow: hidden;
+    }
+    .bottomsponsor-wrapper {
+        margin-top: 25px;
+    }
+    .bottomsponsor,
+    .bottomsponsor-bsa {
         margin-top: 25px;
-        max-height: 40%;
-        height: 40%;
         background-color: var(--bg);
         border: 1px solid var(--table-border-color);
         border-radius: 8px;
         padding: 5px;
         display: none; /*changed via JS once ad is loaded*/
-        flex-direction: column;
         text-decoration: none !important;
     }
-    .mobilesponsor img {
+    .bottomsponsor {
+        flex-direction: column;
+    }
+    .bottomsponsor-bsa {
+        overflow: hidden;
+    }
+    .bottomsponsor img {
         height: auto;
         width: 40%;
         padding: 10px;        
@@ -22,10 +39,10 @@
         transition-timing-function: cubic-bezier(.4,0,.2,1);
         transition-duration: .3s;
     }
-    /* .mobilesponsor:hover img{
+    /* .bottomsponsor:hover img{
        width: 30%;
     } */
-    .mobilesponsor .mobilesponsor-title{
+    .bottomsponsor .bottomsponsor-title{
         margin-top: 5px;
         margin-bottom: 5px;
         margin-left: 15px;
@@ -34,7 +51,7 @@
         font-size: 2rem;
         color: var(--sponsor-fg);
     }
-    .mobilesponsor .mobilesponsor-description{
+    .bottomsponsor .bottomsponsor-description{
         display:block;
         margin-top: 5px;
         margin-bottom: 15px;
@@ -45,10 +62,10 @@
         transition-timing-function: cubic-bezier(.4,0,.2,1);
         transition-duration: .3s;
     }
-    /* .mobilesponsor:hover .mobilesponsor-description{
+    /* .bottomsponsor:hover .bottomsponsor-description{
         display:block;
     } */
-    .mobilesponsor .mobilesponsor-cta{
+    .bottomsponsor .bottomsponsor-cta{
         margin-top: auto;
         margin-bottom: 10px;
         margin-left: 20px;
@@ -65,6 +82,17 @@
     main {
         position: relative;
     }
+    .topsponsor-bsa {
+        margin: 0 auto 32px;
+        width: min(100%, 760px);
+        background-color: transparent;
+        border: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent);
+        border-radius: 8px;
+        padding: 12px;
+        display: none; /*changed via JS once ad is loaded*/
+        overflow: hidden;
+        backdrop-filter: blur(6px);
+    }
     .sidetoc {
         width: 250px;
         margin-top: 25px;
@@ -149,8 +177,77 @@
         background-color: var(--fg);
         color: var(--bg);
     }
-    .mobilesponsor-wrapper {
-        display: none !important;
+    .sidesponsor-bsa {
+        max-height: 40%;
+        height: 40%;
+        background-color: transparent;
+        border: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent);
+        border-radius: 8px;
+        padding: 5px;
+        display: none; /*changed via JS once ad is loaded*/
+        overflow: hidden;
+        backdrop-filter: blur(6px);
+    }
+    .bottomsponsor-wrapper {
+        margin-top: 32px;
+    }
+    .bottomsponsor,
+    .bottomsponsor-bsa {
+        margin: 0 auto;
+        width: min(100%, 760px);
+        background-color: transparent;
+        border: 1px solid color-mix(in srgb, var(--table-border-color) 70%, transparent);
+        border-radius: 8px;
+        padding: 12px;
+        display: none; /*changed via JS once ad is loaded*/
+        text-decoration: none !important;
+        backdrop-filter: blur(6px);
+    }
+    .bottomsponsor {
+        flex-direction: column;
+    }
+    .bottomsponsor-bsa {
+        overflow: hidden;
+    }
+    .bottomsponsor img {
+        height: auto;
+        width: 40%;
+        max-width: 240px;
+        padding: 10px;
+        transition-property: all;
+        transition-timing-function: cubic-bezier(.4,0,.2,1);
+        transition-duration: .3s;
+    }
+    .bottomsponsor .bottomsponsor-title {
+        margin-top: 5px;
+        margin-bottom: 5px;
+        margin-left: 15px;
+        margin-right: 15px;
+        font-weight: 800;
+        font-size: 2rem;
+        color: var(--sponsor-fg);
+    }
+    .bottomsponsor .bottomsponsor-description {
+        display: block;
+        margin-top: 5px;
+        margin-bottom: 15px;
+        margin-left: 15px;
+        margin-right: 15px;
+        color: var(--sponsor-fg);
+        transition-property: all;
+        transition-timing-function: cubic-bezier(.4,0,.2,1);
+        transition-duration: .3s;
+    }
+    .bottomsponsor .bottomsponsor-cta {
+        margin-top: auto;
+        margin-bottom: 10px;
+        margin-left: 20px;
+        margin-right: 20px;
+        text-align: center;
+        padding: 7px;
+        border-radius: 8px;
+        background-color: var(--fg);
+        color: var(--bg);
     }
 
     .sidetoc-toggle {
@@ -238,3 +335,50 @@
         display: none;
     }
 }
+
+.bsa-crawler-slot {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    opacity: 0;
+    pointer-events: none;
+}
+
+@media only screen and (min-width: 0px) and (min-height: 0px) {
+    #bsa-zone_1773736844679-9_123456 {
+        min-height: 100px;
+    }
+
+    #bsa-zone_1773736987437-6_123456 {
+        min-height: 100px;
+    }
+
+    #bsa-zone_1773065859037-5_123456 {
+        min-height: 1px;
+    }
+
+    #bsa-zone_1773737041447-5_123456 {
+        min-height: 0px;
+    }
+}
+
+@media only screen and (min-width: 770px) and (min-height: 0px) {
+    #bsa-zone_1773736844679-9_123456 {
+        min-height: 90px;
+    }
+
+    #bsa-zone_1773736987437-6_123456 {
+        min-height: 280px;
+    }
+
+    #bsa-zone_1773065859037-5_123456 {
+        min-height: 1px;
+    }
+}
+
+@media only screen and (min-width: 880px) and (min-height: 0px) {
+    #bsa-zone_1773737041447-5_123456 {
+        min-height: 250px;
+    }
+}

theme/sponsor.js

@@ -1,57 +1,189 @@
 ;(function sponsor() {
   var sponsorSide = document.querySelector(".sidesponsor")
-  var sponsorImg = sponsorSide.querySelector(".sidesponsor img")
-  var sponsorTitle = sponsorSide.querySelector(".sponsor-title")
-  var sponsorDescription = sponsorSide.querySelector(".sponsor-description")
-  var sponsorCTA = sponsorSide.querySelector(".sponsor-cta")
-  var mobilesponsorSide = document.querySelector(".mobilesponsor")
-  var mobilesponsorImg = mobilesponsorSide.querySelector(".mobilesponsor img")
-  var mobilesponsorTitle = mobilesponsorSide.querySelector(
-    ".mobilesponsor-title"
-  )
-  var mobilesponsorDescription = mobilesponsorSide.querySelector(
-    ".mobilesponsor-description"
-  )
-  var mobilesponsorCTA = mobilesponsorSide.querySelector(".mobilesponsor-cta")
+  var sponsorImg = sponsorSide && sponsorSide.querySelector("img")
+  var sponsorTitle = sponsorSide && sponsorSide.querySelector(".sponsor-title")
+  var sponsorDescription =
+    sponsorSide && sponsorSide.querySelector(".sponsor-description")
+  var sponsorCTA = sponsorSide && sponsorSide.querySelector(".sponsor-cta")
+  var sponsorSideBsa = document.querySelector(".sidesponsor-bsa")
+  var topSponsorBsa = document.querySelector(".topsponsor-bsa")
 
-  async function getSponsor() {
-  const currentUrl = encodeURIComponent(window.location.href);
-  const url = `https://cloud.hacktricks.wiki/sponsor?current_url=${currentUrl}`;
-    try {
-      const response = await fetch(url, { method: "GET" })
-      if (!response.ok) {
-        throw new Error(`Response status: ${response.status}`)
+  var bottomSponsor = document.querySelector(".bottomsponsor")
+  var bottomSponsorImg = bottomSponsor && bottomSponsor.querySelector("img")
+  var bottomSponsorTitle =
+    bottomSponsor && bottomSponsor.querySelector(".bottomsponsor-title")
+  var bottomSponsorDescription =
+    bottomSponsor && bottomSponsor.querySelector(".bottomsponsor-description")
+  var bottomSponsorCTA =
+    bottomSponsor && bottomSponsor.querySelector(".bottomsponsor-cta")
+  var bottomSponsorBsa = document.querySelector(".bottomsponsor-bsa")
+
+  if (
+    !sponsorSide ||
+    !bottomSponsor ||
+    !sponsorSideBsa ||
+    !topSponsorBsa ||
+    !bottomSponsorBsa
+  ) {
+    return
+  }
+
+  var BSA_SCRIPT_BASE = "https://cdn4.buysellads.net/pub/hacktricks.js"
+  var bsaScriptPromise
+
+  function getBsaScriptSrc() {
+    return BSA_SCRIPT_BASE + "?" + (new Date() - (new Date() % 600000))
+  }
+
+  function ensureBsaScript() {
+    if (bsaScriptPromise) {
+      return bsaScriptPromise
+    }
+
+    var existingScript = document.querySelector(
+      'script[src^="' + BSA_SCRIPT_BASE + '"]'
+    )
+    if (existingScript) {
+      bsaScriptPromise = Promise.resolve(existingScript)
+      return bsaScriptPromise
+    }
+
+    bsaScriptPromise = new Promise(function(resolve, reject) {
+      var bsaOptimize = document.createElement("script")
+      bsaOptimize.type = "text/javascript"
+      bsaOptimize.async = true
+      bsaOptimize.src = getBsaScriptSrc()
+      bsaOptimize.onload = function() {
+        resolve(bsaOptimize)
       }
+      bsaOptimize.onerror = reject
+      ;(
+        document.getElementsByTagName("head")[0] ||
+        document.getElementsByTagName("body")[0]
+      ).appendChild(bsaOptimize)
+    })
 
-      const json = await response.json()
-      var sponsor = json.sponsor
-      sponsorImg.src = sponsor.image_url
-      sponsorTitle.textContent = sponsor.name
-      sponsorDescription.innerHTML = sponsor.description
-      sponsorSide.href = sponsor.link
-      sponsorCTA.textContent = sponsor.cta
-      sponsorSide.style.display = "flex"
+    return bsaScriptPromise
+  }
 
-      mobilesponsorImg.src = sponsor.image_url
-      mobilesponsorTitle.textContent = sponsor.name
-      mobilesponsorDescription.innerHTML = sponsor.description
-      mobilesponsorSide.href = sponsor.link
-      mobilesponsorCTA.textContent = sponsor.cta
-      mobilesponsorSide.style.display = "flex"
+  function setLegacySponsorContent(sponsor, container, nodes) {
+    nodes.img.src = sponsor.image_url
+    nodes.img.alt = sponsor.name
+    nodes.title.textContent = sponsor.name
+    nodes.description.innerHTML = sponsor.description
+    container.href = sponsor.link
+    nodes.cta.textContent = sponsor.cta
+    container.style.display = "flex"
 
-      if (sponsor.name.length > 45) {
-        sponsorTitle.style.fontSize = "1.6rem"
-        mobilesponsorTitle.style.fontSize = "1.6rem"
-      }
+    if (sponsor.name.length > 45) {
+      nodes.title.style.fontSize = "1.6rem"
+    }
 
-      if (sponsor.description.length > 250) {
-        sponsorDescription.style.fontSize = "1.4rem"
-        mobilesponsorDescription.style.fontSize = "1.4rem"
-      }
-    } catch (error) {
-      console.error(error.message)
+    if (sponsor.description.length > 250) {
+      nodes.description.style.fontSize = "1.4rem"
     }
   }
 
-  getSponsor()
+  async function fetchLegacySponsor() {
+    var currentUrl = encodeURIComponent(window.location.href)
+    var url = "https://cloud.hacktricks.wiki/sponsor?current_url=" + currentUrl
+    var response = await fetch(url, { method: "GET" })
+
+    if (!response.ok) {
+      throw new Error("Response status: " + response.status)
+    }
+
+    var json = await response.json()
+    return json.sponsor
+  }
+
+  function renderLegacySideSponsor(sponsor) {
+    setLegacySponsorContent(sponsor, sponsorSide, {
+      img: sponsorImg,
+      title: sponsorTitle,
+      description: sponsorDescription,
+      cta: sponsorCTA,
+    })
+  }
+
+  function renderLegacyBottomSponsor(sponsor) {
+    setLegacySponsorContent(sponsor, bottomSponsor, {
+      img: bottomSponsorImg,
+      title: bottomSponsorTitle,
+      description: bottomSponsorDescription,
+      cta: bottomSponsorCTA,
+    })
+  }
+
+  async function loadLegacySponsor() {
+    var sponsor = await fetchLegacySponsor()
+    renderLegacySideSponsor(sponsor)
+    renderLegacyBottomSponsor(sponsor)
+  }
+
+  function shouldUseBsa() {
+    var params = new URLSearchParams(window.location.search)
+    var forcedProvider = params.get("ads")
+
+    if (forcedProvider === "bsa") {
+      return true
+    }
+
+    if (forcedProvider === "legacy") {
+      return false
+    }
+
+    if (
+      window.location.hostname === "localhost" ||
+      window.location.hostname === "127.0.0.1" ||
+      window.location.hostname === "::1"
+    ) {
+      return true
+    }
+
+    return Math.floor(Math.random() * 5) !== 0
+  }
+
+  async function loadBsaSponsor() {
+    bottomSponsorBsa.style.display = "block"
+    if (window.matchMedia("(min-width: 880px)").matches) {
+      sponsorSideBsa.style.display = "block"
+      topSponsorBsa.style.display = "none"
+    } else {
+      sponsorSideBsa.style.display = "none"
+      topSponsorBsa.style.display = "block"
+    }
+    await ensureBsaScript()
+  }
+
+  async function initSponsor() {
+    try {
+      var useBsa = shouldUseBsa()
+      window.__hacktricksAdsProvider = useBsa ? "bsa" : "legacy"
+      console.info("HackTricks ads provider:", window.__hacktricksAdsProvider)
+
+      if (useBsa) {
+        await loadBsaSponsor()
+        return
+      }
+
+      await loadLegacySponsor()
+    } catch (error) {
+      console.error(error.message || error)
+
+      if (sponsorSideBsa.style.display === "block") {
+        sponsorSideBsa.style.display = "none"
+      }
+      topSponsorBsa.style.display = "none"
+      bottomSponsorBsa.style.display = "none"
+
+      try {
+        await loadLegacySponsor()
+      } catch (legacyError) {
+        console.error(legacyError.message || legacyError)
+      }
+    }
+  }
+
+  initSponsor()
 })()