From 867bdfd5974879180435436951758ee3f23d60d3 Mon Sep 17 00:00:00 2001 From: JP Hastings-Spital Date: Wed, 21 Feb 2024 22:10:28 +0000 Subject: [PATCH] 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 | 27 +++++++++++++++++++++ assets/scss/_main.scss | 5 ++++ assets/scss/_variables.scss | 8 +++++++ assets/scss/main.scss | 1 + content/bookmarks/a-primer-on-dopamine.md | 12 ++++++++++ content/memex/art-design/colour.md | 5 ++++ content/memex/art-design/fonts.md | 9 +++++++ content/memex/art-design/tiles.md | 5 ++++ content/memex/computing/optimisation.md | 5 ++++ content/memex/games/gaming.md | 5 ++++ layouts/_default/_markup/render-link.html | 19 +-------------- layouts/partials/bookmark-of.html | 25 +++++++++---------- layouts/partials/rich-link.html | 29 +++++++++++++++++++++++ 13 files changed, 125 insertions(+), 30 deletions(-) create mode 100644 assets/scss/_links.scss create mode 100644 layouts/partials/rich-link.html diff --git a/assets/scss/_links.scss b/assets/scss/_links.scss new file mode 100644 index 00000000..6fbeb750 --- /dev/null +++ b/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: "✗"; + } +} diff --git a/assets/scss/_main.scss b/assets/scss/_main.scss index 62c5337d..327ad24c 100644 --- a/assets/scss/_main.scss +++ b/assets/scss/_main.scss @@ -339,6 +339,11 @@ figure { } } +caption { + font-size: 0.8rem; + opacity: 0.6; +} + em, strong { // Default color: $light-color-variant; diff --git a/assets/scss/_variables.scss b/assets/scss/_variables.scss index 70cf9fee..f168a25b 100644 --- a/assets/scss/_variables.scss +++ b/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 */ diff --git a/assets/scss/main.scss b/assets/scss/main.scss index ab7c63ca..4c405890 100644 --- a/assets/scss/main.scss +++ b/assets/scss/main.scss @@ -18,3 +18,4 @@ @import "tables"; @import "404"; @import "search"; +@import "links"; diff --git a/content/bookmarks/a-primer-on-dopamine.md b/content/bookmarks/a-primer-on-dopamine.md index 5c53c991..bcf5e316 100644 --- a/content/bookmarks/a-primer-on-dopamine.md +++ b/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. diff --git a/content/memex/art-design/colour.md b/content/memex/art-design/colour.md index eeffc581..b546ea9f 100644 --- a/content/memex/art-design/colour.md +++ b/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 diff --git a/content/memex/art-design/fonts.md b/content/memex/art-design/fonts.md index 62e65931..fc6590a9 100644 --- a/content/memex/art-design/fonts.md +++ b/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 diff --git a/content/memex/art-design/tiles.md b/content/memex/art-design/tiles.md index 342fb86a..70b00003 100644 --- a/content/memex/art-design/tiles.md +++ b/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 diff --git a/content/memex/computing/optimisation.md b/content/memex/computing/optimisation.md index 18c1921f..2daae2c2 100644 --- a/content/memex/computing/optimisation.md +++ b/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 diff --git a/content/memex/games/gaming.md b/content/memex/games/gaming.md index 202e9f3c..1f6f7a41 100644 --- a/content/memex/games/gaming.md +++ b/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 diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html index c4f4b1e4..98eaa1d6 100644 --- a/layouts/_default/_markup/render-link.html +++ b/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 -}} -{{ $text }} \ No newline at end of file +{{ partial "rich-link.html" (dict "Text" .Text "Destination" .Destination "Title" .Title "Page" .Page) }} \ No newline at end of file diff --git a/layouts/partials/bookmark-of.html b/layouts/partials/bookmark-of.html index 7f6ce942..34af5e3e 100644 --- a/layouts/partials/bookmark-of.html +++ b/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 {{ . }}. + the article {{ partial "rich-link.html" (dict "Class" "u-bookmark-of" "Destination" $url "Text" . "Page" $page) }}. {{- else -}} - an article from {{ ($url | urls.Parse).Hostname }} + {{ partial "rich-link.html" (dict "Class" "u-bookmark-of" "Destination" $url "Text" (printf "an article from %s" (($url | urls.Parse).Hostname)) "Page" $page) }} {{- end }} diff --git a/layouts/partials/rich-link.html b/layouts/partials/rich-link.html new file mode 100644 index 00000000..1b839d1d --- /dev/null +++ b/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 -}} +{{ $text }} \ No newline at end of file