ybbond

My site. The main domain
Log | Files | Refs | README | LICENSE | CC-LICENSE

commit d096b3f8e1e143f3b7a6a506bf1adb36e77e7f55
parent 17208bfbede0c29359f42ab5a647bcabc28d431d
Author: Yohanes Bandung <hi@ybbond.dev>
Date:   Sat, 23 May 2020 01:45:31 +0700

feature: more GoatCounter. disclaimer, post and note

Diffstat:
Massets/content.scss | 16++++++++--------
Massets/styles.scss | 37++++++++++++++++++++-----------------
Mconfig.dev.toml | 2+-
Mconfig.toml | 2+-
Acontent/notes/20 May 2020.md | 10++++++++++
Acontent/posts/About GoatCounter the Analytics Tool I Use.md | 37+++++++++++++++++++++++++++++++++++++
Mcontent/posts/Migrating My Blog to Hugo.md | 1+
Mlayouts/_default/_markup/render-link.html | 16++++++++++++----
Mlayouts/_default/single.html | 4++--
Mlayouts/index.html | 13++++++++-----
Mlayouts/partials/components/content.html | 5+++--
Mlayouts/partials/footer/footer.html | 101+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------
Mlayouts/partials/post/notes-item.html | 2+-
Mlayouts/partials/post/summary.html | 6+++---

14 files changed, 185 insertions(+), 67 deletions(-)

diff --git a/assets/content.scss b/assets/content.scss
@@ -73,11 +73,9 @@
   ol {
     margin: 1.5em 0;
     padding: 0;
-    counter-reset: my-awesome-counter, foot-note-counter;
-    :not([role="doc-endnote"]) {
-      list-style: none;
-    }
-    li:not([role="doc-endnote"]) {
+    counter-reset: my-awesome-counter;
+    list-style: none;
+    li {
       counter-increment: my-awesome-counter;
       list-style-position: outside;
       margin-bottom: 0.2em;
@@ -95,9 +93,6 @@
         }
       }
     }
-    li[role="doc-endnote"] {
-      counter-increment: foot-note-counter;
-    }
   }
 
   ul {
@@ -186,3 +181,7 @@
     }
   }
 }
+
+.content__hr {
+  margin: 4em 0 0;
+}+
\ No newline at end of file
diff --git a/assets/styles.scss b/assets/styles.scss
@@ -267,14 +267,14 @@ time {
 
 .footer {
   &__separator {
-    margin: 40px auto 20px;
+    margin: 0 auto 1.4em;
   }
 
   &__nav {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    margin-bottom: 2em;
+    margin-bottom: 1.5em;
     & > p {
       margin: 0;
     }
@@ -307,17 +307,14 @@ time {
     }
   }
 
-  .web-ring {
-    margin: 0.7em 0;
-    a {
-      cursor: pointer;
-    }
+  &__analytic {
+    font-size: 0.8em;
   }
 
   .hcard {
     max-width: 25em;
     font-size: 0.8em;
-    margin: 2em auto 2.2em;
+    margin: 2em auto 0.5em;
     padding: 1.5em;
     position: relative;
     @include themify($themes) {
@@ -351,16 +348,22 @@ time {
     }
   }
 
+  .web-ring {
+    font-size: 0.8em;
+    margin: 0 0 1.8em;
+  }
+
   &__copyright {
-    margin: 0.7em 0 3em;
+    margin: 0.7em 0 1em;
     font-size: 0.8em;
-    text-align: center;
-    @media (max-width: 599px) {
-      display: flex;
-      flex-direction: column;
-      &__separator {
-        display: none;
-      }
-    }
+  }
+}
+
+.footnotes {
+  hr {
+    margin-bottom: 0.2em;
+  }
+  &__text {
+    margin: 0;
   }
 }
diff --git a/config.dev.toml b/config.dev.toml
@@ -3,7 +3,7 @@ languageCode = "en-us"
 title = "YBBond"
 
 [permalinks]
-  posts = "/posts/:year-:month-:title/"
+  posts = "/posts/:year-:month-:slug/"
 
 [params]
   author = "Yohanes Bandung Bondowoso"
diff --git a/config.toml b/config.toml
@@ -3,7 +3,7 @@ languageCode = "en-us"
 title = "YBBond"
 
 [permalinks]
-  posts = "/posts/:year-:month-:title/"
+  posts = "/posts/:year-:month-:slug/"
 
 [params]
   author = "Yohanes Bandung Bondowoso"
diff --git a/content/notes/20 May 2020.md b/content/notes/20 May 2020.md
@@ -0,0 +1,9 @@
+---
+date: 2020-05-20T15:10:25+0700
+tags:
+  - notes #notes
+type: notes
+ID: 1589962226
+---
+
+I implemented [GoatCounter](https://www.goatcounter.com/), a good, privacy-aware web analytics made by arp242. You can see it here [stats.ybbond.dev](https://stats.ybbond.dev/). Does analytic a problem to you? Any feedback is welcome :D+
\ No newline at end of file
diff --git a/content/posts/About GoatCounter the Analytics Tool I Use.md b/content/posts/About GoatCounter the Analytics Tool I Use.md
@@ -0,0 +1,37 @@
+---
+title: On Social Media and GoatCounter, The Web Analytics I Use
+slug: socmed-and-goatcounter
+author: Yohanes Bandung Bondowoso
+description: I implemented a good, privacy-respecting web analytics for this website since May the 20th. It is called GoatCounter. I try to explain and reason about it.
+tags:
+  - meta #meta
+  - webdev #webdev
+date: 2020-05-23T00:47:36+0700
+ID: 1590169657
+---
+
+I like to develop website. I also like to write blogs, poems, post mortem, thoughts, tutorial, anything. I enjoy doing those things that even if I can't publish (some of) them, I've got more experience and I feel good.
+
+But.
+
+Let's be real here. I have itches. Curiosity. Social needs? Maybe, but I try avoid social media, or [silo](https://indieweb.org/silo) β€” as the IndieWeb folks call it. I try to serve this site keeping my ethic[^1] and readers' privacy. I also want to know whether anyone read my posts, and I want my works to be assessed by fellow readers. The assessment can be as simple as likes and thumb-ups (Luke Smith hilariously calls them _upcummies_[^2]). The assessment can also be comments or text feedbacks, this is what I prefer the most.
+
+With the stuff I just told you in mind, I decided that I will implement analytic[^3] and response system to this site. So I researched for the tools. The main requirements are lightweight and respects users' privacy.
+
+For the response system, I found [WebMention](https://webmention.io/), which leads me to know more about [IndieWeb](https://indieweb.org). The current candidate for the direct commenting system is [Isso](https://posativ.org/isso/). The first I implemented is web analytics. Already suggested in this post's title, I use GoatCounter.
+
+## About GoatCounter
+
+[GoatCounter](https://www.goatcounter.com/) is web analytics by Martin Tournoij or [arp242](https://www.arp242.net/goatcounter.html). It is lightweight, it is easy to implement, and it **respects users' privacy**. See its privacy policy [here](https://www.goatcounter.com/privacy).
+
+One embarassing thing is that I follow Martin's RSS Feed for so long, but I didn't read about his latest project. Before GoatCounter I tried [StatCounter](https://statcounter.com), then opted-out shortly because I think the settings page is clumsy.
+
+You can see my instance of GoatCounter on [stats.ybbond.dev](https://stats.ybbond.dev/)!
+
+I made it open for everyone and made obvious statement down in the footer, because I think however small the data I take from user visits, the users should be able to know about it.
+
+
+
+[^1]: A good post from iA, _"Ethics" and Ethics_ by **Oliver Reichenstein**. [Read it here](https://ia.net/topics/ethics-and-ethics) on their site.
+[^2]: Reference is from video _Social Media: Anything for Upcummies! β¬†πŸ†πŸ’¦πŸ’¦_ by **Luke Smith**. You can [watch it here](https://youtu.be/YjbyDU0WzYI?t=48) on YouTube.
+[^3]: I even stated in my [post](/posts/2020-04-migrating-my-blog-to-hugo/#current-features) about migrating to Hugo that I will implement _tracker_.
diff --git a/content/posts/Migrating My Blog to Hugo.md b/content/posts/Migrating My Blog to Hugo.md
@@ -64,6 +64,7 @@ The default features from hugo itself already awesome, but my goal for this site
 - [ ] Simple script to view footnotes on hover
 - [ ] Anonymous tracker (I always wonder whether anybody read my blog or not 🧐)
 
+> **Update:** I have implemented GoatCounter analytics. Read [my post](/posts/2020-05-socmed-and-goatcounter/) about it.
 
 
 I am genuinely happy for using Hugo. I might keep using this for a while, before I'll have an itch to try other static site  generators πŸ˜„
diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html
@@ -1,4 +1,12 @@
 <a href="{{ .Destination | safeURL }}"
-    {{ with .Title}} title="{{ . }}"{{ end }}
-    {{ if strings.HasPrefix .Destination "http" }} target="_blank"{{ end }}
-    >{{ .Text | safeHTML }}</a>-
\ No newline at end of file
+    {{ with .Title}}
+      title="{{ . }}"
+    {{ end }}
+    data-goatcounter-click="{{ .Text }}"
+    {{ if strings.HasPrefix .Destination "http" }}
+      target="_blank"
+      rel="noreferrer noopener"
+    {{ else }}
+      data-rel="prefetch"
+    {{ end }}
+>{{ .Text | safeHTML }}</a>+
\ No newline at end of file
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
@@ -21,8 +21,7 @@
       <div class="e-content">
         {{ partial "components/content.html" .Content }}
       </div>
-      <br>
-      <br>
+      <hr class="content__hr">
       <p {{ if eq .Type "page" }}class="hcard" hidden=""{{ end }}>
         <a class="u-url link-white" href={{ .Permalink }}>Published</a> on
         <time title="{{ .Date.Format "Monday, 02 January 2006 on 15:04:05" }} GMT+7" class="dt-published" datetime="{{ .Date.Format "2006-01-02T15:04:05" }}+07:00">
@@ -35,6 +34,7 @@
           {{ end }}
         </p>
       {{ end }}
+      <p>If you have any feedback, please contact me at <a href="mailto:hi@ybbond.dev">hi@ybbond.dev</a></p>
     </article>
   {{ end }}
 {{ end }} 
\ No newline at end of file
diff --git a/layouts/index.html b/layouts/index.html
@@ -8,10 +8,13 @@
 
   <hr>
 
-  <a href={{ $postURL }}><h2>Blog Posts:</h2></a>
+  <a data-goatcounter-click="cl-posts-title" href={{ $postURL }}><h2>Blog Posts:</h2></a>
   <div href={{ $postURL }} class="listing">
     {{ range first 5 (where .Site.RegularPages "Section" "posts") }}
-      <a href={{ .Permalink }} class="area full-width listing__post">
+      <a
+        href={{ .Permalink }}
+        class="area full-width listing__post"
+      >
         <h3 class="listing__post__title">
           {{ .Title }}
         </h3>
@@ -25,17 +28,17 @@
       </a>
     {{ end }}
   </div>
-  <p class="main__more"><a href={{ $postURL }} class="button">More Blogs β€³</a></p>
+  <p class="main__more"><a data-goatcounter-click="cl-posts-more" href={{ $postURL }} class="button">More Blogs β€³</a></p>
 
   <hr>
 
-  <a href={{ $notesURL }}><h2>Notes:</h2></a>
+  <a data-goatcounter-click="cl-notes-title" href={{ $notesURL }}><h2>Notes:</h2></a>
   <div class="listing">
     {{ range first 5 (where .Site.RegularPages "Type" "notes") }}
       {{ partial "post/notes-item.html" . }}
     {{ end }}
   </div>
-  <p class="main__more"><a href={{ $notesURL }} class="button">More Notes β€³</a></p>
+  <p class="main__more"><a data-goatcounter-click="cl-notes-more" href={{ $notesURL }} class="button">More Notes β€³</a></p>
 
 
 {{ end }}
diff --git a/layouts/partials/components/content.html b/layouts/partials/components/content.html
@@ -2,6 +2,7 @@
 {{ $h2_hash := $add_hash_after | replaceRE "(<h2 id=\"([^\"]+)\">)(.+)(</h2>)" "${1}<a class=\"before-hash h2\" href=\"#${2}\">##</a> ${3} ${4}" }} 
 {{ $h3_hash := $h2_hash | replaceRE "(<h3 id=\"([^\"]+)\">)(.+)(</h3>)" "${1}<a class=\"before-hash h3\" href=\"#${2}\">###</a> ${3} ${4}" }} 
 {{ $h4_hash := $h3_hash | replaceRE "(<h4 id=\"([^\"]+)\">)(.+)(</h4>)" "${1}<a class=\"before-hash h4\" href=\"#${2}\">####</a> ${3} ${4}" }} 
-{{ $list_span := $h4_hash | replaceRE "<li>" "<li><span></span>" }}
-{{ $checkbox_non_disabled := $list_span | replaceRE "disabled=\"\" type=\"checkbox" "type=\"checkbox" }}
+{{ $list_span := $h4_hash | replaceRE "<li( id=\"fn:[\\d]+\" role=\"doc-endnote\")?>(\\n<p>)?" "<li${1}>${2}<span></span>" }}
+{{ $footnote := $list_span | replaceRE "(<div class=\"footnotes\" role=\"doc-endnotes\">\\n<hr />)" "${1}<p class=\"footnotes__text\">Footnotes:</p>" }}
+{{ $checkbox_non_disabled := $footnote | replaceRE "disabled=\"\" type=\"checkbox" "type=\"checkbox" }}
 {{ $checkbox_non_disabled | safeHTML }}
diff --git a/layouts/partials/footer/footer.html b/layouts/partials/footer/footer.html
@@ -2,38 +2,92 @@
 <div class="footer__nav">
   <p class="footer__nav__left">
     {{ if not .IsHome }}
-      <a class="button footer__nav__left__back" href={{ .Site.BaseURL }}>
-        Β« Back to Home
+      <a
+        class="button footer__nav__left__back"
+        data-goatcounter-click="cl-home-foot"
+        data-rel="prefetch"
+        href={{ .Site.BaseURL }}
+      >Β« Back to Home
       </a>
     {{ end }}
   </p>
   <p class="footer__nav__right">
-    <a class="button" href="https://github.com/{{ .Site.Params.Github }}" rel="me">GitHub</a>
-    <a class="button" href="https://twitter.com/{{ .Site.Params.Twitter }}" rel="me">Twitter</a>
-    <a class="button" href="https://micro.blog/{{ .Site.Params.Microblog }}" rel="me">Micro.blog</a>
-    <a class="button" href="https://indieweb.social/@ybbond" rel="me">Mastodon</a>
-    <a class="button" href={{ "index.xml" | absURL }}>RSS</a>
+    <a
+      class="button"
+      data-goatcounter-click="cl-gh-foot"
+      href="https://github.com/{{ .Site.Params.Github }}"
+      rel="me"
+    >GitHub</a>
+    <a
+      class="button"
+      data-goatcounter-click="cl-twit-foot"
+      href="https://twitter.com/{{ .Site.Params.Twitter }}"
+      rel="me"
+    >Twitter</a>
+    <a
+      class="button"
+      data-goatcounter-click="cl-micro-foot"
+      href="https://micro.blog/{{ .Site.Params.Microblog }}"
+      rel="me"
+    >Micro.blog</a>
+    <a
+      class="button"
+      data-goatcounter-click="cl-mast-foot"
+      href="https://indieweb.social/@ybbond"
+      rel="me"
+    >Mastodon</a>
+    <a
+      class="button"
+      data-goatcounter-click="cl-rss-foot"
+      href={{ "index.xml" | absURL }}
+    >RSS</a>
   </p>
 </div>
 
-<center class="web-ring">
-<a href="https://xn--sr8hvo.ws/%F0%9F%8E%B8%F0%9F%8D%8D%F0%9F%95%97/previous">←</a>
-  An <a href="https://xn--sr8hvo.ws/">IndieWeb Webring</a> πŸ•ΈπŸ’
-  <a href="https://xn--sr8hvo.ws/%F0%9F%8E%B8%F0%9F%8D%8D%F0%9F%95%97/next">β†’</a>
+<center>
+  <span class="footer__analytic">
+    This site implements
+    <a
+      href="https://goatcounter.com"
+      data-goatcounter-click="cl-gc-foot"
+      target="_blank"
+      rel="noreferrer noopener"
+    >GoatCounter</a>.
+    <br>
+    You can see the result on
+    <a
+      href="https://stats.ybbond.dev/"
+      data-goatcounter-click="cl-stats-foot"
+      target="_blank"
+      rel="noreferrer noopener"
+    >stats.ybbond.dev</a>.
+  </span>
 </center>
 
 {{ partial "components/h-card.html" . }}
 
-<p class="footer__copyright">
-  <span class="footer__copyright__year">&copy;{{ now.Year }} {{ .Site.Params.Author }}</span>
-  {{ with .Site.BaseURL }}
-    <span class="footer__copyright__separator">-</span>
-    <span class="footer__copyright__site">
-      <a href="{{ . }}">
-        {{ . | replaceRE "^https?://([^/]+).*" "$1" }}
-      </a>
-    </span>
-  {{ end }}
-</p>
-
+<center class="web-ring">
+  <a
+    data-goatcounter-click="cl-webring-prev"
+    href="https://xn--sr8hvo.ws/%F0%9F%8E%B8%F0%9F%8D%8D%F0%9F%95%97/previous"
+    target="_blank"
+    rel="noreferrer noopener"
+  >←</a>
+    An
+    <a
+      data-goatcounter-click="cl-webring-center"
+      href="https://xn--sr8hvo.ws/"
+      target="_blank"
+      rel="noreferrer noopener"
+    >IndieWeb Webring</a> πŸ•ΈπŸ’
+  <a
+    data-goatcounter-click="cl-webring-next"
+    href="https://xn--sr8hvo.ws/%F0%9F%8E%B8%F0%9F%8D%8D%F0%9F%95%97/next"
+    target="_blank"
+    rel="noreferrer noopener"
+  >β†’</a>
+</center>
 
+<center class="footer__copyright">
+  &copy;{{ now.Year }} {{ .Site.Params.Author }}
+</center>+
\ No newline at end of file
diff --git a/layouts/partials/post/notes-item.html b/layouts/partials/post/notes-item.html
@@ -26,7 +26,7 @@
       </time>
         {{ if .Title }}
         {{ else }}
-          <a class="u-url" href="/notes/#{{ $idslug }}">#</a> <a href={{ .Permalink }}>Β»</a>
+          <a data-goatcounter-click="cl-note-hash" class="u-url" href="/notes/#{{ $idslug }}">#</a> <a data-goatcounter-click="cl-note-full" href={{ .Permalink }}>Β»</a>
         {{ end }}
     </span>
     {{ with .Title}}
diff --git a/layouts/partials/post/summary.html b/layouts/partials/post/summary.html
@@ -1,12 +1,12 @@
 <article class="summary h-entry">
   {{ $permalink := .Permalink }}
+  {{ $slug := .Slug }}
   {{ $title := .Title }}
   {{ with .Params.Image.Src }}
     {{ $filename := . | safeURL }}
     {{ $original := printf "%s%s" $permalink $filename }}
-    <img class="u-photo" hidden="" src={{ $original }} alt="Illustration of {{ $title }}" />
   {{ end }}
-  <a href="{{ $permalink }}" class="u-url">
+  <a data-goatcounter-click="{{ $slug }}" href="{{ $permalink }}" class="u-url">
     <h2 class="summary__title p-name">
       {{ $title }}
     </h2>
@@ -31,7 +31,7 @@
  {{ $hell := .Type }}
   {{ if .Params.Description }}
     <p> {{ .Params.Description | safeHTML }} </p>
-    <a href="{{ $permalink }}">
+    <a data-goatcounter-click="rmore-{{ $slug }}" href="{{ $permalink }}">
       <p>Read More Β»</p>
     </a>
   {{ else }}