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.
6042b0bdaf
...
48a9088ca1
13 changed files with 41 additions and 178 deletions
116
README.md
116
README.md
|
@ -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.
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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">
|
||||
|
||||
Seirdy’s Home
|
||||
|
|
|
@ -1,7 +0,0 @@
|
|||
---
|
||||
outputs:
|
||||
- html
|
||||
title: Search
|
||||
description: "Search seirdy.one."
|
||||
layout: "search"
|
||||
---
|
|
@ -1 +0,0 @@
|
|||
Files in this directory represent dynamic pages, containing raw templates to be populated on the server side
|
|
@ -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>
|
|
@ -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>
|
||||
|
|
|
@ -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 }}
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 }} />
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -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"
|
||||
|
||||
|
|
Loading…
Reference in a new issue