commit 38638c531beefb76b9445a69748cc511abd15164
parent e08a530d1869991dbe73fe0b079c184c4a995de7
Author: Eamon Caddigan <eamon.caddigan@gmail.com>
Date: Sun, 19 May 2024 20:07:06 -0700
Add a post about the expiring Now page
Diffstat:
1 file changed, 141 insertions(+), 0 deletions(-)
diff --git a/content/posts/disappearing-now/index.md b/content/posts/disappearing-now/index.md
@@ -0,0 +1,141 @@
+---
+title: "Create an expiring Now Page in Hugo"
+date: 2024-05-23T20:35:40-07:00
+draft: false
+categories:
+- Meta
+- Personal
+---
+
+I have added a [now page](https://nownownow.com/about) to my site and a link
+to it in the navigation footer below. This isn’t particularly
+noteworthy---I’m pretty boring, so its content will probably only interest
+a few of my friends and family members (..._maybe_). However, because I have
+enough self-awareness to realize that I will “occasionally” let this become
+out of date, I devised a workaround that feels worth sharing: I learned how
+to make [Hugo](https://gohugo.io) (the program I use to build this site)
+hide my now page whenever it gets too old.
+
+The changes I made to my site configuration are captured in [this Git
+commit](https://git.eamoncaddigan.net/www.eamoncaddigan.net/commit/1cf71f032c794808d5a4d6bc5fcd7dd8024074dd.html#h3-0-8).
+Since configurations and templates can vary so much between Hugo projects,
+I’ll explain each one a little bit in case anyone wants to do something
+similar for their site.
+
+## Set an expiration time parameter
+
+First, decide how old you’ll let your page get before it expires, and
+convert that value to seconds. For expiration times in days or weeks this is
+pretty straightforward: every day has exactly 86,400 seconds, so every week
+has 604,800 seconds. For expiration times in months and years, this is
+trickier. I recommend approximating months with fractional years; e.g.,
+three months is about 1/4 of a year. If you go this route, you’ll need to
+choose the duration of a year, bearing in mind:
+
+- The modal year has 365 days
+- The mean year according to our Gregorian calendar has 365.2425 days
+- The mean year between 2024 and 2099 (inclusive) has 365.25 days
+
+Create a new variable in your [Hugo
+configuration](https://gohugo.io/getting-started/configuration/) with this
+value; I called mine `now_timeout` and set it to ~1/2 a year.
+
+```
+now_timeout: 15778800
+```
+
+## Create your now page
+
+Create new content to represent your now page:
+
+```
+hugo new content content/now/index.md
+```
+
+(Note that all the shell commands should be run from the root folder of your
+project directory.)
+
+Write your post, and make sure the following parameters are included in your
+[front matter](https://gohugo.io/content-management/front-matter/):
+
+```
+---
+title: "Now"
+date: [Place the date here]
+layout: now
+alternate: This page is out of date.
+---
+```
+
+The `layout` is explained in the next step, and the `alternate` parameter
+defines the text that will be shown in place of your now page when it
+becomes a “then page”.
+
+## Create a ‘now’ layout
+
+Your now page will probably use a layout similar to your ‘page’ layout. If
+you’re still using your theme’s default layout, make a copy and modify it
+(replacing `your-theme` with the name of the theme you’re using):
+
+```
+mkdir -p layouts/page
+cp themes/your-theme/layouts/_default/single.html layouts/page/now.html
+```
+
+Edit this file, replacing the occurrence of `{{ .Content }}` with the
+following:
+
+```
+{{ if ge .Lastmod.Unix (sub time.Now.Unix .Site.Params.now_timeout) }}
+{{ .Content }}
+{{ else }}
+<p>{{ .Param "alternate" }}</p>
+{{ end }}
+```
+
+This is a basic if-then-else construct. If the page hasn’t expired yet, it
+will display it as normal, but if it has, the `alternate` text from the
+front matter will replace it. The reason that we chose an expiration time in
+seconds is that we’re comparing the “Unix time” representations of the page
+build time and the now page’s last modification time. If the template
+language supported duration values in months, I’d probably use that, but
+since it doesn’t it’s not worth the effort.
+
+## Add a disappearing “Now” link to your navigation
+
+This step will be highly theme-dependent. Your site’s navigation is probably
+implemented with a [“partial”](https://gohugo.io/templates/partials/); for
+example, [my theme](https://github.com/cjtheham/hugo-theme-readable) keeps
+this in `themes/readable/layouts/partials/footer.html`. Replacing
+`your-theme` with your actual theme name again, and `nav-partial` with the
+file that contains the navigation elements, make a copy of the file and edit
+it:
+
+```
+mkdir -p layouts/partials
+cp themes/your-theme/layouts/partials/nav-partial.html layouts/partials/
+```
+
+Now the version of the navigation partial that lives in your
+`layouts/partials` directory will override your theme’s. Find the list of
+navigation links in your copy, and add a block like the following:
+
+```
+{{ $now := .GetPage "/now/" }}
+{{ if ge $now.Lastmod.Unix (sub time.Now.Unix .Site.Params.now_timeout) }}
+<a href="{{ $now.RelPermalink }}">{{ $now.Title }}</a>
+{{ end }}
+```
+
+The `<a>` tag will probably need to be wrapped in a `<p>` or `<li>` tag,
+depending on your theme.
+
+This is similar to the change we made for the now layout, only there’s no
+“else” clause, and we’re finding the now page content, storing it in
+a variable, and accessing its attributes. This was the part of Hugo theming
+that really required me to stop and build a better mental model of the site
+generation process.
+
+## That’s it
+
+I hope this is useful to someone else!
