fix: update highlighted content pipeline (#61)

why:
- changes made to `highlights` data structure broke the currently
deployed version of the content-hub as fetchers are fetching fields that
no longer exist;
how:
- updates destructuring to include the new data structure of highlighted
content which includes the `relationTo` and `value` fields

src/Globals/HubHighlights/config.ts

@@ -10,13 +10,13 @@ export const HomePageSettings: GlobalConfig = {
         name: "mainHighlight",
         label: "Main Highlight",
         type: "relationship",
-        relationTo: "blogposts",
+        relationTo: ["blogposts", 'podcasts', 'talks-and-roundtables'],
       },
       {
         name: "secondaryHighlight",
         label: "Secondary Highlight",
         type: "relationship",
-        relationTo: "blogposts",
+        relationTo: ["blogposts", 'podcasts', 'talks-and-roundtables'],
       },
     ],
   }

src/app/_blocks/HubHead/Highlights/index.tsx

@@ -5,6 +5,7 @@ import { formatDateTime } from "../../../_utilities/formatDateTime";
 import styles from "./styles.module.css";
 import { AuthorPill } from '@/app/_components/AuthorPill'
 import Link from "next/link";
+import ArchiveButton from "@/app/_components/ArchiveButton";
 
 const placeholder = {
   title: "Placeholder",
@@ -18,17 +19,17 @@ export async function Highlights({ content, main }) {
     content = placeholder;
   }
 
-  const { title, publishedAt, categories, authors } = content;
-
+  const { title, publishedAt, categories, authors, slug } = content.value;
+  const contentType = content.relationTo
   return (
     <>
 
       <div
         className={`${styles.highlights} ${main ? styles.mainHighlight : styles.secondaryHighlight}`}
       >
         <p className={styles.overline}> HIGHLIGHTS </p>
-        {/* TODO: Adapt to other types of content as well */}
-        <Link href={`./blogposts/${content.slug}`}>
+        <ArchiveButton color={main ? 'var(--soft-white-100)' : 'var(--dark-rock-800)'} collection={contentType}/>
+        <Link href={`./${contentType}/${slug}`}>
           <h6> {title} </h6>
         </Link>
         {content === placeholder ? (<h5>Please setup the highlights</h5>) : (

src/payload-types.ts

@@ -466,8 +466,32 @@ export interface Social {
  */
 export interface HomepageSetting {
   id: string;
-  mainHighlight?: (string | null) | Blogpost;
-  secondaryHighlight?: (string | null) | Blogpost;
+  mainHighlight?:
+    | ({
+        relationTo: 'blogposts';
+        value: string | Blogpost;
+      } | null)
+    | ({
+        relationTo: 'podcasts';
+        value: string | Podcast;
+      } | null)
+    | ({
+        relationTo: 'talks-and-roundtables';
+        value: string | TalksAndRoundtable;
+      } | null);
+  secondaryHighlight?:
+    | ({
+        relationTo: 'blogposts';
+        value: string | Blogpost;
+      } | null)
+    | ({
+        relationTo: 'podcasts';
+        value: string | Podcast;
+      } | null)
+    | ({
+        relationTo: 'talks-and-roundtables';
+        value: string | TalksAndRoundtable;
+      } | null);
   updatedAt?: string | null;
   createdAt?: string | null;
 }