Add quicklink

feat: picture partial

.github/workflows/gh-pages.yml

@@ -22,6 +22,7 @@ jobs:
         uses: peaceiris/actions-hugo@v2
         with:
           hugo-version: "latest"
+          extended: true
 
       - name: Build
         working-directory: ./exampleSite

.github/workflows/test-build.yml

@@ -19,6 +19,7 @@ jobs:
         uses: peaceiris/actions-hugo@v2
         with:
           hugo-version: "latest"
+          extended: true
 
       - name: Build
         working-directory: ./exampleSite

CHANGELOG.md

@@ -8,7 +8,13 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ### Added
 
-- Warning when building if links to markdown files cannot be resolved ([#691](https://github.com/jpanther/congo/pull/691))
+- Automatic support for WebP images ([#693](https://github.com/jpanther/congo/pull/693))
+- Warning when building if links to Markdown files cannot be resolved ([#691](https://github.com/jpanther/congo/pull/691))
+
+### Changed
+
+- ⚠️ Hugo extended version is now required when building sites
+- Refactored image logic into a new `picture.html` partial ([#693](https://github.com/jpanther/congo/pull/693))
 
 ### Removed
 

assets/js/quicklink.js

@@ -0,0 +1,4 @@
+window.addEventListener("load", () => {
+  quicklink.listen();
+});
+

assets/lib/quicklink/quicklink.umd.js

@@ -0,0 +1 @@
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(e.quicklink={})}(this,function(e){function n(e){return new Promise(function(n,r,t){(t=new XMLHttpRequest).open("GET",e,t.withCredentials=!0),t.onload=function(){200===t.status?n():r()},t.send()})}var r,t=(r=document.createElement("link")).relList&&r.relList.supports&&r.relList.supports("prefetch")?function(e){return new Promise(function(n,r,t){(t=document.createElement("link")).rel="prefetch",t.href=e,t.onload=n,t.onerror=r,document.head.appendChild(t)})}:n,o=window.requestIdleCallback||function(e){var n=Date.now();return setTimeout(function(){e({didTimeout:!1,timeRemaining:function(){return Math.max(0,50-(Date.now()-n))}})},1)},i=new Set,c=new Set,u=!1;function a(e){if(e){if(e.saveData)return new Error("Save-Data is enabled");if(/2g/.test(e.effectiveType))return new Error("network conditions are poor")}return!0}function s(e,r,o){var s=a(navigator.connection);return s instanceof Error?Promise.reject(new Error("Cannot prefetch, "+s.message)):(c.size>0&&!u&&console.warn("[Warning] You are using both prefetching and prerendering on the same document"),Promise.all([].concat(e).map(function(e){if(!i.has(e))return i.add(e),(r?function(e){return window.fetch?fetch(e,{credentials:"include"}):n(e)}:t)(new URL(e,location.href).toString())})))}function f(e,n){var r=a(navigator.connection);if(r instanceof Error)return Promise.reject(new Error("Cannot prerender, "+r.message));if(!HTMLScriptElement.supports("speculationrules"))return s(e),Promise.reject(new Error("This browser does not support the speculation rules API. Falling back to prefetch."));if(document.querySelector('script[type="speculationrules"]'))return Promise.reject(new Error("Speculation Rules is already defined and cannot be altered."));for(var t=0,o=[].concat(e);t<o.length;t+=1){var f=o[t];if(window.location.origin!==new URL(f,window.location.href).origin)return Promise.reject(new Error("Only same origin URLs are allowed: "+f));c.add(f)}i.size>0&&!u&&console.warn("[Warning] You are using both prefetching and prerendering on the same document");var l=function(e){var n=document.createElement("script");n.type="speculationrules",n.text='{"prerender":[{"source": "list","urls": ["'+Array.from(e).join('","')+'"]}]}';try{document.head.appendChild(n)}catch(e){return e}return!0}(c);return!0===l?Promise.resolve():Promise.reject(l)}e.listen=function(e){if(e||(e={}),window.IntersectionObserver){var n=function(e){e=e||1;var n=[],r=0;function t(){r<e&&n.length>0&&(n.shift()(),r++)}return[function(e){n.push(e)>1||t()},function(){r--,t()}]}(e.throttle||1/0),r=n[0],t=n[1],a=e.limit||1/0,l=e.origins||[location.hostname],d=e.ignores||[],h=e.delay||0,p=[],m=e.timeoutFn||o,w="function"==typeof e.hrefFn&&e.hrefFn,g=e.prerender||!1;u=e.prerenderAndPrefetch||!1;var v=new IntersectionObserver(function(n){n.forEach(function(n){if(n.isIntersecting)p.push((n=n.target).href),function(e,n){n?setTimeout(e,n):e()}(function(){-1!==p.indexOf(n.href)&&(v.unobserve(n),(u||g)&&c.size<1?f(w?w(n):n.href).catch(function(n){if(!e.onError)throw n;e.onError(n)}):i.size<a&&!g&&r(function(){s(w?w(n):n.href,e.priority).then(t).catch(function(n){t(),e.onError&&e.onError(n)})}))},h);else{var o=p.indexOf((n=n.target).href);o>-1&&p.splice(o)}})},{threshold:e.threshold||0});return m(function(){(e.el||document).querySelectorAll("a").forEach(function(e){l.length&&!l.includes(e.hostname)||function e(n,r){return Array.isArray(r)?r.some(function(r){return e(n,r)}):(r.test||r).call(r,n.href,n)}(e,d)||v.observe(e)})},{timeout:e.timeout||2e3}),function(){i.clear(),v.disconnect()}}},e.prefetch=s,e.prerender=f});

config/_default/module.toml

@@ -1,3 +1,3 @@
 [hugoVersion]
-  extended = false
+  extended = true
   min = "0.87.0"

config/_default/params.toml

@@ -12,6 +12,7 @@ autoSwitchAppearance = true
 enableSearch = false
 enableCodeCopy = false
 enableImageLazyLoading = true
+enableImageWebp = true
 
 # robots = ""
 fingerprintAlgorithm = "sha256"

exampleSite/config/_default/module.toml

@@ -1,3 +1,3 @@
 [hugoVersion]
-  extended = false
+  extended = true
-  min = "0.86.1"
+  min = "0.87.0"

exampleSite/config/_default/params.toml

@@ -12,6 +12,8 @@ autoSwitchAppearance = true
 enableSearch = true
 enableCodeCopy = true
 enableImageLazyLoading = true
+enableImageWebp = true
+enableQuicklink = true
 
 # robots = ""
 fingerprintAlgorithm = "sha256"

exampleSite/content/docs/hosting-deployment/index.md

@@ -60,6 +60,7 @@ jobs:
         uses: peaceiris/actions-hugo@v2
         with:
           hugo-version: "latest"
+          extended: true
 
       - name: Build
         run: hugo --minify

exampleSite/content/docs/installation/index.md

@@ -21,7 +21,7 @@ These instructions will get you up and running using Hugo and Congo from a compl
 If you haven't used Hugo before, you will need to [install it onto your local machine](https://gohugo.io/getting-started/installing). You can check if it's already installed by running the command `hugo version`.
 
 {{< alert >}}
-Make sure you are using **Hugo version 0.87.0** or later as the theme takes advantage of some of the latest Hugo features.
+Make sure you are using **Hugo extended version 0.87.0** or later as the theme takes advantage of some of the latest Hugo features.
 {{< /alert >}}
 
 You can find detailed installation instructions for your platform in the [Hugo docs](https://gohugo.io/getting-started/installing).

layouts/_default/_markup/render-image.html

@@ -1,64 +1,28 @@
 {{ $url := urls.Parse .Destination }}
 {{ $altText := .Text }}
 {{ $caption := .Title }}
-{{ $lazyLoad := $.Page.Site.Params.enableImageLazyLoading | default true }}
+{{ $class := "mx-auto my-0 rounded-md" }}
-{{ if findRE "^https?" $url.Scheme }}
+
-  <figure>
+{{ $file := $url.Path }}
-    <img
+{{ $img := .Page.Resources.GetMatch $file }}
-      class="mx-auto my-0 rounded-md"
+{{- if and (not $img) .Page.File }}
-      src="{{ $url.String }}"
+    {{ $path := path.Join .Page.File.Dir $file }}
-      alt="{{ $altText }}" 
+    {{ $img = resources.Get $path }}
-      {{ if $lazyLoad }}
+{{ end -}}
-        loading="lazy"
+
-      {{ end }}
+{{/* https://github.com/gohugoio/hugo/pull/10666 */}}
-    />
+{{- $params := $url.Query -}}
-    {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
+{{- $x2Param := $params.Get "2x" -}}
-  </figure>
+{{- $x2 := false -}}
-{{ else }}
+{{- if eq $x2Param "true" -}}
-  {{ $resource := "" }}
+    {{- $x2 = true  -}}
-  {{ if $.Page.Resources.GetMatch ($url.String) }}
+{{- end -}}
-    {{ $resource = $.Page.Resources.GetMatch ($url.String) }}
+
-  {{ else if resources.GetMatch ($url.String) }}
+<figure>
-    {{ $resource = resources.Get ($url.String) }}
+  {{- with $img -}}
-  {{ end }}
+    {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "x2" $x2) }}
-  {{ with $resource }}
+  {{- else -}}
-    <figure>
+    <img src="{{ .Destination | safeURL }}" alt="{{ $altText }}" class="{{ $class }}"/>
-      <img
+  {{- end -}}
-        class="mx-auto my-0 rounded-md"
+  {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-        {{ if eq .MediaType.SubType "svg" }}
+</figure>
-          src="{{ .RelPermalink }}"
-        {{ else }}
-          width="{{ .Width }}"
-          height="{{ .Height }}"
-          {{ if lt .Width 660 }}
-            src="{{ .RelPermalink }}"
-          {{ else }}
-            srcset="
-            {{- (.Resize "330x").RelPermalink }} 330w,
-            {{- (.Resize "660x").RelPermalink }} 660w,
-            {{- (.Resize "1024x").RelPermalink }} 1024w,
-            {{- (.Resize "1320x").RelPermalink }} 2x"
-            src="{{ (.Resize "660x").RelPermalink }}"
-          {{ end }}
-        {{ end }}
-        alt="{{ $altText }}"
-        {{ if $lazyLoad }}
-          loading="lazy"
-        {{ end }}
-      />
-      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-    </figure>
-  {{ else }}
-    <figure>
-      <img
-        class="mx-auto my-0 rounded-md"
-        src="{{ $url.String }}"
-        alt="{{ $altText }}"
-        {{ if $lazyLoad }}
-          loading="lazy"
-        {{ end }}
-      />
-      {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
-    </figure>
-  {{ end }}
-{{ end }}

layouts/_default/single.html

@@ -15,25 +15,9 @@
       </div>
       {{ with $feature }}
         <div class="prose">
-          <img
+          {{ $altText := $.Params.featureAlt | default $.Params.coverAlt | default "" }}
-            class="mb-6 -mt-4 rounded-md"
+          {{ $class := "mb-6 -mt-4 rounded-md" }}
-            {{ if eq .MediaType.SubType "svg" }}
+          {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class "lazy" false) }}
-              src="{{ .RelPermalink }}"
-            {{ else }}
-              width="{{ .Width }}"
-              height="{{ .Height }}"
-              {{ if lt .Width 660 }}
-                src="{{ .RelPermalink }}"
-              {{ else }}
-                srcset="
-                {{- (.Resize "330x").RelPermalink }} 330w,
-                {{- (.Resize "660x").RelPermalink }} 660w,
-                {{- (.Resize "1024x").RelPermalink }} 1024w,
-                {{- (.Resize "1320x").RelPermalink }} 2x"
-              {{ end }}
-            {{ end }}
-            alt="{{ $.Params.featureAlt | default $.Params.coverAlt | default "" }}"
-          />
           {{ with $.Params.coverCaption }}
             <figcaption class="mb-6 -mt-3 text-center">{{ . | markdownify }}</figcaption>
           {{ end }}

layouts/partials/head.html

@@ -43,6 +43,11 @@
     {{ $jsSearch := resources.Get "js/search.js" }}
     {{ $assets.Add "js" (slice $jsFuse $jsSearch) }}
   {{ end }}
+  {{ if .Site.Params.enableQuicklink | default false }}
+    {{ $jsQuicklink := resources.Get "lib/quicklink/quicklink.umd.js" }}
+    {{ $jsQuicklinkInit := resources.Get "js/quicklink.js" }}
+    {{ $assets.Add "js" (slice $jsQuicklink $jsQuicklinkInit) }}
+  {{ end }}
   {{ if .Site.Params.enableCodeCopy | default false }}
     {{ $jsCode := resources.Get "js/code.js" }}
     {{ $assets.Add "js" (slice $jsCode) }}

layouts/partials/picture.html

@@ -0,0 +1,112 @@
+{{ $img := .img }}
+{{ $alt := .alt }}
+{{ $class := .class }}
+{{ $lazy := .lazy | default $.Page.Site.Params.enableImageLazyLoading | default true }}
+{{ $webp := .webp | default $.Page.Site.Params.enableImageWebp | default true }}
+{{ $lqip := .lqip | default false }}
+{{ $x2 := .x2 | default false }}
+
+{{ with $img }}
+  {{ if (eq .MediaType.SubType "svg") }}
+    {{ $width := ""}}
+    {{ $height := ""}}
+    {{ $svgContent := .Content }}
+    {{ range (findRESubmatch `<svg[^>]*width=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }}
+      {{ $width = index . 1 }}
+    {{ end }}
+    {{ range (findRESubmatch `<svg[^>]*height=["']([.0-9]*)["'a-zA-Z]` $svgContent 1) }}
+      {{ $height = index . 1 }}
+    {{ end }}
+    {{ if (eq "" $width $height) }}
+      {{ range (findRESubmatch `<svg[^>]*viewBox=["']?([.0-9]*) ([.0-9]*) ([.0-9]*) ([.0-9]*)` $svgContent 1) }}
+        {{ $width = index . 3 }}
+        {{ $height = index . 4 }}
+      {{ end }}
+    {{ end }}
+    {{ if (eq "" $width $height) }}
+      {{ warnf "Can't detect width and height for SVG %s" .RelPermalink }}
+      {{/* do not use lazy without dimensions */}}
+      {{ $lazy = false }}
+    {{ end }}
+    <picture {{ with $class }} class="{{ . }}" {{ end }}>
+      <img
+        src="{{ .RelPermalink }}"
+        {{ with $width }} width="{{ . }}" {{ end }}
+        {{ with $height }} height="{{ . }}" {{ end }}
+        {{ with $class }} class="{{ . }}" {{ end }}
+        {{ with $alt }} alt="{{ . }}" {{ end }}
+        {{ with $lazy }} loading="lazy" decoding="async" {{ end }}
+      >
+    </picture>
+  {{ else }}
+    <picture 
+      {{ with $class }} class="{{ . }}" {{ end }}
+      {{ if $lqip }}
+        {{ $bg := (.Resize "20x webp q20").Content | base64Encode }}
+        style="background-image:url(data:image/webp;base64,{{ $bg }});background-size:cover"
+      {{ end }}
+    >
+    {{ $width := .Width }}
+    {{ $height := .Height }}
+    {{ if $x2 }}
+      {{ $width = div .Width 2 }}
+      {{ $height = div .Height 2 }}
+    {{ end }}
+    {{ if $webp }}
+      <source 
+        {{ if lt .Width 660 }}
+          {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
+            src="{{ .RelPermalink }}"
+          {{ end }}
+        {{ else }}
+          srcset="
+            {{- (.Resize "330x webp").RelPermalink }} 330w,
+            {{- (.Resize "660x webp").RelPermalink }} 660w
+            {{ if gt .Width 1024 }}
+              ,{{ (.Resize "1024x webp").RelPermalink }} 1024w
+            {{ else }}
+              {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
+                ,{{ .RelPermalink }} {{ .Width }}w
+              {{ end }}
+            {{ end }}
+            {{ if gt .Width 1320 }}
+              ,{{ (.Resize "1320x webp").RelPermalink }} 2x
+            {{ else }}
+              {{ with .Resize (printf "%dx%d webp" .Width .Height) }}
+                ,{{ .RelPermalink }} {{ .Width }}w
+              {{ end }}
+            {{ end }}"
+          src="{{ (.Resize "660x webp").RelPermalink }}" 
+        {{ end }}
+        type="image/webp" 
+      />
+    {{ end }}
+      <img
+        src="{{ .RelPermalink }}"
+        width="{{ $width }}"
+        height="{{ $height }}"
+        {{ with $class }} class="{{ . }}" {{ end }}
+        {{ with $alt }} alt="{{ . }}" {{ end }}
+        {{ with $lazy }} loading="lazy" decoding="async" {{ end }}
+        {{ if lt .Width 660 }}
+          src="{{ .RelPermalink }}"
+        {{ else }}
+          srcset="
+          {{- (.Resize "330x").RelPermalink }} 330w,
+          {{- (.Resize "660x").RelPermalink }} 660w
+          {{ if gt .Width 1024 }}
+            ,{{ (.Resize "1024x").RelPermalink }} 1024w
+          {{ else }}
+            ,{{ .RelPermalink }} {{ .Width }}w
+          {{ end }}
+          {{ if gt .Width 1320 }}
+            ,{{ (.Resize "1320x").RelPermalink }} 2x
+          {{ else }}
+            ,{{ .RelPermalink }} {{ .Width }}w
+          {{ end }}"
+          src="{{ (.Resize "660x").RelPermalink }}"
+        {{ end }}
+      >
+    </picture>
+  {{ end }}
+{{ end }}

layouts/shortcodes/figure.html

@@ -6,45 +6,23 @@
   {{ $caption := .Get "caption" }}
   {{ $href := .Get "href" }}
   {{ $class := .Get "class" }}
+
+  {{ $file := $url.Path }}
+  {{ $img := .Page.Resources.GetMatch $file }}
+  {{- if and (not $img) .Page.File }}
+    {{ $path := path.Join .Page.File.Dir $file }}
+    {{ $img = resources.Get $path }}
+  {{ end -}}
+
   <figure{{ with $class }} class="{{ . }}"{{ end }}>
     {{ with $href }}<a href="{{ . }}">{{ end }}
-    <img
+
-      class="mx-auto my-0 rounded-md"
+    {{- with $img -}}
-      alt="{{ $altText }}"
+      {{ partial "picture.html" (dict "img" . "alt" $altText "class" $class) }}
-      {{ if .Site.Params.enableImageLazyLoading | default true }}
+    {{- else -}}
-        loading="lazy"
+      <img src="{{ $url.String }}" alt="{{ $altText }}" class="{{ $class }}"/>
-      {{ end }}
+    {{- end -}}
-      {{ if findRE "^https?" $url.Scheme }}
+
-        src="{{ $url.String }}"
-      {{ else }}
-        {{ $resource := "" }}
-        {{ if $.Page.Resources.GetMatch ($url.String) }}
-          {{ $resource = $.Page.Resources.GetMatch ($url.String) }}
-        {{ else if resources.GetMatch ($url.String) }}
-          {{ $resource = resources.Get ($url.String) }}
-        {{ end }}
-        {{ with $resource }}
-          {{ if eq .MediaType.SubType "svg" }}
-            src="{{ .RelPermalink }}"
-          {{ else }}
-            width="{{ .Width }}"
-            height="{{ .Height }}"
-            {{ if lt .Width 660 }}
-              src="{{ .RelPermalink }}"
-            {{ else }}
-              srcset="
-              {{- (.Resize "330x").RelPermalink }} 330w,
-              {{- (.Resize "660x").RelPermalink }} 660w,
-              {{- (.Resize "1024x").RelPermalink }} 1024w,
-              {{- (.Resize "1320x").RelPermalink }} 2x"
-              src="{{ (.Resize "660x").RelPermalink }}"
-            {{ end }}
-          {{ end }}
-        {{ else }}
-          src="{{ $url.String }}"
-        {{ end }}
-      {{ end }}
-    />
     {{ with $href }}</a>{{ end }}
     {{ with $caption }}<figcaption class="text-center">{{ . | markdownify }}</figcaption>{{ end }}
   </figure>

layouts/shortcodes/screenshot.html

@@ -4,17 +4,16 @@
     {{- if .Get "href" -}}
       <a href="{{ .Get "href" }}">
     {{- end -}}
-    <img src="{{ $image.RelPermalink }}"
+
-      {{- if or (.Get "alt") (.Get "caption") }}
+    {{ $altText := "" }}
-        alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify | plainify }}{{ end }}"
+    {{ with .Get "alt" }}
-      {{- end -}}
+      {{ $altText = . }}
-      {{ if .Site.Params.enableImageLazyLoading | default true }}
+    {{ else }}
-        loading="lazy"
+      {{ $altText = (.Get "caption") | markdownify | plainify }}
-      {{ end }}
+    {{ end }}
-      width="100%"
+
-      height="auto"
+    {{ partial "picture.html" (dict "img" $image "alt" $altText "x2" true) }}
-      style="max-width:{{ div $image.Width 2 }}px; max-height:{{ div $image.Height 2 }}px;"
+
-    />
     {{- if .Get "href" }}</a>{{ end -}}
     {{- if .Get "caption" -}}
       <figcaption>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "hugo-congo-theme",
-  "version": "2.7.4",
+  "version": "2.7.6",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "hugo-congo-theme",
-      "version": "2.7.4",
+      "version": "2.7.6",
       "hasInstallScript": true,
       "license": "MIT",
       "devDependencies": {
@@ -18,6 +18,7 @@
         "prettier": "^3.1.0",
         "prettier-plugin-go-template": "^0.0.15",
         "prettier-plugin-tailwindcss": "^0.5.7",
+        "quicklink": "^2.3.0",
         "rimraf": "^5.0.5",
         "tailwindcss": "^3.3.5",
         "vendor-copy": "^3.0.1"
@@ -1351,6 +1352,13 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/katex": {
       "version": "0.16.9",
       "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.9.tgz",
@@ -1433,6 +1441,19 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.0.1.tgz",
@@ -2413,6 +2434,18 @@
         }
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -2433,6 +2466,58 @@
         }
       ]
     },
+    "node_modules/quicklink": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/quicklink/-/quicklink-2.3.0.tgz",
+      "integrity": "sha512-FyTanYArl5Gz2/C0ZjErvfFJtem/+d1RM4eK0jiXO6mL4Zjje+xsYtcK3ZtKX2Yb3HSfah5HekWrH2qhttYQjQ==",
+      "dev": true,
+      "dependencies": {
+        "route-manifest": "^1.0.0",
+        "throttles": "^1.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0",
+        "react-dom": "^16.8.0"
+      }
+    },
+    "node_modules/react": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.19.1"
+      },
+      "peerDependencies": {
+        "react": "^16.14.0"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true,
+      "peer": true
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -2454,6 +2539,15 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regexparam": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-1.3.0.tgz",
+      "integrity": "sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@@ -2505,6 +2599,18 @@
       "integrity": "sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==",
       "dev": true
     },
+    "node_modules/route-manifest": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/route-manifest/-/route-manifest-1.0.0.tgz",
+      "integrity": "sha512-qn0xJr4nnF4caj0erOLLAHYiNyzqhzpUbgDQcEHrmBoG4sWCDLnIXLH7VccNSxe9cWgbP2Kw/OjME+eH3CeRSA==",
+      "dev": true,
+      "dependencies": {
+        "regexparam": "^1.3.0"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -2552,6 +2658,17 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "node_modules/scheduler": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "dev": true,
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -2852,6 +2969,15 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/throttles": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/throttles/-/throttles-1.0.1.tgz",
+      "integrity": "sha512-fab7Xg+zELr9KOv4fkaBoe/b3L0GMGLd0IBSCn16GoE/Qx6/OfCr1eGNyEcDU2pUA79qQfZ8kPQWlRuok4YwTw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -4110,6 +4236,13 @@
       "integrity": "sha512-3TV69ZbrvV6U5DfQimop50jE9Dl6J8O1ja1dvBbMba/sZ3YBEQqJ2VZRoQPVnhlzjNtU1vaXRZVrVjU4qtm8yA==",
       "dev": true
     },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true,
+      "peer": true
+    },
     "katex": {
       "version": "0.16.9",
       "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.9.tgz",
@@ -4179,6 +4312,16 @@
       "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
       "dev": true
     },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
     "lru-cache": {
       "version": "10.0.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-10.0.1.tgz",
@@ -4726,12 +4869,66 @@
       "dev": true,
       "requires": {}
     },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "quicklink": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/quicklink/-/quicklink-2.3.0.tgz",
+      "integrity": "sha512-FyTanYArl5Gz2/C0ZjErvfFJtem/+d1RM4eK0jiXO6mL4Zjje+xsYtcK3ZtKX2Yb3HSfah5HekWrH2qhttYQjQ==",
+      "dev": true,
+      "requires": {
+        "route-manifest": "^1.0.0",
+        "throttles": "^1.0.0"
+      }
+    },
+    "react": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.14.0.tgz",
+      "integrity": "sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2"
+      }
+    },
+    "react-dom": {
+      "version": "16.14.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.14.0.tgz",
+      "integrity": "sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1",
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.19.1"
+      }
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true,
+      "peer": true
+    },
     "read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -4750,6 +4947,12 @@
         "picomatch": "^2.2.1"
       }
     },
+    "regexparam": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/regexparam/-/regexparam-1.3.0.tgz",
+      "integrity": "sha512-6IQpFBv6e5vz1QAqI+V4k8P2e/3gRrqfCJ9FI+O1FLQTO+Uz6RXZEZOPmTJ6hlGj7gkERzY5BRCv09whKP96/g==",
+      "dev": true
+    },
     "resolve": {
       "version": "1.22.2",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz",
@@ -4782,6 +4985,15 @@
       "integrity": "sha512-ndEIpszUHiG4HtDsQLeIuMvRsDnn8c8rYStabochtUeCvfuvNptb5TUbVD68LRAILPX7p9nqQGh4xJgn3EHS/g==",
       "dev": true
     },
+    "route-manifest": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/route-manifest/-/route-manifest-1.0.0.tgz",
+      "integrity": "sha512-qn0xJr4nnF4caj0erOLLAHYiNyzqhzpUbgDQcEHrmBoG4sWCDLnIXLH7VccNSxe9cWgbP2Kw/OjME+eH3CeRSA==",
+      "dev": true,
+      "requires": {
+        "regexparam": "^1.3.0"
+      }
+    },
     "run-parallel": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
@@ -4812,6 +5024,17 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
+    "scheduler": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "dev": true,
+      "peer": true,
+      "requires": {
+        "loose-envify": "^1.1.0",
+        "object-assign": "^4.1.1"
+      }
+    },
     "shebang-command": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -5038,6 +5261,12 @@
         "thenify": ">= 3.1.0 < 4"
       }
     },
+    "throttles": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/throttles/-/throttles-1.0.1.tgz",
+      "integrity": "sha512-fab7Xg+zELr9KOv4fkaBoe/b3L0GMGLd0IBSCn16GoE/Qx6/OfCr1eGNyEcDU2pUA79qQfZ8kPQWlRuok4YwTw==",
+      "dev": true
+    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",

package.json

@@ -37,6 +37,7 @@
     "prettier": "^3.1.0",
     "prettier-plugin-go-template": "^0.0.15",
     "prettier-plugin-tailwindcss": "^0.5.7",
+    "quicklink": "^2.3.0",
     "rimraf": "^5.0.5",
     "tailwindcss": "^3.3.5",
     "vendor-copy": "^3.0.1"
@@ -70,6 +71,10 @@
     {
       "from": "node_modules/fuse.js/dist/fuse.min.js",
       "to": "assets/lib/fuse/fuse.min.js"
+    },
+    {
+      "from": "node_modules/quicklink/dist/quicklink.umd.js",
+      "to": "assets/lib/quicklink/quicklink.umd.js"
     }
   ]
 }