Vendor all site assets for air-gapped build and runtime

.gitignore

@@ -4,9 +4,6 @@ resources/
 .hugo_build.lock
 hugo_stats.json
 
-# Node.js dependencies
-node_modules/
-
 # OS generated files
 .DS_Store
 Thumbs.db

Dockerfile

@@ -7,16 +7,12 @@ RUN apk add --no-cache \
     ca-certificates \
     git \
     hugo \
-    nodejs \
-    npm
+    nodejs
 
-# Copy dependency manifests first for better layer caching
-COPY package.json package-lock.json ./
-RUN npm ci
-
-# Copy the rest of the project and build
+# Copy the project, including vendored frontend dependencies, and build
 COPY . .
 ARG BASE_URL=http://localhost:8888
+RUN test -d node_modules
 RUN hugo --minify --gc --baseURL "${BASE_URL}"
 
 # Stage 2: Serve the static site with nginx

README.md

@@ -43,15 +43,16 @@ podman run --rm -p 9090:80 dok2docker
 ## Local development
 
 ```bash
-# Install Node.js dependencies (includes the Doks theme)
-npm install
-
 # Start the Hugo development server with live reload
 npm run dev
 ```
 
 The development server starts at [http://localhost:1313](http://localhost:1313).
 
+The repository now vendors the frontend dependencies under `node_modules/` so the
+site can be built in an air-gapped environment without fetching scripts, icons,
+fonts, or theme packages from npm.
+
 ## Content
 
 Documentation pages live under `content/docs/`. Add or edit `.md` files to update the site:

assets/js/mermaid-init.js

@@ -0,0 +1,40 @@
+import mermaid from '../vendor/mermaid/mermaid.esm.min.mjs';
+
+(() => {
+  const elements = Array.from(document.querySelectorAll('.mermaid'));
+  if (!elements.length) {
+    return;
+  }
+
+  elements.forEach((ele) => {
+    ele.setAttribute('data-mermaid-src', ele.innerHTML);
+  });
+
+  const resetElements = () => {
+    return new Promise((resolve) => {
+      elements.forEach((ele) => {
+        ele.innerHTML = ele.getAttribute('data-mermaid-src') || '';
+        ele.removeAttribute('data-processed');
+      });
+      resolve();
+    });
+  };
+
+  const getTheme = () => {
+    const theme = document.documentElement.getAttribute('data-bs-theme');
+    return theme === 'dark' ? 'dark' : 'default';
+  };
+
+  const init = (theme) => {
+    mermaid.initialize({ theme });
+    mermaid.run({ nodes: elements });
+  };
+
+  init(getTheme());
+
+  document.addEventListener('themeChanged', () => {
+    resetElements()
+      .then(() => init(getTheme()))
+      .catch(console.error);
+  });
+})();

config/_default/module.toml

@@ -78,6 +78,10 @@
   source = "node_modules/@thulite/images/assets"
   target = "assets"
 
+[[mounts]]
+  source = "node_modules/mermaid/dist"
+  target = "assets/vendor/mermaid"
+
 [[mounts]]
   source = "hugo_stats.json"
   target = "assets/watching/hugo_stats.json"
@@ -91,6 +95,14 @@
   source = "node_modules/@thulite/doks-core/static"
   target = "static"
 
+[[mounts]]
+  source = "node_modules/katex/dist"
+  target = "static/vendor/katex"
+
+[[mounts]]
+  source = "node_modules/mathjax"
+  target = "static/vendor/mathjax"
+
 [[mounts]]
   source = "static"
   target = "static"

content/docs/prologue/introduction.md

@@ -86,21 +86,22 @@ podman run --rm -p 9090:80 dok2docker
 To preview the site locally without Podman, install the prerequisites and use the npm scripts:
 
 ```bash
-# Install Node.js dependencies (includes the Doks theme)
-npm install
-
 # Start the Hugo development server with live reload
 npm run dev
 ```
 
 The development server will start at [http://localhost:1313](http://localhost:1313).
 
+The repository vendors the Doks/Thulite frontend dependencies under `node_modules/`
+so the site can be built in an air-gapped environment without downloading scripts,
+icons, fonts, or other theme assets at build time.
+
 ## Directory structure
 
 ```
 dok2docker/
 ├── Dockerfile                      # Multi-stage build: Hugo → nginx
-├── package.json                    # Node.js dependencies (Doks theme)
+├── package.json                    # Node.js dependencies (vendored in node_modules/)
 ├── config/
 │   └── _default/
 │       ├── hugo.toml               # Hugo site configuration

layouts/_partials/footer/script-footer.html

@@ -0,0 +1,29 @@
+{{ $bootstrapJavascript := site.Params.doks.bootstrapJavascript -}}
+{{ if $bootstrapJavascript -}}
+  {{ partial "footer/esbuild" (dict "src" "js/bootstrap.js" "load" "async" "transpile" false) -}}
+{{- end }}
+
+{{ partial "footer/esbuild" (dict "src" "js/app.js" "targetPath" "main.js" "load" "async" "transpile" false) -}}
+
+{{ partial "footer/script-footer-custom.html" . -}}
+
+{{ partial "main/showFlexSearch" . -}}
+{{ $showFlexSearch := .Scratch.Get "showFlexSearch" -}}
+{{ $searchLimit := site.Params.doks.searchLimit -}}
+{{ if $showFlexSearch -}}
+  {{- /* use lang-specific FlexSearch JS config file for multilingual site */ -}}
+  {{- $flexsearchLangConfigPath := "" -}}
+  {{- if site.LanguagePrefix -}}
+    {{- $flexsearchLangConfigPath = printf "js/flexsearch.%s.js" site.Language.Lang -}}
+    {{- /*  NOTE: we have to assign the pipe below to avoid outputting its return value ($flexsearchLangConfigPath) */ -}}
+    {{- $unusedVar := resources.Get "js/flexsearch.js" | resources.Copy $flexsearchLangConfigPath -}}
+  {{- else -}}
+    {{- $flexsearchLangConfigPath = "js/flexsearch.js" -}}
+  {{- end -}}
+  {{ partial "footer/esbuild-template" (dict "src" $flexsearchLangConfigPath "load" "async" "transpile" false "isMultilingual" hugo.IsMultilingual "searchLimit" $searchLimit) -}}
+  {{ partial "footer/esbuild" (dict "src" "js/search-modal.js" "load" "async" "transpile" false) -}}
+{{ end -}}
+
+{{ if .Store.Get "hasMermaid" -}}
+  {{ partial "footer/esbuild" (dict "src" "js/mermaid-init.js" "load" "defer" "transpile" false) -}}
+{{- end }}

layouts/_partials/main/katex.html

@@ -0,0 +1,21 @@
+<link rel="stylesheet" href="{{ "vendor/katex/katex.min.css" | absURL }}">
+
+<!-- The loading of KaTeX is deferred to speed up page rendering -->
+<script defer src="{{ "vendor/katex/katex.min.js" | absURL }}"></script>
+
+<!-- To automatically render math in text elements, include the auto-render extension: -->
+<script defer src="{{ "vendor/katex/contrib/auto-render.min.js" | absURL }}"
+    onload="renderMathInElement(document.body);"></script>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function() {
+    renderMathInElement(document.body, {
+      delimiters: [
+        {left: '\\[', right: '\\]', display: true},
+        {left: '$$', right: '$$', display: true},
+        {left: '\\(', right: '\\)', display: false},
+      ],
+      throwOnError : false
+    });
+  });
+</script>

layouts/_partials/main/mathjax.html

@@ -0,0 +1,12 @@
+<script>
+  MathJax = {
+    tex: {
+      displayMath: [['\\[', '\\]'], ['$$', '$$']],
+      inlineMath: [['\\(', '\\)']]
+    },
+    loader:{
+      load: ['ui/safe']
+    },
+  };
+</script>
+<script defer src="{{ "vendor/mathjax/tex-mml-chtml.js" | absURL }}"></script>