Make banner its own collection

Author: davepagurek

docs/banner.md

@@ -4,15 +4,19 @@ A banner can optionally be added at the bottom of the page with a custom message
 
 ## Adding a new banner
 
-Edit the banner text in the body of `src/content/text-detail/en/banner.tsx`.
+Edit the banner text in the body of `src/content/banner/en.mdx`.
 
 Within the file's metadata:
 - Change the `title` metadata to a new slug for each message. This does not get displayed anywhere, but it gets recorded when a user dismisses the banner. This way, we can hide that banner for the user the next time they return, but still show them a new banner when we create a new message.
 - Make sure `hidden` is `true` for the banner to be visible
 
+## Translating banners
+
+Copy the `en.mdx` file to `${locale}.mdx` (e.g. `es.mdx`) and translate just the body text, leaving the metadata the same.
+
 ## Removing a banner
 
-- Set `hidden` to `true` in `src/content/text-detail/en/banner.tsx`
+- Set `hidden` to `true` in `src/content/banner/en.mdx`
 - Delete any translations of the banner that have been made in non-`en` locales.
 
   This is to make sure that the next time a new banner is made, there is a clean slate to start from for translations.

src/components/Footer/index.astro

@@ -1,14 +1,13 @@
 ---
+import { getEntry } from "astro:content";
 import { getCurrentLocale, getUiTranslator } from "@/src/i18n/utils";
-import { getCollectionInLocaleWithFallbacks } from "@pages/_utils";
 import { Icon } from "../Icon";
 import Banner from "@components/Banner/index.astro";
 
 const currentLocale = getCurrentLocale(Astro.url.pathname);
 const t = await getUiTranslator(currentLocale);
 
-const collection = await getCollectionInLocaleWithFallbacks("text-detail", currentLocale);
-const bannerEntry = collection.find((entry) => entry.slug === 'banner');
+const bannerEntry = await getEntry("banner", currentLocale);
 ---
 
 <footer

src/content/banner/config.ts

@@ -0,0 +1,11 @@
+import { z, defineCollection } from "astro:content";
+
+export const textDetailCollection = defineCollection({
+  type: "content",
+  schema: () =>
+    z.object({
+      title: z.string(),
+      link: z.string(),
+      hidden: z.boolean().optional(),
+    }),
+});

src/content/text-detail/en/banner.mdx src/content/banner/en.mdxsrc/content/text-detail/en/banner.mdx renamed to src/content/banner/en.mdx

@@ -1,5 +1,4 @@
 ---
-slug: "banner"
 # Give each new message a unique title so we know which one a user closed
 title: "pr05"
 link: "https://processingfoundation.org/grants"

src/content/text-detail/config.ts

@@ -7,7 +7,5 @@ export const textDetailCollection = defineCollection({
       title: z.string(),
       featuredImage: image().optional(),
       featuredImageAlt: z.string().optional(),
-      link: z.string().optional(),
-      hidden: z.boolean().optional(),
     }),
 });