✨ Add asset fingerprinting and SRI

CHANGELOG.md

@@ -15,6 +15,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Multiple colour schemes
 - Edit links on article pages
 - Icons for Foursquare and Pinterest
+- Asset fingerprinting and SRI
+- CSS minification for custom stylesheets
+
+### Changed
+
+- Static assets are now managed through Hugo Pipelines
 
 ### Fixed
 

exampleSite/content/docs/advanced-customisation.md

@@ -23,9 +23,9 @@ Use one of the existing theme stylesheets as a template. You are free to define
 
 ## Overriding the stylesheet
 
-Sometimes you need to add a custom style to style your own HTML elements. Congo provides for this scenario by allowing you to overrid the default styles in your own CSS stylesheet. Simply create a `custom.css` file in your project's `static/css/` folder.
+Sometimes you need to add a custom style to style your own HTML elements. Congo provides for this scenario by allowing you to overrid the default styles in your own CSS stylesheet. Simply create a `custom.css` file in your project's `assets/css/` folder.
 
-The `custom.css` file will be loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.
+The `custom.css` file will be minified by Hugo and loaded automatically after all the other theme styles which means anything in your custom file will take precedence over the defaults.
 
 ## Building from source
 
@@ -47,18 +47,16 @@ To allow for easy theme colour changes, Congo defines a three-colour palette tha
 
 For a full list of colours available, and their corresponding configuration values, see the official [Tailwind docs](https://tailwindcss.com/docs/customizing-colors#color-palette-reference).
 
-After editing the configuration, you need to rebuild the theme's stylesheets.
+After editing the configuration, you need to rebuild the theme's stylesheets. This will run the Tailwind JIT compiler in watch mode which aids with testing style changes.
-
-```bash
-npm run build
-```
-
-This will automatically output a minified CSS file to `/themes/congo/static/css/main.css`.
-
-To aid with testing style changes, you can also run the Tailwind JIT comiler in watch mode.
 
 ```bash
 npm run dev
 ```
 
-Now whenever you make a change, the (non-minified) CSS files will be rebuilt automatically. This mode is useful to run when using `hugo server` to preview your site during development. Remember to perform a full build before publishing your website.
+This will automatically output a CSS file to `/themes/congo/assets/css/compiled/main.css`.
+
+{{< alert >}}
+**Note:** You should make manual edits to the compiled CSS file.
+{{< /alert >}}
+
+Now whenever you make a change, the CSS files will be rebuilt automatically. This mode is useful to run when using `hugo server` to preview your site during development. Asset files will be minified by Hugo at site build time.

layouts/partials/head.html

@@ -27,16 +27,35 @@
     {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }}
   {{ end -}}
   {{/* Styles */}}
-  {{ $cssScheme := resources.Get (printf "css/schemes/%s.css" (.Site.Params.colorScheme | default "congo")) }}
+  {{ $schemeCSS := resources.Get (printf "css/schemes/%s.css" (.Site.Params.colorScheme | default "congo")) }}
-  {{ if not $cssScheme }}
+  {{ if not $schemeCSS }}
-    {{ $cssScheme = resources.Get "css/schemes/congo.css" }}
+    {{ $schemeCSS = resources.Get "css/schemes/congo.css" }}
+  {{ end }}
+  {{ $schemeStyles := $schemeCSS | resources.Minify | resources.Fingerprint "sha512" }}
+  <link
+    type="text/css"
+    rel="stylesheet"
+    href="{{ $schemeStyles.Permalink }}"
+    integrity="{{ $schemeStyles.Data.Integrity }}"
+  />
+  {{ $mainCSS := resources.Get "css/compiled/main.css" }}
+  {{ $mainStyles := $mainCSS | resources.Minify | resources.Fingerprint "sha512" }}
+  <link
+    type="text/css"
+    rel="stylesheet"
+    href="{{ $mainStyles.Permalink }}"
+    integrity="{{ $mainStyles.Data.Integrity }}"
+  />
+  {{ $customCSS := resources.Get "css/custom.css" }}
+  {{ if $customCSS }}
+    {{ $customStyles := $customCSS | resources.Minify | resources.Fingerprint "sha512" }}
+    <link
+      type="text/css"
+      rel="stylesheet"
+      href="{{ $customStyles.Permalink }}"
+      integrity="{{ $customStyles.Data.Integrity }}"
+    />
   {{ end }}
-  {{ $stylesheet := $cssScheme | resources.Minify }}
-  <link type="text/css" rel="stylesheet" href="{{ $stylesheet.Permalink }}" />
-  <link type="text/css" rel="stylesheet" href="{{ "css/main.css" | absURL }}" />
-  {{ if (fileExists "static/css/custom.css") -}}
-    <link type="text/css" rel="stylesheet" href="{{ "css/custom.css" | absURL }}" />
-  {{- end }}
   {{/* Icons */}}
   {{ if templates.Exists "partials/favicons.html" }}
     {{ partialCached "favicons.html" .Site }}

package.json

@@ -4,8 +4,7 @@
   "description": "Congo theme for Hugo",
   "main": "index.js",
   "scripts": {
-    "dev": "NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./static/css/main.css --jit -w",
+    "dev": "NODE_ENV=development ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./assets/css/compiled/main.css --jit -w",
-    "build": "NODE_ENV=production ./node_modules/tailwindcss/lib/cli.js -i ./assets/css/main.css -o ./static/css/main.css --jit --minify",
     "example": "hugo server --source exampleSite --themesDir ../.. --buildDrafts"
   },
   "repository": {