reworked comments into bio/about

config.toml

@@ -13,6 +13,7 @@ enableGitInfo = true
     category = "categories"
 
 [params]
+    level = 35
     favicon = "/img/avatar-icon.png"
     pagination = 15
 

content/about.md

@@ -37,6 +37,8 @@ disableComments: true
 * Besides various formal [teaching assignments](/teaching/) at KU Leuven, I've also coached software developers in different companies, and occasionally organize bread baking workshops.
 * I also like public speaking.
 
+You can reach me via e-mail: <a class="meel">say hello</a>.
+
 ---
 
 ## What's a _multiclass_?

themes/brainbaking-minimal/assets/js/brainbaking.js

@@ -46,6 +46,15 @@ document.addEventListener("DOMContentLoaded",function() {
 	    }
     }).init();
 
+	const meel = document.querySelector('.meel');
+	const 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'><gju qzogg='wqcb wqcb-hslh' kwrhv='24' vswuvh='24'><igs lzwby:vfst='#zcqy'></igs></gju></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);});
+		})
+	}
+
 	(function() {
 		const $target = document.querySelector('#searchapp');
 		const $pages = document.querySelector('#resultaten .pages');

themes/brainbaking-minimal/assets/sass/_brainbaking.sass

@@ -26,6 +26,21 @@ nav, footer
   font-size: 0.85rem
   z-index: 9
 
+.meel
+  cursor: pointer
+noscript
+  border-left: 5px solid darkred
+  padding: 0.5rem
+
+.support
+  font-size: 1rem
+
+.avatar
+  float: right
+  margin-top: 0rem
+  margin-left: 1.5rem
+  img
+    border-radius: 50%
 
 .copyright 
     margin: 15px 0

themes/brainbaking-minimal/layouts/partials/icons.html

@@ -1,4 +1,8 @@
 <svg width="0" height="0" class="hidden">
+  <symbol viewBox="0 0 24 24" id="lock" xmlns="http://www.w3.org/2000/svg">
+    <path fill="currentColor" d="M14 15C14 16.11 13.11 17 12 17C10.89 17 10 16.1 10 15C10 13.89 10.89 13 12 13C13.11 13 14 13.9 14 15M13.09 20C13.21 20.72 13.46 21.39 13.81 22H6C4.89 22 4 21.1 4 20V10C4 8.89 4.89 8 6 8H7V6C7 3.24 9.24 1 12 1S17 3.24 17 6V8H18C19.11 8 20 8.9 20 10V13.09C19.67 13.04 19.34 13 19 13C18.66 13 18.33 13.04 18 13.09V10H6V20H13.09M9 8H15V6C15 4.34 13.66 3 12 3S9 4.34 9 6V8M21.34 15.84L17.75 19.43L16.16 17.84L15 19L17.75 22L22.5 17.25L21.34 15.84Z" />
+  </symbol>
+
   <symbol viewBox="0 0 24 24" id="tech" xmlns="http://www.w3.org/2000/svg">
       <path fill="currentColor" d="M14 2H6C4.89 2 4 2.9 4 4V20C4 21.11 4.89 22 6 22H18C19.11 22 20 21.11 20 20V8L14 2M18 20H6V4H13V9H18V20M9.54 15.65L11.63 17.74L10.35 19L7 15.65L10.35 12.3L11.63 13.56L9.54 15.65M17 15.65L13.65 19L12.38 17.74L14.47 15.65L12.38 13.56L13.65 12.3L17 15.65Z" />
   </symbol>

themes/brainbaking-minimal/layouts/partials/single-comments.html

@@ -4,15 +4,24 @@
             <svg class='icon icon-text' width='24' height='24'>
                 <use xlink:href='#discuss'></use>
             </svg>
-            Join the Discussion
+            Bio and Support
         </h4>
 
-        {{- if (ne hugo.Environment "development") }}
-            <script defer src="https://commento.brainbaking.com/js/commento.js"></script>
-            <script defer src="https://commento.brainbaking.com/js/count.js"></script>
-            <div id="commento"></div>
-        {{- else }}
-            (localhost, comments disabled)
-        {{- end }}
+        <div class="avatar">
+            <img class="lazyload" data-src="/img/avatar.jpg" alt="Me!" />
+        </div>
+        <div class="support">
+            <p>
+                I'm Wouter, a level {{ .Site.Params.level }} <em>Brain Baker</em>, and I love the smell of freshly baked thoughts (and bread) in the morning. I sometimes convince others to bake their brain (and bread) too.
+                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: [firstname] on this domain.
+            </noscript>
+        </div>
     </article>
 {{ end }}