Merge pull request #16 from ethmarks/load-asset-refactor

ethmarks · web-flow · commit f18fcef93e99 · 2025-09-18T16:43:20.000-04:00
Refactor load-assets.html partial into css.html and js.html
diff --git a/assets/js/404.sync.js b/assets/js/404.sync.js
diff --git a/assets/js/home.js b/assets/js/home.js
diff --git a/assets/js/thessa.js b/assets/js/thessa.js
diff --git a/content/posts/personalwebsite.md b/content/posts/personalwebsite.md
@@ -59,15 +59,14 @@ Every page layout has its own Sass file that imports the modules that page needs
 @import 'components/random-post-btn';
 ```
 
-These Sass files are then transpiled into normal CSS and imported into the page using my custom `load-assets` [partial](https://gohugo.io/functions/partials/include/) that allows me to just input a list of assets, and have the partial automatically generate the HTML imports. For example, here's the code that the posts page uses.
+These Sass files are then transpiled into normal CSS and imported into the page using some custom [partials](https://gohugo.io/functions/partials/include/) I wrote that take a file name as an input and automatically minifies and transpiles the asset, and then generates the HTML import for that file. For example, here's the code at the top of [the posts index page](/posts).
 
 ```go-html-template
-{{ define "resources" }}
-{{ partial "load-assets.html" (slice "css/posts.scss" "js/components/randompost.js") }}
-{{ end }}
+{{ partial "css.html" "posts.scss" }}
+{{ partial "js.html" "components/randompost.js" }}
 ```
 
-And here's the HTML that the partial generates.
+And here's the HTML that the partial generates. Note that it transpiled the SCSS into CSS, minified both assets, and added `defer` to the script.
 
 ```html
 <link rel="stylesheet" href="/css/posts.min.css" />
@@ -109,7 +108,7 @@ As of August 31, 2025, the site earns a perfect 100 on [Lighthouse](https://deve
 
 My site's performance is largely due to it being lightweight and carefully optimized.
 - **Static Rendering**: All of my site's content is present in the HTML. Unlike some sites that use [JSX](https://react.dev/learn/writing-markup-with-jsx) and [client-side rendering](https://developer.mozilla.org/en-US/docs/Glossary/CSR) to dynamically [hydrate](https://en.wikipedia.org/wiki/Hydration_(web_development)) their pages using JavaScript, my site render all content at build time. This uses much less processing power on your device and makes the page load much faster.
-- **Optimized CSS and JS**: Each page on my site only loads the resources that it needs, and the resources that it does import are minified. I used my custom `load-assets` partial to automate this process slightly. I discussed `load-assets` in more detail in the [Sass](#sass) section. This per-page approach minimizes the data that needs to be downloaded and allows the page to load faster.
+- **Optimized CSS and JS**: Each page on my site only loads the resources that it needs, and the resources that it does import are minified. I used custom partials to automate this process slightly, as discussed in the [Sass section](#sass). This per-page approach minimizes the data that needs to be downloaded and allows the page to load faster.
 - **Optimized Images and Videos**: The images, videos, and animations on my website use the [WebP](https://en.wikipedia.org/wiki/WebP) and [WebM](https://en.wikipedia.org/wiki/WebM) formats, which allows them to load faster and use less data.
 
 ## Privacy
diff --git a/layouts/404.html b/layouts/404.html
@@ -1,7 +1,8 @@
 {{ define "resources" }}
 <link rel="preload" href="/fonts/Kenia.woff2" as="font" type="font/woff2" crossorigin />
-{{- partial "load-assets.html" (slice "css/404.scss" "js/pages/404.sync.js") -}}
-{{ end }}
+{{ partial "css.html" "404.scss" }}
+{{ partial "js.html" "404.sync.js" }}
+{{- end }}
 
 {{ define "main" }}
 <h1 class="nomint">404</h1>
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -4,7 +4,8 @@
 {{ partial "metadata.html" . -}}
 {{- block "resources" . }}{{ end }}
 {{- block "default-resources" . -}}
-{{- partial "load-assets.html" (slice "js/common.sync.js" "js/vendor/quicklink.async.js") -}}
+{{ partial "js.html" "common.sync.js" }}
+{{ partial "js.html" "vendor/quicklink.async.js" }}
 {{- end -}}
 {{ partial "font-preload.html" . }}
 </head>
diff --git a/layouts/_default/taxonomy.html b/layouts/_default/taxonomy.html
@@ -1,5 +1,5 @@
 {{ define "resources" }}
-{{- partial "load-assets.html" (slice "css/tag.scss") -}}
+{{ partial "css.html" "tag.scss" }}
 {{ end }}
 
 {{ define "main" }}
diff --git a/layouts/_default/terms.html b/layouts/_default/terms.html
@@ -1,5 +1,5 @@
 {{ define "resources" }}
-{{- partial "load-assets.html" (slice "css/tags.scss") -}}
+{{ partial "css.html" "tags.scss" }}
 {{ end }}
 
 {{ define "main" }}
diff --git a/layouts/about/list.html b/layouts/about/list.html
@@ -1,5 +1,7 @@
 {{ define "resources" }}
-{{- partial "load-assets.html" (slice "css/about.scss" "js/components/gitstats.js" "js/components/daysalive.js") -}}
+{{ partial "css.html" "about.scss" }}
+{{ partial "js.html" "components/gitstats.js" }}
+{{ partial "js.html" "components/daysalive.js" }}
 {{ end }}
 
 {{ define "main" }}
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,5 +1,6 @@
 {{ define "resources" }}
-{{- partial "load-assets.html" (slice "css/home.scss" "js/pages/home.js") -}}
+{{ partial "css.html" "home.scss" }}
+{{ partial "js.html" "home.js" }}
 {{ end }}
 
 {{ define "main" }}
diff --git a/layouts/partials/css.html b/layouts/partials/css.html
@@ -0,0 +1,16 @@
+{{- with (. | printf "css/%s") -}}
+{{- $ext := path.Ext . -}}
+{{- $asset := resources.Get . -}}
+{{- if not $asset -}}
+    {{- errorf "Asset not found: %s" . -}}
+{{- end -}}
+{{- if not (or (eq $ext ".css") (eq $ext ".scss")) }}
+    {{- errorf "Non-style asset used with css partial: %s" . -}}
+{{- end -}}
+{{- $processed := $asset -}}
+{{- if eq $ext ".scss" -}}
+    {{- $processed = $processed | toCSS -}}
+{{- end -}}
+{{- $processed = $processed | minify -}}
+<link rel="stylesheet" href="{{ $processed.Permalink }}" />
+{{- end -}}
diff --git a/layouts/partials/js.html b/layouts/partials/js.html
@@ -0,0 +1,19 @@
+{{- with (. | printf "js/%s") -}}
+{{- $ext := path.Ext . -}}
+{{- $asset := resources.Get . -}}
+{{- if not $asset -}}
+    {{- errorf "Asset not found: %s" . -}}
+{{- end -}}
+{{- if not (eq $ext ".js") }}
+    {{- errorf "Non-script asset used with js partial: %s" . -}}
+{{- end -}}
+{{- $processed := $asset -}}
+{{- $processed = $processed | minify -}}
+{{- $attr := "defer" -}}
+{{- if strings.HasSuffix . ".sync.js" }}
+{{- $attr = ""  -}}
+{{- else if strings.HasSuffix . ".async.js" }}
+{{- $attr = "async"  -}}
+{{- end -}}
+<script src="{{ $processed.Permalink }}" {{ $attr }}></script>
+{{- end -}}
diff --git a/layouts/partials/load-assets.html b/layouts/partials/load-assets.html
diff --git a/layouts/posts/list.html b/layouts/posts/list.html
@@ -1,5 +1,6 @@
 {{ define "resources" }}
-{{- partial "load-assets.html" (slice "css/posts.scss" "js/components/randompost.js") -}}
+{{ partial "css.html" "posts.scss" }}
+{{ partial "js.html" "components/randompost.js" }}
 {{ end }}
 
 {{ define "main" }}
diff --git a/layouts/posts/single.html b/layouts/posts/single.html
@@ -1,5 +1,5 @@
 {{ define "resources" }}
-{{- partial "load-assets.html" (slice "css/post.scss") -}}
+{{ partial "css.html" "post.scss" }}
 {{ end }}
 
 {{ define "main" }}
diff --git a/layouts/thessa/list.html b/layouts/thessa/list.html
@@ -1,5 +1,6 @@
 {{ define "resources" }}
-{{- partial "load-assets.html" (slice "css/thessa.scss" "js/pages/thessa.js") -}}
+{{ partial "css.html" "thessa.scss" }}
+{{ partial "js.html" "thessa.js" }}
 {{ end }}
 
 {{ define "main" }}
