One approach to creating a counter

README.md

@@ -120,7 +120,7 @@ If you are writing javascript code in the node backend, you can test everything
 
 ### Local previews using production data
 
-As an alternative to `npm run dev`, you can preview a local frontend with the actual production backend by using: `npm run -w tools preview`.  
+As an alternative to `npm run dev`, you can preview a local frontend with the actual production backend by using: `npm run preview`.  
 
 **NOTE:** any events you create while previewing this way *will* be seen by the world!
 

site/themes/s2b_hugo_theme/assets/js/cal/main.js

@@ -1,5 +1,24 @@
 // uses CONSTANTS from config.js
 
+class Summary {
+  constructor(title) {
+    this.title = title;
+    this.before = 0;
+    this.after = 0;
+    this.now = dayjs();
+    this.total = 0;
+  }
+  addEvent(evt) {
+    const fullTime = dayjs(`${evt.date}T${evt.time}`);
+    if (fullTime.isBefore(this.now)) {
+      ++this.before;
+    } else {
+      ++this.after;
+    }
+    ++this.total;
+  }
+};
+
 $(document).ready(function() {
 
     var container = $('#mustache-html');
@@ -16,6 +35,12 @@ $(document).ready(function() {
             throw Error("requires id or range");
         }
 
+        const today = options.today;
+        const start = options.startdate;
+        const end = options.enddate;
+        const inRange = today >= start && today <= end;
+        const viewFrom = (options.pp) ? today : start;
+
         var opts = {
             type: 'GET',
             url: url.toString(),
@@ -24,9 +49,23 @@ $(document).ready(function() {
                 var groupedByDate = [];
 
                 var mustacheData = { dates: [] };
+                const summary = new Summary("Bike Summer 2025");
+
                 $.each(data.events, function( index, value ) {
+                    // summarize:
+                    if (!value.cancelled) {
+                      summary.addEvent(value);
+                    }
+                    // check if we want to see this date in detail:
+                    const dayOfEvent = dayjs(value.date);
+                    const shouldView = viewFrom.isSame(dayOfEvent, 'day') || 
+                                       viewFrom.isBefore(dayOfEvent, 'day');
+                    if (!shouldView) {
+                      return;
+                    }
 
-                    var date = dayjs(value.date).format('dddd, MMMM D, YYYY');
+                    // add the date in detail:
+                    const date = dayOfEvent.format('dddd, MMMM D, YYYY');
                     if (groupedByDate[date] === undefined) {
                         groupedByDate[date] = {
                             yyyymmdd: value.date,
@@ -64,6 +103,13 @@ $(document).ready(function() {
                 for ( var date in groupedByDate )  {
                     groupedByDate[date].events.sort(container.compareTimes);
                 }
+
+                if (options.pp) {
+                  const summaryTemplate = $('#summary-template').html()
+                  const summaryHTML  = Mustache.render(summaryTemplate, {summary});
+                  $('#summary-html').replaceWith(summaryHTML);
+                }
+
                 var template = $('#view-events-template').html();
                 var info = Mustache.render(template, mustacheData);
                 if (options.id) {
@@ -106,17 +152,13 @@ $(document).ready(function() {
         const start = options.startdate ? dayjs(options.startdate) : dayjs(today);
         const end = options.enddate ? dayjs(options.enddate) : dayjs(today);
 
-        const inRange = today >= start && today <= end;
-        const from = (inRange && options.pp) ? today : start;
-
         return {
-          // since this year's PP will be in range
-          // ( as will the normal calendar events page )
-          // 'from' is today; for other PP pages it's options startdate.
-          startdate: from,
+          today, 
+          pp: options.pp,
+          startdate: start,
           // if there was an enddate, use it; otherwise use a fixed number of days.
           // subtract 1 so range is inclusive
-          enddate: options.enddate ? end : from.add( (DEFAULT_DAYS_TO_FETCH - 1), 'day'),
+          enddate: options.enddate ? end : start.add( (DEFAULT_DAYS_TO_FETCH - 1), 'day'),
           // pass this on to the events listing.
           show_details: options.show_details,
         };

site/themes/s2b_hugo_theme/layouts/partials/cal/events.html

@@ -3,6 +3,13 @@
   Mustache.tags = ["[[", "]]"];
 </script>
 
+<script id="summary-template" type="text/template">
+  [[# summary ]]
+  <div class="a-counter">
+    <span class="a-counter--total">[[summary.total]]</span> rides and growing. <span class="a-counter--total">[[summary.before]]</span> rides so far, <span class="a-counter--total">[[summary.after]]</span> rides to go.
+  [[/ summary ]]
+</script>
+
 <script id="view-events-template" type="text/template">
   [[#dates]]
   <div data-date="[[yyyymmdd]]" class="date[[#preview]] preview[[/preview]]">

site/themes/s2b_hugo_theme/layouts/partials/cal/pp-header.html

@@ -3,6 +3,7 @@
   <div>
     <span class="pp-headline">{{ .Param "festival.name" }}</span>
     <span class="pp-daterange">{{ .Param "daterange" }}</span>
+    <div class="pp-summary" id="summary-html">Hundreds of rides and growing!</div>
   </div>
   <button type="button" aria-expanded="true" class="expand-details" data-toggle-target="#pp-description">
     <svg class="icon expand" role="img" aria-hidden="true">