Apply lint suggestions to <head>

Use relative links for posts list
Fix time element datetime attribute dates
2024-04-13 14:47:01 +08:00 · 2024-04-13 14:46:37 +08:00 · 2024-04-13 14:45:34 +08:00 · 2024-04-13 14:45:07 +08:00 · 2024-04-13 14:44:43 +08:00 · 2024-04-13 14:44:22 +08:00
25 changed files with 5876 additions and 366 deletions
--- a/.config/htmlvalidate.json
+++ b/.config/htmlvalidate.json
@ -0,0 +1,18 @@
+{
+  "extends": ["html-validate:recommended"],
+  "rules": {
+      "doctype-style": ["off"],
+      "void-style": ["error", { "style": "selfclosing" }],
+      "valid-id": ["warn", { "relaxed": true}],
+      "no-autoplay": ["warn"],
+      "no-inline-style": ["warn", { "allowedProperties": [
+          "display",
+          "font-size",
+          "font-family",
+          "margin-bottom",
+          "margin-top",
+          "margin-left",
+          "margin-right"
+      ] }]
+  }
+}
--- a/.config/prettier.toml
+++ b/.config/prettier.toml
@ -0,0 +1 @@
+bracketSameLine = false
--- a/.config/stylelint.json
+++ b/.config/stylelint.json
@ -0,0 +1,6 @@
+{
+	"extends": "stylelint-config-recommended",
+	"rules": {
+        "no-descending-specificity": null
+	}
+}
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,6 @@
 public/
 resources/
 .hugo_build.lock
+tmp
+node_modules
+hint-report
--- a/13
+++ b/13
@ -21,6 +21,17 @@ DEPLOY_GEMINI_DIST=gemini.tar.gz

 .DEFAULT_GOAL := all

+lint-css:
+	pnpm exec stylelint --config .config/stylelint.json --rd --rdd assets/main.css
+
+lint-html-validate:
+	pnpm exec html-validate --config .config/htmlvalidate.json $(HTML_DEST)
+
+lint-html-proofer:
+	htmlproofer $(HTML_DEST) --checks Links,Images,Scripts,Favicon,OpenGraph --no-allow-missing-href --no-ignore-empty-alt
+
+lint: lint-css lint-html-validate lint-html-proofer
+
 deploy-html:
 	tar -C $(HTML_DEST) -cvz . > $(DEPLOY_HTML_DIST)
 	$(HUT) pages publish --protocol HTTPS -d $(DEPLOY_DOMAIN) $(DEPLOY_HTML_DIST)
@ -58,7 +69,7 @@ html:
 	$(RSYNC) $(RSYNC_FLAGS) public/ --exclude '*.gmi' --exclude gemini $(HTML_DEST)
 	@# Manually include gemini tag (because it was excluded above)
 	$(RSYNC) $(RSYNC_FLAGS) public/tags/gemini $(HTML_DEST)/tags/
-	$(PRETTIER) --write $(HTML_DEST)"/**/*.html"
+	$(PRETTIER) --config .config/prettier.toml --write $(HTML_DEST)"/**/*.html"

 finish-clean:
 	rm -rf $(GEMINI_DEST)-back $(HTML_DEST)-back
--- a/README.md
+++ b/README.md
@ -45,6 +45,10 @@ css](https://simplecss.org) and sometimes [seirdy's site](https://seirdy.one).
 ### deploy
 - **hut** - publishes HTML/gemini files to srht.site

+### lint
+- `pnpm` - install dev dependencies in `package.json`
+- `ruby >= 2.7` - for `htmlproofer`
+
 ## hardcoded values

 ### resources
--- a/assets/main.css
+++ b/assets/main.css
@ -12,76 +12,65 @@
 */

 :root {
-	--base-fontsize: 1rem;
+    --base-fontsize: 1rem;

-	/* Major third scale progression - see https://type-scale.com/ */
-	--header-scale: 1.25;
-	/* I don't want h1, h2, and h3 to be too big */
-	--header-scale-minor: 1.1;
+    /* Major third scale progression - see https://type-scale.com/ */
+    --header-scale: 1.25;
+    /* I don't want h1, h2, and h3 to be too big */
+    --header-scale-minor: 1.1;

-	/* Line height is set to the "Golden ratio" for optimal legibility */
-	--line-height: 1.618;
+    /* Line height is set to the "Golden ratio" for optimal legibility */
+    --line-height: 1.618;

-	--mono-font: Hack, Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
-	--bg: #fff;
-	--accent-bg: #f7f4fb;
-	--accent-bg-light: #f2f2f2;
+    --mono-font: Hack, Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+    --bg: #fff;
+    --accent-bg: #f7f4fb;
+    --accent-bg-light: #f2f2f2;
    --code-bg: #f2f2f2;
-	--text: #0a0a0a;
-	--text-light: #787878;
-	--non-text-light: #95aac0;
+    --text: #0a0a0a;
+    --text-light: #787878;
+    --non-text-light: #95aac0;

-	--border: #bbb;
-	--border-light: var(--border);
-	--accent: #5c659b;
-	--accent-light: #7890c1;
-	--code: #d81b60;
-	--preformatted: #444;
-	--marked: #ffdd33;
-	--disabled: #efefef;
+    --border: #bbb;
+    --border-light: var(--border);
+    --accent: #5c659b;
+    --accent-light: #7890c1;
+    --code: #d81b60;
+    --preformatted: #444;
+    --marked: #ffdd33;
+    --disabled: #efefef;

-	--shadow-color: #fff;
-
-	--link: #3c63e8;
-	--link-hover: #93aaf9;
-	--link-visited: #6971a0;
-
-	--link-alt: var(--link);
-
-	/* My theme stuff */
-	--theme-purple: #3d4573;
+    --link: #3c63e8;
+    --link-visited: #6971a0;
+    --link-alt: var(--link);
 }
+
@media (prefers-color-scheme: dark) {
-	:root {
-		--bg: #232326;
-		--accent-bg: #44475a;
-		--accent-bg-light: #303035;
-		--code-bg: #3e3e4b;
-		--text: #eee;
-		--text-light: #cecece;
-		--non-text-light: #999fbf;
+    :root {
+        --bg: #232326;
+        --accent-bg: #44475a;
+        --accent-bg-light: #303035;
+        --code-bg: #3e3e4b;
+        --text: #eee;
+        --text-light: #cecece;
+        --non-text-light: #999fbf;

-		--border: #aaa;
-		--border-light: #565656;
-		--accent: #8be9fd;
-		--accent-light: #ece1a1;
-		--code: #f06292;
-		--preformatted: #ccc;
-		--disabled: #111;
-
-		--shadow-color: #36373b;
-        --theme-purple: #af9dea;
+        --border: #aaa;
+        --border-light: #565656;
+        --accent: #8be9fd;
+        --accent-light: #ece1a1;
+        --code: #f06292;
+        --preformatted: #ccc;
+        --disabled: #111;

        --link: #cddfff;
-        --link-hover: #8c9cba;
        --link-visited: #c3b1ff;
-        /* Why doesn't the dracula pink look better? #ff79c6 */
        --link-alt: var(--accent-light);
-	}
+    }

-	img:not(.pfp), video {
-		opacity: .6;
-	}
+    img:not(.pfp), video {
+        opacity: .6;
+    }
 }

 body {
@ -91,149 +80,38 @@ body {
     * in their browser settings, so I help them.
     * But... that's barely an excuse for me to use a big font-stack, I know */
 	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
-    /* font-family: Roboto, sans-serif; */
 	font-size: var(--base-fontsize);
 	line-height: var(--line-height);

 	margin: auto;
 }

-main, #after-content {
-	padding: 0 5%;
+/*******************************************************************
+ * Body elements
+ */
+h1, h2, h3, h4, h5, h6 {
+	margin-bottom: 1.1rem;
 }
-footer {
-    margin: 0 5%;
+h1 {
+	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale-minor) * var(--header-scale-minor));
+	margin-top: calc(var(--line-height) * 1.3rem);
 }
-
-h1 .pfp {
-    height: 2.5rem;
-    vertical-align: text-top;
+h2 {
+	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale-minor) * var(--header-scale-minor));
+	margin-top: calc(var(--line-height) * 1.1rem);
 }
-
-nav .pfp {
-    height: 1.7rem;
-    vertical-align: middle;
+h3 {
+	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale-minor));
 }
-
-
-.pfp {
-    border: 1px solid var(--border);
-    border-radius: .35em;
+h4 {
+	font-size: calc(var(--base-fontsize) * var(--header-scale));
 }
-
-.pfp-name {
-	text-decoration: none;
-	/* color: var(--theme-purple); */
-	padding-left: 6px;
-	padding-top: 0;
+h5 {
+	font-size: var(--base-fontsize);
 }
-nav .pfp-name {
-	/* color: var(--accent-light); /1* Consistency with other nav items *1/ */
-    /* To have the icon and the text (.pfp-text) align */
-	display: table;
+h6 {
+	font-size: calc(var(--base-fontsize) / var(--header-scale));
 }
-nav .pfp-text {
-    /* TODO: Hardcoded alignment is ugly. Please find a better fix */
-    vertical-align: top;
-    padding-left: 0.5rem;
-    padding-top: 0.1rem;
-    font-size: 1.1rem;
-    display: inline-block;
-}
-
-/* Homepage stuff */
-.blink {
-    opacity: 0;
-    color: var(--text-light);
-    animation: blinker 1s step-start 5;
-}
-@keyframes blinker {
-    50% {
-        opacity: 100%;
-    }
-}
-
-/* Differentiating between normal content links and meta content links */
-.meta a, .post-meta :not(.tags) a, footer a, #after-content a {
-	text-decoration: none;
-    @media (prefers-color-scheme: dark) {
-        color: var(--link-alt);
-    }
-}
-.meta a:hover, .post-meta :not(.tags) a:hover, footer a:hover, #after-content a:hover {
-    color: var(--accent-light);
-    text-decoration: underline;
-    @media (prefers-color-scheme: dark) {
-        opacity: .75;
-    }
-}
-.post-meta .tags a, .post-meta .tags a:visited {
-    text-decoration: underline;
-    color: var(--text-light);
-}
-
-nav a {
-	text-decoration: none;
-	color: var(--link-alt);
-}
-
-/* To have the left nav item (homepage) and right items (other pages) display
- * on same line */
-nav strong > a {
-    margin-top: 1rem;
-    font-weight: 650;
-    padding-bottom: 0;
-}
-nav strong > a, nav ul li {
-    margin-right: 1.5rem;
-}
-
-nav {
-    margin-right: 5%;
-    margin-left: 5%;
-    margin-bottom: 4rem;
-    padding: 1rem 0.3rem;
-    padding-top: 1.5rem;
-    font-weight: 500;
-}
-@media (min-width: 601px) {
-    nav ul {
-        float: right;
-    }
-}
-@media (max-width: 600px) {
-    /* Center-aligned nav on mobile */
-    nav {
-        margin: 0;
-        padding: 0;
-        text-align: center;
-    }
-    nav a .pfp-name {
-        color: var(--text);
-    }
-}
-
-nav .selected {
-    border-bottom: 2.5px solid;
-}
-
-/********************************************************************
- * Idea from seirdy.one to have unstyled unordered-list nav
- * Step 1 to making the single-line nav: remove the bullet padding. */
-nav ul, nav a {
-	padding: 0;
-	padding-bottom: 0.5rem;
-}
-/* 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 pixels
- * between tap targets. */
-nav ul li, nav strong > a {
-	display: inline-block;
-}
-/* END borrowed code from seirdy.one
- ********************************************************************/
-

 blockquote {
 	margin-left: 0;
@ -264,43 +142,14 @@ th {
 	font-weight: bold;
 }

-/* No thanks */
-/* tr:nth-child(even) { */
-/* 	/1* Set every other cell slightly darker. Improves readability. *1/ */
-/* 	background: var(--accent-bg); */
-/* } */
+small {
+    font-size: .8rem;
+    color: var(--text-light);
+}

-main, #after-content {
-    /* For better reading experience.
-     * I don't want paragraphs to be too narrow, it looks ugly; Though I don't
-     * want them to be too wide, either. Reading experience is important:
-     * https://en.wikipedia.org/wiki/Eye_movement_in_reading */
-	max-width: 45rem;
-
-	margin: auto;
-}
-#after-content {
-	margin-bottom: 4rem;
-}
-#after-content:empty {
-    display: none;
-}
-footer {
-	text-align: center;
-	font-size: .9rem;
-	color: var(--text-light);
-	padding: 1rem 0 1rem 0;
-}
-footer a {
-    padding-left: .5rem;
-    padding-right: .5rem;
-}
-header p {
-	text-align: left;
-}
-header pre {
-	margin-bottom: 2rem;
-	max-width:auto;
+ul li {
+    /* Fix sizing of tap target when it's a list of links */
+    margin-bottom: 0.5rem;
 }

 /* Use mono font for code like elements */
@ -350,54 +199,12 @@ pre code {
 	tab-size: 4;
 }

-.post-date {
-	margin-right: 1.5rem;
-}
-
-a {
-    /* border-bottom: 1px solid var(--accent); */
-    color: var(--link);
-}
-a:visited {
-    color: var(--link-visited);
-}
-/* Don't change colors for visited links on nav, it makes nav bar look inconsistent */
-nav a:visited {
-    color: var(--link-alt);
-}
-.post-meta a:visited, .meta a:visited, footer a:visited, .after-content a:visited {
-    color: var(--link-alt);
-}
-main a:hover {
-	opacity: .75;
-}
-nav a#home:hover {
-	opacity: .75;
-}
-a:focus, form:focus {
-    outline: 1px solid var(--border);
-	text-decoration: none;
-}
-nav a:focus {
-    outline: none;
-}
-
-/* nav a:not(nav strong > a):not(nav ul li:last-child a):hover { */
-/* 	border-bottom: 2.5px solid; */
-/* } */
-nav li a:hover {
-	border-bottom: 2.5px solid;
-}
-
-header {top: 1px;}
-
 fieldset {
 	border: 0;
 	padding: 0;
 	margin: 0;
 }

-/* Misc body elements */
 hr {
 	color: var(--border-light);
 	border-color: var(--border-light);
@ -448,7 +255,6 @@ button[disabled],
 input[type="submit"][disabled],
 input[type="reset"][disabled],
 input[type="button"][disabled] {
-	cursor: default;
 	opacity: .5;
 	cursor: not-allowed;
 }
@ -504,34 +310,222 @@ details[open]>*:last-child {
 	margin-bottom: 0;
 }

-/* Format headers */
-h1, h2, h3, h4, h5, h6 {
-	margin-bottom: 1.1rem;
-}
-h1 {
-	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale-minor) * var(--header-scale-minor));
-	margin-top: calc(var(--line-height) * 1.3rem);
+/*******************************************************************
+ * Nav
+ */
+nav {
+    margin-right: 5%;
+    margin-left: 5%;
+    margin-bottom: 4rem;
+    padding: 1rem 0.3rem;
+    padding-top: 1.5rem;
+    font-weight: 500;
 }

-h2 {
-	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale-minor) * var(--header-scale-minor));
-	margin-top: calc(var(--line-height) * 1.1rem);
+nav div {
+    display: inline;
 }

-h3 {
-	font-size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale-minor));
+nav a {
+	text-decoration: none;
+	color: var(--link-alt);
 }

-h4 {
-	font-size: calc(var(--base-fontsize) * var(--header-scale));
+/* To have the left nav item (homepage) and right items (other pages) display
+ * on same line */
+nav .nav-left a {
+    margin-top: 1rem;
+    font-weight: 650;
+    padding-bottom: 0;
+}
+nav .nav-left a, nav ul li {
+    margin-right: 1.5rem;
 }

-h5 {
-	font-size: var(--base-fontsize);
+@media (min-width: 601px) {
+    nav .nav-right {
+        float: right;
+    }
+}
+@media (max-width: 600px) {
+    /* Center-aligned nav on mobile */
+    nav {
+        margin: 0;
+        padding: 0;
+        text-align: center;
+    }
+    nav a .pfp-name {
+        color: var(--text);
+    }
 }

-h6 {
-	font-size: calc(var(--base-fontsize) / var(--header-scale));
+nav .selected {
+    border-bottom: 2.5px solid;
+}
+
+/* Idea from seirdy.one to have unstyled unordered-list nav */
+nav ul, nav a {
+	padding: 0;
+	padding-bottom: 0.5rem;
+}
+nav ul li, nav strong > a {
+	display: inline-block;
+}
+
+.pfp {
+    border: 1px solid var(--border);
+    border-radius: .35em;
+}
+
+.pfp-name {
+	text-decoration: none;
+	padding-left: 6px;
+	padding-top: 0;
+}
+
+nav .pfp {
+    height: 1.7rem;
+    vertical-align: middle;
+}
+
+nav .pfp-name {
+	/* color: var(--accent-light); /1* Consistency with other nav items *1/ */
+    /* To have the icon and the text (.pfp-text) align */
+	display: table;
+}
+
+h1 .pfp {
+    height: 2.5rem;
+    vertical-align: text-top;
+}
+
+nav .pfp-text {
+    /* TODO: Hardcoded alignment is ugly. Please find a better fix */
+    vertical-align: top;
+    padding-left: 0.5rem;
+    padding-top: 0.1rem;
+    font-size: 1.1rem;
+    display: inline-block;
+}
+
+/*******************************************************************
+ * Homepage
+ */
+.hero {
+    margin-bottom: 5rem;
+    text-align: center;
+}
+
+.hero h1 {
+    font-size: 2.2rem;
+}
+
+.blink {
+    opacity: 0;
+    color: var(--text-light);
+    animation: blinker 1s step-start 5;
+    font-family: var(--mono-font);
+}
+
+@keyframes blinker {
+    50% {
+        opacity: 100%;
+    }
+}
+
+/*******************************************************************
+ * Page sections
+ */
+/* Differentiating between normal content links and meta content links */
+.meta a, .post-meta :not(.tags) a, footer a, #after-content a {
+	text-decoration: none;
+    @media (prefers-color-scheme: dark) {
+        color: var(--link-alt);
+    }
+}
+.meta a:hover, .post-meta :not(.tags) a:hover, footer a:hover, #after-content a:hover {
+    color: var(--accent-light);
+    text-decoration: underline;
+    @media (prefers-color-scheme: dark) {
+        opacity: .75;
+    }
+}
+.post-meta .tags a, .post-meta .tags a:visited {
+    text-decoration: underline;
+    color: var(--text-light);
+}
+
+main, #after-content {
+    /* For better reading experience.
+     * I don't want paragraphs to be too narrow, it looks ugly; Though I don't
+     * want them to be too wide, either. Reading experience is important:
+     * https://en.wikipedia.org/wiki/Eye_movement_in_reading */
+	max-width: 45rem;
+
+	margin: auto;
+	padding: 0 5%;
+}
+#after-content {
+	margin-bottom: 4rem;
+}
+#after-content:empty {
+    display: none;
+}
+footer {
+	text-align: center;
+	font-size: .9rem;
+	color: var(--text-light);
+	padding: 1rem 0 1rem 0;
+    margin: 0 5%;
+}
+footer a {
+    padding-left: .5rem;
+    padding-right: .5rem;
+}
+header p {
+	text-align: left;
+}
+header pre {
+	margin-bottom: 2rem;
+	max-width:auto;
+}
+
+.post-date {
+	margin-right: 1.5rem;
+}
+
+/*******************************************************************
+ * Links
+ */
+a {
+    color: var(--link);
+}
+a:visited {
+    color: var(--link-visited);
+}
+/* Don't change colors for visited links on nav, it makes nav bar look inconsistent */
+nav a:visited {
+    color: var(--link-alt);
+}
+.post-meta a:visited, .meta a:visited, footer a:visited, .after-content a:visited {
+    color: var(--link-alt);
+}
+main a:hover {
+	opacity: .75;
+}
+nav a#home:hover {
+	opacity: .75;
+}
+a:focus, form:focus {
+    outline: 1px solid var(--border);
+	text-decoration: none;
+}
+nav a:focus {
+    outline: none;
+}
+
+nav li a:hover {
+	border-bottom: 2.5px solid;
 }

 a.anchor {
@ -544,6 +538,9 @@ a.anchor:hover {
    text-decoration: underline;
 }

+/*******************************************************************
+ * Post components
+ */
 #post-header h1 {
 	margin-bottom: 0.4rem;
 }
@ -572,16 +569,6 @@ a.anchor:hover {
    margin-top: none;
 }

-small {
-    font-size: .8rem;
-    color: var(--text-light);
-}
-
-ul li {
-    /* Fix sizing of tap target when i's a list of links */
-    margin-bottom: 0.5rem;
-}
-
 ul.post-list {
    list-style: none;
    padding-left: 0;
@ -595,10 +582,12 @@ ul.post-list {
    margin-top: 0;
    margin-bottom: 0;
 }
-.post-list .desc {
-    margin-top: 0.5rem;
+.post-list .post-meta {
+    color: var(--text);
 }
-
+/*******************************************************************
+ * Chroma
+ */
 .chroma .lntable pre {
    border: 0;
    padding: 0;
--- a/content/_index.md
+++ b/content/_index.md
@ -3,16 +3,6 @@ outputs = ['html', 'gemtext']
 title = 'home'
 +++

-<center class="hero" style="margin-bottom: 5rem;">
-
-<h1><span style="font-size: 2.2rem;">{{% pfp-name %}}</span><span class="blink" style="font-family: var(--mono-font)">▂</span></h1>
-
-[Fediverse](https://tilde.zone/@hedy) ⋅ [GitHub](https://github.com/hedyhli) ⋅ [SourceHut](https://sr.ht/~hedy)
-
-</center>
-
---
-
 ## Contacts

 Preferably <a rel="me" href="mailto:hedy.dev@protonmail.com">email</a> or
--- a/content/posts/2021-02-23-site-meta/index.gmi
+++ b/content/posts/2021-02-23-site-meta/index.gmi
@ -34,7 +34,7 @@ The site source is always linked at the footer, pointing to the SourceHut repo.
 A **Pubnix** is a Public Access Unix System — in other words, a unix machine on the internet that provides access to other people on the internet — which started before WWW and even the public internet. Pubnixes you may have heard of SDF, Circumlunar.Space (yes, the very same one of the former gemini homepage), and tilde.club.

 => gemini://sdf.org
-=> https://circumlunar.space/
+=> gopher://circumlunar.space/
 => gemini://gemini.circumlunar.space

 ~cmccabe has a Pubnix History Project for you to explore if you're interested in learning more about pubnixes.
--- a/content/posts/2021-02-23-site-meta/index.md
+++ b/content/posts/2021-02-23-site-meta/index.md
@ -38,7 +38,8 @@ differences, remains mostly accurate.

 This is where my gemlog/blog lives. It is statically generated
 with [Hugo](https://gohugo.io/) and rsync-ed to my `public_html` and `public_gemini`
-directories for HTML and gemini on [tilde.cafe](tilde.cafe) respectively on build.
+directories for HTML and gemini on [tilde.cafe](https://tilde.cafe) respectively
+on build.

 The site source is always linked at the footer, pointing to the [sourcehut
 repo](https://sr.ht/~hedy/site) though the repo is also mirrored on
@ -55,9 +56,10 @@ repo](https://sr.ht/~hedy/site) though the repo is also mirrored on
 A **Pubnix** is a Public Access Unix System — in other words, a unix machine on
 the internet that provides access to other people on the internet — which
 started before WWW and even the public internet. Pubnixes you may have heard of
-[SDF](https://sdf.org), [Circumlunar.Space](https://circumlunar.space/) (yes,
-the very same one of the [gemini homepage](https://gemini.circumlunar.space)),
-and [tilde.club](https://tilde.club).
+[SDF](https://sdf.org),
+[Circumlunar.Space](https://portal.mozz.us/gopher/circumlunar.space/) (yes, the
+very same one of the [gemini homepage](https://gemini.circumlunar.space)), and
+[tilde.club](https://tilde.club).

 [~cmccabe](https://tilde.team/~cmccabe/) has a [Pubnix History
 Project](https://gopher.mills.io/rawtext.club/1/~cmccabe/pubnixhist/) for you to
--- a/content/posts/2021-06-15-on-rants-gemini/index.gmi
+++ b/content/posts/2021-06-15-on-rants-gemini/index.gmi
@ -3,8 +3,8 @@ Recently there've been some discussions about how Gemini "doesn't fix anything"
 => https://lobste.rs/s/3nsvkk/gemini_is_useless Gemini is Useless

 As well as a few posts related to that on smol.pub.
-=> //bentsai.smol.pub/embracing-constraints bentsai.smol.pub/embracing-constraints
-=> //mieum.smol.pub/for-the-love-of-gemini mieum.smol.pub/for-the-love-of-gemini
+=> gemini://bentsai.smol.pub/embracing-constraints bentsai.smol.pub/embracing-constraints
+=> gemini://mieum.smol.pub/for-the-love-of-gemini mieum.smol.pub/for-the-love-of-gemini

 I think that those comments on Lobsters can be summarized into these main points:
 * We don't need a whole new protocol (and the corresponding new software) just because most of the web is gross
@ -55,8 +55,8 @@ You don't have to ditch the web to use Gemini. You get to choose what you write
 => https://lobste.rs/s/vhlagb/why_gemini_is_not_my_favorite_internet Why Gemini is Not My Favorite Internet Protocol (Lobste.rs)
 => https://lobste.rs/s/3nsvkk/gemini_is_useless Gemini is Useless (Lobste.rs)
 => https://news.ycombinator.com/item?id=27490769 Gemini is Useless (HN)
-=> //bentsai.smol.pub/embracing-constraints bentsai.smol.pub/embracing-constraints
-=> //mieum.smol.pub/for-the-love-of-gemini mieum.smol.pub/for-the-love-of-gemini
+=> gemini://bentsai.smol.pub/embracing-constraints bentsai.smol.pub/embracing-constraints
+=> gemini://mieum.smol.pub/for-the-love-of-gemini mieum.smol.pub/for-the-love-of-gemini
 => https://lobste.rs/s/ivryqt/what_is_this_gemini_thing_anyway_why_am_i What is this Gemini thing anyway, and why am I excited about it?  (Lobste.rs)
-=> https://proxy.flounder.online/station.martinrue.com/mozz/d29f6cf900b04aef9e7a2332c2098f13 mozz's message posted on Station (via Gemini to HTTP Proxy)
+=> https://portal.mozz.us/gemini/station.martinrue.com/mozz/d29f6cf900b04aef9e7a2332c2098f13 mozz's message posted on Station (via Gemini to HTTP Proxy)
 => https://thomask.sdf.org/blog/2021/06/12/beyond-gemini.html Beyond Gemini? (In response to "Why Gemini is not my favourite internet protocol")
--- a/content/posts/2021-06-15-on-rants-gemini/index.md
+++ b/content/posts/2021-06-15-on-rants-gemini/index.md
@ -15,8 +15,8 @@ Recently there've been some discussions about how Gemini "doesn't fix anything"

 As well as a few posts related to that on smol.pub:

-* [bentsai.smol.pub/embracing-constraints](//bentsai.smol.pub/embracing-constraints)
-* [mieum.smol.pub/for-the-love-of-gemini](//mieum.smol.pub/for-the-love-of-gemini)
+* [bentsai.smol.pub/embracing-constraints](https://bentsai.smol.pub/embracing-constraints)
+* [mieum.smol.pub/for-the-love-of-gemini](https://mieum.smol.pub/for-the-love-of-gemini)

 I think that those comments on Lobsters can be summarized into these main points:

@ -71,8 +71,8 @@ You don't have to ditch the web to use Gemini. You get to choose what you write
 * [Why Gemini is Not My Favorite Internet Protocol (Lobste.rs)](https://lobste.rs/s/vhlagb/why_gemini_is_not_my_favorite_internet)
 * [Gemini is Useless (Lobste.rs)](https://lobste.rs/s/3nsvkk/gemini_is_useless)
 * [Gemini is Useless (HN)](https://news.ycombinator.com/item?id=27490769)
-* [bentsai.smol.pub/embracing-constraints](//bentsai.smol.pub/embracing-constraints)
-* [mieum.smol.pub/for-the-love-of-gemini](//mieum.smol.pub/for-the-love-of-gemini)
+* [bentsai.smol.pub/embracing-constraints](https://bentsai.smol.pub/embracing-constraints)
+* [mieum.smol.pub/for-the-love-of-gemini](https://mieum.smol.pub/for-the-love-of-gemini)
 * [What is this Gemini thing anyway, and why am I excited about it?  (Lobste.rs)](https://lobste.rs/s/ivryqt/what_is_this_gemini_thing_anyway_why_am_i)
-* [mozz's message posted on Station (via Gemini to HTTP Proxy)](https://proxy.flounder.online/station.martinrue.com/mozz/d29f6cf900b04aef9e7a2332c2098f13)
+* [mozz's message posted on Station (via Gemini to HTTP Proxy)](https://portal.mozz.us/gemini/station.martinrue.com/mozz/d29f6cf900b04aef9e7a2332c2098f13)
 * [Beyond Gemini? (In response to "Why Gemini is not my favourite internet protocol")](https://thomask.sdf.org/blog/2021/06/12/beyond-gemini.html)
--- a/content/posts/2021-06-16-multiple-emails-git/index.md
+++ b/content/posts/2021-06-16-multiple-emails-git/index.md
@ -6,7 +6,7 @@ highlight = true
 outputs = ['html', 'gemtext']
 slug = 'multiple-emails-git'
 tags = ['howto', 'git']
-title = 'Managing multiple emails for git across different computers'
+title = 'Multiple emails in git for different computers'
 +++

 As someone who code on multiple machines to work on different projects, I like to commit with different emails.
--- a/content/posts/_index.md
+++ b/content/posts/_index.md
@ -1,5 +1,5 @@
 +++
-outputs = ['html', 'gemtext', 'gematom', 'rss']
+outputs = ['html', 'gemtext', 'gematom', 'rss', 'atom']
 title = 'Posts'
 +++

--- a/layouts/_default/single.gmi
+++ b/layouts/_default/single.gmi
@ -10,5 +10,5 @@ Last updated {{ .Lastmod.UTC.Format "2006-01-02" }}{{ end }}
 {{ trim (readFile (replace $.File.Path ".md" ".gmi")) "\n" | safeHTML }}

 --
-=> {{ replace .Site.BaseURL "https:" "gemini:" }} Home
+=> / Home
 {{- end }}
--- a/layouts/index.html
+++ b/layouts/index.html
@ -1,3 +1,11 @@
 {{ define "main" }}
+    <div class="hero">
+      <h1>{{ partial "pfp-name.html" . }}<span class="blink">▂</span></h1>
+
+      <p><a href="https://tilde.zone/@hedy">Fediverse</a> ⋅ <a href="https://github.com/hedyhli">GitHub</a> ⋅ <a href="https://sr.ht/~hedy">SourceHut</a></p>
+    </div>
+
+    <hr>
+
    {{ .Content }}
 {{ end }}
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@ -11,57 +11,41 @@
 {{- end -}}
 <!--Have concerns? Drop me an email with your constructive criticism.-->
 <script data-goatcounter="https://ultimategopher.goatcounter.com/count"
-        async src="//gc.zgo.at/count.js"></script>
+        async src="https://gc.zgo.at/count.js"></script>

 <!--favicon-->
 {{ $favicon_svg := resources.Get "/favicon.svg" | resources.Fingerprint "md5" }}
-{{- printf `<link rel="icon" sizes="any" href="%s" type="image/svg+xml" />` $favicon_svg.RelPermalink | safeHTML }}
+{{- printf `<link rel="icon" sizes="any" href="%s" type="image/svg+xml">` $favicon_svg.RelPermalink | safeHTML }}
 {{ $favicon_png := resources.Get "/favicon.png" | resources.Fingerprint "md5" }}
-{{- printf `<link rel="icon" sizes="192x192" href="%s" type="image/png" />` $favicon_png.RelPermalink | safeHTML -}}
+{{- printf `<link rel="icon" sizes="192x192" href="%s" type="image/png">` $favicon_png.RelPermalink | safeHTML -}}

-<meta name="color-scheme" content="light dark" />
-<meta name="format-detection" content="telephone=no" />
+<meta name="color-scheme" content="light dark">
+<meta name="format-detection" content="telephone=no">

-<link rel="webmention" href="https://webmention.io/home.hedy.dev/webmention" />
-<link rel="pingback" href="https://webmention.io/ome.hedy.dev/xmlrpc" />
-<link rel="alternate" type="application/rss+xml" href="{{ .Site.BaseURL }}posts/index.xml" title="{{ $.Site.Title }}">
+<link rel="webmention" href="https://webmention.io/home.hedy.dev/webmention">
+<link rel="pingback" href="https://webmention.io/ome.hedy.dev/xmlrpc">
+<link rel="alternate" type="application/rss+xml" href="/posts/index.xml" title="{{ $.Site.Title }}">
 {{- if ne .Site.BaseURL "https://home.hedy.dev/" -}}
 <meta name="robots" content="noindex">
 {{- end -}}

 <meta name="color-scheme" content="light dark">
 {{ $css := resources.Get "main.css" | minify -}}
-<style>{{ $css.Content | safeCSS }}</style>
-<!--
-	Syntax Highlighting ZONE :D
-
-	1. has different themes for light and dark mode
-	   light = monokailight
-	   dark = dracula!
-	2. Only adds the syntax css if the page needs it. The highlight param
-	   is turned off by default, hence only posts and pages that have the
-	   "highlight = true" will get this style :)
-	3. Doesn't require an extra request. The two CSS files are saved in my
-	   assets, and is tracked with git.
-	4. IDK why but the dracula file had many classes set as just "{  }" and
-	   makes it super unreadable in dark mode, so I've made all the blank ones
-	   set color to white so it can be read in dark mode :>
-->
+<link rel="stylesheet" href="{{ $css.RelPermalink }}">
 {{ if .Params.highlight -}}
 {{ $syntaxlight := resources.Get "syntax/light.css" | minify -}}
 {{ $syntaxdark := resources.Get "syntax/dark.css" | minify  -}}
 {{ $syntaxcustom := resources.Get "syntax/custom.css" | minify  -}}
 <style>
 	{{- $syntaxlight.Content | safeCSS }}
-
 	@media (prefers-color-scheme: dark) {
 		{{- $syntaxdark.Content | safeCSS -}}
 	}
 	{{- $syntaxcustom.Content | safeCSS }}
 </style>
 {{ end -}}
-<!-- END Syntax Highlighting ZONE!! -->
-{{ if eq .Permalink $.Site.BaseURL -}}
+
+{{ if eq .RelPermalink "/" -}}
 <title>{{ $.Site.Title }}</title>
 {{ else -}}
 <title>{{ .Title }}{{ .Site.Params.suffixTitle }}</title>
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@ -6,19 +6,18 @@
    {{ end -}}
 {{ end -}}
 <nav>
-    <strong><a title="home" id="home" href="{{ .Site.BaseURL  }}">{{ $home }}</a></strong>
-    <ul>
+    <div class="nav-left"><strong><a title="home" id="home" href="/">{{ $home }}</a></strong></div>
+    <div class="nav-right"><ul>
    {{- $currentPage := . }}

    {{- range .Site.Menus.main.ByWeight }}
-    {{- $url := printf "%s%s" $.Site.BaseURL .URL }}
    {{- .Pre }}
    <li>
-        <a href="{{ $url }}"
+        <a href="{{ .URL }}"
           {{- if hasPrefix $currentPage.RelPermalink .URL }}class="selected"{{ end -}}
           title="{{ .Title  }}">{{- .Name -}}</a>
    </li>
    {{ .Post  -}}
    {{- end }}
-    </ul>
+    </ul></div>
 </nav>
--- a/layouts/partials/lastmod.html
+++ b/layouts/partials/lastmod.html
@ -1,4 +1,4 @@
 {{ if lt .Page.Date .Page.Lastmod -}}
    {{ .Prefix | safeHTML }}Last updated on
-    <time itemprop="dateModified" class="dt-updated">{{ .Page.Lastmod.UTC.Format "Jan 2, 2006" }}</time>
+    <time itemprop="dateModified" class="dt-updated" datetime="{{ .Page.Lastmod.UTC.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Page.Lastmod.UTC.Format "Jan 2, 2006" }}</time>
 {{- end -}}
--- a/layouts/partials/posts.gmi
+++ b/layouts/partials/posts.gmi
@ -11,5 +11,5 @@
 {{ range (where .Site.RegularPages "Section" "posts") }}
 {{- if .OutputFormats.Get "gemtext" }}
 => {{replace (replace .RelPermalink "/gemini" "" 1) "/index.gmi" ".gmi" 1}} {{ .Date.Format "2006-01-02" }} · {{.Title | safeHTML}}{{ end }}
-{{ .Description }}{{ partial "tags.gmi" (dict "Page" . "Prefix" " (tagged " "Postfix" ")") -}}
+{{ .Description }}
 {{ end -}}
--- a/layouts/partials/posts.html
+++ b/layouts/partials/posts.html
@ -10,9 +10,9 @@
 {{- end }}

 <p class="meta">
-<a href="{{ .Site.BaseURL }}tags/">Tags</a> &nbsp;|&nbsp;
-<a href="{{ .Site.BaseURL }}posts/index.xml">RSS feed</a> &nbsp;|&nbsp;
-<a href="{{ .Site.BaseURL }}posts/atom.xml">Atom feed</a> &nbsp;|&nbsp;
+<a href="/tags/">Tags</a> &nbsp;|&nbsp;
+<a href="/posts/index.xml">RSS feed</a> &nbsp;|&nbsp;
+<a href="/posts/atom.xml">Atom feed</a> &nbsp;|&nbsp;
 <a href="https://lists.sr.ht/~hedy/posts">Subscribe via email</a>
 </p>

@ -31,10 +31,8 @@
      </h3>
      {{ end -}}
      <p class="post-meta">
-      <time datetime="{{ .Date.Format "2006-01-02 15:04:05Z07:00" }}">{{ .Date.Format "Jan 02, 2006" }}</time>
-      {{- partial "tags.html" (dict "Page" . "Prefix" "&nbsp; · &nbsp;") -}}
+      <time datetime="{{ .Date.Format "2006-01-02 15:04:05Z07:00" }}">{{ .Date.Format "Jan 02, 2006" }}</time>&nbsp; · &nbsp;<span class="desc">{{ .Description }}</span>
      </p>
-      <p class="desc">{{ .Description }}</p>
  </li>
  {{- end }}
 </ul>
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@ -5,7 +5,7 @@
      <h1 itemprop="name headline" class="p-name">{{ .Title }}</h1>
      <div class="post-meta">
        <p>
-        <time itemprop="datePublished" datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">{{ .Date.Format "Jan 02, 2006" }}</time>
+        <time itemprop="datePublished" datetime="{{ .Date.UTC.Format "2006-01-02T15:04:05Z" }}">{{ .Date.Format "Jan 02, 2006" }}</time>
          {{- partial "lastmod.html" (dict "Page" . "Prefix" "&nbsp; · &nbsp;" ) }}
          &nbsp;·&nbsp; {{ .WordCount }} words
        </p>
--- a/layouts/shortcodes/table.html
+++ b/layouts/shortcodes/table.html
@ -3,4 +3,5 @@
 {{ $old := "<table>" -}}
 {{ $new := printf "<table class=\"%s\">" $class -}}
 {{ $htmlTable := replace $htmlTable $old $new -}}
+{{ "<!-- [html-validate-disable-block wcag/h63: markdown does not generate tables with scope attribute] -->" | safeHTML }}
 {{ $htmlTable | safeHTML  }}
--- a/package.json
+++ b/package.json
@ -0,0 +1,10 @@
+{
+  "devDependencies": {
+    "@hint/hint-doctype": "^3.3.20",
+    "hint": "^7.1.0",
+    "html-validate": "^8.18.1",
+    "stylelint": "^14.8.1",
+    "stylelint-config-recommended": "^7.0.0",
+    "stylelint-config-standard": "^25.0.0"
+  }
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
Author	SHA1	Message	Date
hedy	59447302f0	Apply lint suggestions to <head>	2024-04-13 14:47:01 +08:00
hedy	f4e6d27e56	Use relative links for posts list	2024-04-13 14:46:37 +08:00
hedy	f06bc57414	Fix time element datetime attribute dates	2024-04-13 14:45:34 +08:00
hedy	3c035dc4ea	Add html-validate ignore for markdown tables	2024-04-13 14:45:07 +08:00
hedy	b5c790df77	Move hero stuff out of content into index.html template	2024-04-13 14:44:43 +08:00
hedy	1bb4339364	Add linting	2024-04-13 14:44:22 +08:00
hedy	3ea69c95c8	Use relative links	2024-04-13 14:43:02 +08:00
hedy	be943ebc2b	Fix WWW atom link	2024-04-13 14:41:51 +08:00
hedy	269153f167	Fix links	2024-04-13 14:41:37 +08:00
hedy	53f267dd20	Refactor (rearrange) CSS	2024-04-13 14:40:30 +08:00
hedy	0e8fec4b98	Don't show tags on post listings and merge description with date in WWW	2024-04-13 09:52:56 +08:00