fix: load site CSS, fonts and images on any host

.github/workflows/site.yml

@@ -27,12 +27,13 @@ jobs:
           echo "${LYCHEE_SHA256}  /tmp/lychee.tgz" | sha256sum -c -
           tar -xzf /tmp/lychee.tgz -C /tmp lychee
           /tmp/lychee --offline --no-progress --include-fragments --index-files index.html \
+            --root-dir "$PWD/site/public" \
             --remap "https://renderd\.xyz/(.*) file://$PWD/site/public/\$1" \
             'site/public/**/*.html'
       - name: Lighthouse (mobile budgets)
         run: |
-          # build.sh left Zola here; rebuild with a local address so the assets load.
-          (cd site && /tmp/renderd-site-tools/zola-0.23.6 build --base-url http://127.0.0.1:8090 -o /tmp/renderd-site-lh --force)
+          # Serve the build output as is, the same files Vercel serves.
+          cp -r site/public /tmp/renderd-site-lh
           npx --yes @lhci/cli@0.15.1 autorun --config=site/lighthouserc.json
       - name: Keep the Lighthouse reports
         if: always()

site/build.sh

@@ -5,7 +5,7 @@
 #   2. Write data/release.json from the latest GitHub release.
 #   3. zola build.
 #   4. Add rustdoc at /api/. If that fails, the site still ships without it.
-# Set RENDERD_SKIP_API=1 to skip step 4.
+# Set RENDERD_SKIP_API=1 to skip step 4. RENDERD_BASE_URL sets the site address.
 set -euo pipefail
 cd "$(dirname "$0")"
 
@@ -25,7 +25,14 @@ fi
 "$zola" --version
 
 node scripts/release.mjs
-"$zola" build
+
+# Pages link to CSS, fonts and images with root-relative paths, so they load on
+# any host. base_url (renderd.xyz) is only for canonical, og and sitemap URLs.
+if [ -n "${RENDERD_BASE_URL:-}" ]; then
+  "$zola" build --base-url "$RENDERD_BASE_URL"
+else
+  "$zola" build
+fi
 
 if [ "${RENDERD_SKIP_API:-0}" != "1" ]; then
   # set -e does not work inside an if condition, so each step is chained with &&.

site/templates/404.html

@@ -13,8 +13,8 @@
   <h1 id="h1" class="title-box">This page is not in the book.</h1>
   <p class="section-lede">The address may be old, or it may have a typo. These pages are here:</p>
   <ul>
-    <li><a href="{{ get_url(path='/') }}">Renderd, use a Windows PC as a second monitor for your Mac</a></li>
-    <li><a href="{{ get_url(path='download/') }}">Download, and the first run step by step</a></li>
+    <li><a href="/">Renderd, use a Windows PC as a second monitor for your Mac</a></li>
+    <li><a href="/download/">Download, and the first run step by step</a></li>
     <li><a href="{{ config.extra.repo }}">The source on GitHub</a></li>
   </ul>
 </section>

site/templates/base.html

@@ -16,26 +16,26 @@
 <meta property="og:title" content="{{ page_title }}">
 <meta property="og:description" content="{{ page_desc }}">
 <meta property="og:url" content="{{ page_url }}">
-<meta property="og:image" content="{{ get_url(path='img/social-home.png') }}">
+<meta property="og:image" content="{{ config.base_url }}/img/social-home.png">
 <meta property="og:image:width" content="1200">
 <meta property="og:image:height" content="630">
 <meta name="twitter:card" content="summary_large_image">
-<link rel="icon" href="{{ get_url(path='img/favicon.svg') }}" type="image/svg+xml">
-<link rel="preload" href="{{ get_url(path='fonts/newsreader-roman.woff2') }}" as="font" type="font/woff2" crossorigin>
-<link rel="preload" href="{{ get_url(path='fonts/archivo.woff2') }}" as="font" type="font/woff2" crossorigin>
-<link rel="stylesheet" href="{{ get_url(path='css/site.css', cachebust=true) }}">
+<link rel="icon" href="/img/favicon.svg" type="image/svg+xml">
+<link rel="preload" href="/fonts/newsreader-roman.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="preload" href="/fonts/archivo.woff2" as="font" type="font/woff2" crossorigin>
+<link rel="stylesheet" href="/css/site.css?h={{ get_hash(path='css/site.css', sha_type=256, base64=false) | truncate(length=20, end='') }}">
 {% block head %}{% endblock head %}
 </head>
 <body>
 <a class="skip" href="#main">Skip to the content</a>
 <header class="mast">
-  <a class="mast-mark" href="{{ get_url(path='/') }}" aria-label="Renderd, home">Renderd</a>
+  <a class="mast-mark" href="/" aria-label="Renderd, home">Renderd</a>
   <nav class="mast-nav" aria-label="Main">
-    <a href="{{ get_url(path='download/') }}">Download</a>
-    <a href="{{ get_url(path='download/') }}#first-run">First run</a>
-    <a href="{{ get_url(path='/') }}#how">How it works</a>
-    <a href="{{ get_url(path='/') }}#security">Security</a>
-    <a href="{{ get_url(path='/') }}#compare">Compare</a>
+    <a href="/download/">Download</a>
+    <a href="/download/#first-run">First run</a>
+    <a href="/#how">How it works</a>
+    <a href="/#security">Security</a>
+    <a href="/#compare">Compare</a>
     <a href="{{ config.extra.repo }}">GitHub<span class="arrow" aria-hidden="true">&#8599;</span></a>
   </nav>
 </header>

site/templates/index.html

@@ -61,7 +61,7 @@ <h1 id="h1" class="title-box">Use your Windows&nbsp;PC as a second monitor for y
     <figure class="specimen" aria-labelledby="fig1">
       <div class="specimen-art">
         <div class="art">
-        <img src="{{ get_url(path='img/desk-halftone.png') }}" width="1560" height="960" alt="A MacBook and a Windows PC monitor side by side. One window is half on the MacBook screen and half on the monitor, because the monitor is now the Mac's second display.">
+        <img src="/img/desk-halftone.png" width="1560" height="960" alt="A MacBook and a Windows PC monitor side by side. One window is half on the MacBook screen and half on the monitor, because the monitor is now the Mac's second display.">
         <svg class="specimen-lines" viewBox="0 0 1560 960" aria-hidden="true">
           <defs>
             <marker id="tip" viewBox="0 0 10 10" refX="8" refY="5" markerUnits="userSpaceOnUse" markerWidth="26" markerHeight="26" orient="auto-start-reverse"><path d="M0.5 1 L9 5 L0.5 9" fill="none" stroke="currentColor" stroke-width="1.3"/></marker>
@@ -130,7 +130,7 @@ <h2 id="h-how" class="h2 h2-big">One frame, taken apart.</h2>
     {%- set fw = 300 -%}{%- set fh = 168.75 -%}{%- set sh = fh / 8 -%}
     <svg viewBox="0 0 1200 384" role="img" aria-label="A frame of the desktop is captured whole on the Mac, cut into eight datagrams that cross the network, one is lost and sent again, and the frame is put back together on the PC.">
       <defs>
-        <image id="frm" href="{{ get_url(path='img/frame-halftone.png') }}" width="{{ fw }}" height="{{ fh }}" preserveAspectRatio="none"/>
+        <image id="frm" href="/img/frame-halftone.png" width="{{ fw }}" height="{{ fh }}" preserveAspectRatio="none"/>
         {%- for i in range(end=8) %}
         <clipPath id="s{{ i }}"><rect x="0" y="{{ i * sh }}" width="{{ fw }}" height="{{ sh - 0.6 }}"/></clipPath>
         {%- endfor %}