Add basic CMS for Dummy site template

components/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@gonzo-engineering/dummy-ui",
-	"version": "0.0.3",
+	"version": "0.0.4",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",

components/src/lib/components/articles/ArticleHead.svelte

@@ -1,29 +1,44 @@
 <script lang="ts">
 	import '$lib/styles/reset.css';
-	import { type Author, prettifyDate } from '@gonzo-engineering/libs';
+	import { prettifyDate } from '@gonzo-engineering/libs';
 
 	let {
 		title,
-		description,
+		standfirst,
 		publicationDate,
 		authors
 	}: {
 		title: string;
-		description: string;
+		standfirst?: string;
 		publicationDate: string;
-		authors?: Author[];
+		authors?: {
+			name: string;
+			link?: string;
+		}[];
 	} = $props();
 </script>
 
 <div class="article-header">
 	<h2>{title}</h2>
-	<div class="article-standfirst">
-		{description}
-	</div>
+	{#if standfirst}
+		<div class="article-standfirst">
+			{standfirst}
+		</div>
+	{/if}
 	<div class="details">
 		{#if authors}
 			<div class="byline">
-				By {authors.map((author) => author.name).join(', ')}
+				By {#each authors as author, i}
+					{#if author.link}
+						<a href={author.link}>{author.name}</a>
+					{:else}
+						{author.name}
+					{/if}{#if i < authors.length - 2 && authors.length > 1},
+					{/if}
+					{#if i === authors.length - 2}
+						and{' '}
+					{/if}
+				{/each}
 			</div>
 		{/if}
 		<div>{prettifyDate(publicationDate)}</div>

components/src/stories/ArticleHead.stories.svelte

@@ -8,12 +8,19 @@
 		tags: ['autodocs'],
 		args: {
 			title: 'Man bites dog',
-			description: 'Park goers were shocked to see a game of fetch go south',
+			standfirst: 'Park goers were shocked to see a game of fetch go south',
 			publicationDate: '2021-09-01',
 			authors: [
 				{
-					id: 'john-doe',
-					name: 'John Doe'
+					name: 'John Doe',
+					link: '/authors/john-doe'
+				},
+				{
+					name: 'Jane Doe',
+					link: '/authors/jane-doe'
+				},
+				{
+					name: 'John Smith'
 				}
 			]
 		}

docs/content-management.md

@@ -0,0 +1,7 @@
+# Content mangagement
+
+The site template uses [Decap](https://decapcms.org/) for content management, allowing you to add articles, images, and author information via Git. Once wired up (documentation pending there) you simply log in at yoursite.com/admin and use the dashboard.
+
+## Running locally
+
+Get the site running locally (`npm run dev`) then in a separate terminal run `npx decap-server`. Go to [https://localhost:5173/admin] to add, edit, and delete content. Changes made there should appear in the local site straight away.

site-template/package.json

@@ -14,8 +14,8 @@
     "test": "npm run test:unit -- --run"
   },
   "devDependencies": {
-    "@gonzo-engineering/dummy-ui": "^0.0.2",
-    "@gonzo-engineering/libs": "0.0.2",
+    "@gonzo-engineering/dummy-ui": "^0.0.4",
+    "@gonzo-engineering/libs": "0.0.3",
     "@sveltejs/adapter-netlify": "^4.3.6",
     "@sveltejs/kit": "^2.9.0",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",

site-template/src/data/articles/allArticlesMeta.ts

@@ -0,0 +1,43 @@
+import type { ArticleMetadata } from "@gonzo-engineering/libs";
+import { allAuthors } from "../authors/allAuthors";
+
+let rawPosts: ArticleMetadata[] = [];
+
+const paths = import.meta.glob("/src/data/articles/*.md", { eager: true });
+
+for (const path in paths) {
+  const file = paths[path];
+  const slug = path.split("/").at(-1)?.replace(".md", "");
+
+  if (file && typeof file === "object" && "metadata" in file && slug) {
+    const post = file.metadata as ArticleMetadata;
+    rawPosts.push(post);
+  }
+}
+
+rawPosts = rawPosts.sort(
+  (first, second) =>
+    new Date(second.publicationDate).getTime() -
+    new Date(first.publicationDate).getTime()
+);
+
+export const allArticlesMetadata: ArticleMetadata[] = rawPosts.map((post) => {
+  // Replace author IDs with author objects
+  const authorObjects = post.authors?.map(
+    (rawAuthorObject: { slug: string }) => {
+      const matchingAuthor = allAuthors.find(
+        (author) => author.slug === rawAuthorObject.slug
+      );
+      if (!matchingAuthor) {
+        throw new Error(
+          `Author with slug ${rawAuthorObject.slug} not found in authors data`
+        );
+      }
+      return matchingAuthor;
+    }
+  );
+  return {
+    ...post,
+    authors: authorObjects,
+  };
+});

site-template/src/data/articles/concern-as-guys-ego-grows.md

@@ -0,0 +1,14 @@
+---
+slug: concern-as-guys-ego-grows
+title: Concern as guy's ego grows
+description: What was previously acceptable please-with-oneself-ness threatens
+  to get out of hand
+featuredImage: https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Man_smiling_on_steps_%28Unsplash%29.jpg/1280px-Man_smiling_on_steps_%28Unsplash%29.jpg
+featuredImageAltText: Young man sitting on steps and smiling
+featuredImageCaption: Check out this asshole
+publicationDate: 2025-01-13T01:05:00.000Z
+authors:
+  - slug: frederick-obrien
+section: new-town
+---
+A man's ego is threatening to get out of control after he loosed not one but two confectionery jar lids.

site-template/src/data/articles/figurative-coruption-probes-to-be-replaced-with-very-real-anal-probes.md → site-template/src/data/articles/figurative-corruption-probes-replaced-with-very-real-anal-probes.md

@@ -5,9 +5,9 @@ description: Going forward enquiries are going to be a lot more… hands on
 featuredImage: https://images.pexels.com/photos/6627783/pexels-photo-6627783.jpeg
 featuredImageAltText: Someone putting on a rubber glove
 featuredImageCaption: "Law enforcement has been told to take ‘an Ice Cube approach' to lubrication"
-publicationDate: "2024-11-17T12:28:00.000Z"
-authorIds:
-  - j-w-marceau
+publicationDate: 2024-11-17T12:28:00.000Z
+authors:
+  - slug: j-w-marceau
 section: business-district
 tags:
   - news

site-template/src/data/articles/local-man-mistakes-being-bright-for-being-exceptional.md

@@ -5,9 +5,9 @@ description: The truth is painful sometimes
 featuredImage: https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Havana_-_Cuba_-_Man_giving_a_V_sign_-_1326.jpg/1024px-Havana_-_Cuba_-_Man_giving_a_V_sign_-_1326.jpg
 featuredImageAltText: Man making a V sign
 featuredImageCaption: "Credit: Associated Press"
-publicationDate: "2024-11-01T12:28:00.000Z"
-authorIds:
-  - tintin
+publicationDate: 2024-11-01T12:28:00.000Z
+authors:
+  - slug: tintin
 section: new-town
 tags:
   - news

site-template/src/data/articles/man-bites-dog.md

@@ -5,9 +5,9 @@ description: Park goers were appalled to witness a tussle for a tennis ball go s
 featuredImage: https://upload.wikimedia.org/wikipedia/commons/thumb/e/e6/Sad_eyes%5E_Explore_March_18%2C_2023_-_Flickr_-_Dog_Light_Photography.jpg/1024px-Sad_eyes%5E_Explore_March_18%2C_2023_-_Flickr_-_Dog_Light_Photography.jpg
 featuredImageAltText: A terribly sad looking dog
 featuredImageCaption: "Credit: Associated Press"
-publicationDate: "2024-11-27T12:28:00.000Z"
-authorIds:
-  - j-w-marceau
+publicationDate: 2024-11-27T12:28:00.000Z
+authors:
+  - slug: j-w-marceau
 section: new-town
 tags:
   - news

site-template/src/data/articles/man-bumbles-way-to-cms.md

@@ -0,0 +1,13 @@
+---
+slug: man-bumbles-way-to-cms
+title: Man bumbles way to CMS
+description: A halfwit finally got something working
+featuredImage: /images/Rocket_Laboratory_GPN-2000-000363.jpg
+featuredImageAltText: Man sat at an old fashioned computer terminal
+featuredImageCaption: Incredible!
+publicationDate: 2025-01-09T00:27:00.000Z
+authors:
+  - slug: frederick-obrien
+section: business-district
+---
+A halfwit finally got something working. Only took him half the evening.

site-template/src/data/articles/person-learns-from-mistake.md

@@ -2,9 +2,9 @@
 slug: person-learns-from-mistake
 title: Person learns from mistake
 description: A humble local carpenter made history yesterday by becoming the first human this millennia to genuinely learn from an error
-publicationDate: "2024-09-27T12:28:00.000Z"
-authorIds:
-  - j-w-marceau
+publicationDate: 2024-09-27T12:28:00.000Z
+authors:
+  - slug: j-w-marceau
 section: old-town
 tags:
   - news

site-template/src/data/authors/allAuthors.ts

@@ -0,0 +1,17 @@
+import type { Author } from "@gonzo-engineering/libs";
+
+const authorObjects: Author[] = [];
+
+const paths = import.meta.glob("/src/data/authors/*.json", { eager: true });
+
+// Combine all author objects into one array
+for (const path in paths) {
+  const file = paths[path];
+
+  if (file && typeof file === "object" && "default" in file) {
+    const author = file.default as Author;
+    authorObjects.push(author);
+  }
+}
+
+export const allAuthors = authorObjects;

site-template/src/data/authors/frederick-obrien.json

@@ -0,0 +1,5 @@
+{
+  "slug": "frederick-obrien",
+  "name": "Frederick O'Brien",
+  "bio": "Fred is of no particular consequence."
+}

site-template/src/data/authors/j-w-marceau.json

@@ -0,0 +1,4 @@
+{
+  "slug": "j-w-marceau",
+  "name": "J. W. Marceau"
+}

site-template/src/data/authors/tintin.json

@@ -0,0 +1,4 @@
+{
+  "slug": "tintin",
+  "name": "Tintin"
+}

site-template/src/lib/constants.ts

@@ -1,6 +1,6 @@
 // Temporary as a proof of concept before moving out of the template
 
-import type { Author, PublicationDetails } from "@gonzo-engineering/libs";
+import type { PublicationDetails } from "@gonzo-engineering/libs";
 
 export const PUBLICATION_DETAILS: PublicationDetails = {
   name: "The Daily News",
@@ -19,33 +19,23 @@ export const PUBLICATION_DETAILS: PublicationDetails = {
     { label: "New Town", slug: "new-town" },
     { label: "Business District", slug: "business-district" },
   ],
-  navigation: [
-    {
-      label: "Old Town",
-      url: "/old-town",
-      subNav: [
-        { label: "Council", url: "/tags/council" },
-        { label: "Planning", url: "/tags/planning" },
-      ],
-    },
-    { label: "New Town", url: "/new-town" },
-    {
-      label: "Business District",
-      url: "/business-district",
-      subNav: [{ label: "Culture", url: "/tags/culture" }],
-    },
-  ],
-};
-
-export const AUTHORS: Author[] = [
-  {
-    id: "j-w-marceau",
-    name: "J. W. Marceau",
-    bio: "J. W. Marceau means well.",
+  navigation: {
+    header: [
+      {
+        label: "Old Town",
+        url: "/old-town",
+        subNav: [
+          { label: "Council", url: "/tags/council" },
+          { label: "Planning", url: "/tags/planning" },
+        ],
+      },
+      { label: "New Town", url: "/new-town" },
+      {
+        label: "Business District",
+        url: "/business-district",
+        subNav: [{ label: "Culture", url: "/tags/culture" }],
+      },
+    ],
+    footer: [],
   },
-  {
-    id: "tintin",
-    name: "Tintin",
-    bio: "Tintin is a reporter and adventurer.",
-  },
-];
+};

site-template/src/routes/+layout.svelte

@@ -13,7 +13,7 @@
 
 <Header
   publicationName={publication.name}
-  navigation={publication.navigation}
+  navigation={publication.navigation.header}
 />
 
 <!-- <Ad ad={ads.banner} /> -->

site-template/src/routes/+page.server.ts

@@ -1,7 +1,7 @@
-import type { HydratedArticleMetadata } from "$lib/types";
+import type { ArticleMetadata } from "@gonzo-engineering/libs";
 
 export async function load({ fetch }) {
   const articlesResponse = await fetch("/api/articles");
-  const articles: HydratedArticleMetadata[] = await articlesResponse.json();
+  const articles: ArticleMetadata[] = await articlesResponse.json();
   return { articles };
 }