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:
| M | assets/content.scss | | | 16 | ++++++++-------- |
| M | assets/styles.scss | | | 37 | ++++++++++++++++++++----------------- |
| M | config.dev.toml | | | 2 | +- |
| M | config.toml | | | 2 | +- |
| A | content/notes/20 May 2020.md | | | 10 | ++++++++++ |
| A | content/posts/About GoatCounter the Analytics Tool I Use.md | | | 37 | +++++++++++++++++++++++++++++++++++++ |
| M | content/posts/Migrating My Blog to Hugo.md | | | 1 | + |
| M | layouts/_default/_markup/render-link.html | | | 16 | ++++++++++++---- |
| M | layouts/_default/single.html | | | 4 | ++-- |
| M | layouts/index.html | | | 13 | ++++++++----- |
| M | layouts/partials/components/content.html | | | 5 | +++-- |
| M | layouts/partials/footer/footer.html | | | 101 | +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------------------ |
| M | layouts/partials/post/notes-item.html | | | 2 | +- |
| M | layouts/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">©{{ 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"> + ©{{ 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 }}