Make posts listing content be actual markdown

I needed the h2 posts heading on the home page to be rendered with the
anchor link, but also retain the h1 heading in the posts/ page, and
share the same "posts.html" partial.

- Put the posts listing "pre" content into content/posts/_index.md as
  markdown
- Use a partial for the heading render hook, which allows it to be used
  in the "posts.html" partial
- Retain behaviour to either have h1 "posts" for the posts page or h2
  "posts" for the homepage, _and_ pass this HTML h1/h2 into the anchor
  heading render hook (actually the partial)
- Render posts/_index.md content for both the homepage listing and the
  posts listing.

assets/main.css

@@ -28,8 +28,11 @@
 	--accent-bg-light: #f2f2f2;
     --code-bg: #f2f2f2;
 	--text: #0a0a0a;
-	--text-light: #585858;
+	--text-light: #787878;
+	--non-text-light: #95aac0;
+
 	--border: #bbb;
+	--border-light: var(--border);
 	--accent: #5c659b;
 	--accent-light: #7890c1;
 	--code: #d81b60;
@@ -40,23 +43,28 @@
 	--shadow-color: #fff;
 
 	--link: #3c63e8;
+	--link-hover: #93aaf9;
 	--link-visited: #6971a0;
-	--nav-link: var(--link);
+
+	--link-alt: var(--link);
 
 	/* My theme stuff */
 	--theme-purple: #3d4573;
 }
 @media (prefers-color-scheme: dark) {
 	:root {
-		--bg: #282a36;
+		--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: #e4e9a8;
+		--accent-light: #ece1a1;
 		--code: #f06292;
 		--preformatted: #ccc;
 		--disabled: #111;
@@ -64,13 +72,11 @@
 		--shadow-color: #36373b;
         --theme-purple: #af9dea;
 
-        --link: var(--accent);
-        --link-visited: #a5beff;
+        --link: #cddfff;
+        --link-hover: #8c9cba;
+        --link-visited: #c3b1ff;
         /* Why doesn't the dracula pink look better? #ff79c6 */
-        --nav-link: var(--accent-light);
-
-        --accent-alt: #ff91d0;
-        --accent-alt-light: #c188a9;
+        --link-alt: var(--accent-light);
 	}
 
 	img:not(.pfp), video {
@@ -105,14 +111,14 @@ h1 .pfp {
 }
 
 nav .pfp {
-    height: 1.3rem;
+    height: 1.7rem;
     vertical-align: middle;
 }
 
 
 .pfp {
     border: 1px solid var(--border);
-    border-radius: 6px;
+    border-radius: 8px;
 }
 
 .pfp-name {
@@ -138,7 +144,7 @@ nav .pfp-text {
 /* Homepage stuff */
 .blink {
     opacity: 0;
-    color: var(--accent-light);
+    color: var(--text-light);
     animation: blinker 1s step-start 5;
 }
 @keyframes blinker {
@@ -151,19 +157,20 @@ nav .pfp-text {
 .meta a, .post-meta a, footer a, #after-content a {
 	text-decoration: none;
     @media (prefers-color-scheme: dark) {
-        color: var(--accent-alt);
+        color: var(--link-alt);
     }
 }
 .meta a:hover, .post-meta a:hover, footer a:hover, #after-content a:hover {
     color: var(--accent-light);
+    text-decoration: underline;
     @media (prefers-color-scheme: dark) {
-        color: var(--accent-alt-light);
+        opacity: .75;
     }
 }
 
 nav a {
 	text-decoration: none;
-	color: var(--nav-link);
+	color: var(--link-alt);
 }
 
 /* To have the left nav item (homepage) and right items (other pages) display
@@ -211,8 +218,7 @@ nav .selected {
  * Step 1 to making the single-line nav: remove the bullet padding. */
 nav ul, nav a {
 	padding: 0;
-	/* from nav {} */
-	padding-bottom: 0.3rem;
+	padding-bottom: 0.5rem;
 }
 /* Step 2: remove bullets and make elements inline.
  * Also: bump up the line-height and margins to increase space between
@@ -228,12 +234,13 @@ nav ul li, nav strong > a {
 blockquote {
 	margin-left: 0;
 	padding-left: 1.25rem;
-	border-left: 4px solid var(--text-light);
+	border-left: 3px solid var(--text-light);
+	opacity: .9;
 }
 
 table {
 	border-collapse: collapse;
-	width: 100%
+	width: 100%;
 }
 table caption {
 	font-weight: bold;
@@ -241,11 +248,13 @@ table caption {
 }
 td,
 th {
-	border: 1px solid var(--border);
+	border: 1px solid var(--border-light);
 	text-align: left;
 	padding: .5rem;
 }
-
+th:empty {
+    visibility: hidden;
+}
 th {
 	background: var(--accent-bg-light);
 	font-weight: bold;
@@ -273,6 +282,10 @@ footer {
 	color: var(--text-light);
 	padding: 1rem 0 1rem 0;
 }
+footer a {
+    padding-left: .5rem;
+    padding-right: .5rem;
+}
 header p {
 	text-align: left;
 }
@@ -294,7 +307,7 @@ samp {
 /* Inline code snips hopefully */
 :not(pre)>code, :not(pre)>samp, kbd {
     background-color: var(--code-bg);
-    border: 1px solid var(--border);
+    border: 1px solid var(--border-light);
     /* border-radius: 6px; */
     padding: .01em .1em;
 }
@@ -314,7 +327,7 @@ pre {
 	overflow: auto;
 	color: var(--preformatted);
 	background: var(--accent-bg-light);
-	border: 1px solid var(--border);
+	border: 1px solid var(--border-light);
 	border-radius: 0;
 }
 
@@ -341,14 +354,20 @@ a:visited {
 }
 /* Don't change colors for visited links on nav, it makes nav bar look inconsistent */
 nav a:visited {
-    color: var(--nav-link);
+    color: var(--link-alt);
 }
-a:hover {
+main a:hover {
+	opacity: .75;
+}
+nav a#home:hover {
+	opacity: .75;
+}
+a:focus, form:focus {
+    outline: 1px solid var(--border);
 	text-decoration: none;
 }
-:not(nav) a:focus, form:focus {
-    outline: 2px 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 { */
@@ -368,8 +387,8 @@ fieldset {
 
 /* Misc body elements */
 hr {
-	color: var(--border);
-	border-color: var(--border);
+	color: var(--border-light);
+	border-color: var(--border-light);
 	border-style: solid;
 	border-width: 1px;
 	margin: 1rem auto;
@@ -451,7 +470,7 @@ input[type="button"]:enabled:hover {
 /* Format the expanding box */
 details {
 	padding: .6rem 1rem;
-	border: 1px solid var(--border);
+	border: 2px solid var(--border-light);
 	/* border-radius: 5px; */
 	margin-bottom: 1rem;
 }
@@ -503,6 +522,16 @@ h6 {
 	font-size: calc(var(--base-fontsize) / var(--header-scale));
 }
 
+a.anchor {
+    text-decoration: none;
+    color: var(--non-text-light);
+    padding-right: .2rem;
+}
+
+a.anchor:hover {
+    text-decoration: underline;
+}
+
 #post-header h1 {
 	margin-bottom: 0.4rem;
 }

config.toml

@@ -15,6 +15,7 @@ description = "~hedy's home: hedy's canonical web presence including contact inf
 src = "https://sr.ht/~hedy/site"
 logURLPrefix = "https://git.sr.ht/~hedy/site/log/master/item/"
 copyright = "CC-BY-SA"
+copyrightLink = "https://creativecommons.org/licenses/by-sa/4.0/"
 copyrightYearStart = "2021"
 
 shortTitle = "~hedy"
@@ -24,7 +25,6 @@ geminiRoot = "gemini://home.hedy.dev"
 
 # true: Use shortcode pfp-name as the home link text in nav bar
 # false: Use shortTitle there instead
-# true if the site is centers around the person, false for non-personal sites basically
 navHomeUsePFPName = true
 
 [author]
@@ -42,31 +42,25 @@ posts = "/posts/:slug"
       identifier = "posts"
 	  name = "Posts"
 	  title = "posts"
-	  url = "posts/"
+	  url = "/posts/"
 	  weight = 10
   [[menu.main]]
       identifier = "about"
 	  name = "About"
 	  title = "about"
-	  url = "about/"
+	  url = "/about/"
 	  weight = 20
-#  [[menu.main]]
-#      identifier = "projects"
-#	  name = "projects"
-#	  title = "projects"
-#	  url = "projects/"
-#	  weight = 30
   [[menu.main]]
       identifier = "misc"
 	  name = "Misc"
 	  title = "misc"
-	  url = "misc/"
+	  url = "/misc/"
 	  weight = 40
   [[menu.main]]
       identifier = "rss"
 	  name = "RSS"
 	  title = "rss"
-	  url = "posts/index.xml"
+	  url = "/posts/index.xml"
 	  weight = 100
 
 [markup.goldmark.renderer]

content/about.md

@@ -33,7 +33,7 @@ Preferred method of contact: **Email**
 ## Uses
 
 {{<table>}}
-| key | value |
+| | |
 |-----|-------|
 | OS  | MacOS, ubuntu, arch |
 | Browser | [Arc](https://arc.net), [Min](https://minbrowser.org/), [Qutebrowser](https://www.qutebrowser.org/index.html) |

content/posts/2021-02-23-site-meta.md

@@ -1,5 +1,6 @@
 ---
 title: "How this site works"
+description: "A walkthrough of my workflows for the site and a gentle introduction to tilde.cafe and the Tildeverse."
 date: 2021-02-23
 draft: false
 outputs:

content/posts/2021-06-15-on-rants-gemini.gmi

@@ -17,7 +17,7 @@ Let's take a look at each in detail.
 > [The web is] an organically grown mess of 25 years – but it will never be replaced by a dead-simple solution such as Gemini.
 => https://lobste.rs/s/ivryqt/what_is_this_gemini_thing_anyway_why_am_i (source)
 
-And in response to that as mieum had said:
+And in response to that as mieum writes:
 > almost all of these posts are obsessed with the same strawman: some supposed audacity of Gemini to attempt replacing the web. It's hilarious that these authors (and commentors) have such poor reading comprehension.
 
 As clearly as is written at the top on the Gemini homepage, people seem to forget that it neither wants nor tries to replace the web.
@@ -52,7 +52,7 @@ You don't have to ditch the web to use Gemini. You get to choose what you write
 
 ---
 
-## Full list of references:
+## Full list of references
 => 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)

content/posts/2021-06-15-on-rants-gemini.md

@@ -32,12 +32,13 @@ Let's take a look at each in detail.
 
 ## Replacing the web
 
-> [The web is] an organically grown mess of 25 years – but it will never be replaced by a dead-simple solution such as Gemini.
-([source](https://lobste.rs/s/ivryqt/what_is_this_gemini_thing_anyway_why_am_i))
+> [The web is] an organically grown mess of 25 years – but it will never be
+> replaced by a dead-simple solution such as Gemini.
+> ([source](https://lobste.rs/s/ivryqt/what_is_this_gemini_thing_anyway_why_am_i))
 
-And in response to that as mieum had said:
+And in response to that as mieum writes:
 
-> almost all of these posts are obsessed with the same strawman: some supposed audacity of Gemini to attempt replacing the web. It's hilarious that these authors (and commentors) have such poor reading comprehension.
+> Almost all of these posts are obsessed with the same strawman: some supposed audacity of Gemini to attempt replacing the web. It's hilarious that these authors (and commentors) have such poor reading comprehension.
 
 As clearly as is written at the top on the Gemini homepage, people seem to forget that it neither wants nor tries to replace the web.
 
@@ -51,8 +52,7 @@ In my opinion, Gemini is just a virtual space to put your content and read other
 In regards to gemtext limitations, we have to keep in mind that Gemini is a protocol. Gemtext is a markup language. You can serve whatever you like on Gemini -- HTML, markdown, etc. And you can also view your HTML content over Gemini with a client that supports HTML. As far as I can tell, most features that gemtext lacks had been discussed in the mailing list before, all of which, I'm pretty sure, alternatives or workarounds were suggested. I think this comment by Alex summarises it well:
 
 > Everyone wants something added to Gemini but disagrees what that something is. Personally, I think it should be in-line images and footnotes, but if Gemini became more complex, it would lose many of the traits that make it interesting. Gemini is a technology that invites us not to try and improve or optimize it, but to accept it as it is and work around its limitations – it is intentionally austere, and this is a feature, not a bug.
-
-([source](https://lobste.rs/s/3nsvkk/gemini_is_useless#c_1zpxad))
+> ([source](https://lobste.rs/s/3nsvkk/gemini_is_useless#c_1zpxad))
 
 For me, I'm fine with not having inline images, footnotes, or maybe even syntax highlighting in preformatted text. But as to tables, yes, that could make it look better, and easier to copy contents, but it would lose its simplicity and ease of developing new software around it. If gemtext was to support a similar type of table syntax as markdown, for example, the table would look extremely broken for clients that do not support it. Unless it is put in a preformatted block, though in which case that wouldn't solve the problem of horizontal scrolling in small screens.
 
@@ -67,12 +67,11 @@ For me personally, I like fresh starts. So sure, a new protocol, new ways to thi
 At the end of the day, the fact that I create and browse content in Geminispace every now and then does not mean I've decided to not use the web at all, nor does it mean that all of the good content is in Geminispace instead of the web. Like mozz said on Station:
 
 > I'm not here because I hate the web, I'm here because I like Gemini.
-
-([source](gemini://station.martinrue.com/mozz/d29f6cf900b04aef9e7a2332c2098f13))
+> ([source](gemini://station.martinrue.com/mozz/d29f6cf900b04aef9e7a2332c2098f13))
 
 You don't have to ditch the web to use Gemini. You get to choose what you write about, but you don't get to choose the color of your headers, or the font size of your body paragraphs. Go use the web if you want that.
 
-## Full list of references:
+## Full list of references
 * [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)

content/posts/_index.md

@@ -0,0 +1,15 @@
+---
+title: Posts
+
+---
+
+These are my long-form musings. I aim to write at least twice a year, but over
+the past two years I have clearly failed in this aspect. I'll try to write more
+often.
+
+Comments can be sent to my [public mailing
+list](https://lists.sr.ht/~hedy/posts) where I'll also send new posts (after
+2023) as plain text to. If you subscribe to the list, it acts like a newsletter
+where you'll receive new posts from your inbox. Posting and subscribing happen
+solely through emails. No external auth required.
+

layouts/_default/_markup/render-heading.html

@@ -0,0 +1 @@
+{{ partial "anchor-heading.html" . }}

layouts/partials/anchor-heading.html

@@ -0,0 +1,7 @@
+{{ $id := .Anchor | safeURL }}
+<h{{ .Level }} id="{{ $id }}">
+  {{ if ne .Level 1 -}}
+  <a class="anchor" href="#{{ $id }}" rel="nofollow">#</a>
+  {{- end }}
+  {{ .Text | safeHTML -}}
+</h{{ .Level }}>

layouts/partials/footer.html

@@ -1,14 +1,14 @@
 <p>
-© {{ with .Site.Params.CopyrightYearStart }}{{ . }}-{{ end -}}
+Copyright © {{ with .Site.Params.CopyrightYearStart }}{{ . }}-{{ end -}}
 {{ now.Format "2006" }}
-{{ .Site.Params.Copyright }} · <a href="{{ .Site.Params.src }}">Site source</a>
+</p>
+<p>
+ <a href="{{ .Site.Params.CopyrightLink }}">{{ .Site.Params.Copyright }}</a>
+ <a href="/sitemap.xml">Sitemap</a>
+ <a href="{{ .Site.Params.src }}">Source code</a>
 
 {{- with .OutputFormats.Get "gemtext" }}
 {{- $gemurl := replace (replace .Permalink "/gemini" "" 1) "/index.gmi" ".gmi" 1 }}
- · <a rel="syndication" class="u-syndication" href="{{ $gemurl | safeURL }}">View on Gemini</a>
+ <a rel="syndication" class="u-syndication" href="{{ $gemurl | safeURL }}">View on Gemini</a>
 {{- end }}
 </p>
-
-{{- if .GitInfo -}}
-<p>Site last rebuilt on {{ now.Format "2006-01-02" }}</p>
-{{- end }}

layouts/partials/header.html

@@ -1,26 +1,24 @@
-{{ $relperm := .RelPermalink | replaceRE "^/~hedy/" "/" -}}
 {{ $home := .Site.Title -}}
-{{ if (ne $relperm "/") -}}
+{{ if (ne .RelPermalink "/") -}}
+    {{ $home = .Site.Title -}}
     {{ if .Site.Params.navHomeUsePFPName -}}
-    {{ $home = partial "pfp-name.html" . -}}
-    {{ else -}}
-    {{ $home = .Site.Params.shortTitle -}}
+        {{ $home = partial "pfp-name.html" . -}}
     {{ end -}}
 {{ end -}}
 <nav>
-    <strong><a rel="home" href="{{ .Site.BaseURL  }}">{{ $home }}</a></strong>
+    <strong><a title="home" id="home" href="{{ .Site.BaseURL  }}">{{ $home }}</a></strong>
     <ul>
     {{- $currentPage := . }}
+
     {{- range .Site.Menus.main.ByWeight }}
     {{- $url := printf "%s%s" $.Site.BaseURL .URL }}
-
-    {{ .Pre -}}
+    {{- .Pre }}
     <li>
         <a href="{{ $url }}"
-           {{- if hasPrefix $currentPage.RelPermalink $url }}class="selected"{{ end -}}
+           {{- if hasPrefix $currentPage.RelPermalink .URL }}class="selected"{{ end -}}
            title="{{ .Title  }}">{{- .Name -}}</a>
     </li>
-    {{ .Post  }}
+    {{ .Post  -}}
     {{- end }}
     </ul>
 </nav>

layouts/partials/posts.html

@@ -1,15 +1,13 @@
 {{ $outerRel := .RelPermalink -}}
-{{ if in $outerRel "posts" -}}
-<h1>Posts</h1>
-{{ else -}}
-<h2>Posts</h2>
-{{ end -}}
 
-<p>
-These are my long-form musings. I aim to write at least twice a year, but over the past two years I have clearly failed in this aspect. I'll try to write more often 🤞
-</p><p>
-Comments can be sent to my <a href="https://lists.sr.ht/~hedy/posts">public mailing list</a> where I'll also send new posts (after 2023) as plain text to. If you subscribe to the list, it acts like a newsletter where you'll receive new posts from your inbox. Posting and subscribing happen solely through emails. No external auth required.
-</p>
+{{ if in $outerRel "posts" -}}
+{{ partial "anchor-heading.html" (dict "Text" "Posts" "Level" 1 "Anchor" "posts") }}
+{{ .Content }}
+
+{{ else -}}
+{{ partial "anchor-heading.html" (dict "Text" "Posts" "Level" 2 "Anchor" "posts") }}
+{{ (.Site.GetPage "posts").Content }}
+{{- end }}
 
 <p class="meta">
 <a href="{{ .Site.BaseURL }}tags/">Tags</a> |
@@ -31,10 +29,7 @@ Comments can be sent to my <a href="https://lists.sr.ht/~hedy/posts">public mail
     {{ else -}}
       </h3>
       {{ end -}}
-      <p>Posted:
-      <time datetime="{{ .Date.Format "2006-01-02 15:04:05Z07:00" }}">{{ .Date.Format "2006-01-02" }}</time>
-      {{ partial "lastmod.html" . }}
-      </p>
+      <p class="post-meta"><time datetime="{{ .Date.Format "2006-01-02 15:04:05Z07:00" }}">{{ .Date.Format "2006-01-02" }}</time></p>
       <p class="desc">{{ .Description }}</p>
   </li>
   {{- end }}

layouts/shortcodes/pfp-name.html

@@ -1 +1 @@
-<span class="pfp-name">{{ partial "pfp.html" }} <span class="pfp-text">{{ .Site.Author.name }}</span></span>{{- "" -}}
+{{- partial "pfp-name.html" . -}}

layouts/shortcodes/pfp.html

@@ -1,3 +1 @@
-{{ $pfp := resources.Get "/dotslash-brush.svg" | resources.Fingerprint "md5" -}}
-<img alt="./" class="pfp" src="{{ $pfp.RelPermalink }}">
-{{- /* should this set a default size? */ -}}
+{{- partial "pfp.html" . -}}