1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-10 00:12:09 +00:00

Compare commits

..

No commits in common. "6042b0bdaff1cc5ebbdbb72d6513668538a0adb0" and "48a9088ca1da44360846b921895deb219ffd50b0" have entirely different histories.

13 changed files with 41 additions and 178 deletions

116
README.md
View file

@ -15,118 +15,56 @@ Dependencies
To build:
- Hugo 0.93 or later
- bmake or GNU Make. OpenBSD make (omake) should work too, but I haven't tested it.
- Make
- Git (Hugo uses Git info for features like date last updated)
- [htmlq](https://github.com/mgdm/htmlq), to parse HTML when fetching some webring links and for some post-processing.
- POSIX utils: `grep`, `find`, POSIX-compliant `/bin/sh`, etc.
Before deploying, I use some tools to process the output.
- `xmllint`, part of libxml2, to format the generated polygot XHTML5 markup.
- [sd](https://github.com/chmln/sdA) (for advanced multi-line regex operations, much of which exist to fix `xmllint`'s output)
I also apply static compression at max levels, using the following tools:
- [Efficient Compression Tool](https://github.com/fhanau/Efficient-Compression-Tool) It's like zopfli but more efficient and faster.
- Brotli
- Brotli (optional; set `NO_STATIC=1` to disable)
- POSIX utils: grep, find, etc.
To deploy:
- rsync, with SSH and zstd support
- ssh
- rsync
- libzstd
To lint:
- stylelint, invoked using pnpm.
- [lychee](https://github.com/lycheeverse/lychee), to check broken links.
- A very recent build of the w3c's [Nu HTML checker](https://github.com/validator/validator) to validate the HTML and XHTML.
- [jq](https://stedolan.github.io/jq/), to filter false-positives from the Nu HTML checker.
- stylelint
- csslint
- pnpm
- [lychee](https://github.com/lycheeverse/lychee)
Build instructions
------------------
See the `Makefile` for details.
- To just build the HTML: `make hugo`
- To build the polygot formatted HTML and XHTML: `make hugo xhtmlize`
- To lint and validate: `make hugo xhtmlize lint-local`
- To build everything and compress: `make hugo xhtmlize compress`
- To deploy the clearnet site and corresponding Tor hidden service: `make deploy-prod deploy-onion`
Design
------
`make` can parallelize only a little, since many jobs depend on previous jobs.
I made the site as inclusive as possible. Tested using multiple screen readers (Orca, TalkBack, Apple VoiceOver, Windows Narrator, NVDA), and I regularly test with the following browsers/engines. Testing in a browser does not imply any sort of endorsement; I just want to meet people where they're at.
Compatibility
-------------
I made the site as inclusive as possible. Tested using multiple screen readers (Orca, TalkBack, Apple VoiceOver, Windows Narrator, NVDA), and I regularly test with the following browsers/engines. Testing in a browser does not imply any sort of endorsement; I just want to meet people where they're at and I want my site to be as robust as possible.
For all the listed options, I test "reading mode" whenever it's available. Most of my testing happens on Linux since that's my main OS, but I sometimes test on a Windows machine.
The main compatibility issue is a lack of support for `<details>`; the only non-mainstream engine to support it is Servo. The site is still perfectly usable without support for `<details>`; users will just be annoyed by pre-expanded toggle buttons that don't do anything.
### Desktop
Mainstream engines:
Desktop:
- Gecko: Nightly, Stable, ESR, and sometimes Pale Moon
- the Tor Browser
- Blink: latest Chromium snapshot, stable, and QtWebEngine
- WebKit, via Webkit2GTK3
Non-mainstream engines:
- WebKit: Webkit2GTK3
- NetSurf
- [The SerenityOS Browser](https://github.com/SerenityOS/serenity/tree/master/Userland/Libraries/LibWeb) (does not yet support ECDSA-based certs, so I test on my Tildeverse mirror). Known issue: SVG avatar doesn't render unless I view it in a new tab.
- Very old WebKit via rekonq (Qt4 QtWebKit).
- KHTML (KF5), via Konqueror.
- SerenityOS Browser
- Very old WebKit via rekonq (Qt4 QtWebKit)
- KHTML
- Servo
- Tkhtml, via Hv3 (no TLS 1.2, so I use a terminating proxy or localhost version)
- Trident, if I have access to a Windows machine that has Edge with "IE Mode".
Tested on a provisional basis, when I have access to a Windows machine:
For all the above options, I test "reading mode" whenever it's available.
- [Winternight Classic](https://github.com/ClassicNick/Crescent-Vine).
- IE 11.
- Even older WebKit, via Safari 5.1.7. Requires a TLS terminating proxy.
- Ancient Gecko, via NetScape Navigator. Requires a TLS terminating proxy.
Desktop screen readers tested:
- Orca
- NVDA
- Windows Narrator
- TODO: borrow someone's mac and test macOS VoiceOver.
### Mobile
Mobile:
- Android: Blink, Gecko, Tor Browser
- iOS WebKit: latest stable version, iOS 12, iOS 10 on an iPhone 5. Also tested Reader Mode.
- TODO: try a KaiOS device and Samsung Internet's dark mode.
- iOS WebKit: latest stable version, iOS 12, iOS 10 on an iPhone 5. Also test Reader Mode.
- TODO: try a KaiOS device.
The site should work well even on viewports that are under 240 CSS pixels wide.
Mobile screen readers:
- TalkBack
- VoiceOver
- TODO: test KaiOS Readout
### Smart watches
Smart watches:
- Borrowed an Apple Watch to try the embedded browser.
- TODO: test on a Tizen or Wear OS device's browser (Samsung Internet is a popular choice)
- TODO: test on a Tizen or Wear OS device's browser.
## Accessibility
To my knowledge, this site meets all applicable WCAG 2.2 AA requirements.
This site meets all applicable WCAG 2.2 AAA requirements, with the following exceptions:
- SC 1.4.8 Visual Presentation: long article body text for articles should have an average character count per line below 80 characters. Some lines may exceed this limit. Text outside of article bodies has a longer line width.
- SC 2.4.9 Link Purpose (Link Only): I mostly follow this guideline, but there may be some exceptions. Link purpose in context is always clear, though.
- SC 3.1.5 Reading Level: the required reading ability often exceeds the lower secondary education level
- SC 3.1.6 Pronunciation: I do not yet provide pronunciation information.
I have only tested WCAG compliance in mainstream browser engines (Blink, Gecko, WebKit).
I also go further than WCAG in many aspects.
- Rather than follow SC 2.5.5's requirement to achieve a minimum tap target size of 44 by 44 pixels, I follow Google's more strict guidelines. These guidelines mandate that targets are at least 48-by-48 pixels, with no overlap against any other targets in a 56-by-56 pixel range.
- I ensure at least one such 56-by-56 pixel non-interactive region exists on the page, for users with hand tremors or or anyone who wants to tap the screen without clicking something.
- I only set custom colors in response to the `prefers-color-scheme: dark` media query. These custom colors pass APCA contrast ratios, all being close to the ideal lightness contrast of 90. They are also autism- and overstimulation-friendly colors: yellow links are significantly de-saturated to reduce harshness.
Everything works well in all the above browsers.

View file

@ -338,7 +338,7 @@ pre {
/* center standalone images; same justification as
* for centering the body contents. Also makes images easier to see
* for people holding a device with one hand. */
div[itemprop="articleBody"] img {
picture > img {
display: block;
height: auto;
margin: auto;

View file

@ -8,9 +8,7 @@ description: "Seirdy's Home: personal website and blog for Rohan Kumar, A.K.A. S
sitemap:
- ChangeFreq: weekly
- Priority: 0.9
stype: "WebSite"
---
<meta itemprop="url" content="https://seirdy.one" />
<div itemprop="author" itemscope="" itemtype="https://schema.org/Person" itemid="https://seirdy.one/#seirdy" class="p-author author h-card vcard" id="seirdy">
Seirdys Home

View file

@ -1,7 +0,0 @@
---
outputs:
- html
title: Search
description: "Search seirdy.one."
layout: "search"
---

View file

@ -1 +0,0 @@
Files in this directory represent dynamic pages, containing raw templates to be populated on the server side

View file

@ -1,28 +0,0 @@
<p>
{{ .TotalResults }} results
</p>
<ol>
{{- range .Results }}
<li>
<a href="{{ .URL }}">
<h2>
{{ if .Title -}}
{{- .Title }}
{{ else -}}
{{- .URL }}
{{- end }}
</h2>
</a>
<p>{{ printf "%.200s" .Desc }}</p>
<p>
{{ $isMatch := false }}
{{ range .Frag }}
{{ if $isMatch }}<strong>{{ end -}}
{{ printf . }}
{{- if $isMatch }}</strong>{{ end }}
{{ $isMatch = (not $isMatch) }}
{{ end }}
</p>
</li>
{{- end }}
</ol>

View file

@ -1,13 +1,9 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="{{- default "" .Site.LanguageCode }}" xml:lang="{{- default "" .Site.LanguageCode }}" prefix="og: https://ogp.me/ns# article: https://ogp.me/ns/article# cc: http://creativecommons.org/ns#">
{{ partial "head.html" . -}}
{{- $stype := "WebPage" -}}
{{- with .Params.stype -}}
{{- $stype = . -}}
{{- end -}}
<body itemscope="" itemtype="https://schema.org/{{ $stype }}">
<body itemscope="" itemtype="https://schema.org/WebPage">
{{ partial "header.html" . -}}
{{- block "main" . }}{{- end -}}
{{ partial "footer.html" . }}
{{ partialCached "footer.html" . }}
</body>
</html>

View file

@ -1,12 +0,0 @@
{{ define "main" -}}
{{- $canonicalRelPermalink := .RelPermalink | replaceRE "^/~seirdy/" "/" }}
<main >
<h1>Search</h1>
<p role="note">This page is an unfinished work-in-progress.</p>
{{ partial "search.html" . }}
<hr />
<div itemprop="mainEntity" itemscope="" itemtype="https://schema.org/SearchResultsPage" itemid="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
{{ readFile "/dynamic/search-results.html" | safeHTML }}
</div>
</main>
{{ end }}

View file

@ -3,9 +3,7 @@
<p>
Copyright <time itemprop="copyrightYear" datetime="{{now.Year}}">{{now.Year}}</time> {{ partial "indieweb-author.html" -}}
</p>
{{ if ne .Title "Search" -}}
{{- partial "search.html" -}}
{{- end -}}
{{ partial "search.html" }}
<nav aria-label="site info">
<ul>
<li itemprop="license" itemscope="" itemtype="https://schema.org/CreativeWork">

View file

@ -1,12 +1,12 @@
<form
itemprop="potentialAction" itemscope="" itemtype="https://schema.org/SearchAction"
action="https://seirdy.one/search/" method="get" role="search">
<label for="search" itemscope="" itemprop="target" itemtype="https://schema.org/EntryPoint">
Search this site (powered by the <a rel="nofollow" href="https://searchmysite.net/">Search My Site</a> API):
<meta itemprop="urlTemplate" content="http://seirdy.one/search?q={q}" />
action="https://searchmysite.net/search/" method="get" role="search">
<label for="search">
Search this site (powered by <a rel="nofollow" href="https://searchmysite.net/">Search My Site</a>):
</label>
<div><!--We need the extra divs to serve as pseudo-table-cells.-->
<input itemprop="query-input" id="search" type="search" required="" name="q" />
<input id="search" type="search" itemprop="query"
value="domain:seirdy.one " name="q" spellcheck="true" />
<div><input type="submit" value="search" /></div>
</div>
</form>

View file

@ -1,14 +1,9 @@
{{ $favicon := resources.Get "/favicon.png" -}}
{{- $favicon_base64 := $favicon.Content | base64Encode -}}
{{- $favicon_bigpng := resources.Get "/favicon192.png" | resources.Fingerprint "md5" -}}
{{- $favicon_svg := resources.Get "/favicon.svg" | resources.Fingerprint "md5" -}}
{{- if in site.BaseURL ".onion" -}}
<img itemprop="image" class="u-photo photo" width="16" height="16" alt=""
src="data:image/png;base64,{{ $favicon_base64 }}" />
{{ if in site.BaseURL ".onion" -}}
src="data:image/png;base64,{{ $favicon_base64 }}"
{{- else -}}
<picture itemprop="image">
<source srcset="{{ $favicon_svg.RelPermalink }}" type="image/svg+xml" />
<img class="u-photo photo" width="16" height="16" alt=""
src="{{ $favicon_bigpng.RelPermalink }}" />
</picture>
{{- end -}}
src="{{ $favicon_svg.RelPermalink }}"
{{- end }} />

View file

@ -13,20 +13,6 @@
.message == "Attribute “media” not allowed on element “meta” at this point."
and (.extract | test(" name=\"theme-color\""))
)
or
( # Allow raw templates
(.url | test ("/search/index."))
and (
(.message == "Text not allowed in element “ol” in this context.")
or
(.message == "Bad value “{{ .URL }}” for attribute “href” on element “a”: Illegal character in path segment: “{” is not allowed.")
)
and (
(.extract | test("{{"))
or
(.extract | test("}}"))
)
)
) | not
)
) | del(..|select(. == [])) | del(..|select(. == {})) | select(. != null)

View file

@ -34,7 +34,7 @@ sed 7d "$html_file" | xmllint --format --encode UTF-8 --noent - | sd '^\t' '' >"
| sd '<pre(?: tabindex="0")?>\n\t*<code ' '<pre tabindex="0"><code ' \
| sd '(?:\n)?</code>\n(?:[\t\s]*)?</pre>' '</code></pre>' \
| sd '</span>.span itemprop="familyName"' '</span> <span itemprop="familyName"' \
| sd '</picture><span itemprop="name" class="p-name fn n">' '</picture> <span itemprop="name" class="p-name fn n">' \
| sd '(<img itemprop="image" class="u-photo photo"[^>]*/>)<span' '$1 <span' \
| sd '([a-z])<(data|time)' '$1 <$2'
} >>"$xhtml_file"