diff --git a/theme/index.hbs b/theme/index.hbs index df972c87c..ead6e7697 100644 --- a/theme/index.hbs +++ b/theme/index.hbs @@ -304,18 +304,26 @@
-
- - - -
-
-
-
-
- + {{{ content }}} +
+ + +
+
+
+
+
+ + +
+
diff --git a/theme/pagetoc.css b/theme/pagetoc.css index 8108446b5..52dda983c 100644 --- a/theme/pagetoc.css +++ b/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; + } +} diff --git a/theme/sponsor.js b/theme/sponsor.js index fb25a468a..db06db8e0 100644 --- a/theme/sponsor.js +++ b/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() })()