Adding updates to a page
I rather like the way Karl Voit shows how pages have been updated on his site. It's not a Hugo site, but I can see the value in doing something like that.
First, you should know I am using page bundles. It seems clean to have all the 'content' for a page in one place. Secondly, I'm using org
files and not .md
files (no markdown).
Rather than actually modify posts when there is an update, I want to add a separate file with the details of the update. In the example below I might have two updates to the blog entry made on 2022-12-27.
content/ ├── pages │ └─ about-me │ └── index.org │ ├── blog │ └── 2022 │ └── 12 │ ├── 27 │ │ └── a-post │ │ ├── index.org │ │ ├── 20230101-113159-update.org │ │ └── 20230121-173512-update.org │ ├── 29 │ └── another-post │ └── index.org ... etc
To incorporate the updates I have added two parts to my _default/single.html
file. The first is a partial to list-extra-content
. The second partial is extra-content
.
{{- define "main" -}}
{{"<!-- _default/single.html -->" | safeHTML }}
<article class="h-entry">
<div class="article-content e-content">
<h2><a href="{{ .Permalink }}" class="title">{{ .Title }}</a></h2>
{{- partial "article-h-entry" . -}}
{{- partial "list-extra-content" . }}
{{- .Content -}}
{{- partial "extra-content" . -}}
</div>
{{- partial "article-nav" . -}}
<hr>
</article>
{{- partial "webmentions" . -}}
{{- partial "listPageResources" . -}}
{{- end -}}
The first partial, list-extra-content.html
does what it says. It ranges over the pages resources looking for .org
files and creates a list of what it finds.
{{"<!-- partial/list-extra-content.html -->" | safeHTML }}
<ul class="extra">
{{- range .Resources.Match "**.org" -}}
<li><a href="{{ .Permalink}}#{{ .Params.slug }}" class="title" alt="Link to full item">{{ .Title }}</a></li>
{{- end -}}
</ul>
The second partial, extra-content.html
incorporates the content of the org
files into the page.
{{"<!-- partial/extra-content.html -->" | safeHTML }}
{{ with .Resources.ByType "page" }}
{{ range sort . ".Params.date" "value" "asc" }}
<div class="extras">
<h9><a href="{{ .Permalink}}" id="{{.Params.slug}}" class="title" alt="Link to full item">{{ .Title }}</a></h9>
{{ .Content }}
</div>
{{- end -}}
{{- end -}}
Currently, update file, such as 20221218-11020-update.org
, are structured like this:
#+title: Updated on 18 December 2022
#+date: 2022-12-18T11:02:20+13:00
#+slug: update-18-december-2022
#+type: update
I went through and changed all the titles in my existing figures to be captions. It works better that way. I also removed the lazy loading, as most of my figures/images are above the fold.
I'm not sure I have the 'font matter' in these update files right yet, nor am I sure that the filenames I use for them are right.
That's because, I have a vague, undeveloped notion, that at some stage I'd like to be able use this approach to incorporate webmentions into a page rather than my current approach of using a .JSON
file. If I do that then, I can imagine I'd have a mixture of files such as:
20230101-113159-update.org
20230105-231907-reply.org
20230112-104523-like.org
20230121-173512-update.org
... and so on
Ultimately, maybe one day, at the bottom of the 'post' there will be all the updates, webmentions, backlink etc.