Show a friendly message to ad blockers

themes/cocoa-eh/layouts/blog/single.html

@@ -39,9 +39,7 @@
             </div>
             <div class="markdown" id="post-gallery-wrapper">
                 {{ partial "content" . }}
-                {{ if .Site.Params.book_recommendations }}
                 {{ partial "recommendations.html" . }}
-                {{ end }}                    
             </div>
             {{ if .Site.Params.share }}
             <div class="share">

themes/cocoa-eh/layouts/electronics/single.html

@@ -39,9 +39,7 @@
             </div>
             <div class="markdown" id="post-gallery-wrapper">
                 {{ partial "content" . }}
-                {{ if .Site.Params.book_recommendations }}
                 {{ partial "recommendations.html" . }}
-                {{ end }} 
             </div>
             {{ if .Site.Params.share }}
             <div class="share">

themes/cocoa-eh/layouts/partials/css/main.css

@@ -705,3 +705,7 @@ section.main .content .share a {
   padding: 1em 0;
   text-align: center;
 }
+
+#adblock-detected-message {
+  display: none;
+}

themes/cocoa-eh/layouts/partials/footer_scripts.html

@@ -35,6 +35,40 @@
   <script src="{{ .Site.BaseURL }}js/social-share-kit.min.js" defer></script>
 {{ end }}
 
+<script>
+    function adBlockDetected() {
+      var el = document.getElementById('adblock-detected-message');
+      if (el !== null) {
+        el.style.display = 'block';
+      }
+    }
+
+    function adBlockNotDetected() {}
+
+    if(typeof fuckAdBlock !== 'undefined' || typeof FuckAdBlock !== 'undefined') {
+      // If this is the case, it means that something tries to usurp are identity
+      // So, considering that it is a detection
+      adBlockDetected();
+    } else {
+      // Otherwise, you import the script FuckAdBlock
+      var importFAB = document.createElement('script');
+      importFAB.onload = function() {
+        // If all goes well, we configure FuckAdBlock
+        fuckAdBlock.onDetected(adBlockDetected)
+        fuckAdBlock.onNotDetected(adBlockNotDetected);
+      };
+      importFAB.onerror = function() {
+        // If the script does not load (blocked, integrity error, ...)
+        // Then a detection is triggered
+        adBlockDetected(); 
+      };
+      importFAB.integrity = 'sha256-xjwKUY/NgkPjZZBOtOxRYtK20GaqTwUCf7WYCJ1z69w=';
+      importFAB.crossOrigin = 'anonymous';
+      importFAB.src = 'https://cdnjs.cloudflare.com/ajax/libs/fuckadblock/3.2.1/fuckadblock.min.js';
+      document.head.appendChild(importFAB);
+    }    
+</script>
+
 {{ template "_internal/google_analytics_async.html" . }}
 
 <script>

themes/cocoa-eh/layouts/partials/recommendations.html

@@ -1,46 +1,44 @@
-{{ if in .Params.tags "git" }}
+{{ if .Site.Params.book_recommendations }}
-<div class="book-recommendations">
+    <div class="book-recommendations">
+        
+    {{ if in .Params.tags "git" }}
         <h2>Learn more about git!</h2>
         <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=fb127203-1e78-4aec-a921-7a3eb6ca208c"></script>                   
-</div>
+    {{ else if in .Params.tags "vim" }}
-{{ else if in .Params.tags "vim" }}
-<div class="book-recommendations">
         <h2>Learn more about Vim</h2>
         <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=a48acad7-f65c-42fe-b06c-52f6408bebf8"></script>
-</div>
+    {{ else if in .Params.tags "tmux" }}
-{{ else if in .Params.tags "tmux" }}
-<div class="book-recommendations">
         <h2>Learn more about tmux!</h2>
         <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=96165b63-472e-447d-888e-81870d021f53"></script>
-</div>
+    {{ else if or (in .Params.tags "electronics") (in .Params.tags "repair") }}
-{{ else if or (in .Params.tags "electronics") (in .Params.tags "repair") }}
-<div class="book-recommendations">
         <h2>Learn more about Electronics!</h2>
         <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=28129498-3909-469c-aeab-9616f6cc85b3"></script>
-</div>
+    {{ else if and (in .Params.tags "Linux") (in .Params.tags "debian") }}
-{{ else if and (in .Params.tags "Linux") (in .Params.tags "debian") }}
-<div class="book-recommendations">
         <h2>Learn more about Debian Linux!</h2>
         <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=e171e4b9-6d1d-4389-ba17-dbbbef1c4bb4"></script>
-</div> 
+    {{ else if and (in .Params.tags "linux") (in .Params.tags "ubuntu") }}
-{{ else if and (in .Params.tags "linux") (in .Params.tags "ubuntu") }}
-<div class="book-recommendations">
         <h2>Learn more about Ubuntu Linux!</h2>
         <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=ee0780d5-2985-4292-8952-c5ba7209fedc"></script>
-</div> 
+    {{ else if in .Params.tags "linux" }}
-{{ else if in .Params.tags "linux" }}
-<div class="book-recommendations">
         <h2>Learn more about Linux!</h2>
         <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=829b1fed-202e-4061-8ea2-e1cde1bc1a92"></script>
-</div> 
+    {{ else if or (in .Params.tags "rails") (in .Params.tags "ruby") }}
-{{ else if or (in .Params.tags "rails") (in .Params.tags "ruby") }}
-<div class="book-recommendations">
         <h2>Learn more about Ruby on Rails!</h2>
         <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=5e38aa9d-b1d6-4ecb-8ddd-731b73b5df90"></script>
-</div>  
+    {{ else if in .Params.tags "bitcoin" }}
-{{ else if in .Params.tags "bitcoin" }}
-<div class="book-recommendations">
         <h2>Learn more about Bitcoin!</h2>
         <script src="//z-na.amazon-adsystem.com/widgets/onejs?MarketPlace=US&adInstanceId=fe44a34a-a7c8-4401-9c8d-2c5c1f5b2178"></script>
-</div>      
+    {{ end }}
+
+    <div id="adblock-detected-message">
+        <p>
+            If you're seeing this message you've probably enabled some form of adblocker. I respect that. 
+        </p>
+        <p>
+            I use this space to show recommended books on Amazon.com in relation to 
+            the post you just read. This generates a small income that allows me to buy a 
+            book every now and then.
+        </p>
+    </div>
+
 {{ end }}