Merge branch 'master' into dependabot/npm_and_yarn/11ty/eleventy-img-6.0.4

Author: dannystaple

README.md

@@ -5,13 +5,29 @@ Orionrobots website source
 CC BY SA 3.0 - <http://creativecommons.org/licenses/by-sa/3.0/>
 Creative Commons By Attribution Share-Alike v3.0
 
+## Running serve and build in docker
+
+```bash
+docker compose up dist
+docker compose run --interactive --rm serve npm run dev
+docker compose up serve
+```
+
+Get a bash prompt with `docker compose run --interactive serve bash`
+
+## Running locally
+
+You may need to determine dependencies - the docker method is preferred.
+
 Serve only:
 
 ```bash
 npm install
 npm run serve
 ```
 
+## If you make changes to htaccess
+
 For an experience closer to hosting, use docker compose:
 
 ```bash
@@ -22,13 +38,10 @@ Attaching to orionrobotsgithubio-web-1
 orionrobotsgithubio-web-1  | ruby 3.1.1p18 (2022-02-18 revision 53f5fc4236) [x86_64-linux-musl]
 ```
 
-## Running serve and build in docker
+## If you make changes to css bundle content
+
+You will need to rerun the dist task:
 
 ```bash
-docker compose run  --interactive --rm serve npm install
-docker compose run --interactive --rm  serve npm run dev
-docker compose up serve
+docker compose up --rm dist
 ```
-
-Get a bash prompt with `docker compose run --interactive serve bash`
-

docker-compose.yml

@@ -1,26 +1,34 @@
 services:
   dist:
-    image: node:18-bullseye
+    build:
+      context: .
+      dockerfile: Dockerfile.dist
     command: ["npm", "run", "dist"]
     volumes:
       - .:/src
     working_dir: /src
 
   dist_clean:
+    build:
+      context: .
+      dockerfile: Dockerfile.dist
     volumes:
       - .:/src
     working_dir: /src
     image: node:18-bullseye
     command: ["rm", "-rf", "dist"]
 
-  web:
-    build: _drafts/staging
-    ports:
-      - 8080:80
-    volumes:
-      - ./_site:/var/www/html
+  # web:
+  #   build: _drafts/staging
+  #   ports:
+  #     - 8080:80
+  #   volumes:
+  #     - ./_site:/var/www/html
+
   serve:
-    image: node:18-bullseye
+    build:
+      context: .
+      dockerfile: Dockerfile.dist
     volumes:
       - .:/src
     working_dir: /src

navigation_and_indexes/tag_index.11ty.js

@@ -1,13 +1,14 @@
 const slugify = require("slugify");
 
-function tag_item(tag_name) {
-    tag_slug = slugify(tag_name);
-    return `<li><a href="/tags/${tag_slug}">${tag_name}</a></li>`;
+function tag_item(tag_name, tags) {
+    const tag_slug = slugify(tag_name);
+    const count = tags[tag_name]?.length || 0;
+    return `<li><a href="/tags/${tag_slug}">${tag_name} <span class="badge tag-badge rounded-pill">${count}</span></a></li>`;
 }
 
 function tag_list(tags) {
     const keys = Object.keys(tags).sort();
-    return `<ul>${keys.map(tag_item).join("")}</ul>`;
+    return `<ul>${keys.map(tag => tag_item(tag, tags)).join("")}</ul>`;
 }
 
 class TagIndex {

serve.Dockerfile

@@ -0,0 +1,4 @@
+FROM node:18-bullseye
+# Install dependencies
+RUN npm install
+

src/shortcodes/make_tab_gallery.js

@@ -49,10 +49,24 @@ async function make_gallery(id, images) {
     const description_element = '<div class="image-tab-gallery-description row"></div>';
     const current_image_element = '<div class="image-tab-gallery-current-image col-md-5"></div>';
 
-    const tabs = images_with_metadata.map( 
-        image => '<div class="image-tab-gallery-tab" title="' + image.alt + '" data-src="' + image.metadata.jpeg[0].url + '">' +
-                '<img src="' + image.thumb_metadata.jpeg[1].url + '" loading="lazy" decoding="async" width="128" height="112" alt="' + image.alt + '">' +
-                '</div>');
+    const tabs = images_with_metadata.map(image => {
+        let thumbnailUrl = '';
+        let mainImageUrl = '';
+        const thumbnailAlt = image.alt || '';
+        if (image.thumb_metadata?.jpeg?.[1]?.url) {
+            thumbnailUrl = image.thumb_metadata.jpeg[1].url;
+        } else {
+            console.warn(`Tab Gallery: Missing thumbnail for image alt='${thumbnailAlt}'. Falling back to empty src.`);
+        }
+        if (image.metadata?.jpeg?.[0]?.url) {
+            mainImageUrl = image.metadata.jpeg[0].url;
+        } else {
+            console.warn(`Tab Gallery: Missing main image for image alt='${thumbnailAlt}'. Falling back to empty src.`);
+        }
+        return '<div class="image-tab-gallery-tab" title="' + thumbnailAlt + '" data-src="' + mainImageUrl + '">' +
+            '<img src="' + thumbnailUrl + '" loading="lazy" decoding="async" width="128" height="112" alt="' + thumbnailAlt + '">' +
+            '</div>';
+    });
     // put the joined tabs in the tabs element.
 
     const tabs_element = '<div class="image-tab-gallery-tabs col-md-3">' + tabs.join("\n") + '</div>';