refactor!: replace header, drawer, and footer, with shortcodes

[cjshearer]

before	after

refactor!: replace header, drawer, and footer with shortcodes

Previously, the layout of the header, drawer, and footer were dictated by template partials, which were driven with markup encoded in the yaml frontmatter. This severely restricted the layout and content in each of these elements:

• the header could only contain a name and a text summary rendered to markdown
• the drawer could only contain an avatar, followed by a list of links and a list of skills
• the footer could only contain some centered italic text rendered with markdown

These elements are now replaced with {{<header>}}, {{<aside>}} and {{<footer>}}, which may be placed in the resume markup. Each element only serves to render and place the contained markup in the corresponding location of the page.

• refactor!: replace {{<entry>}} with ### h3 and {{<date-range>}}

Previously, each resume entry required a shortcode that dictated the layout of a name, affiliation, date-range, and a description rendered to markdown. This severely restricted and unnecessarily complicated the layout and content of the main portion of the resume.

Now, {{<entry>}} has been removed, but can be closely emulated with a combination an h3 (###) header, a {{<date-range>}}, and any content that follows these. See the changes to content/_index.md for more details on how this migration may be done.

A draw-back up of this method is that the entry affiliation may no longer be placed on a separate line from the position name, however, support for this could be added using an #### h4. I'll do this if there's demand for it.

• feat: add support for responsive bitmaps and svgs in markdown images

Images supplied as markdown can now reference bitmaps or svgs. In the former case, the supplied bitmap image is used to generate a srcset of responsive images. In the latter case, the supplied svg will be embedded directly into the html, as

Bitmap images provided in the markdown, are now used to generate a srcset of responsive images. All configurations related to this process can be controlled with hugo attributes. See layouts/_default/_markup/render-image.html and the changes to content_index.md for more details on how this is done.

• fix: missing h2 headers in html

They were missing...I don't know why.

• fix: align date-range text with baseline of adjacent h3 text

Date ranges are normally placed to the right of an h3, but the text wasn't aligned due to a difference in font sizes. All elements in the main grid are now aligned with their baselines.

• fix: best-effort prevention of page breaks inside entries

65464b7 previously removed a failed attempt at preventing page breaks inside entries. We make a new attempt at this by setting break-before: avoid on all children of the {{<main>}} element, except for h3 headers and {{}} shortcodes.

• refactor(txt): stop uppercase-ing section titles

• refactor: prioritize page title over site title

Previously, the title in a page's frontmatter would be ignored. Now, this title is read in head.html and is prioritized over the site title.

chore: add dev:tailscale script

This commit adds support for using Tailscale to serve the website to the rest of my tailnet.

The motivation for this change was to be able to view the live site on my phone during development.

Note that while Hugo can serve locally with SSL certs, this also uses Tailscale to generate certificates, as it will also distribute them.