Links have agree/accurate indicators

Also introduces `references` as a standard Params structure for my blog. I don't particularly like that it's a map rather than an array, but this is what my micropib enpoint currently creates, so I'll stick with this until I can be bothered to switch that over.

assets/scss/_links.scss

@@ -0,0 +1,27 @@
+a[rel~="+agree"]:hover {
+  text-decoration-style: double;
+}
+a[rel~="-agree"]:hover {
+  text-decoration-style: dotted;
+}
+
+a[rel~="+accurate"]:hover {
+  position: relative;
+  
+  &::after {
+    position: absolute;
+    vertical-align: super;
+    font-size: x-small;
+    content: "✓";
+  }
+}
+a[rel~="-accurate"]:hover {
+  position: relative;
+
+  &::after {
+    position: absolute;
+    vertical-align: super;
+    font-size: x-small;
+    content: "✗";
+  }
+}

assets/scss/_main.scss

@@ -339,6 +339,11 @@ figure {
   }
 }
 
+caption {
+  font-size: 0.8rem;
+  opacity: 0.6;
+}
+
 em, strong {
   // Default
   color: $light-color-variant;

assets/scss/_variables.scss

@@ -31,6 +31,14 @@ $media-size-tablet: "(max-width: 900px)";
   --tabletWidth: (max-width: 900px);
   --accent: #8186FF;
   --accentHue: 290;
+
+  @media (prefers-color-scheme: dark) {
+    --background: #232425;
+  }
+
+  @media (prefers-color-scheme: light) {
+    --background: #fff;
+  }
 }
 
 /* Content */

assets/scss/main.scss

@@ -18,3 +18,4 @@
 @import "tables";
 @import "404";
 @import "search";
+@import "links";

content/bookmarks/a-primer-on-dopamine.md

@@ -6,6 +6,7 @@ bookmarkOf: https://invertedpassion.com/a-primer-on-dopamine/
 references:
   bookmark:
     url: https://invertedpassion.com/a-primer-on-dopamine/
+    rel: +agree +accurate
     type: entry
     name: A primer on dopamine
     summary: '1/ I recently made notes on the book "Hooked" but wasn''t satisfied
@@ -13,6 +14,17 @@ references:
       of habit-forming products and that inevitably lead me to the (in)famous neurotransmitter
       dopamine. 3/ Before we dive into what dopamine does, let''s first make one thing
       clear: dopamine…'
+  games-problems:
+    url: https://invertedpassion.com/games-are-problems-people-pay-to-solve/
+    name: Games are problems people pay to solve
+    rel: +agree +accurate
+  skimmable:
+    url: https://invertedpassion.com/why-you-will-skim-this-article/
+    name: Why you will skim this article
+    rel: +agree +accurate
+  dopamine-and-value-of-work:
+    url: https://www.ncbi.nlm.nih.gov/pmc/articles/PMC4696912/
+    name: Mesolimbic Dopamine Signals the Value of Work
 ---
 
 I really enjoyed reading about dopamine, desire and pleasure here! It’s worth a read, even if it slightly veers into the “how to abuse this knowledge for personal gain with your new product” space.

content/memex/art-design/colour.md

@@ -11,6 +11,11 @@ tags:
 - colour
 - picker
 - colour-scheme
+references:
+  lch-in-css:
+    url: https://lea.verou.me/blog/2020/04/lch-colors-in-css-what-why-and-how/
+    rel: +accurate
+    name: "LCH colors in CSS: what, why, and how?"
 ---
 
 ## Spelling

content/memex/art-design/fonts.md

@@ -8,6 +8,15 @@ tags:
 - zwj
 - emoji
 - fonts
+references:
+  microsoft-ttf-docs:
+    url: https://learn.microsoft.com/en-us/typography/opentype/spec/
+    name: OpenType® Specification Version 1.9
+    rel: +accurate
+  apple-ttf-docs:
+    url: https://developer.apple.com/fonts/TrueType-Reference-Manual/
+    name: TrueType Reference Manual
+    rel: +accurate
 ---
 
 ## TTF Fonts

content/memex/art-design/tiles.md

@@ -7,6 +7,11 @@ tags:
 - shapes
 - tiling
 - colour
+references:
+  chiral-aperiodic-monotile:
+    url: https://cs.uwaterloo.ca/~csk/spectre/
+    name: A chiral aperiodic monotile
+    rel: +accurate
 ---
 
 ## Aperiodic monotiles

content/memex/computing/optimisation.md

@@ -6,6 +6,11 @@ tags:
 - optimisation
 - lines
 - svg
+references:
+  line-simplification:
+    url: https://bost.ocks.org/mike/simplify/
+    name: Line Simplification
+    rel: +accurate
 ---
 
 ## Line simplification

content/memex/games/gaming.md

@@ -7,6 +7,11 @@ tags:
 - manifesto
 - play
 - games
+references:
+  puzmo-manifesto:
+    url: https://www.puzzmo.com/public-manifesto
+    name: The Puzzmo Manifesto
+    rel: +agree
 ---
 
 ## Puzzmo manifesto

layouts/_default/_markup/render-link.html

@@ -1,18 +1 @@
-{{- $isExternal := strings.HasPrefix .Destination "http" -}}
-{{- $text := .Text -}}
-{{/* It pains me that Hugo doesn't have a urls.IsValid method, and has no error catching to allow me to try urls.Parse and catch failures */}}
-{{- if gt (len (strings.FindRE `^https?:\/\/[A-z0-9_-]*?[:]?[A-z0-9_-]*?[@]?[A-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$` .Text)) 0 -}}
-  {{- $url := urls.Parse $text -}}
-  {{- $text = strings.TrimPrefix "www." $url.Hostname -}}
-  {{- if lt (len $url.Path) 16 -}}
-    {{- $text = path.Join $text $url.Path -}}
-  {{- else -}}
-    {{- $parts := strings.Split $url.Path "/" -}}
-    {{- $last := index ($parts | last 1) 0 -}}
-    {{- if gt (len $last) 16 -}}
-      {{- $last = printf "%s…" (strings.Substr $last 0 16) -}}
-    {{- end -}}
-    {{- $text = path.Join $text "…" $last -}}
-  {{- end -}}
-{{- end -}}
-<a href="{{ .Destination | safeURL }}"{{ with .Title}} title="{{ . }}"{{ end }}{{ if $isExternal }} target="_blank"{{ end }}>{{ $text }}</a>
+{{ partial "rich-link.html" (dict "Text" .Text "Destination" .Destination "Title" .Title "Page" .Page) }}

layouts/partials/bookmark-of.html

@@ -1,17 +1,18 @@
-{{ if not .Params.bookmarkOf}}
-  {{ errorf "BookmarkOf partial called when no bookmark of param set" }}
-{{ end }}
+{{- if not .Params.bookmarkOf -}}
+  {{ errorf "BookmarkOf partial called when no bookmark of param set" -}}
+{{- end -}}
 
-{{ $url := .Params.bookmarkOf }}
-{{ $reference := dict }}
-{{ range .Params.references }}
-  {{ if eq .url $url }}
-    {{ $reference = . }}
-  {{ end }}
-{{ end }}
+{{- $page := . -}}
+{{- $url := .Params.bookmarkOf -}}
+{{- $reference := dict -}}
+{{- range .Params.references -}}
+  {{- if eq .url $url -}}
+    {{- $reference = . -}}
+  {{- end }}
+{{- end -}}
 💭 Thoughts on{{" "}}
 {{- with $reference.name -}}
-  the article <a href="{{ $url }}" class="u-bookmark-of">{{ . }}</a>.
+  the article {{ partial "rich-link.html" (dict "Class" "u-bookmark-of" "Destination" $url "Text" . "Page" $page) }}.
 {{- else -}}
-  <a href="{{ $url }}" class="u-bookmark-of">an article from {{ ($url | urls.Parse).Hostname  }}</a>
+  {{ partial "rich-link.html" (dict "Class" "u-bookmark-of" "Destination" $url "Text" (printf "an article from %s" (($url | urls.Parse).Hostname)) "Page" $page) }}
 {{- end }}

layouts/partials/rich-link.html

@@ -0,0 +1,29 @@
+{{- $destination := .Destination -}}
+{{- $title := .Title -}}
+{{- $isExternal := strings.HasPrefix $destination "http" -}}
+{{- $text := .Text -}}
+{{/* It pains me that Hugo doesn't have a urls.IsValid method, and has no error catching to allow me to try urls.Parse and catch failures */}}
+{{- if gt (len (strings.FindRE `^https?:\/\/[A-z0-9_-]*?[:]?[A-z0-9_-]*?[@]?[A-z0-9]+([\-\.]{1}[a-z0-9]+)*\.[a-z]{2,5}(:[0-9]{1,5})?(\/.*)?$` .Text)) 0 -}}
+  {{- $url := urls.Parse $text -}}
+  {{- $text = strings.TrimPrefix "www." $url.Hostname -}}
+  {{- if lt (len $url.Path) 16 -}}
+    {{- $text = path.Join $text $url.Path -}}
+  {{- else -}}
+    {{- $parts := strings.Split $url.Path "/" -}}
+    {{- $last := index ($parts | last 1) 0 -}}
+    {{- if gt (len $last) 16 -}}
+      {{- $last = printf "%s…" (strings.Substr $last 0 16) -}}
+    {{- end -}}
+    {{- $text = path.Join $text "…" $last -}}
+  {{- end -}}
+{{- end -}}
+{{- $ref := dict -}}
+{{- range $k, $refSpec := .Page.Params.references -}}
+  {{- if eq $refSpec.url $destination -}}
+    {{- $ref = $refSpec -}}
+    {{- if and (ne $title $ref.name) (ne $text $ref.name) -}}
+      {{- $title = printf "External article: %s" $ref.name -}}
+    {{- end -}}
+  {{- end -}}
+{{- end -}}
+<a href="{{ $destination | safeURL }}"{{ with .Class }} class="{{ . }}"{{ end }}{{ with $title }} title="{{ . }}"{{ end }}{{ if $isExternal }} target="_blank"{{ end }}{{ with $ref.rel }} rel="{{ . }}"{{ end }}>{{ $text }}</a>