Merge pull request #196 from orionrobots/feature/tag-count-in-tag-index

Show tag counts in tag index page, clarify docker-compose usage, and update README for local/dev workflows

Author: dannystaple

README.md

@@ -5,13 +5,30 @@ 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 --rm dist
+docker compose run --interactive --rm serve npm install
+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 +39,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

@@ -13,12 +13,13 @@ services:
     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
     volumes:

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 {