Inspired by The quotes on my wall by Linus, I built a way to display things that I want to draw my attention over time.
I add new entries as I come across them when I’m reading or journaling, including things that inspire me like Oxide’s Mission or this quote from _why, or things that challenge me, like Finish your projects or Creativity is a byproduct of work. Often they are sparked by quotes I’ve read from other people, the way Linus’s backgrounds are, but sometimes they’re just things I want to improve in myself. I’ve found it really useful to be able to highlight a single sentence from a bigger quote to really draw my eye, for example in Having a defensible opinion takes work
As I write this, some of my goals for 2025 are in active rotation.
They’re designed to be displayed as desktop backgrounds. Here’s an example with the focus So create, displayed in an iframe to show what it would look like on a desktop. (Warning: on iOS, attempting to zoom the page while this iframe is in view can cause the web page to crash. If you want to take a closer look at the focus, tap to view it directly.)
All these are in my focalarium, a latin-esque word that I made up patterned after “reliquarium”. That page lists all the active foci, which is sort of like a /now page for things I’m thinking about, as well as a complete list of every focus I’ve ever added.
It also has a special Cycle page, which loops through each active focus, displaying it for 15 minutes at a time. I point Plash at this page, and it updates my desktop background for me.
Technical notes
A few notes about how it’s implemented
Hugo outputs
I defined a new Hugo media type text/html+focus and output HtmlFocus in my config file:
Hugo config file
mediaTypes:
# ...
text/html+focus:
suffixes: ["focus.html"]
outputFormats:
# ...
HtmlFocus:
mediatype: text/html+focus
# Output should be 'index.focus.html'
suffix: focus.html
isPlainText: false
isHTML: true
rel: alternate
permalinkable: false
And configured the focalarium section to use that output in the section frontmatter:
content/focalarium/_index.md frontmatter
cascade:
outputs:
- HTML
- HtmlFocus
And added an layout template in layouts/focalarium/index.focus.html to display the focus itself.
This is a very stripped down page,
which pulls in only the <head> template from my main site.
layouts/focalarium/index.focus.html template
<!DOCTYPE html>
<html lang="{{ .Site.LanguageCode }}">
<head>
{{- partial "head.html" . }}
<style id="page-focus-styles">{{- with .Page.Resources.Get "focus.css" }}{{ .Content | safeCSS }}{{ end }}</style>
<script id="page-focus-script" type="text/javascript">{{- with .Resources.Get "focus.js" }}{{ .Content }}{{ end }}</script>
</head>
<body>
<main id="content" class="focus-content">
{{ .Content }}
</main>
<div class="focus-explanation">
<p><a href='{{ with site.GetPage "/focalarium" }}{{ .Permalink }}{{ end }}'>Focus</a></p>
</div>
</body>
</html>
Now when the site is built, each focus generates a regular index.html and a special index.focus.html.
The index.html is the focus landing page
that describes what the focus is for any confused humans that stumble across it and shows a preview,
and the index.focus.html is the stripped down page that displays on the desktop.
Cycling through active foci
The Cycle page uses JavaScript to retrieve an index.focus.html
and replaces the whole page body with its contents every interval.
The default interval is 15 minutes,
and you can adjust the interval with a query string like ?intervalMin=X.
Point a browser, or Plash, at this page and it’ll show a new focus every so often.
The JavaScript for this is inline;
you can just curl the Cycle page to see it.