fix: mermaid script was skipped on home page (#637)

* chore(ci): add support for building docs for multiple versions

* chore(ci): enable fetching tags in GitHub Actions workflow

* chore(build): add v0.8.6 version to build script

.devcontainer/devcontainer.json

@@ -3,7 +3,7 @@
   "features": {
     "ghcr.io/devcontainers/features/hugo:1": {
       "extended": true,
-      "version": "0.131.0"
+      "version": "0.145.0"
     },
     "ghcr.io/devcontainers/features/node:1": {}
   },

.github/workflows/pages.yml

@@ -1,5 +1,5 @@
-# Sample workflow for building and deploying a Hugo site to GitHub Pages
-name: Deploy Hugo site to Pages
+# Build and deploy Hextra docs site to GitHub Pages
+name: Deploy Hextra docs site to Pages
 
 on:
   # Runs on pushes targeting the default branch
@@ -36,34 +36,38 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
         with:
-          fetch-depth: 0  # fetch all history for .GitInfo and .Lastmod
+          fetch-depth: 0 # fetch all history for .GitInfo and .Lastmod
+          fetch-tags: true
           submodules: recursive
+
       - name: Setup Go
         uses: actions/setup-go@v5
         with:
-          go-version: '1.23'
+          go-version: "1.24"
+
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v5
+
       - name: Setup Hugo
         run: |
           wget -O ${{ runner.temp }}/hugo.deb https://github.com/gohugoio/hugo/releases/download/v${HUGO_VERSION}/hugo_extended_${HUGO_VERSION}_linux-amd64.deb \
           && sudo dpkg -i ${{ runner.temp }}/hugo.deb
-      - name: Build with Hugo
+
+      - name: Make build script executable
+        run: chmod +x ./build.sh
+
+      - name: Build all site versions
         env:
-          # For maximum backward compatibility with Hugo modules
           HUGO_ENVIRONMENT: production
           HUGO_ENV: production
-        # Use the latest release of the theme to build exampleSite
         run: |
-          cd exampleSite && rm go.mod
-          hugo mod init github.com/imfing/hextra/exampleSite
-          hugo mod get -u github.com/imfing/hextra
-          hugo --minify --baseURL "${{ steps.pages.outputs.base_url }}/"
+          ./build.sh "${{ steps.pages.outputs.base_url }}"
+
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3
         with:
-          path: ./exampleSite/public
+          path: ./public
 
   # Deployment job
   deploy:

build.sh

@@ -0,0 +1,55 @@
+#!/bin/bash
+set -e
+
+# Specify the base URL
+BASE_URL=${1:-"http://localhost:1313"}
+
+echo "Using base URL: $BASE_URL"
+
+# Version configuration - modify these arrays to specify versions to build
+# Format: "ref:display_name" (ref can be tag, branch, or commit hash, display name is what will appear in URL)
+MAIN_VERSION="v0.9.6:latest"
+VERSIONS=(
+  "main:latest" # latest version always builds from main
+  "v0.9.6:v0.9"
+  "v0.8.6:v0.8"
+)
+
+# Parse main version
+IFS=':' read -r MAIN_REF MAIN_NAME <<< "$MAIN_VERSION"
+
+# Ensure clean public directory
+rm -rf public
+mkdir -p public
+mkdir -p public/versions
+
+# Checkout and build main site
+git checkout $MAIN_REF
+GIT_HASH=$(git rev-parse --short HEAD)
+echo "Building main site from $MAIN_REF (commit: $GIT_HASH)"
+hugo \
+  --minify \
+  --themesDir=../.. --source=exampleSite \
+  --baseURL "$BASE_URL/" \
+  --destination=../public
+
+# Build all versions
+for VERSION in "${VERSIONS[@]}"; do
+  IFS=':' read -r REF NAME <<< "$VERSION"
+
+  git checkout $REF
+  GIT_HASH=$(git rev-parse --short HEAD)
+  echo "Building version $NAME from $REF (commit: $GIT_HASH)"
+
+  mkdir -p "public/versions/$NAME"
+  hugo \
+    --minify \
+    --themesDir=../.. --source=exampleSite \
+    --baseURL "$BASE_URL/versions/$NAME/" \
+    --destination="../public/versions/$NAME"
+done
+
+# Return to main branch
+git checkout main
+
+echo "Build completed"

exampleSite/content/showcase/index.md

@@ -12,6 +12,13 @@ Open source projects powered by Hextra
 </p>
 
 {{< cards >}}
+  {{< card
+        link="https://github.com/claceio/clace"
+        title="Clace"
+        image="https://github.com/user-attachments/assets/55de142c-eb21-4402-81db-bc64417eaae2"
+        imageStyle="object-fit:cover; aspect-ratio:16/9;"
+  >}}
+
   {{< card
         link="https://github.com/regolith-linux/regolith-desktop.com"
         title="Regolith Desktop"

layouts/_default/_markup/render-codeblock-mermaid.html

@@ -1,4 +1,4 @@
 <pre class="mermaid hx-mt-6">
-  {{- .Inner | safeHTML -}}
+  {{ .Inner | htmlEscape | safeHTML }}
 </pre>
 {{- .Page.Store.Set "hasMermaid" true -}}

layouts/partials/components/codeblock.html

@@ -25,5 +25,5 @@
 {{- if transform.CanHighlight $lang -}}
   <div>{{- highlight $content $lang $options -}}</div>
 {{- else -}}
-  <pre><code>{{ $content }}</code></pre>
+  <div><pre><code>{{ $content }}</code></pre></div>
 {{- end -}}

layouts/partials/scripts.html

@@ -5,8 +5,7 @@
 {{- partial "scripts/search.html" . -}}
 
 {{/* Mermaid */}}
-{{/* FIXME: need to investigate .Page.Store hasMermaid is set for homepage */}}
-{{- if and (.Page.Store.Get "hasMermaid") (not .Page.IsHome) -}}
+{{- if (.Store.Get "hasMermaid") -}}
   {{- partial "scripts/mermaid.html" . -}}
 {{- end -}}
 

layouts/partials/sidebar.html

@@ -144,7 +144,13 @@
         <span class="hx-cursor-default">{{ $name }}</span>
       </li>
     {{ else }}
-      <li>{{ template "sidebar-item-link" dict "active" false "title" $name "link" (.URL | relLangURL) }}</li>
+      {{- $link := .URL -}}
+      {{- with .PageRef -}}
+        {{- if hasPrefix . "/" -}}
+          {{- $link = relLangURL (strings.TrimPrefix "/" .) -}}
+        {{- end -}}
+      {{- end -}}
+      <li>{{ template "sidebar-item-link" dict "active" false "title" $name "link" $link }}</li>
     {{ end }}
   {{- end -}}
 {{- end -}}

layouts/shortcodes/filetree/container.html

@@ -1,5 +1,5 @@
 <div class="hextra-filetree hx-mt-6 hx-select-none hx-text-sm hx-text-gray-800 dark:hx-text-gray-300 not-prose">
   <div class="hx-inline-block hx-rounded-lg hx-border hx-px-4 hx-py-2 dark:hx-border-neutral-800">
-    {{- .Inner -}}
+    {{- .InnerDeindent -}}
   </div>
 </div>

layouts/shortcodes/filetree/folder.html

@@ -12,6 +12,6 @@
     <span class="ltr:hx-ml-1 rtl:hx-mr-1">{{ $name }}</span>
   </button>
   <ul data-state="{{ $state }}" class="ltr:hx-pl-5 rtl:hx-pr-5 data-[state=closed]:hx-hidden">
-    {{- .Inner -}}
+    {{- .InnerDeindent -}}
   </ul>
 </li>