bare bones news source ( includes two fake news items )

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">

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>

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({

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',
     }));

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,
+        }
+      });
+  }
+}

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
   //

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']
+---

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.

site/content/news/testing.md

@@ -0,0 +1,7 @@
+---
+startdate: 2025-06-16
+title: Testing!
+description: Mobilizing bikes for the community
+layout: news 
+---
+Test!

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" "  ") }}

site/layouts/_default/news.html

@@ -0,0 +1 @@
+{{.Content}}