New note: introducing breadcrumbs

Create an "about" section.

Add breadcrumbs to show relationships between pages with full page
titles.

Makefile

@@ -117,7 +117,7 @@ deploy-html:
 
 .PHONY: deploy-gemini
 deploy-gemini:
-	rsync $(RSYNCFLAGS) --exclude '*.html' --exclude '*.xml' --exclude '*.xhtml' --exclude '*.gz' --exclude '*.br' --exclude-from .rsyncignore $(OUTPUT_DIR)/gemini/ $(OUTPUT_DIR)/about $(OUTPUT_DIR)/posts $(OUTPUT_DIR)/publickey.* $(GEMINI_RSYNC_DEST)/ --delete
+	rsync $(RSYNCFLAGS) --exclude '*.html' --exclude '*.xml' --exclude '*.xhtml' --exclude '*.gz' --exclude '*.br' --exclude-from .rsyncignore $(OUTPUT_DIR)/gemini/ $(OUTPUT_DIR)/about $(OUTPUT_DIR)/posts $(OUTPUT_DIR)/about $(OUTPUT_DIR)/publickey.* $(GEMINI_RSYNC_DEST)/ --delete
 
 .PHONY: deploy
 deploy: deploy-html deploy-gemini

assets/css/main.css

@@ -110,8 +110,11 @@ html {
 	 *   paragraph are section permalinks. */
 
 	input,
+	div[itemprop="comment"] dd > a,
 	dt > a,
 	summary,
+	nav[itemprop="breadcrumb"] a,
+	nav[itemprop="breadcrumb"] > span,
 	aside > a, /* Used for section permalinks */
 	li > a {
 		padding: .75em .25em;
@@ -138,14 +141,11 @@ html {
 		padding-bottom: .25em;
 	}
 
-	header > nav {
-		margin-bottom: -1em;
-	}
-
 	aside > a {
 		margin: -.75em -.25em;
 	}
 
+	div[itemprop="comment"] dd > a ,
 	footer > nav,
 	header > nav,
 	/* List items with direct hyperlink children should only have one hyperlink. */
@@ -161,17 +161,11 @@ html {
 		padding-top: 0;
 	}
 
-	nav li,
+	nav:not([itemprop="breadcrumb"]) li,
 	ol li > a {
 		margin: .25em;
 	}
 
-	div[itemprop="comment"] dd > a {
-		display: inline-block;
-		margin-left: -.25em;
-		padding: .75em .25em;
-	}
-
 	/* Increase backlink tap target size */
 	a[role="doc-backlink"] {
 		padding: 0 1.75em 1.5em .25em;
@@ -195,10 +189,12 @@ ul {
 	padding-left: 1.5em;
 }
 
+blockquote,
 ol ol,
 ul ul {
 	-webkit-hyphens: auto;
 	hyphens: auto;
+	margin: 0;
 	padding-left: 1em;
 }
 
@@ -211,6 +207,22 @@ nav ul {
 	padding: 0;
 }
 
+/* Make breadcrumbs inline, so they look familiar. */
+nav[itemprop="breadcrumb"] ol,
+nav[itemprop="breadcrumb"] li,
+nav[itemprop="breadcrumb"] > span {
+	display: inline-block;
+}
+
+nav[itemprop="breadcrumb"] ol {
+	margin: -.25em 0;
+	padding: 0;
+}
+
+nav[itemprop="breadcrumb"] li:not(:last-of-type)::after {
+	content: "→";
+}
+
 /* step 2: remove bullets and make elements inline.
  * Also: bump up the line-height and margins to increase space
  * between tap-targets (SC 2.5.5). Google a11y guidelines require 8 CSS
@@ -219,15 +231,10 @@ nav ul li {
 	display: inline-block;
 	margin-right: .5em;
 }
-
-/* narrow screens: reduce margin for blockquotes a lot, using
- * a border instead. Put it on the left and right to make it
- * LTR/RTL-neutral, for machine translators that change text
- * direction (e.g. the one in Edge). */
+/* narrow screens: we reduce margin for blockquotes a lot, using
+ * a border instead. */
 blockquote {
 	border-left: 3px solid;
-	margin: 0;
-	padding: 0 1em;
 }
 
 /* Narrow screens: allow hyphenating titles

assets/css/print.css

@@ -19,7 +19,8 @@
 	/* splitting up sections with <hr> is unnecesary if those
 	 * sections are removed */
 	body > hr,
-	nav a:not([rel="home"]) span {
+	nav a:not([rel="home"]) span,
+	nav[itemprop="breadcrumb"] {
 		display: none;
 	}
 }

config.toml

@@ -112,6 +112,7 @@ disableKinds = ["taxonomy", "term"]
 	section = ["HTML", "atom", "RSS"]
 	posts = ["HTML", "atom", "RSS"]
 	notes = ["HTML", "atom", "RSS"]
+	about = ["HTML", "atom", "RSS"]
 
 # https://github.com/nekr0z/static-webmentions
 [webmentions]

content/about/_index.gmi

@@ -58,7 +58,7 @@ My username is Seirdy on Reddit, Hacker News, Lobsters, Tildes.net, Linux Weekly
 My secondary Matrix account for Synapse-only rooms is @seirdy:fairydust.space. My Matrix account used to be @seirdy:envs.net but I've since migrated to my own Conduit server.
 
 If you want to follow me on Fedi, read this first:
-=> ../fediverse-greeting/ Fediverse greeting
+=> ./fediverse-greeting/ Fediverse greeting
 
 
 If you find a "Seirdy" somewhere else and don't know whether or not it's me, please contact me and ask instead of assuming that it must be me.
@@ -79,7 +79,7 @@ Analyze WeeChat logs to quantify, graph, forecast, and perform anomaly-detection
 
 Generate passwords and analyze password strength given physical limits to computing. Based on a weblog/gemlog entry:
 
-=> ../posts//2021/01/12/password-strength/ Becoming physically immune to brute-force attacks
+=> ../posts/2021/01/12/password-strength/ Becoming physically immune to brute-force attacks
 
 Written in Go.
 
@@ -115,7 +115,7 @@ Some software I use: Fedora, Alpine Linux, SwayWM, mpv, mpd, Minetest, Neovim, t
 
 More information is available in my "uses" page.
 
-=> ../uses/ Software I use
+=> ./uses/ Software I use
 
 ### Anime
 

content/about/_index.md

@@ -1,6 +1,5 @@
 ---
 date: 2020-10-30
-layout: post
 title: About Seirdy (Rohan Kumar)
 outputs:
     - html
@@ -80,7 +79,7 @@ At least two platforms listed in the "Social (centralized)" category are not end
 
 I used to have the Matrix ID `@seirdy:envs.net`. I sometimes use `@seirdy:fairydust.space` for technical reasons (seirdy.one runs a Conduit server but certain features only work in Synapse rooms).
 
-If you want to follow me on the Fediverse, [read my Fediverse greeting first](../fediverse-greeting/)
+If you want to follow me on the Fediverse, [read my Fediverse greeting first]({{<relref "fediverse-greeting.md">}})
 
 <small>Poggies</small>
 
@@ -122,7 +121,7 @@ I lean towards simplicity; I usually prefer line-mode command-line interfaces th
 
 There are exceptions, of course: I use a Linux distro with Systemd (Fedora), after all. When I use a graphical program, it's typically for things for which graphics are an inherent requirement or for accessibility reasons (most textual user interfaces don't play well with screen readers).
 
-More information is available in [my "uses" page](../uses/).
+More information is available in [my "uses" page]({{<relref "uses">}}).
 
 ### Anime
 

content/about/fediverse-greeting.md

@@ -38,7 +38,7 @@ I try to always always add content-warnings (<abbr title="content-warn or conten
 
 I am okay with you using whichever post-visibility you wish when replying to me, but I speak only for myself. If I want to talk to you privately I will use an alternate means of communication.
 
-If I want to make a well-thought-out post that could benefit others, I'll post it to [my website's "notes" section](../notes/) and syndicate it to Fedi with the "#POSSE" ([Publish on Own Site, Syndicate Elsewhere](https://indieweb.org/posse)) hashtag. My notes also have a dedicated Atom and RSS feed. This is much lower-volume and "cleaner" than my Fediverse profile, if that's what you prefer.
+If I want to make a well-thought-out post that could benefit others, I'll post it to [my website's "notes" section](../../notes/) and syndicate it to Fedi with the "#POSSE" ([Publish on Own Site, Syndicate Elsewhere](https://indieweb.org/posse)) hashtag. My notes also have a dedicated Atom and RSS feed. This is much lower-volume and "cleaner" than my Fediverse profile, if that's what you prefer.
 
 I will probably not boost pictures lacking alt-text, descriptions in the post body, or captions in comments. If I see a nice un-captioned picture, I’ll comment with my own caption instead. I often use a screen reader to reduce overstimulation and eye strain, and I sometimes use textual clients that can't display images; alt-text is really important to me!
 

content/notes/Introducing breadcrumbs.md

@@ -0,0 +1,10 @@
+---
+title: "Introducing breadcrumbs"
+date: 2022-07-07T18:12:10-07:00
+---
+I just rolled out breadcrumbs for my website. Now, any page that is not linked directly from the navbar or site footer will have a breadcrumb list in its header. The breadcrumb list shows how to reach the page, starting from a navbar link. The first item is the navbar or footer link; the second link is the current page.
+
+I made this change because simply emphasizing a navigation link with `<strong>` isn't enough to convey the current section to assistive technologies. With this change, I've done more than the bare minimum to meet [WCAG 2.2 SC 2.4.8: Location](https://w3c.github.io/wcag/understanding/location.html).
+
+With the presence of breadcrumbs, there are now more navigation-related links before the main content. Before, adding a skip-link would have saved a user five keystrokes; now, it could save a user seven. I'll probably add a skip-link next.
+

content/posts/cli-best-practices.gmi

@@ -104,7 +104,7 @@ $ moac -
 	-m  -- mass at attacker's disposal (kg)
 	-q  -- account for quantum computers using Grover's algorithm
 ```
-=> https://sr.ht/~seirdy/moac MOAC
+=> https://sr.ht/~seirdy/MOAC MOAC
 
 ### Misc
 

content/posts/cli-best-practices.md

@@ -104,7 +104,7 @@ This is a non-exhaustive list of simple, baseline recommendations for designing
 
 4. Ensure that the `whatis` and `apropos` commands work as intended after installing your man pages. These commands parse the beginnings of man pages to give one-line summaries of programs, and often power advanced tab-completion setups.
 
-{{<codefigure samp="true">}} {{< codecaption lang="console" >}} This is what tab-completion for [MOAC](https://sr.ht/~seirdy/moac) looks like with fzf-tab. {{< /codecaption >}}
+{{<codefigure samp="true">}} {{< codecaption lang="console" >}} This is what tab-completion for [MOAC](https://sr.ht/~seirdy/MOAC) looks like with fzf-tab. {{< /codecaption >}}
 
 ```figure {samp=true}
 $ moac -
@@ -151,7 +151,7 @@ These considerations are far more subjective, debatable, and deserving of skepti
 
 6. If you want to keep your tool simple, make the output readable to both humans and machines; it should work well when streamed to another program's standard input and when parsed by a person. This is especially useful when people redirect output streams to log files, and to screen readers.
 
-7. Consider splitting related functionality between many executables (the UNIX way) and/or sub-commands (like Git). I split [MOAC's](https://sr.ht/~seirdy/moac) functionality across both `moac` and `moac-pwgen`, and gave `moac` three subcommands. The ["Consistent commands trees"](https://lucasfcosta.com/2022/06/01/ux-patterns-cli-tools.html#consistent-commands-trees) section of Lucas' article has good advice.
+7. Consider splitting related functionality between many executables (the UNIX way) and/or sub-commands (like Git). I split [MOAC's](https://sr.ht/~seirdy/MOAC) functionality across both `moac` and `moac-pwgen`, and gave `moac` three subcommands. The ["Consistent commands trees"](https://lucasfcosta.com/2022/06/01/ux-patterns-cli-tools.html#consistent-commands-trees) section of Lucas' article has good advice.
 
 8. Don't conflate CLIs and TUIs. A CLI should be non-interactive; a TUI should be interactive. Exceptions exist for really simple interfaces (e.g. Magic-Wormhole and others like it) that accept user input; however, as the interface grows more complex, consider splitting the program into two sibling programs, one of which can have a "pure" non-interactive CLI.
 
@@ -209,7 +209,7 @@ References and further reading
 
 [^2]: See [this Fediverse thread](https://mastodon.technology/@codeberg/108403449317373462) about forge accessibility.
 
-[^3]: I need to take my own advice for programs like [moac](https://sr.ht/~seirdy/moac). Ugh.
+[^3]: I need to take my own advice for programs like [MOAC](https://sr.ht/~seirdy/MOAC). Ugh.
 
 [^4]: For a good example, see Git's distinction between regular output and porcelain-friendly output. The instability of the former and stability of the latter are explicitly documented in the Git man pages and in the official Git book.
 

content/posts/layered-content-blocking.md

@@ -79,7 +79,7 @@ I'll update this section as I collect feedback. Watch this space.
 <q>Malicious extensions can still request permission to read the contents of the page. What have you done differently besides adding new APIs?</q>
 : The difference is that these malicious extensions will require the extra permission to access your data for all websites, while extensions using declarative APIs will not. Security-conscious users can keep that fact in mind. However, we shouldn't speak for other users with different priorities.
 
-  I imagine that [an opinionated security-focused browser](https://hexavalent.org/) could make it possible for users to enable privileged extensions only on a site-by-site basis, for those interested. Personally, I think that it's probably best to limit scriptlet injection to signed scripts.[^7]
+	I imagine that [an opinionated security-focused browser](https://web.archive.org/web/20220607001654/https://hexavalent.org/) could make it possible for users to enable privileged extensions only on a site-by-site basis, for those interested <ins>(Update: Hexavalent has been discontinued)</ins>. Personally, I think that it's probably best to limit scriptlet injection to signed scripts.[^7]
 
   Another difference is that while declarative filtering does have reduced functionality, it's also more effective in some ways. Declarative filters generally have a lower footprint and are less likely to experience the delayed execution that lets some unwanted content slip through.
 

layouts/about/list.html

@@ -0,0 +1,37 @@
+{{ define "main" -}}
+{{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
+<main>
+	{{- $articleTag := printf `<article class="h-entry hentry" itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Article" itemid="%s%s">` .Site.Params.CanonicalBaseURL $canonicalRelPermalink -}}
+	{{ partial "full-article.html" . | replaceRE `<article class="h-entry hentry">` $articleTag | safeHTML }}
+<hr />
+<section itemprop="hasPart" class="h-feed hfeed" itemscope="" itemtype="https://schema.org/DataFeed">
+	<h2>More about me</h2>
+	<p role="doc-tip">
+		Timestamp format: <code>YYYY-MM-DD HH:MM</code>, as per <cite><a href="https://www.ietf.org/rfc/rfc3339.txt">RFC 3339</a></cite>. Sorted newest to oldest.
+	</p>
+	<ol>
+		{{- $pages := (where site.RegularPages "Section" .Section) -}}
+		{{- range $pages -}}
+		{{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" -}}
+		<li itemprop="dataFeedElement" itemscope="" itemtype="https://schema.org/DataFeedItem">
+			<article class="h-entry hentry" itemprop="item" itemscope="" itemtype="https://schema.org/Article" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
+				<h3 itemprop="name headline" class="p-name entry-title">
+					<a href="{{ .Permalink }}" itemprop="url" class="u-url url" rel="bookmark">
+						{{ .Title }}
+					</a>
+				</h3>
+				<p>
+					Posted <time itemprop="datePublished" class="dt-published published" datetime="{{ .Date.Format "2006-01-02 15:04:05Z07:00" }}">{{ .Date.Format "2006-01-02 15:04" }}</time>
+					{{- if gt (sub .Lastmod.Unix .Date.Unix) 3600 -}}
+						, updated <time{{ if not (.Params.evergreen) }} itemprop="dateModified" class="dt-updated updated"{{ end }} datetime="{{ .Lastmod.Format "2006-01-02 15:04:05Z07:00" }}">{{ .Lastmod.Format "2006-01-02 15:04" }}</time>
+				{{- end }}
+				</p>
+				<p class="p-summary entry-summary" itemprop="description">{{ .Description }}</p>
+				<p>{{- partial "wordcount.html" . -}}</p>
+			</article>
+		</li>
+		{{- end }}
+	</ol>
+</section>
+</main>
+{{ end }}

layouts/partials/breadcrumblist.html

@@ -0,0 +1,29 @@
+{{/* All pages are one or two clicks from the navbar. If two clicks, add a breadcrumb list. */}}
+{{- if and (not .IsHome) (not .Parent.IsHome) -}}
+<hr />
+<nav aria-labelledby="bc-label"
+	itemscope="" itemprop="breadcrumb" itemtype="https://schema.org/BreadcrumbList" itemref="body">
+	<span id="bc-label">You are here:</span>
+	<ol>
+		{{ template "breadcrumbnav" (dict "p1" . "p2" .) }}
+	</ol>
+</nav>
+{{- end -}}
+{{ define "breadcrumbnav" }}
+{{ if .p1.Parent }}
+{{ template "breadcrumbnav" (dict "p1" .p1.Parent "p2" .p2 )  }}
+{{ end }}
+{{- if not .p1.IsHome -}}
+			{{- $isCurrent := eq .p1 .p2 -}}
+			{{- /* The position is either "1" or "2" since the list is 2 elements long. */ -}}
+			{{- $position := "1" -}}
+			{{- if $isCurrent -}}
+				{{- $position = "2" -}}
+			{{- end -}}
+			<li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem">
+				<a{{ if $isCurrent }} aria-current="page"{{ end }} itemprop="item" href="{{ .p1.Permalink }}">
+					<span itemprop="name">{{ .p1.Title }}</span></a>
+					<meta itemprop="position" content="{{ $position }}" />
+			</li>
+{{- end -}}
+{{ end }}

layouts/partials/header.html

@@ -35,4 +35,5 @@
 				{{- end }}
 			</ul>
 		</nav>
+		{{ partial "breadcrumblist.html" . }}
 	</header>

layouts/partials/post-meta.html

@@ -8,6 +8,7 @@
 {{- else -}}
 	{{- $logURL = $logURL | strings.ReplaceRE `\.md` `.gmi` -}}
 {{- end -}}
+<p>
 {{- $action }} <time{{ if not (.Params.evergreen) }} itemprop="dateCreated datePublished" class="dt-published published"{{ end }} datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format "2006-01-02" }}</time> by {{ partial "indieweb-author.html" -}} on his <a rel="canonical" itemprop="url" class="u-url url" href="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">Website</a>{{- with .OutputFormats.Get "gemtext" -}}{{- printf " " -}}and <a rel="syndication" class="u-syndication" href="{{replace .Permalink "/gemini" "" 1 | safeURL}}">Gemini capsule</a>{{- end -}}.
 			{{- if gt (sub .Lastmod.Unix .Date.Unix) 900 -}}
 			<br />
@@ -17,3 +18,4 @@
 			<br />
 			{{ partial "wordcount.html" . -}}
 			{{- end -}}
+</p>

linter-configs/stylelintrc.json

@@ -4,6 +4,7 @@
 		"font-family-no-duplicate-names": [ true, { "ignoreFontFamilyNames": ["monospace"] } ],
 		"indentation": "tab",
 		"max-nesting-depth": 1,
-		"selector-max-compound-selectors": 3
+		"selector-max-compound-selectors": 3,
+		"no-descending-specificity": null
 	}
 }