Minify CSS

.github/workflows/ci-build-deploy.yaml

@@ -23,12 +23,12 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Set up node"
+      - name: Set up Node
         uses: actions/setup-node@v4
         with:
           node-version: "22"
 
-      - name: Install"
+      - name: Install dependencies
         run: npm ci
 
       - name: Run lint check
@@ -48,12 +48,12 @@ jobs:
       - name: Setup Pages
         uses: actions/configure-pages@v5
 
-      - name: Set up node"
+      - name: Set up Node
         uses: actions/setup-node@v4
         with:
           node-version: "22"
 
-      - name: Install
+      - name: Install dependencies
         run: npm ci
 
       - name: Build site

content/08-more-improvements/index.md

@@ -32,12 +32,11 @@ can be created from files.
 In our case, we'll use a _ConfigMap_ to store the database initialization SQL script, which will then be mounted into
 the Postgres container.
 
-The SQL script can be
-[found here](https://raw.githubusercontent.com/benc-uk/kube-workshop/refs/heads/main/08-more-improvements/nanomon_init.sql).
-You can grab into a file using `curl` like so:
+The SQL script can be [found & downloaded here](./nanomon_init.sql). You can grab it straight into a file using `curl`
+like so:
 
 ```bash
-curl -O https://raw.githubusercontent.com/benc-uk/kube-workshop/refs/heads/main/08-more-improvements/nanomon_init.sql
+curl -O https://kube-workshop.benco.io/08-more-improvements/nanomon_init.sql
 ```
 
 We can then create a _ConfigMap_ from this file using `kubectl`

content/10-extra-advanced/index.md

@@ -269,5 +269,7 @@ Now to deploy the app with Helm, run the command below:
 helm install demo nanomon/nanomon --values values.yaml
 ```
 
+The release name is `demo` here, however you can choose any name you wish.
+
 Validate the deployment as before with `helm` and `kubectl` and check you can access the app in the browser using the
 same ingress IP address as before.

content/_includes/default.njk

@@ -18,8 +18,9 @@
 
     <title>{{ title }} {{ icon }}</title>
 
+    {%- set css %} {% include "main.css" %} {%- endset %}
     <style>
-      {% include "main.css" %}
+      {{ css | cssmin | safe }}
     </style>
   </head>
 
@@ -41,19 +42,15 @@
            <hr>
           {%- for section in collections.section -%}
           <li> 
-            <a href="{{ section.page.url }}"
-              >{{ section.data.index | zeroPad }}: {{ section.data.icon }} {{ section.data.title }}</a
-            >
+            <a href="{{ section.page.url }}">{{ section.data.index | zeroPad }}: {{ section.data.icon }} {{ section.data.title }}</a>
           </li>
           {%- endfor -%}
         </ul>
         <hr>
         <ul>
           {%- for section in collections.extra -%}
           <li> 
-            <a href="{{ section.page.url }}"
-              >{{ section.data.index | zeroPad }}: {{ section.data.icon }} {{ section.data.title }}</a
-            > 
+            <a href="{{ section.page.url }}">{{ section.data.index | zeroPad }}: {{ section.data.icon }} {{ section.data.title }}</a> 
           </li>
           {%- endfor -%}
           <hr>
@@ -65,10 +62,10 @@
       {{ content | safe }}
       <hr>
 
+      {%- set prev = collections.section | getPreviousCollectionItem %}
+      {%- set next = collections.section | getNextCollectionItem %}
       <footer>
         <a href="/">🏠 Home </a>
-        {% set prev = collections.section | getPreviousCollectionItem %}
-        {% set next = collections.section | getNextCollectionItem %}
         {%- if prev %}
         ‖ <a href="{{ prev.url }}">⏪ Previous Section</a> 
         {%- endif -%}

eleventy.config.js

@@ -1,6 +1,7 @@
 import syntaxHighlight from "@11ty/eleventy-plugin-syntaxhighlight";
 import markdownIt from "markdown-it";
 import markdownItAttrs from "markdown-it-attrs";
+import CleanCSS from "clean-css";
 
 export default function (eleventyConfig) {
   eleventyConfig.addPlugin(syntaxHighlight);
@@ -49,5 +50,10 @@ export default function (eleventyConfig) {
   const markdownLib = markdownIt(options)
     .use(markdownItAttrs)
     .use(externalLinksPlugin);
+
+  eleventyConfig.addFilter("cssmin", function (code) {
+    return new CleanCSS({}).minify(code).styles;
+  });
+
   eleventyConfig.setLibrary("md", markdownLib);
 }

package.json

@@ -15,6 +15,7 @@
   "dependencies": {
     "@11ty/eleventy": "^3.1.2",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
+    "clean-css": "^5.3.3",
     "markdown-it": "^14.1.0",
     "markdown-it-attrs": "^4.3.1",
     "prettier": "^3.6.2"