png-to-jpg, use font-swap, accessibility fixes
This commit is contained in:
wgroeneveld
parent
031de40b9a
commit
6fcca6918d
|
|
@ -1,2 +1,11 @@
|
|||
Brainbaking.com hugo site.
|
||||
|
||||
### TODO
|
||||
|
||||
- Set Cache-Control on woff2 https://web.dev/uses-long-cache-ttl/
|
||||
- Check gzip compression of js/css files
|
||||
|
||||
### Screenshot png - jpg conversion
|
||||
|
||||
1. find . -name "*.png" -exec convert {} -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB {}.jpg \;
|
||||
2. find ./ -name "*.png.jpg" -exec sh -c 'mv $0 `basename "$0" .png.jpg`.jpg' '{}' \;
|
||||
12
config.toml
12
config.toml
|
|
@ -23,7 +23,7 @@ enableGitInfo = true
|
|||
accent = "#008862"
|
||||
accent2 = "#008fb3"
|
||||
showBorder = true
|
||||
copyright = "<a href='/no-copyright-no-tracking'>No © and no tracking</a> - sharing is caring. <svg class='icon icon-small'><use xlink:href='#bulb'></use></svg> <a href='/'>Brain Baking</a>. <a href='/index.xml'>RSS Feed</a>."
|
||||
copyright = "<a href='/no-copyright-no-tracking'>No © and no tracking</a> - sharing is caring. <svg class='icon icon-small' width='16' height='16'><use xlink:href='#bulb'></use></svg> <a href='/'>Brain Baking</a>. <a href='/index.xml'>RSS Feed</a>."
|
||||
|
||||
[Author]
|
||||
name = "Wouter Groeneveld"
|
||||
|
|
@ -51,31 +51,31 @@ enableGitInfo = true
|
|||
|
||||
[[menu.main]]
|
||||
name = "Tech Blog"
|
||||
pre = "<svg><use xlink:href='#tech'></use></svg> "
|
||||
pre = "<svg width='24' height='24'><use xlink:href='#tech'></use></svg> "
|
||||
url = "/post"
|
||||
weight = 1
|
||||
|
||||
[[menu.main]]
|
||||
name = "Essays"
|
||||
pre = "<svg><use xlink:href='#book'></use></svg> "
|
||||
pre = "<svg width='24' height='24'><use xlink:href='#book'></use></svg> "
|
||||
url = "/essays"
|
||||
weight = 2
|
||||
|
||||
[[menu.main]]
|
||||
name = "Tags"
|
||||
pre = "<svg><use xlink:href='#tag'></use></svg> "
|
||||
pre = "<svg width='24' height='24'><use xlink:href='#tag'></use></svg> "
|
||||
url = "/tags"
|
||||
weight = 3
|
||||
|
||||
[[menu.mainright]]
|
||||
name = "About Me"
|
||||
pre = "<svg><use xlink:href='#about'></use></svg> "
|
||||
pre = "<svg width='24' height='24'><use xlink:href='#about'></use></svg> "
|
||||
url = "/about"
|
||||
weight = 4
|
||||
|
||||
[[menu.mainright]]
|
||||
name = "Teaching"
|
||||
pre = "<svg><use xlink:href='#teaching'></use></svg> "
|
||||
pre = "<svg width='24' height='24'><use xlink:href='#teaching'></use></svg> "
|
||||
url = "/teaching"
|
||||
weight = 5
|
||||
|
||||
|
|
|
|||
|
|
@ -11,19 +11,19 @@ Thanks to another great "internet stumble", I came across [Laura Kalbag's blog](
|
|||
|
||||
Take a look at HLN.be, "Het Laatste Nieuws", a Belgian newspaper website. Opera informs me the SSL certificate is valid:
|
||||
|
||||
|
||||
|
||||
|
||||
Wait, what? **75 cookies in use**? Did I give my consent for every single one of those? You bet I did not! Luckily, I browse with "protection on" these days, and my protection of choice is not an Adblocker plugin using Google Chrome but Opera's built-in security systems. Pay special attention to the console errors in the above screenshot: `net::ERR_BLOCKED_BY_ADBLOCKER`. I do not want to know what happens when I turn it off.
|
||||
|
||||
Where do these nasty things come from? Who's keeping an eye on me and should I be tracking the trackers? Good question. Here's another screenshot of the _Sources_ tab, to get an idea of where all the data (and thus, trackers) are coming from at hln.be:
|
||||
|
||||
|
||||
|
||||
|
||||
These servers are serving data when my adblocking system is turned _off_. `tentacles.smartocto.com`? A quick look at that webites says things like "make every story count" and "translate strategy into actionable notifications". Smells like they're shipping off tracking data to one of those analytics companies that feed on the information of others.
|
||||
|
||||
Let's try another more authorative news website in Belgium, vrt.be/nws. This time, I let Opera inform me on what was blocked and what was not. It blocks both ads and trackers (image pixels, javascript).
|
||||
|
||||
|
||||
|
||||
|
||||
It still contains 12 blocked trackers. Most of those are downright advertisers, but others are more subtle. The most common one is of course _Google Analytics_.
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ It is unavoidable that these endpoints can get access to your visitor's _referer
|
|||
|
||||
I threw out Bootstrap, jQuery, and Font Awesome, and refactored my Hugo theme to utilize [Sass](/post/2020/05/hugo-extended) (reducing the mean load of an uncached page with more than `200kb`!). Next, I threw out Google Analytics in favor for [Fathom](https://usefathom.com), another small and privacy-focused self-hosted go container (netting me another `40kb`). Then, I hosted all third-party libraries I used myself. So rest assured, Google does not know you were here! This is how the Fathom dashboard looks like:
|
||||
|
||||
|
||||
|
||||
|
||||
The commenting system I self-host is Commento, a fast, privacy-focused commenting platform. It does come with cookies if you decide to login, but then again: it’s on my own SSL-verified domain. Disqus, the popular and standard static website commenting system, has been known before to be [coming with hidden costs](https://replyable.com/2017/03/disqus-is-your-data-worth-trading-for-convenience/).
|
||||
|
||||
|
|
@ -64,7 +64,7 @@ For Facebook integraion on my other website [Red Zuurdesem](https://redzuurdesem
|
|||
|
||||
For the "classic" Facebook widget - well, I cheated... by taking a screenshot:
|
||||
|
||||
|
||||
|
||||
|
||||
Sometimes, the simplest solutions are the best. I bet nobody notices it's static content. I might even go out on a limb here and retake the screenshot once in a while. This gives me the freedom of throwing out the ugly Facebook JS API and token system that has to be renewed every few months (and comes with tons of "free" cookies!). Good riddance.
|
||||
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 32 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 139 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 338 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 244 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 66 KiB |
|
|
@ -13,11 +13,10 @@ document.addEventListener("DOMContentLoaded",function() {
|
|||
navbar.setAttribute('class', 'navbar-collapse collapsing');
|
||||
}
|
||||
|
||||
document.querySelector('main').addEventListener('click', function() {
|
||||
navCollapse();
|
||||
})
|
||||
document.querySelector('header').addEventListener('click', navCollapse)
|
||||
document.querySelector('main').addEventListener('click', navCollapse)
|
||||
|
||||
document.querySelector('nav').addEventListener('click', function() {
|
||||
document.querySelector('nav').addEventListener('click', () => {
|
||||
if(window.getComputedStyle(navtoggle)['display'] === 'none') return;
|
||||
if(navbar.getAttribute('class').indexOf('collapsing') >= 0) {
|
||||
navCollapse();
|
||||
|
|
|
|||
|
|
@ -25,6 +25,8 @@ h1, h2, h3, h4, h5, h6
|
|||
line-height: 1.8
|
||||
font-weight: 700
|
||||
|
||||
.hidden
|
||||
display: none
|
||||
|
||||
pre
|
||||
overflow: auto
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ $font-alt-stack: 'Metropolis', sans-serif
|
|||
font-family: 'Source Serif Pro'
|
||||
font-style: normal
|
||||
font-weight: 400
|
||||
font-display: swap
|
||||
src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), url(/css/sourceserifpro-latin-ext.woff2) format('woff2')
|
||||
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF
|
||||
|
||||
|
|
@ -20,6 +21,7 @@ $font-alt-stack: 'Metropolis', sans-serif
|
|||
font-family: 'Source Serif Pro'
|
||||
font-style: normal
|
||||
font-weight: 400
|
||||
font-display: swap
|
||||
src: local('Source Serif Pro'), local('SourceSerifPro-Regular'), url(/css/sourceserifpro-latin.woff2) format('woff2')
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
|
||||
|
||||
|
|
@ -46,4 +48,5 @@ $font-alt-stack: 'Metropolis', sans-serif
|
|||
font-family: 'Metropolis'
|
||||
font-style: normal
|
||||
font-weight: 300
|
||||
font-display: swap
|
||||
src: local('Metropolis Light'), local('Metropolis-Light'), url('/css/Metropolis-Light.woff2') format('woff2')
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@
|
|||
|
||||
{{ template "_internal/pagination.html" . }}
|
||||
<footer>
|
||||
<svg class='icon icon-text'><use xlink:href='#up'></use></svg><a href="#top">Top</a>
|
||||
<svg class='icon icon-text' width='24' height='24'><use xlink:href='#up'></use></svg><a href="#top">Top</a>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
{{ $altContent := .Content | replaceRE $reAltIn $reAltOut | safeHTML }}
|
||||
|
||||
{{ $reAltTitleIn := "<p><img src=\"([^\"]+)\" alt=\"([^\"]*)\" title=\"([^\"]+)\" /></p>" }}
|
||||
{{ $reAltTitleOut := "<figure><a href=\"$1\" class=\"lbox\"><img src=\"$1\" alt=\"$3\" title=\"$3\"></a><figcaption>$3</figcaption></figure>" }}
|
||||
{{ $reAltTitleOut := "<figure><a href=\"$1\" class=\"lbox\"><img src=\"$1\" alt=\"$3\"></a><figcaption>$3</figcaption></figure>" }}
|
||||
{{ $finalContent := $altContent | replaceRE $reAltTitleIn $reAltTitleOut | safeHTML }}
|
||||
|
||||
{{ $finalContent }}
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
{{ partial "single-comments" . }}
|
||||
|
||||
<footer>
|
||||
<svg class='icon icon-text'><use xlink:href='#up'></use></svg><a href="#top">Top</a>
|
||||
<svg class='icon icon-text' width='24' height='24'><use xlink:href='#up'></use></svg><a href="#top">Top</a>
|
||||
</footer>
|
||||
</main>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,8 @@
|
|||
|
||||
<a class="navbar-brand visible-xs" href="#">{{ .Title }}</a>
|
||||
|
||||
<button class="navbar-toggle">
|
||||
<button class="navbar-toggle" aria-label="navigation toggle">
|
||||
<span class="hidden" aria-hidden="true">navigation toggle</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
|
|
@ -53,4 +54,4 @@
|
|||
</div>
|
||||
|
||||
</nav>
|
||||
<a name="top"></a>
|
||||
<a id="top"></a>
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
|
||||
<script defer src='/js/simple-lightbox.min.js'></script>
|
||||
{{- $mainScriptPath := "js/brainbaking.js" }}
|
||||
{{- $scripts := resources.Get $mainScriptPath | resources.ExecuteAsTemplate $mainScriptPath . | babel | resources.Minify | resources.Fingerprint "sha512" }}
|
||||
<script src = '{{ $scripts.Permalink }}'></script>
|
||||
<script src = '/js/simple-lightbox.min.js'></script>
|
||||
<script defer src='{{ $scripts.Permalink }}'></script>
|
||||
|
||||
{{- if (ne hugo.Environment "development") }}
|
||||
<!-- Fathom - simple website analytics - https://github.com/usefathom/fathom -->
|
||||
|
|
|
|||
|
|
@ -1,6 +1,9 @@
|
|||
{{ if (not .Params.disableComments) }}
|
||||
<article>
|
||||
<h4 class="page-header"><svg class='icon icon-text'><use xlink:href='#discuss'></use></svg>
|
||||
<h4 class="page-header">
|
||||
<svg class='icon icon-text' width='24' height='24'>
|
||||
<use xlink:href='#discuss'></use>
|
||||
</svg>
|
||||
{{ if eq "essays" .Section }}
|
||||
Discussieer mee
|
||||
{{ else }}
|
||||
|
|
@ -10,7 +13,7 @@
|
|||
|
||||
{{- if (ne hugo.Environment "development") }}
|
||||
<script defer src="https://commento.brainbaking.com/js/commento.js"></script>
|
||||
<script src="https://commento.brainbaking.com/js/count.js"></script>
|
||||
<script defer src="https://commento.brainbaking.com/js/count.js"></script>
|
||||
<div id="commento"></div>
|
||||
{{- else }}
|
||||
(localhost, comments disabled)
|
||||
|
|
|
|||
|
|
@ -15,14 +15,18 @@
|
|||
<h3>
|
||||
{{ if isset .Params "date" }}
|
||||
<time datetime='{{ .Date.Format "2006-01-02" }}'>
|
||||
<svg class='icon icon-text'><use xlink:href='#cal1'></use></svg>
|
||||
<svg class='icon icon-text' width='24' height='24'>
|
||||
<use xlink:href='#cal1'></use>
|
||||
</svg>
|
||||
{{ .Date.Format (.Site.Params.dateFormat | default "2 January 2006") }}
|
||||
</time>
|
||||
{{ end }}
|
||||
{{ if (not .Params.disableComments) }}
|
||||
|
|
||||
<span title="Comments">
|
||||
<svg class='icon icon-text'><use xlink:href='#discuss'></use></svg><a href="{{ .Permalink }}#commento"></a>
|
||||
<svg class='icon icon-text' width='24' height='24'>
|
||||
<use xlink:href='#discuss'></use>
|
||||
</svg><a href="{{ .Permalink }}#commento"></a>
|
||||
</span>
|
||||
{{ end }}
|
||||
</h3>
|
||||
|
|
@ -30,7 +34,9 @@
|
|||
|
||||
|
||||
{{ if isset $.Params "tags" }}
|
||||
<svg class='icon icon-text'><use xlink:href='#tag'></use></svg>
|
||||
<svg class='icon icon-text' width='24' height='24'>
|
||||
<use xlink:href='#tag'></use>
|
||||
</svg>
|
||||
{{ end }}
|
||||
{{ range .Params.tags }}
|
||||
<a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}"><kbd class="item-tag">{{ . }}</kbd></a>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,11 @@
|
|||
{{ $related := first 3 (where (where .Site.RegularPages.ByDate.Reverse ".Params.tags" "intersect" .Params.tags) "Permalink" "!=" .Permalink) }}
|
||||
|
||||
{{ if $related }}
|
||||
<h4 class="page-header"><svg class='icon icon-text'><use xlink:href='#news'></use></svg>Related Articles</h4>
|
||||
<h4 class="page-header">
|
||||
<svg class='icon icon-text' width='24' height='24'>
|
||||
<use xlink:href='#news'></use>
|
||||
</svg>Related Articles
|
||||
</h4>
|
||||
|
||||
{{ range $related }}
|
||||
<article>
|
||||
|
|
@ -9,7 +13,9 @@
|
|||
{{ if isset $.Params "subtitle" }}
|
||||
{{ .Params.subtitle }}
|
||||
<time datetime='{{ .Date.Format "2006-01-02" }}'>
|
||||
<svg class='icon icon-text'><use xlink:href='#cal1'></use></svg>
|
||||
<svg class='icon icon-text' width='24' height='24'>
|
||||
<use xlink:href='#cal1'></use>
|
||||
</svg>
|
||||
{{ .Date.Format (.Site.Params.dateFormat | default "2 January 2006") }}
|
||||
</time>
|
||||
{{ end }}
|
||||
|
|
|
|||
Loading…
Reference in New Issue