fix archive button rendering (#64)

Why:
- Archive button was disabled as it was breaking content rendering when
Payload and collections were updated;
How:
- by reenabling and refactoring text formating to include the updated
collections
- also fixes podcast and blogpost mobile styling

src/app/(pages)/blogposts/[slug]/styles.module.css

@@ -25,10 +25,14 @@
 }
 
 .sharingAndCategories {
+  display: flex;
+  flex-direction: column;
   grid-row-start: 1;
+  padding: 20px;
+  gap: 20px;
 }
 
-@media (min-width: 1080px) {
+@media (min-width: 1024px) {
 
   .headContainer {
     width: calc(100% - 40px);

src/app/_blocks/EpisodeContent/styles.module.css

@@ -48,6 +48,7 @@
     flex-direction: column;
     grid-row: 2 / 2;
     padding: 16px;
+    row-gap: 20px;
   }
 
   .sharingAndCategories hr {

src/app/_blocks/EpisodeHead/index.tsx

@@ -27,7 +27,7 @@ export default function EpisodeHead({ episode }) {
       <div className={styles.metadataContainer}>
         {/* First Column */}
         <div className={styles.metadata}>
-          <ArchiveButton collection={'podcast-episodes'} color={'var(--soft-white-100)'} />
+          <ArchiveButton collection={'podcasts'} color={'var(--soft-white-100)'} />
           <h5>{title}</h5>
           <h6>episode.podcastName property</h6>
           <p>

src/app/_blocks/HubContentGrid/NavBar/DropdownMenu/index.tsx

@@ -80,10 +80,10 @@ export default function DropdownMenu({
               {/* TODO : Renable once pages are styled */}
          {/*     <li onClick={() => handleButtonClick('CaseStudies')}>
                 {iconMap['CaseStudies']} Case Studies
-              </li>
+              </li>*/}
               <li onClick={() => handleButtonClick('TalksAndRoundtables')}>
                 {iconMap['TalksAndRoundtables']} Talks & Roundtables
-              </li>*/}
+              </li>
             </ul>
           </div>
         </div>

src/app/_blocks/HubContentGrid/NavBar/DropdownMenu/styles.module.css

@@ -27,8 +27,8 @@
   border-left: 2px solid var(--dark-rock-800);
   background-color: white;
   margin-top: -8px;
-  margin-bottom: -40px;
   padding-top: 6px;
+  overflow: hidden;
 }
 
 .dropdownMenuContainer::after {

src/app/_blocks/HubContentGrid/NavBar/index.tsx

@@ -17,8 +17,6 @@ export default function ContentNavBar({
   }
 
   return (
-    // todo: make whole button clickable?
-
     <div className={styles.contentNav}>
       <DropdownMenu activeButton={activeButton} onActiveButtonChange={handleButtonClick} />
 

src/app/_blocks/HubContentGrid/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState } from "react";
+import React, { useState } from "react";
 
 import ContentCard from "../../_components/ContentCard";
 import { ContentTypeArrays } from "../../_interfaces/ContentTypeArrays";
@@ -16,10 +16,6 @@ const colorMap = {
   TalksAndRoundtables: "var(--sub-purple-300)",
 };
 
-interface HubContentGridProps {
-  articles: ContentTypeArrays;
-}
-
 export default function HubContentGrid({ content }) {
   // todo: fix rendering when there is no content
 
@@ -30,19 +26,17 @@ export default function HubContentGrid({ content }) {
   };
 
 
-  const dynamicColor = {
+  const dynamicStyles = {
     "--dynamic-color": colorMap[activeButton],
-  };
+  } as React.CSSProperties
 
   const filteredContent = filterContent({ articles: content, filter: activeButton });
 
 
   return (
     <div>
-      {/*{<pre>{JSON.stringify(filteredContent, null, 2)}</pre>}*/}
       <ContentNavBar activeButton={activeButton} onActiveButtonChange={handleActiveButtonChange} />
-      {/*   TODO: fix dynamic color*/}
-      <div className={styles.contentGridContainer}>
+      <div className={styles.contentGridContainer} style={dynamicStyles}>
         <div className={styles.contentGrid}>
           {filteredContent.map((article, i) => (
             <div className={styles.contentCard}>

src/app/_blocks/HubContentGrid/styles.module.css

@@ -6,7 +6,6 @@
   margin: 40px auto;
   border-bottom-right-radius: 45px;
   border-bottom-left-radius: 45px;
-  border-top-right-radius: 45px;
   border: 1px solid var(--dark-rock-800);
   border-top: none;
   overflow: hidden;
@@ -36,9 +35,11 @@
   }
 
   .contentGridContainer {
+    position: relative;
     border-top: 1px solid var(--dark-rock-800);
     border-radius: 25px;
     margin: 0 auto;
+    border-color: var(--dynamic-color);
   }
 
 }

src/app/_components/ArchiveButton/index.tsx

@@ -2,12 +2,13 @@ import { BlogpostIcon, CaseStudiesIcon, PodcastIcon, TalksIcon } from '@/app/_ic
 
 const iconMap = {
   blogposts: <BlogpostIcon width={'20'} color={"currentColor"}/>,
-  'podcast-episodes': <PodcastIcon width={'20'} color={"currentColor"}/>,
+  'podcasts': <PodcastIcon width={'20'} color={"currentColor"}/>,
   'case-studies': <CaseStudiesIcon width={'20'} color={"currentColor"}/>,
   'talks-and-roundtables': <TalksIcon width={'20'} color={"currentColor"}/>,
 }
 
 import styles from './styles.module.css'
+import Link from "next/link";
 
 function formatTitle(text: string) {
   return text
@@ -18,16 +19,16 @@ function formatTitle(text: string) {
 }
 
 interface ArchiveButtonProps {
-  collection: 'blogposts' | 'podcast-episodes' | 'case-studies' | 'talks-and-roundtables'
+  collection: 'blogposts' | 'podcasts' | 'case-studies' | 'talks-and-roundtables'
   color?: string
 }
 
 export default function ArchiveButton({ collection, color }: ArchiveButtonProps) {
   return (
-    <a href={`/${collection}`} style={{ color: color || 'var(--dark-rock-800)' }}>
+    <Link href={`/${collection}`} style={{ color: color || 'var(--dark-rock-800)' }}>
       <h6 className={styles.container}>
         {iconMap[collection]} {formatTitle(collection)}
       </h6>
-    </a>
+    </Link>
   )
 }

src/app/_components/ContentCard/index.tsx

@@ -26,33 +26,33 @@ interface ContentSummaryProps {
 
 const archiveMap = {
   Blogposts: "blogposts",
-  PodcastEpisodes: "podcast-episodes",
+  Podcasts: "podcasts",
   CaseStudies: "case-studies",
   TalksAndRoundtables: "talks-and-roundtables",
 };
 
 export default function ContentCard({ contentType, content, rounded }: ContentSummaryProps) {
   const { slug, title, summary, featuredImage, categories, publishedAt, authors } = content;
   const borderStyle = {
-    '--dynamic-border': rounded ? '45px' : ''
-  }
-
-  // todo: convert to a collection item property
-  const readTime = estimateReadTime("herpaderpa");
+    "--dynamic-border": rounded ? "45px" : "",
+  };
 
+  // Given Payload type structure an error is expected as content_html only exists in Blogposts
+  // @ts-expect-error
+  const readTime = contentType === 'Blogposts' ? estimateReadTime(content.content_html) : ''
 
   return (
     // @ts-ignore
     <div className={styles.contentCard} style={borderStyle}>
       <div className={styles.contentMetaContainer}>
         <Link href={`/${toKebabCase(contentType)}/${slug}`}>
-        {featuredImage && (
-          <div className={styles.imageContainer}>
-            {/*  @ts-ignore */}
-            <FeaturedImage src={featuredImage.url} />
-          </div>
-        )}
-        {/*<ArchiveButton collection={archiveMap[contentType]} />*/}
+          {featuredImage && (
+            <div className={styles.imageContainer}>
+              {/*  @ts-ignore */}
+              <FeaturedImage src={featuredImage.url} />
+            </div>
+          )}
+          <ArchiveButton collection={archiveMap[contentType]} />
 
           <h6>{title} </h6>
 
@@ -65,11 +65,12 @@ export default function ContentCard({ contentType, content, rounded }: ContentSu
 
         <div className={styles.dateAndDuration}>
           {formatDateTime(publishedAt)}
-          {contentType === "PodcastEpisodes" ? (
+          {contentType === "Podcasts" && (
             <span>
                 <HeadphonesIcon width={"20"} /> 1h
               </span>
-          ) : (
+          )}
+          {contentType === "Blogposts" && (
             <span>
                 <SpectaclesIcon width={"20"} />
               {readTime}

src/app/_components/PostSummary/styles.module.css

@@ -1,5 +1,4 @@
 .gridContainer {
-  padding-bottom: 40px;
   display: grid;
   color: var(--dark-rock-800);
   grid-template-rows: 1fr 1fr;