Update blog design

.prettierignore

@@ -19,5 +19,6 @@ src/themes/picardo/layouts/partials/preview.html
 src/themes/picardo/layouts/partials/preview-small.html
 src/themes/picardo/layouts/partials/views.html
 src/themes/picardo/layouts/partials/webmentions.html
+src/themes/picardo/layouts/partials/reply-button.html
 src/themes/picardo/layouts/partials/latest_commit.html
 src/themes/picardo/layouts/shortcodes/info.html

content/nl/post/nadenken-over-privacy.md

@@ -7,8 +7,6 @@ tags:
 - open-source
 ---
 
-*Ik heb officieel mijn elke-week-een-blogpost challenge gefailed. Oeps.*
-
 Ik ben bezig met het lezen van [This is how they tell me the world ends](https://www.bibliotheek.nl/catalogus/titel.434364606.html/this-is-how-they-tell-me-the-world-ends/). Er staat niet heel veel nieuwe of schokkende informatie in, maar het is toch nogal een eye-opener. Het boek gaat over hoe regeringen kritieke bugs in software (ookwel zero-days) kopen en exploiteren om toegang tot data te krijgen die ze niet hadden mogen hebben.
 
 Ik heb nooit veel vertrouwen gehad in grote bedrijven en apps. Mijn informatica docente staat elke maandag voor de klas een futuritisch sprookje te vertellen over hoe apps en bedrijven ons leven zoveel makkelijker hebben gemaakt en hoe ons technologisch utopia te wachten staat in de toekomst. Ik ben zelf van mening dat dit een nogal naïef en ondoordacht standpunt is.
@@ -36,5 +34,3 @@ Ik krijg van leeftijdsgenoten vaak te horen dat ze het gek vinden dat ik zo priv
 - Ik vind het leuk om zelf de technische problemen op te lossen en systemen te beheren waarin mijn data staat.
 
 Dus, hoe zit het met jullie (mijn lezers). Hoe denken jullie over privacy? Hebben jullie vragen of opmerkingen? Je kan een comment achterlaten :)
-
-*Als je wil dat ik reageer op je comment moet je deze via email versturen met de knop hieronder*.

src/assets/css/source.css

@@ -20,6 +20,10 @@
         object-position: top right;
     }
 
+    .reply-button {
+        @apply block cursor-pointer bg-primary text-foreground dark:text-background hover:brightness-90 outline-none rounded-none shadow-none px-10 py-6 m-10 max-w-max mx-auto text-xl mb-4;
+    }
+
     .h-entry.preview {
         @apply rounded-md p-6 bg-[#ebf1fa] dark:bg-slate/70 shadow-md max-w-[52rem] my-5 mx-auto;
     }
@@ -118,6 +122,13 @@
     nav ul.menu li a {
         @apply no-underline;
     }
+
+    .post-footer {
+        opacity: 0.7;
+    }
+    .post-footer::before {
+        @apply block content-[""] bg-foreground/30 w-[400px] h-[2px] sm:ml-[10%] md:ml-[20.5%] mb-[20px];
+    }
 }
 
 @layer base {
@@ -150,3 +161,7 @@ comments are generated client-side using JS */
 .comments li {
     list-style: none;
 }
+
+.webmentions {
+    display: none;
+}

src/assets/js/webmention.js

@@ -194,8 +194,10 @@ A more detailed example:
     }
 
     function formatComments(comments) {
-        let html = '<h2>Webmentions</h2><ul class="comments p-0">';
+        let html = '<ul class="comments p-0">';
         comments.forEach(function (c) {
+            document.querySelector("webmentions").style.display = "block";
+
             html +=
                 '<li class="rounded-md p-6 list-style-none bg-[#ebf1fa] dark:bg-slate/70 shadow-md my-5 max-w-[52rem]"><div class="webmention">';
 

src/themes/picardo/layouts/_default/single.html

@@ -60,6 +60,7 @@ <h1 class="post-title p-name">{{ $.Title }}</h1>
 
     <aside>
         <section>
+            {{ partial "reply-button" . }}
             {{ partial "webmentions" . }}
         </section>
     </aside>

src/themes/picardo/layouts/partials/reply-button.html

@@ -0,0 +1,17 @@
+<a
+    href="mailto:hello@geheimesite.nl?subject=“{{ .Title }}”"
+    class="reply-button"
+    >Reply via email</a
+>
+
+{{ $commentparade := "https://quill.p3k.io?dontask=1&name=dontask&me=https%3A%2F%2Fcommentpara.de%2F&reply=" }}
+{{ $permalink := (urlquery .Permalink) | safeURL }}
+
+<p class="text-xs text-center">Or: 
+    <a
+        class="button btnp p-1"
+        href="{{ $commentparade }}{{ $permalink }}"
+        target="_blank"
+        >leave a webmention</a
+    >
+</p>

src/themes/picardo/layouts/partials/webmentions.html

@@ -18,21 +18,11 @@
 {{ $commentparade := "https://quill.p3k.io?dontask=1&name=dontask&me=https%3A%2F%2Fcommentpara.de%2F&reply=" }}
 {{ $permalink := (urlquery .Permalink) | safeURL }}
 
-<!-- Webmentions will be rendered in this section using webmention.js -->
-<section class="webmentions section" id="webmentions">
+<section class="webmentions section" id="webmentions-wrapper">
     <h2>Webmentions</h2>
 
-    <p class="supplement">{{ i18n "loading_comments" }} <a href="{{ $commentparade }}{{ $permalink }}" target="_blank">{{ i18n "wannabe_first" }}</a></p>
+    <div id="webmentions">
+        <p class="supplement">{{ i18n "loading_comments" }} <a href="{{ $commentparade }}{{ $permalink }}" target="_blank">{{ i18n "wannabe_first" }}</a></p>
+    </div>    
 </section>
 
-<!-- Share buttons -->
-<p class="mb-0 mt-12">
-    {{ with $.Site.Params.webmention_url }}
-        <a class="button btn external" href="{{ . }}" target="_blank">webmention this</a>
-    {{ end }}
-
-    <a class="button btn" href="{{ $commentparade }}{{ $permalink }}" target="_blank">leave a comment</a>
-    <a class="button btn" href="mailto:hello@geheimesite.nl?subject=“{{ .Title }}”">reply via email</a>
-</p>
-
-<p class="supplement text-left"><small>{{ i18n "reply" }}</small></p>