bio and support instead of commento

config.toml

@@ -19,7 +19,8 @@ summaryLength = 20
   [markup.goldmark.renderer]
     unsafe= true
 
-[params]  
+[params] 
+  level = 35
   description = "Retro game thoughts"
   copyright = "<a href='/no-copyright'>No &copy; reserved - sharing is caring</a>. <br/>An integral part of <a href='https://brainbaking.com/' rel='noopener' target='_blank'>Brain Baking</a>."
 

themes/jefklak-creative-portfolio/assets/sass/_codex.sass

@@ -31,6 +31,24 @@ body
 html body, h1, h2, h3, h4, h5, h6
   font-family: $font-stack
 
+.meel
+  cursor: pointer
+
+.support
+  font-size: 1rem
+  margin-bottom: 4rem
+  noscript
+    border-left: 5px solid darkred
+    padding: 0.5rem
+
+.avatar
+  float: right
+  margin-top: 0rem
+  margin-left: 1.5rem
+  img
+    border-radius: 50%
+
+
 
 .rfloat 
 	float: right

themes/jefklak-creative-portfolio/layouts/_default/single.html

@@ -51,21 +51,7 @@
          </div>
 
 
-        {{ if (not .Params.disableComments) }}
-          <hr/>
-          <h3 class="page-header"><i class="fa fa-comments-o"></i>&nbsp;
-              Join the Discussion
-          </h3>        
-
-        {{- if (ne hugo.Environment "development") }}
-          <script defer src="https://commento.jefklakscodex.com/js/commento.js"></script>
-          <script src="https://commento.jefklakscodex.com/js/count.js"></script>
-        {{- else }}
-          (localhost, commento not loaded)
-        {{- end }}
-          <div id="commento"></div>
-
-        {{ end }}
+         {{ partial "single-comments" . }}
 
       </article>
     </div>

themes/jefklak-creative-portfolio/layouts/partials/single-comments.html

@@ -0,0 +1,26 @@
+{{ if (not .Params.disableComments) }}
+    <hr/>
+    <h3 class="page-header"><i class="fa fa-comments-o"></i>&nbsp;
+        Bio and Support
+    </h3>
+
+    <div class="avatar">
+        <noscript>
+            <img src="/img/avatar.jpg" alt="Me!" />
+        </noscript>                 
+        <img class="lazyload" data-src="/img/avatar.jpg" alt="Me!" />
+    </div>
+    <div class="support">
+        <p>
+            I'm Wouter, a level {{ .Site.Params.level }} <em>Retro Gamer</em>, and I love the sight of experience points on old and forgotten hardware. I sometimes convince others join in on the nostalgic grind.
+            Read more <a href="/about">about me here</a>.
+        </p>
+        <p>
+            If you found this article amusing and/or helpful, you can <a href="https://ko-fi.com/woutergroeneveld"><strong>buy me a coffee</strong></a> - although I'm more of a tea fan myself. I also like to hear your feedback via e-mail: <a class="meel">say hello</a>. Thanks!
+        </p>
+        <noscript>
+            JavaScript is disabled. I use it to obfuscate my e-mail, keeping spambots at bay. <br/>
+            Reach me using: <code>[firstname] at [brainbaking] dot [you-know]</code>.
+        </noscript>
+    </div>
+{{ end }}

themes/jefklak-creative-portfolio/static/js/codex.js

@@ -68,6 +68,17 @@ $(function() {
 		$('.sidebar-game-platform').height($('.sidebar-content .img-inactive').height());
 	};
 
+	var obfuscateMail = function() {
+		var meel = document.querySelector('.meel');
+		var enc = "<o ofwo-zopsz='aowz orrfsgg' vfst='aowzhc:kcihsf@pfowbpoywbu.qca'>kcihsf@pfowbpoywbu.qca</o>  <o ofwo-zopsz='sbqfmdhwcb DUD ysm' vfst='vhhdg://ysmg.cdsbdud.cfu/jyg/j1/pm-twbusfdfwbh/24O319TO8708OP6961997205S66Q99941091O46R' hwhzs='Sbqfmdh aowzg kwhv am UDU ysm'><w qzogg='to to-zcqy' ofwo-vwrrsb='hfis'></w></o>"
+
+		if(meel) {
+			meel.addEventListener('click', function() {
+				meel.innerHTML = enc.replace(/[a-zA-Z]/g,function(c){return String.fromCharCode((c<="Z"?90:122)>=(c=c.charCodeAt(0)+12)?c:c-26);});
+			})
+		}		
+	}
+
 	var animateActiveGameImagesIfFound = function() {
 		var animate = function() {
 			var active = $(this).find('.img-active');
@@ -93,4 +104,5 @@ $(function() {
 	setSideBarPlatformHeight();
 	addRandomImageToSideBarMenus();
 	enableScrollToTopOnInternalLinks();
+	obfuscateMail();
 });