Update IndieWebification progress

Link targets need to be focusable to work with VoiceOver.

Making <main> focusable causes some side-effects, like making the TAB
key go to the beginning of <main> instead of the element after the
currently-clicked region.

Also removes the annoying outline around "main" in some non-mainstream
browsers, without having to add extra CSS.

assets/css/main.css

@@ -152,7 +152,7 @@ html {
 		margin: -.75em -.25em;
 	}
 
-	header a[href="#main"], /* skip link */
+	a[href="#h1"], /* skip link */
 	div[itemprop="comment"] dd > a ,
 	footer > nav,
 	/* List items with direct hyperlink children should only have one hyperlink. */
@@ -187,13 +187,13 @@ html {
 	}
 
 	/* skip link: make it invisible until focused, and put it on the top. */
-	header a[href="#main"] {
+	a[href="#h1"] {
 		position: absolute;
 		top: -2em;
 		padding: 0 .25em;
 	}
 
-	header a[href="#main"]:focus {
+	a[href="#h1"]:focus {
 		top: 0;
 	}
 }

content/meta/_index.md

@@ -34,6 +34,7 @@ This site is featured in some cool directories.
 - [Writer's Lane, Nightfall City](https://nightfall.city/writers-lane/)
 - [Just Another Useless Page](https://www.geocities.ws/jaup/jaup.htm)
 - [Webrings Fanlisting](https://fanlistings.nickifaulk.com/webrings/)
+- [Yesterlinks](https://links.yesterweb.org/)
 - [Gossip's Web](https://gossipsweb.net/personal-websites)
 - [Nixers](https://github.com/nixers-projects/sites/wiki/List-of-nixers.net-user-sites)
 - [Smooth Sailing](https://smoothsailing.asclaria.org/)
@@ -45,7 +46,6 @@ This site is featured in some cool directories.
 - [Ye Olde Blogroll](https://blogroll.org/) (pending)
 - [LinkLane](https://www.linklane.net/) (pending)
 - [Blog Surf](https://blogsurf.io/) (pending)
-- [Yesterlinks](https://links.yesterweb.org/) (pending)
 
 </details>
 

content/meta/site-design.md

@@ -24,6 +24,7 @@ The [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standar
 
 Additionally, I strive to conform to WCAG 2.2 level AAA wherever applicable. I comply with all AAA criteria except for the following:
 
+
 SC 2.4.9 Link Purpose (Link Only)
 : I'm actually trying to follow this criterion, but it's a work in progress. Let me know if any link names can be improved! Link purpose _in context_ always makes sense.
 
@@ -108,7 +109,7 @@ This site happens to fully support Apple's Reader Mode and Azure Immersive Reade
 
 This site works well in the Diffbot article extractor. Diffbot powers a variety of services, including Instapaper.
 
-This site does not work well in Chromium's DOM Distiller. DOM Distiller removes all level-2 headings in article bodies. This is likely because they appear alongside section permalinks, which combines poorly with a DOM-Distiller heuristic that strips out sections with a high link-density. DOM Distiller also does not show footnotes, and sometimes cuts off final sections (acknowledgements, conclusions).
+This site does not work well in Chromium's DOM Distiller's flawed distillation techniques. Regions with high link-densities, such as citations, get filtered out. DOM Distiller also does not show footnotes, and sometimes cuts off final [DPUB-ARIA](https://w3c.github.io/dpub-aria/) sections (acknowledgements, conclusions).
 
 Static IndieWeb
 ---------------
@@ -119,34 +120,44 @@ One of my goals for this site was to see just how far I could take IndieWeb conc
 
 ### Features I have already implemented
 
-- IndieAuth compatibility
+- IndieAuth compatibility, using the external [IndieLogin.com service](https://indielogin.com/).
+
 - Microformats: representative `h-card`, in-text `h-card` and `h-cite` when referencing works, `h-feed`.
-- Sending and receiving Webmentions
+
-- Displaying Webmentions in the form of link-backs and likes (inspired by Tumblr).
+- Sending and receiving Webmentions. I receive Webmentions with [webmentiond](https://github.com/zerok/webmentiond), and send them from my own computer using [Pushl](https://github.com/PlaidWeb/Pushl).
-- Backfeeding content from silos: I'm only interested in backfilled content containing discussion, not "reactions" or "likes". Powered by Brid.gy
+
+- Displaying Webmentions: linkbacks, IndieWeb "likes" (not silo likes), and comments. I based their appearance on Tumblr's display of interactions.
+
+- Backfeeding content from silos: I'm only interested in backfilled content containing discussion, not "reactions" or "likes". Powered by [Bridgy](https://brid.gy/).
 
 ### Features I am not interested in
 
-- Authoring tools, either through a protocol (e.g. MicroPub) or a dynamic webpage: I prefer writing posts in my `$EDITOR` and deploying with `git push`, letting a CI job build and deploy the site with `make deploy-prod`. This allows me to participate with the social Web using the same workflow I use for writing code.
+- Authoring tools, either through a protocol (e.g. MicroPub) or a dynamic webpage: I prefer writing posts in my `$EDITOR` and deploying with `git push`, letting a CI job build and deploy the site with `make deploy-prod`. This allows me to participate with the social Web using the same workflow I use for writing code, avoiding the need to adopt and learn new tools.
 
-- Full silo independence: I want to treat my site as a "filtered" view of me that I want to keep searchable and public. On other silos I might shitpost or make low-effort posts. These aren't private, but I want them to remain less prominent. I POSSE content to other places, but I don't exclusively use POSSE.
+- Full silo independence: I want to treat my site as a "filtered" view of me to keep searchable and public. On other silos I might shitpost or post short-lived, disposable content. These aren't private, but I want them to remain less prominent. I POSSE content to other places, but I don't exclusively use POSSE.
 
 - Sharing my likes, favorites, reposts: I find these a bit too shallow for seirdy.one. I prefer "bookmarks" where I can give an editorialized description of the content I wish to share along with any relevant tags. I'll keep simple likes and reposts to silos.
 
-- Rich reply-contexts: I'd rather have users click a link to visit the reply and use quoted text to respond to specific snippets, similar to interleaved-style email quoting.
+- Rich reply-contexts: I'd rather have users click a link to visit the reply and use quoted text to respond to specific snippets, similar to interleaved-style email quoting. Most of my replies are to Fediverse posts; on the Fediverse, people are often (understandably!) averse to scraping and archiving content. For that reason: I only show a tiny excerpt of content, and I ask for permission to POSSE replies to unlisted posts by `#nobot` accounts.
 
 ### Features I am interested in
 
-- WebSub. Had some issues with Superfeedr; I think I'll resort to running my own single-user hub.
+- WebSub. I had some issues with Superfeedr; I think I'll resort to running my own single-user hub.
-- Automatic POSSE to the Fediverse (would be difficult with reply-contexts).
+
-- Tags and topics.
+- Automatic POSSE to the Fediverse (would be difficult with reply-contexts, and Bridgy doesn't support non-Mastodon features like Markdown).
-- Displaying (truncated) Webmention entry contents instead of just titles and timestamps.
+
+- Taxonomies (tags).
 
 ### Low-priority features I have some interest in
 
 - RSVPs: I don't attend many events, let alone events for which I would broadcast my attendance. A page for this would be pretty empty.
+
 - Event posts: same reason as above.
 
+- Running my own IndieAuth authorization endpoint to replace the external IndieLogin service.
+
+- Some sort of daemon to replace Bridgy. It sounds like a large undertaking because I'd have to implement it from scratch: Bridgy is written in Python, but I want every service on my server to be a statically-linked native executable.
+
 Privacy
 -------
 

content/notes/section-permalinks.md

@@ -0,0 +1,21 @@
+---
+title: "Section permalinks"
+date: 2022-07-13T14:47:30-07:00
+replyURI: "https://programist.ro/@walter/108641672090578574"
+replyTitle: "I would show that permalink everywhere."
+replyType: "SocialMediaPosting"
+replyAuthor: "Walter S."
+replyAuthorURI: "https://programist.ro/@walter"
+---
+
+> IMHO, your implementation seems just right.
+
+Thanks! I based my approach off of [Amber Wilson's section permalinks](https://amberwilson.co.uk/blog/are-your-anchor-links-accessible/)
+
+One key difference: I wanted CSS to be an optional cosmetic enhancement, and not something that changes the content that people see (except for print media). I want my markup to only define structure/semantics, when possible (i.e. ideally no cosmetic `div` wrappers). That meant displaying the section permalink as a readable link. I used `aria-labelledby` to give each section permalink a unique accessible name.
+
+I've heard positive feedback from both screen-reader and textual-browser users.
+
+As for how this relates to reading mode implementations:
+
+The point of reading-mode tools is to reduce clutter and focus on reading an article, without the author's supplied user-interface. Section permalinks feel like a part of a "user interface" and should be removed; the interface should only be provided by the reading-mode. On the other hand, most reading modes don't provide a document outline or a way to get a link to the current section, and users might want that functionality without having to leave reading-mode. On a third hand: if I include section permalinks in reading mode, then it'd end up looking almost identical to the un-distilled page. That'd make reading mode almost useless.

layouts/_default/404.html

@@ -14,7 +14,7 @@
 {{ $resources = $resources | append (resources.Get "css/print.css" | resources.ExecuteAsTemplate "print.css" .) -}}
 {{- $css := $resources | resources.Concat "css/style.css" | minify -}}
 <style>{{ $css.Content | safeCSS }}</style>
-<meta name="robots" content="noindex,nofollow" />
+<meta name="robots" content="noindex,nofollow,nosnippet" />
 <title>{{ .Title }}</title>
 {{ if not (in site.BaseURL ".onion") -}}
 {{ $icon_svg := resources.Get "/favicon.svg" | resources.Fingerprint "md5" }}
@@ -28,6 +28,7 @@
 </head>
 <body>
 <header>
+	<a href="#h1">Skip to content</a>
 	<nav aria-label="Global">
 		<ul>
 			<li>
@@ -45,11 +46,14 @@
 			<li>
 				<a href="/about/">About</a>
 			</li>
+			<li>
+				<a href="/meta/">Meta</a>
+			</li>
 		</ul>
 	</nav>
 </header>
 <main>
-	<h1>{{ .Title }}</h1>
+	<h1 id="h1" tabindex="-1">{{ .Title }}</h1>
 	{{ partial "processed-content.html" . -}}
 </main>
 <footer>
@@ -62,7 +66,7 @@
 				<a rel="source" href="{{ .Site.Params.src }}">Source code</a>
 			</li>
 			<li>
-				<a rel="alternate" href="http://wgq3bd2kqoybhstp77i3wrzbfnsyd27wt34psaja4grqiezqircorkyd.onion{{ .RelPermalink }}">Tor mirror</a>
+				<a rel="alternate" href="http://wgq3bd2kqoybhstp77i3wrzbfnsyd27wt34psaja4grqiezqircorkyd.onion/">Tor mirror</a>
 			</li>
 			<li>
 				<a href="{{ site.BaseURL }}privacy/">Privacy</a>

layouts/_default/bookmarks.html

@@ -1,7 +1,7 @@
 {{ define "main" -}}
-<main id="main" tabindex="-1"
+<main
  itemprop="mainEntity" class="h-feed hfeed" itemscope="" itemtype="https://schema.org/DataFeed">
-	<h1 id="bookmarks" class="p-name" itemprop="name headline">My book&#173;marks</h1>
+	<h1 id="h1" tabindex="-1" class="p-name" itemprop="name headline">My book&#173;marks</h1>
 	{{ partial "processed-content.html" . }}
 	<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>

layouts/_default/list.html

@@ -1,5 +1,5 @@
 {{ define "main" -}}
-<main id="main" tabindex="-1"
+<main
  itemprop="mainEntity" class="h-feed hfeed" itemscope="" itemtype="https://schema.org/DataFeed">
 	{{ partial "processed-content.html" . }}
 	<p role="doc-tip">

layouts/_default/search.html

@@ -1,7 +1,7 @@
 {{ define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
-<main id="main" tabindex="-1">
+<main>
-	<h1>Search</h1>
+	<h1 id="h1" tabindex="-1">Search</h1>
 	<p role="note">This page is an unfinished work-in-progress.</p>
 	{{ partial "search.html" . }}
 	<hr />

layouts/_default/single.html

@@ -1,6 +1,6 @@
 {{ define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
-<main id="main" tabindex="-1"
+<main
 	itemprop="mainEntity" itemscope="" itemtype="https://schema.org/Article" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
 	{{ partial "full-article.html" . }}
 </main>

layouts/about/list.html

@@ -1,6 +1,6 @@
 {{ define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
-<main id="main" tabindex="-1">
+<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 />

layouts/index.html

@@ -1,6 +1,6 @@
 {{ define "main" -}}
-<main id="main" tabindex="-1">
+<main>
-<h1 id="seirdys-home">Seirdy’s Home</h1>
+<h1 id="h1" tabindex="-1">Seirdy’s Home</h1>
 <p itemprop="description">{{ .Site.Params.Description }}</p>
 <hr />
 <div class="narrow">

layouts/meta/list.html

@@ -1,6 +1,6 @@
 {{ define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
-<main id="main" tabindex="-1">
+<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 />

layouts/notes/single.html

@@ -1,6 +1,6 @@
 {{- define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
-<main id="main" tabindex="-1"
+<main
  itemprop="hasPart" itemscope="" itemtype="https://schema.org/SocialMediaPosting" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
 	<link itemprop="isPartOf" href="{{ .Site.Params.CanonicalBaseURL }}/" />
 	{{ partial "full-article.html" . }}

layouts/partials/full-article.html

@@ -1,6 +1,6 @@
 <article class="h-entry hentry"><!--Once WAI-ARIA 1.3 gains traction, I'll add aria-details for webmentions.-->
 <header>
-	<h1 itemprop="name headline" class="p-name entry-title">{{ .Title }}</h1>
+	<h1 itemprop="name headline" class="p-name entry-title" id="h1" tabindex="-1">{{ .Title }}</h1>
 	{{- if not .Params.disableMeta -}}
 	{{- partial "post-meta.html" . -}}
 	{{- end -}}

layouts/partials/header.html

@@ -1,5 +1,5 @@
 	<header>
-		<a href="#main">Skip to content</a>
+		<a href="#h1">Skip to content</a>
 		<nav aria-label="Global">
 			<ul>
 				{{- $currentPage := . -}}

layouts/posts/single.html

@@ -1,7 +1,7 @@
 {{- define "main" -}}
 {{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
 {{- .Scratch.Set "codeIndex" 1 -}}
-<main id="main" tabindex="-1"
+<main
  itemprop="mainEntity" itemscope="" itemtype="https://schema.org/BlogPosting{{ with .Params.articleType }} https://schema.org/{{ . }}{{ end }}" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
 	<link itemprop="isPartOf" href="{{ .Site.Params.CanonicalBaseURL }}/" />
 	{{ partial "full-article.html" . }}