This website is made with Hugo and themed by accessible minimalism.
Often, if I’m sharing my website, I want to share a page with someone while we’re together in person. Reading aloud the website address or describing how to navigate to a particular page is awkward. And so, I added QR codes to pages which decode to the address of the page that they are on. For example, Advice for Students.
This bit in /layouts/_default/single.html toggles QR codes.
{{ if .Params.qrcode }}
{{ partial "qrcode.html" . }}
{{ end }}
The actual partial for generating a self-referential QR code is here.
{{ $text := .Permalink }}
{{ with images.QR $text }}
<img style="float: right;" class="qr-code" src="{{ .RelPermalink }}" width="{{ .Width }}" height="{{ .Height }}" alt="">
{{ end }}
I really like RSS. I wanted to get a nicely styled RSS feed for my site. Rach Smith has a lovely styled feed, for example. After scratching my head over it for a good long while, I went and asked how to do this on the Hugo Support forum. The details are there if you want to check them out.
The favicons for this site were generated from this icon over at icon-icons.com using Real FavIcon Generator. A local copy of the SVG is here:
I used LunaPic’s in-browswer circle-crop tool to make the circle-cropped headshot photo.
Generally, I like to shrink photos to 800x800 using:
convert -quality 80 -geometry 800x800 image.jpg image-small.jpg
I also scrub meta-data on all my images using a handy script.
for image in *.jpg *.png ; do
[[ $image == small-* ]] && continue
echo "Clearing meta-data: $image";
exiftool -overwrite_original -all= "$image"
convert -strip "$image" "$image"
echo "Making small-$image";
convert -quality 100 -geometry 800x800 "$image" "small-$image"
done
To get KaTeX to do both inline and display equations, I modified
./layout/partials/katex.md according to Kevin Cazelle’s suggestions here: https://kevcaz.github.io/notes/hugo/katex_and_goldmark/.
And now math looks like this: Inline: $\pi$ Display style: $$\int x\ dx = \frac{1}{2}x^2 + C$$
After getting a request to add search, I added an instance of PageFind. It was really slick to setup. To minimize the Javascript footprint of my website, I only added search functionality to the Archive.
I use the following script to deploy the website.
It builds the website to a special directory,
does a bit of sanity checking,
builds the PageFind index,
and deploys the site using rsync.
#!/bin/bash
DEST="/home/pgadey/public_html/pgadey-PRODUCTION/"
hugo build --destination $DEST
# Check for syncthing conflicts.
if find $DEST -type f -name '*sync-conflict*' | grep -q .; then
echo "Error: sync-conflict files detected."
exit 1
fi
# Check to see if any private information leaked.
if grep "FATAL ERROR" $DEST/index.html; then
echo "Error: FATAL ERROR found in index.html"
exit 1
fi
# Build the Pagefind index.
npx -y pagefind --site $DEST
rsync -avz $DEST cloudbox:/home/pgadey/public_html/pgadey
The Archive is setup using the following.
content/archive.md
themes/accessible-minimalism/layouts/partials/archive.html
themes/accessible-minimalism/layouts/_default/archive.html
The special _default/archive.html makes the calendar happen.
One can modify markdown blocks with Markdown attributes. This open up a lot of CSS possibilities.
paragraph
{class="foo"}
{class="display-image"}
{.display-image}
I added a link render hook to parse out URLs.
It is exactly this example layouts/_markup/render-link.html from the docs.
{{- $u := urls.Parse .Destination -}}
<a href="{{ .Destination | safeURL }}"
{{- with .Title }} title="{{ . }}"{{ end -}}
{{- if $u.IsAbs }} rel="external"{{ end -}}
>
{{- with .Text }}{{ . }}{{ end -}}
</a>
{{- /* chomp trailing newline */ -}}
This adds a rel="external" to any external links.
And then we style those external links with the following CSS.
a[rel="external"] {
text-decoration-style: dotted;
}
And we get little dots under external links like this: now versus Google.
Hugo supports the ability to add shortcodes, or macros, to do all sorts of things. I’ve added a couple shortcodes, but I always seem to forget how they work. And so, I’m putting some reminders to myself here.
The shortcode static makes accessing static resources easier.
{{< static "share/some-document.pdf" >}}
![foo]({{< static "img/foo.png" >}})
The shortcode private allows me to put material here which is shown locally via hugo server but doesn’t get published.
{{< private >}}
This material is private.
{{< /private >}}
On my end, the example above renders as the following.
The shortcode private which works like this:
{{ if eq hugo.Environment "development" }}
<div style="border: dotted; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;">
✒️
{{ .Inner | markdownify }}
</div>
{{ end }}
{{ if eq hugo.Environment "production" }}
<!-- gobble -->
{{ end }}
The logic of the hidden pages is controlled by keeping them as drafts in Hugo.
To do so, I add draft: true to the frontmatter of a page.
This makes a whole page get rendered locally, but not publish to the actual website.
This allows me to include private content in a public page.
The shortcode gobble just consumes whatever it is given.
It is occassionally helpful for keeping post-level to-do lists which are only
visible while editing the original source of a post.
{{< gobble >}}
This vanishes!
{{< /gobble >}}
This website supports a simple form of transclusion which allows me to gather snippets from multiple places and dump them in one spot. For example, the bookmarks page is populated with material wrapped in the following.
{{< gather dest="bookmarks" >}}
Links to things!
{{< /gather >}}
All that material gets dumped on the bookmarks page using:
{{< dump source="bookmarks" >}}
The gather and dump mechanism was introduced here Week Notes 15.
These ones do exactly what they say on the tin.
{{< recently_modified >}}
{{< stats >}}
You can see them in action on the home page.
This website has some keyboard drived navigation features inspired by vim.
Typing \ and then a letter will lead to the variety places.
const shortcuts = {
a: '/archive/',
b: '/bookmarks/',
c: '/office-camera/',
d: '/drafts/',
q: '/quick-launch/',
g: 'https://gmail.com/',
h: '/',
m: '#nav-menu',
n: '#nav-menu',
o: '/office-camera/',
t: '/tags/'
};
There is a link not found page. The backlinks on this page are especially interesting. They point to every page that has a missing link.
This page is enable using the following setting in config.toml.
refLinksNotFoundURL="https://pgadey.ca/link-not-found/"
\a style shortcuts to help navigate the site. The relevant script is in footer.html.gather shortcode.static shortcode following the suggestion here.<details> folds following the example of Oatmeal.gobble shortcode.list.html default layout template to pass the .Content of _index.md. This means that pages now have a bit of built in content.notes.
Published: May 17, 2021 @ 22:30.
Last Modified: Jun 15, 2026 @ 22:16.
Home / Now / Archive / Office Camera / Bookmarks / Tags / Feeds / Top of Page
Thanks for reading! If you have any comments or questions about the content, please let me know. Anyone can contact me by email.