From c81c0dd1e49547ad073dcf60ff9967cb72fb81e0 Mon Sep 17 00:00:00 2001 From: John Bowdre Date: Sat, 1 Jun 2024 20:43:27 -0500 Subject: [PATCH] update draft --- content/posts/the-slash-page-scoop/index.md | 137 +++++++++++++++++++- 1 file changed, 133 insertions(+), 4 deletions(-) diff --git a/content/posts/the-slash-page-scoop/index.md b/content/posts/the-slash-page-scoop/index.md index 1588b46..3af1011 100644 --- a/content/posts/the-slash-page-scoop/index.md +++ b/content/posts/the-slash-page-scoop/index.md @@ -16,6 +16,8 @@ Inspired by [Robb Knight](https://rknight.me/)'s recent [slash pages](https://sl > Slash pages are common pages you can add to your website, usually with a standard, root-level slug like `/now`, `/about`, or `/uses`. They tend to describe the individual behind the site and are distinguishing characteristics of the IndieWeb. +On a blog that is otherwise organized in a fairly chronological manner, slash pages provide a way share information out-of-band. I think they're great for more static content (like an about page that says who I am) as well as for content that may be regularly updated (like a changelog). + The pages that I've implemented (so far) include: - [/about](/about) tells a bit about me and my background - [/changelog](/changelog) is just *starting* to record some of visual/functional changes I make here @@ -47,18 +49,145 @@ content └── uses.md [tl! ~~] ``` -Easy enough, but I didn't then want to have to worry about manually updating a list of slash pages so I used [Hugo's Taxonomies](https://gohugo.io/content-management/taxonomies/) feature for that. I simpled tagged each page with a new `slashes` category by adding it to the post's front matter: +Easy enough, but I didn't then want to have to worry about manually updating a list of slash pages so I used [Hugo's Taxonomies](https://gohugo.io/content-management/taxonomies/) feature for that. I simply tagged each page with a new `slashes` category by adding it to the post's front matter: ```yaml +# torchlight! {"lineNumbers":true} --- title: "/changelog" date: "2024-05-26" lastmod: "2024-05-30" description: "Maybe I should keep a log of all my site-related tinkering?" -featured: false -toc: false -timeless: true categories: slashes # [tl! ~~] --- ``` +{{% notice note "Category Names" %}} +I really wanted to name the category `/slashes`, but that seems to trip up Hugo a bit when it comes to creating an archive of category posts. So I settled for `slashes` and came up with some workarounds to make it present the way I wanted. +{{% /notice %}} + +Hugo will automatically generate an archive page for a given taxonomy term (so a post tagged with the category `slashes` would be listed at `$BASE_URL/category/slashes/`), but I like to have a bit of control over how those archive pages are actually presented. So I create a new file at `content/categories/slashes/_index.md` and drop in this front matter: + +```yaml +# torchlight! {"lineNumbers":true} +--- +title: /slashes +url: /slashes +aliases: + - /categories/slashes +description: > + My collection of slash pages. +--- +``` + +The `slashes` in the file path tells Hugo which taxonomy it belongs to and so it can match the appropriately-categorized posts. + +Just like with normal posts, the `title` field defines the title (duh) of the post; this way I can label the archive page as `/slashes` instead of just `slashes`. + +The `url` field lets me override where the page will be served, and I added `/categories/slashes` as an alias so that anyone who hits that canonical URL will be automatically redirected. + +Setting a `description` lets me choose what introductory text will be displayed at the top of the index page, as well as when it's shown at the next higher level archive (like `/categories/`). + +Of course, I'd like to include a link to [slashpages.net](https://slashpages.net) to provide a bit more info about what these pages are, and I can't add hyperlinks to the description text. What I *can* do is edit the template which is used for rendering the archive page. In my case, that's at `layouts/partials/archive.html`, and it starts out like this: + +```jinja-html +# torchlight! {"lineNumbers":true} +{{ $pages := .Pages }} +{{ if .IsHome }} + {{ $pages = where site.RegularPages "Type" "in" site.Params.mainSections }} +{{ end }} +
+{{ if .IsHome }} +

{{ site.Params.indexTitle | markdownify }}

+{{ else }} +

{{ .Title | markdownify }}{{ if eq .Kind "term" }}  

+ {{ with .Description }}{{ . }}
{{ else }}
{{ end }} +{{ end }}{{ end }} + {{ .Content }} +
+``` + +Line 9 is where I had already modified the template to conditionally add an RSS link for category archive pages. I'm going to tweak the setup a bit to conditionally render designated text when the page `.Title` matches `/slashes`: + +```jinja-html +# torchlight! {"lineNumbers":true} +{{ $pages := .Pages }} +{{ if .IsHome }} + {{ $pages = where site.RegularPages "Type" "in" site.Params.mainSections }} +{{ end }} +
+{{ if .IsHome }} +

{{ site.Params.indexTitle | markdownify }}

+{{ else }} + {{ if eq .Title "/slashes" }} +

{{ .Title | markdownify }}

+ My collection of slash pages.
+ {{ else }} +

{{ .Title | markdownify }}{{ if eq .Kind "term" }}  

+ {{ with .Description }}{{ . }}
{{ else }}
{{ end }} + {{ end }} +{{ end }}{{ end }} + {{ .Content }} +
+``` + +So instead of rendering the `description` I defined in the front matter the archive page will show: + +> *My collection of [slash pages](https://slashpages.net).* + +While I'm at it, I'd like for the posts themselves to be listed in alphabetical order rather than sorted by date. So here's how the rest of my existing `archive.html` partial template handles displaying posts: + +```jinja-html +# torchlight! {"lineNumbers":true} +{{- if eq .Kind "taxonomy" }} + {{- if eq .Title "Tags" }} +
+ {{- range $key, $value := .Site.Taxonomies }} + {{- $slicedTags := ($value.ByCount) }} + {{- range $slicedTags }} + {{- if eq $key "tags"}} +
{{ .Name }}{{ .Count }}
+ {{- end }} + {{- end }} + {{- end }} +
+ {{- else }} + {{- range .Pages.ByDate.Reverse }} + {{- $postDate := .Date.Format "2006-01-02" }} + {{- $updateDate := .Lastmod.Format "2006-01-02" }} +
+
+

{{ .Title | markdownify }}

+

+ ["{{- $postDate }}"{{- if ne $postDate $updateDate }}, "{{ $updateDate }}"{{ end }}] +

+
+
+ {{ .Description }} +
+
+
+ {{ end }} + {{- end }} +{{- else }} + {{- range (.Paginate $pages).Pages }} + {{- $postDate := .Date.Format "2006-01-02" }} + {{- $updateDate := .Lastmod.Format "2006-01-02" }} +
+
+

{{ .Title | markdownify }}

+

+ ["{{- $postDate }}"{{- if ne $postDate $updateDate }}, "{{ $updateDate }}"{{ end }}] +

+
+
+ {{ .Summary }} +
+
+
+ {{- end }} + {{- template "_internal/pagination.html" . }} +{{- end }} +``` + +Basically: if it's the [tags](/tags/) archive page, it will list out all the tags in a compact way. If it's some other taxonomy page,