From 65578c82ed72697aaeabd7bee3267e97af0eca81 Mon Sep 17 00:00:00 2001
From: Rui Sousa <contact@ruisousa.me>
Date: Fri, 25 Oct 2024 16:34:38 +0100
Subject: [PATCH] fix archive button rendering

- also fixes podcast and blogpost mobile styling
---
 .../blogposts/[slug]/styles.module.css        |  6 +++-
 .../(pages)/podcasts/[slug]/styles.module.css |  0
 .../_blocks/EpisodeContent/styles.module.css  |  1 +
 src/app/_blocks/HubContentGrid/index.tsx      | 12 ++------
 .../_blocks/HubContentGrid/styles.module.css  |  2 ++
 src/app/_components/ArchiveButton/index.tsx   |  4 +--
 src/app/_components/ContentCard/index.tsx     | 28 +++++++++----------
 .../_components/PostSummary/styles.module.css |  1 -
 src/app/_utilities/estimateReadTime.ts        |  2 +-
 9 files changed, 28 insertions(+), 28 deletions(-)
 delete mode 100644 src/app/(pages)/podcasts/[slug]/styles.module.css

diff --git a/src/app/(pages)/blogposts/[slug]/styles.module.css b/src/app/(pages)/blogposts/[slug]/styles.module.css
index 7717e37..0f4e214 100644
--- a/src/app/(pages)/blogposts/[slug]/styles.module.css
+++ b/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);
diff --git a/src/app/(pages)/podcasts/[slug]/styles.module.css b/src/app/(pages)/podcasts/[slug]/styles.module.css
deleted file mode 100644
index e69de29..0000000
diff --git a/src/app/_blocks/EpisodeContent/styles.module.css b/src/app/_blocks/EpisodeContent/styles.module.css
index ae703ea..35ea725 100644
--- a/src/app/_blocks/EpisodeContent/styles.module.css
+++ b/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 {
diff --git a/src/app/_blocks/HubContentGrid/index.tsx b/src/app/_blocks/HubContentGrid/index.tsx
index fbc6d48..4519007 100644
--- a/src/app/_blocks/HubContentGrid/index.tsx
+++ b/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
 
@@ -32,17 +28,15 @@ export default function HubContentGrid({ content }) {
 
   const dynamicColor = {
     "--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={dynamicColor}>
         <div className={styles.contentGrid}>
           {filteredContent.map((article, i) => (
             <div className={styles.contentCard}>
diff --git a/src/app/_blocks/HubContentGrid/styles.module.css b/src/app/_blocks/HubContentGrid/styles.module.css
index 364bddf..e15697a 100644
--- a/src/app/_blocks/HubContentGrid/styles.module.css
+++ b/src/app/_blocks/HubContentGrid/styles.module.css
@@ -36,9 +36,11 @@
   }
 
   .contentGridContainer {
+    position: relative;
     border-top: 1px solid var(--dark-rock-800);
     border-radius: 25px;
     margin: 0 auto;
+    border-color: var(--dynamic-color);
   }
 
 }
diff --git a/src/app/_components/ArchiveButton/index.tsx b/src/app/_components/ArchiveButton/index.tsx
index 7ffda61..0baecda 100644
--- a/src/app/_components/ArchiveButton/index.tsx
+++ b/src/app/_components/ArchiveButton/index.tsx
@@ -2,7 +2,7 @@ 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"}/>,
 }
@@ -18,7 +18,7 @@ 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
 }
 
diff --git a/src/app/_components/ContentCard/index.tsx b/src/app/_components/ContentCard/index.tsx
index a15a171..25b4e05 100644
--- a/src/app/_components/ContentCard/index.tsx
+++ b/src/app/_components/ContentCard/index.tsx
@@ -26,7 +26,7 @@ interface ContentSummaryProps {
 
 const archiveMap = {
   Blogposts: "blogposts",
-  PodcastEpisodes: "podcast-episodes",
+  Podcasts: "podcasts",
   CaseStudies: "case-studies",
   TalksAndRoundtables: "talks-and-roundtables",
 };
@@ -34,25 +34,24 @@ const archiveMap = {
 export default function ContentCard({ contentType, content, rounded }: ContentSummaryProps) {
   const { slug, title, summary, featuredImage, categories, publishedAt, authors } = content;
   const borderStyle = {
-    '--dynamic-border': rounded ? '45px' : ''
-  }
+    "--dynamic-border": rounded ? "45px" : "",
+  };
 
   // todo: convert to a collection item property
-  const readTime = estimateReadTime("herpaderpa");
-
+  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 +64,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}
diff --git a/src/app/_components/PostSummary/styles.module.css b/src/app/_components/PostSummary/styles.module.css
index 1047635..9d6657d 100644
--- a/src/app/_components/PostSummary/styles.module.css
+++ b/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;
diff --git a/src/app/_utilities/estimateReadTime.ts b/src/app/_utilities/estimateReadTime.ts
index a5760ac..b7e86bc 100644
--- a/src/app/_utilities/estimateReadTime.ts
+++ b/src/app/_utilities/estimateReadTime.ts
@@ -1,4 +1,4 @@
-export function estimateReadTime(text: string): string {
+export function estimateReadTime(text: string | null): string {
   const WPM = 250
   const wordCount = text.split(/\s+/).length
   const readTimeMinutes = Math.ceil(wordCount / WPM)