Layout: Revert SVG inlining and compress SVGs

.github/workflows/hugo.yml

@@ -32,6 +32,10 @@ jobs:
           && sudo dpkg -i ${{ runner.temp }}/hugo.deb
       - name: Install Dart Sass
         run: sudo snap install dart-sass
+      - name: Install compression dependencies
+        run: |
+          sudo snap install svgo
+          && sudo apt install scour
       - name: Checkout
         uses: actions/checkout@v4
         with:
@@ -47,6 +51,10 @@ jobs:
           && pip install ${{ runner.temp }}/markdown-preprocessor
       - name: Run Markdown preprocessor
         run: "[[ -f assets/bibliography.json ]] && find content/post -type f -iname '*.md' -exec preprocess-citations -i --bibliography=assets/bibliography.json {} \\; || echo 'No bibliography found'"
+      - name: Compress SVGs
+        run: |
+          find . -type f -iname '*.svg' -exec bash -c 'scour {} | svgo --multipass - -o {}.min' \;
+          && find . -type f -iname '*.svg.min' -exec sh -c 'for f; do mv "$f" "${f%.min}"; done' sh {} +
       - name: Build with Hugo
         env:
           # For maximum backward compatibility with Hugo modules

assets/jsconfig.json

@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+  "baseUrl": ".",
+  "paths": {
+   "*": [
+    "../../../.cache/hugo_cache/modules/filecache/modules/pkg/mod/github.com/!cai!jimmy/hugo-theme-stack/[email protected]/assets/*"
+   ]
+  }
+ }
+}

assets/scss/custom.scss

@@ -7,7 +7,7 @@
 
 /* Invert the colors of images in dark theme */
 
-html[data-scheme="dark"] svg.svg-diagram {
+html[data-scheme="dark"] img.svg {
   filter: invert(73.828125%);
 }
 

layouts/_default/_markup/render-image.html

@@ -25,7 +25,6 @@
 	{{- end -}}
 {{- end -}}
 
-{{- if $notSVG -}}
 <img src="{{ $Permalink }}"
 	{{ with $Width }}width="{{ . }}"{{ end }}
 	{{ with $Height }}height="{{ . }}"{{ end }}
@@ -42,10 +41,4 @@
 		data-flex-grow="{{ div (mul $image.Width 100) $image.Height }}"
 		data-flex-basis="{{ div (mul $image.Width 240) $image.Height }}px"
 	{{ end }}
->
-{{- else -}}
-{{ 
-	replaceRE "(width|height)=\"([A-Za-z0-9,.-]*)?\"" "width=100% class=\"svg-diagram\"" $image.Content 2
-	| safeHTML
-}}
-{{- end -}}
+>