Add a notice about missing adblockers to my site

Credit to fourtonfish for the idea and text

pelicanconf.py

@@ -134,6 +134,7 @@ def __post_init__(self):
             "js/fuji.js",
             "js/bigfoot.js",
             "jquery.magnific-popup.js",
+            "js/adblocker.js",
         ),
         {
             "output": "js/fuji.min.js",

themes/offby1/scss/adblock-detect.scss

@@ -0,0 +1,41 @@
+.ftf-dma-note{
+  position: fixed;
+  bottom: 5px;
+  left: 5px;
+  right: 5px;
+  z-index: 9999999;
+  padding: 0 20px 0;
+  text-align: start;
+  background: #fff;
+  color: #3a3a3a;
+  border: 5px solid #3a3a3a;
+
+  // @media (pointer:none), (pointer:coarse) {
+  //   display: none !important;
+  // }
+}
+
+.ftf-dma-note-content-wrapper{
+  position: relative;
+}
+
+.ftf-dma-note-header{
+  margin-top: 1rem;
+  font-size: 1.3rem;
+  font-weight: bold;
+}
+
+.ftf-dma-close-btn{
+  position: absolute;
+  top: 0;
+  right: 0;
+  cursor: pointer;
+}
+
+.ftf-dma-close-btn:hover{
+  text-decoration: underline;
+}
+
+#ftf-dma-note.d-none{
+  display: none !important;
+}

themes/offby1/scss/nativeads.js.scss

@@ -0,0 +1,9 @@
+.ftf-dma-note{
+  display: block !important;
+  pointer-events: all !important;
+}
+
+.ftf-dma-note.d-none{
+  display: none !important;
+  pointer-events: none !important;
+}

themes/offby1/static/js/adblocker.js

@@ -0,0 +1,33 @@
+function ready(fn) {
+  if (document.readyState != "loading") {
+    fn();
+  } else {
+    document.addEventListener("DOMContentLoaded", fn);
+  }
+}
+
+ready(function () {
+  const e = document.createElement("div");
+  e.id = "ftf-dma-target";
+  e.style.display = "none";
+  document.body.appendChild(e);
+});
+
+ready(() => {
+  const cookieNameValue = "ftf-dma-notice=shown";
+  const note = document.getElementById("ftf-dma-note");
+  const noteCloseButton = document.getElementById("ftf-dma-close-btn");
+
+  if (note !== null && noteCloseButton !== null) {
+    noteCloseButton.onclick = (ev) => {
+      note.classList.add("d-none");
+      document.cookie = cookieNameValue;
+    };
+  }
+
+  if (document.cookie.indexOf(cookieNameValue) === -1) {
+    if (note !== null) {
+      note.classList.remove("d-none");
+    }
+  }
+});

themes/offby1/templates/base.html.j2

@@ -108,6 +108,27 @@
             </div>
         </header>
 
+        <style>
+            .ftf-dma-note {
+            display: none;
+            pointer-events: none;
+            }
+        </style>
+        <div id="ftf-dma-note" class="ftf-dma-note d-none ad native-ad native-ad-1 ytd-j yxd-j yxd-jd aff-content-col aff-inner-col aff-item-list ark-ad-message inplayer-ad inplayer_banners in_stream_banner trafficjunky-float-right dbanner preroll-blocker happy-inside-player blocker-notice blocker-overlay exo-horizontal ave-pl bottom-hor-block brs-block advboxemb wgAdBlockMessage glx-watermark-container overlay-advertising-new header-menu-bottom-ads rkads mdp-deblocker-wrapper amp-ad-inner imggif bloc-pub bloc-pub2 hor_banner aan_fake aan_fake__video-units rps_player_ads fints-block__row full-ave-pl full-bns-block vertbars video-brs player-bns-block wps-player__happy-inside gallery-bns-bl stream-item-widget adsbyrunactive happy-under-player adde_modal_detector adde_modal-overlay ninja-recommend-block aoa_overlay message">
+            <div class="ftf-dma-note-content-wrapper">
+                <span onclick="" id="ftf-dma-close-btn" class="ftf-dma-close-btn">Close</span>
+                <div class="ftf-dma-note-header">
+                    <p>Ad-blocker not detected</p>
+                </div>
+                <div class="ftf-dma-note-content">
+                    <p>
+                        Consider installing a browser extension that blocks ads and other malicious scripts in your browser to protect your privacy and security. <a href="https://stefanbohacek.com/project/detect-missing-adblocker-wordpress-plugin/#resources" target="_blank">Learn more.</a>
+                    </p>
+                </div>
+            </div>
+        </div>
+
+
         <main>
 	        <div class="container-lg clearfix">
                 <!-- content block begins -->