From 4198946a852aafb6356d37a6684e56a961efef2e Mon Sep 17 00:00:00 2001
From: ionous <github@ionous.net>
Date: Sun, 15 Jun 2025 18:04:38 -0700
Subject: [PATCH] bare bones news source ( includes two fake news items )

- add a directory of "news" content to hugo, with a layout that renders the content to html ( with no other page header /footer /etc. ), and a json index file which generates a list of all the pages in the directory
- add a news source feed to the spa
- add a vue template that can render a simple news item
- simplify "uid" slightly so it only has to be unique within a given source feed
---
 cal/src/CalList.vue                  |  6 ++--
 cal/src/NewsItem.vue                 | 43 ++++++++++++++++++++++++++++
 cal/src/calMain.js                   |  5 ++--
 cal/src/sources/eventSource.js       |  2 +-
 cal/src/sources/newsSource.js        | 32 +++++++++++++++++++++
 cal/src/sources/sourcePool.js        |  2 +-
 site/content/news/_index.md          |  5 ++++
 site/content/news/bridge-closure.md  |  7 +++++
 site/content/news/testing.md         |  7 +++++
 site/layouts/_default/list.json.json | 11 +++++++
 site/layouts/_default/news.html      |  1 +
 11 files changed, 115 insertions(+), 6 deletions(-)
 create mode 100644 cal/src/NewsItem.vue
 create mode 100644 cal/src/sources/newsSource.js
 create mode 100644 site/content/news/_index.md
 create mode 100644 site/content/news/bridge-closure.md
 create mode 100644 site/content/news/testing.md
 create mode 100644 site/layouts/_default/list.json.json
 create mode 100644 site/layouts/_default/news.html

diff --git a/cal/src/CalList.vue b/cal/src/CalList.vue
index 391111db..82027788 100644
--- a/cal/src/CalList.vue
+++ b/cal/src/CalList.vue
@@ -8,13 +8,14 @@ import dayjs from 'dayjs'
 // components:
 import EventSummary from './EventSummary.vue'
 import DateDivider from './DateDivider.vue'
+import NewsItem from './NewsItem.vue'
 // support:
 import { fetchRange } from './calList.js'
 import helpers from './calHelpers.js'
 import siteConfig from './siteConfig.js'
 
 export default {
-  components: { EventSummary, DateDivider },
+  components: { EventSummary, DateDivider, NewsItem },
   emits: [ 'pageLoaded' ],
   // called before the component is fully created
   // ( doesnt have access to `this` )
@@ -70,7 +71,7 @@ export default {
     class="c-day"
     :data-date="day.date">
     <DateDivider :date="day.date" />
-    <template v-for="rec in day.records" :key="rec.uid">
+    <template v-for="rec in day.records" :key="`${rec.type}-${rec.uid}`">
       <h2 v-if="rec.type == 'calfestival'"
       class="c-day__festival" :class="{
          'c-day__festival--start': rec.start,
@@ -79,6 +80,7 @@ export default {
         {{rec.title}} {{rec.start ? "Starts": "Ends"}}
       </h2>
       <EventSummary v-else-if="rec.type == 'caldaily'" :evt="rec" />
+      <NewsItem v-else-if="rec.type == 'news'" :news="rec" />
       <template v-else-if="rec.type == 'social'">
         <p>Social</p>
         <img v-if="rec.image" :alt="rec.image.alt" :src="rec.image.url">
diff --git a/cal/src/NewsItem.vue b/cal/src/NewsItem.vue
new file mode 100644
index 00000000..45079ea7
--- /dev/null
+++ b/cal/src/NewsItem.vue
@@ -0,0 +1,43 @@
+<!-- 
+-->
+<script>
+export default {
+  props: {
+    news: Object,
+  },
+  // https://vuejs.org/api/options-lifecycle.html
+  beforeCreate() {
+    const el = this;
+    fetch(el.news.url)
+    .then((response) => response.text())
+    .then((text) => {
+        el.newsContent = text;
+    });
+  },
+  data() {
+    return {
+      newsContent: "",
+    }
+  }
+  // this.$refs.inputItem.focus();
+};
+</script>
+<template>
+  <article class="c-news">
+  <header><h3 class="c-event-header__title">
+    {{news.title}}
+  </h3></header>
+  <div v-html="newsContent"></div>
+  </article>
+</template>
+<style>
+.c-news {
+  border: var(--orangey-border);
+  border-radius: 20px;
+  margin: 10px 20px;
+  padding: 0px 1em;
+  color: var(--feature-text);
+  background-color: var(--feature-bg);
+}
+
+</style>
\ No newline at end of file
diff --git a/cal/src/calMain.js b/cal/src/calMain.js
index e43a5126..fa34770b 100644
--- a/cal/src/calMain.js
+++ b/cal/src/calMain.js
@@ -18,11 +18,12 @@ import CalBeta from './CalBeta.vue'
 
 // the source of records displayed by CalList.
 import sourcePool from './sources/sourcePool.js' 
-import socialSource from './sources/socialSource.js'
+// import socialSource from './sources/socialSource.js'
 import eventSource from './sources/eventSource.js'
 import festivalSource from './sources/festivalSource.js'
+import newsSource from './sources/newsSource.js'
 
-sourcePool.register(/*socialSource, */eventSource, festivalSource);
+sourcePool.register(/*socialSource, */eventSource, festivalSource, newsSource);
 
 // the router reads and writes the user's address bar
 const router = createRouter({
diff --git a/cal/src/sources/eventSource.js b/cal/src/sources/eventSource.js
index efaa2d64..b6e30ed1 100644
--- a/cal/src/sources/eventSource.js
+++ b/cal/src/sources/eventSource.js
@@ -10,7 +10,7 @@ export default {
     // eventData includes { pagination: {}, events: [] }
     const eventData = await dataPool.getRange(start, end);
     return eventData.events.map(evt => Object.assign(evt, {
-      uid: `caldaily-${evt.id}`,
+      uid: evt.id,
       // moment --> added by the event munge already
       type: 'caldaily',
     }));
diff --git a/cal/src/sources/newsSource.js b/cal/src/sources/newsSource.js
new file mode 100644
index 00000000..832a8299
--- /dev/null
+++ b/cal/src/sources/newsSource.js
@@ -0,0 +1,32 @@
+/**
+ */
+import dayjs from 'dayjs'
+const newsData = fetch("/news/index.json").then((response) => response.json());
+
+export default {
+  name: "newsSource",
+  // news records look like: {
+  //  "name": "bridge-closure",
+  //  "startdate": "2025-06-16",
+  //  "title": "Bridge Closure!",
+  //  "url": "/news/bridge-closure/"
+  // }
+  async getRange(start, end) {
+    const news = await newsData;
+    // the filter removes empty records
+    return news.filter(n => !!n).map(n => {
+      const d = dayjs(n.startdate).startOf('day');
+      const inRange = !d.isBefore(start) && !d.isAfter(end);
+      // returns an empty record if out of range
+      // otherwise, returns the info needed for the news item
+      return inRange && {
+          uid:  n.name,
+          type: 'news',
+          moment: d,  
+          nudge: Number.MIN_VALUE,
+          title: n.title,
+          url: n.url,
+        }
+      });
+  }
+}
diff --git a/cal/src/sources/sourcePool.js b/cal/src/sources/sourcePool.js
index ee1e6bbb..b9b91681 100644
--- a/cal/src/sources/sourcePool.js
+++ b/cal/src/sources/sourcePool.js
@@ -7,7 +7,7 @@ export default {
   //    [{uid, type, moment, title}]
   //
   // at a minimum, each record should contain:
-  //    uid: some globally unique id
+  //    uid: some id unique per type
   //    type: used by the display to know how to render the record
   //    moment: a dayjs object
   //
diff --git a/site/content/news/_index.md b/site/content/news/_index.md
new file mode 100644
index 00000000..bd821a36
--- /dev/null
+++ b/site/content/news/_index.md
@@ -0,0 +1,5 @@
+---
+# rendered by layout "list.json.json"
+# creates a listing of all pages in the directory
+outputs: ['json']
+---
\ No newline at end of file
diff --git a/site/content/news/bridge-closure.md b/site/content/news/bridge-closure.md
new file mode 100644
index 00000000..cd8aa0c5
--- /dev/null
+++ b/site/content/news/bridge-closure.md
@@ -0,0 +1,7 @@
+---
+title: Bridge Closure!
+description: Mobilizing bikes for the community
+startdate: 2025-06-16
+layout: news 
+---
+Words words. **The Bridge** is closing.
diff --git a/site/content/news/testing.md b/site/content/news/testing.md
new file mode 100644
index 00000000..6d7702d6
--- /dev/null
+++ b/site/content/news/testing.md
@@ -0,0 +1,7 @@
+---
+startdate: 2025-06-16
+title: Testing!
+description: Mobilizing bikes for the community
+layout: news 
+---
+Test!
diff --git a/site/layouts/_default/list.json.json b/site/layouts/_default/list.json.json
new file mode 100644
index 00000000..2b3ab73d
--- /dev/null
+++ b/site/layouts/_default/list.json.json
@@ -0,0 +1,11 @@
+{{- $s := slice }}
+{{- range  .Pages }}
+    {{- $d := dict 
+            "name" .File.ContentBaseName
+            "title" .Title 
+            "url"  .RelPermalink 
+            "startdate" .Params.startdate 
+     }}
+    {{- $s = $s | append $d }}
+{{- end }}
+{{- $s | jsonify (dict "prefix" " " "indent" "  ") }}
diff --git a/site/layouts/_default/news.html b/site/layouts/_default/news.html
new file mode 100644
index 00000000..a9f49d83
--- /dev/null
+++ b/site/layouts/_default/news.html
@@ -0,0 +1 @@
+{{.Content}}
\ No newline at end of file