| Port fzakaria.com design to Hugo and add a homepage profile 1bdbd06 Romain Gautier 21h ago | 1 | <!doctype html> |
| 2 | <html lang="{{ site.Language.Lang }}"> |
| 3 | <head> |
| 4 | <meta charset="utf-8"> |
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1"> |
| 6 | <meta name="color-scheme" content="light dark"> |
| 7 | <meta name="theme-color" content="#f5f2ec" media="(prefers-color-scheme: light)"> |
| 8 | <meta name="theme-color" content="#15171a" media="(prefers-color-scheme: dark)"> |
| Add French/Portuguese/Japanese support, block indexing until launch f8c7bc5 Romain Gautier 17h ago | 9 | {{ if site.Params.noindex }} |
| 10 | <meta name="robots" content="noindex, nofollow"> |
| 11 | {{ end }} |
| Port fzakaria.com design to Hugo and add a homepage profile 1bdbd06 Romain Gautier 21h ago | 12 | |
| 13 | <title>{{ if .IsHome }}{{ site.Title }}{{ else }}{{ .Title }} · {{ site.Title }}{{ end }}</title> |
| 14 | {{- /* |
| 15 | Priority: this page's own front matter > an explicit site-wide |
| 16 | params.description override > params.profile.bio, stripped of markdown |
| 17 | down to plain text. Set params.description only when the SEO snippet |
| 18 | should say something different from the colophon bio; otherwise bio is |
| 19 | the single source of truth for both. |
| 20 | */}} |
| 21 | {{- $desc := .Description }} |
| 22 | {{- if not $desc }}{{ $desc = site.Params.description }}{{ end }} |
| 23 | {{- if not $desc }}{{ with site.Params.profile.bio }}{{ $desc = . | markdownify | plainify }}{{ end }}{{ end }} |
| 24 | {{ with $desc -}} |
| 25 | <meta name="description" content="{{ . }}"> |
| 26 | {{- end }} |
| 27 | |
| 28 | <!-- Fonts are self-hosted, so there is no third-party DNS + TLS before first paint. --> |
| 29 | <link rel="preload" href="/fonts/Newsreader-latin.woff2" as="font" type="font/woff2" crossorigin> |
| 30 | <link rel="preload" href="/fonts/JetBrainsMono-Regular.woff2" as="font" type="font/woff2" crossorigin> |
| 31 | {{ with resources.Get "css/style.scss" }} |
| 32 | {{ $opts := dict "transpiler" "dartsass" "outputStyle" "compressed" }} |
| 33 | {{ with . | toCSS $opts }} |
| 34 | <link rel="stylesheet" type="text/css" href="{{ .RelPermalink }}"> |
| 35 | {{ end }} |
| 36 | {{ end }} |
| 37 | |
| Add French/Portuguese/Japanese support, block indexing until launch f8c7bc5 Romain Gautier 17h ago | 38 | <link rel="alternate" type="application/rss+xml" title="{{ site.Title }}" href="{{ "index.xml" | absLangURL }}"> |
| 39 | {{- /* One hreflang tag per translated version of this page, so search |
| 40 | engines serve readers the right language instead of always the one |
| 41 | that happens to rank. x-default points at the lowest-weight (English) |
| 42 | translation, since that's the site's default language. */}} |
| 43 | {{- $translations := sort .AllTranslations "Language.Weight" }} |
| 44 | {{- range $translations }} |
| 45 | <link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}"> |
| 46 | {{- end }} |
| 47 | {{- with index $translations 0 }} |
| 48 | <link rel="alternate" hreflang="x-default" href="{{ .Permalink }}"> |
| 49 | {{- end }} |
| Smooth page transitions with htmx boost, morph, and preload ca8b900 Romain Gautier 18h ago | 50 | {{- /* |
| 51 | Declarative, not htmx.config.preload = {...} in a script: a <meta> tag |
| 52 | is parsed with the rest of the document, before any script (deferred or |
| 53 | not) runs, so htmx's constructor sees it synchronously and correctly |
| 54 | every time - no dependency on inline-script/defer/DOMContentLoaded |
| 55 | ordering at all. boostEvent switches hx-preload's trigger from the |
| 56 | default mousedown/touchstart to mouseover, so the fetch for a boosted |
| 57 | link starts the instant the cursor touches it rather than waiting for a |
| 58 | press. |
| 59 | */}} |
| 60 | <meta name="htmx-config" content="preload.boostEvent:mouseover"> |
| 61 | <script src="{{ "js/htmx.min.js" | relURL }}" defer></script> |
| 62 | {{- /* |
| 63 | Official htmx extension, vendored from the same htmx.org package as |
| 64 | htmx.min.js above (node_modules/htmx.org/dist/ext/hx-preload.min.js - |
| 65 | re-copy it from there on a version bump). Prefetches a boosted link's |
| 66 | GET response, reused automatically if the click follows within 5s. |
| 67 | Needs no hx-ext or other opt-in - just being loaded activates it for |
| 68 | every boosted anchor. |
| 69 | */}} |
| 70 | <script src="{{ "js/hx-preload.min.js" | relURL }}" defer></script> |
| 71 | {{- /* |
| 72 | htmx's own browser back/forward handling (#restoreHistory) is a |
| 73 | separate code path from a boosted click - it calls htmx.ajax() directly |
| 74 | with swap:"outerSync" hardcoded, a full body replace, not our |
| 75 | innerMorph below. Left alone, a link click morphed smoothly but |
| 76 | back/forward tore the masthead down and rebuilt it. Preempt it with the |
| 77 | same config used everywhere else (kept as one Hugo value, $swapSpec, |
| 78 | rather than duplicated literals, so the two can't drift apart), and |
| 79 | abort a still-in-flight restore before starting the next one - the same |
| 80 | guard htmx's own implementation has - so mashing back/forward can't let |
| 81 | a slow, stale response land after a faster, newer one. |
| 82 | |
| 83 | `defer` only affects scripts with a `src` - htmx.min.js and |
| 84 | hx-preload.min.js above genuinely wait until after parsing, but this |
| 85 | inline script has no `src` and runs immediately in place during |
| 86 | parsing, defer or not. It must not touch `htmx` at its top level, only |
| 87 | from inside a listener that fires later - hence DOMContentLoaded, which |
| 88 | is guaranteed to fire only after every deferred script, htmx.min.js and |
| 89 | hx-preload.min.js included, has already run. |
| 90 | */}} |
| 91 | {{- $swapSpec := dict "swap" "innerMorph" "transition" true }} |
| 92 | <script> |
| 93 | document.addEventListener("DOMContentLoaded", () => { |
| 94 | let restoreAbort; |
| 95 | document.addEventListener("htmx:before:history:restore", (e) => { |
| 96 | e.preventDefault(); |
| 97 | restoreAbort?.abort(); |
| 98 | restoreAbort = new AbortController(); |
| 99 | htmx.ajax("GET", e.detail.path, { |
| 100 | target: document.body, |
| 101 | swap: "{{ $swapSpec.swap }}", |
| 102 | transition: {{ $swapSpec.transition }}, |
| 103 | request: {headers: {}, signal: restoreAbort.signal}, |
| 104 | }); |
| 105 | }); |
| 106 | }); |
| 107 | </script> |
| Port fzakaria.com design to Hugo and add a homepage profile 1bdbd06 Romain Gautier 21h ago | 108 | {{ block "head" . }}{{ end }} |
| 109 | </head> |
| Smooth page transitions with htmx boost, morph, and preload ca8b900 Romain Gautier 18h ago | 110 | {{- /* |
| 111 | Boosts every same-origin link/form into an AJAX navigation, inherited from |
| 112 | body down (htmx 4 requires the ":inherited" suffix explicitly - it no |
| 113 | longer inherits hx-* attributes implicitly). Boosted elements default to |
| 114 | targeting the whole <body>; innerMorph diffs the new body onto the old |
| 115 | one node-by-node instead of replacing it wholesale, so unchanged nodes |
| 116 | (the masthead's "mykiwi.blog" link) are patched in place rather than |
| 117 | torn down and re-flashed, while changed ones - the per-page signal SVG |
| 118 | path, the swapped #main content - update normally. transition:true wraps |
| 119 | that diff in a native View Transition for a soft cross-fade. |
| 120 | */}} |
| 121 | <body hx-boost:inherited="swap:{{ $swapSpec.swap }} transition:{{ $swapSpec.transition }}"> |
| Add French/Portuguese/Japanese support, block indexing until launch f8c7bc5 Romain Gautier 17h ago | 122 | <a class="skip-link" href="#main">{{ i18n "skipToContent" }}</a> |
| Port fzakaria.com design to Hugo and add a homepage profile 1bdbd06 Romain Gautier 21h ago | 123 | <div class="wrap"> |
| 124 | {{ partial "masthead.html" . }} |
| 125 | <main id="main">{{ block "main" . }}{{ end }}</main> |
| 126 | {{ partial "site-foot.html" . }} |
| 127 | </div> |
| 128 | </body> |
| 129 | </html> |