encapsulate hub head block

README.md

@@ -199,7 +199,7 @@ Core features:
 
 ### Cache
 
-Although Next.js includes a robust set of caching strategies out of the box, Payload Cloud proxies and caches all files through Cloudflare using the [Official Cloud Plugin](https://github.com/payloadcms/plugin-cloud). This means that Next.js caching is not needed and is disabled by default. If you are hosting your app outside of Payload Cloud, you can easily reenable the Next.js caching mechanisms by removing the `no-store` directive from all fetch requests in `./src/app/_api` and then removing all instances of `export const dynamic = 'force-dynamic'` from pages files, such as `./src/app/(pages)/[slug]/page.tsx`. For more details, see the official [Next.js Caching Docs](https://nextjs.org/docs/app/building-your-application/caching).
+Although Next.js includes a robust set of caching strategies out of the box, Payload Cloud proxies and caches all files through Cloudflare using the [Official Cloud Plugin](https://github.com/payloadcms/plugin-cloud). This means that Next.js caching is not needed and is disabled by default. If you are hosting your app outside of Payload Cloud, you can easily reenable the Next.js caching mechanisms by removing the `no-store` directive from all fetch requests in `./src/app/_api` and then removing all instances of `export const dynamic = 'force-dynamic'` from pages files, such as `./src/app/(pages)/[slug]/index.tsx`. For more details, see the official [Next.js Caching Docs](https://nextjs.org/docs/app/building-your-application/caching).
 
 ### Eject
 
@@ -244,7 +244,7 @@ The seed script will also create two users for demonstration purposes only:
 
 > In a monorepo when routes are bootstrapped to the same host, they can conflict with Payload's own routes if they have the same name. In our template we've named the Nextjs API routes to `next` to avoid this conflict.
 >
->This can happen with any other routes conflicting with Payload such as `admin` and we recommend using different names for custom routes.  
+>This can happen with any other routes conflicting with Payload such as `admin` and we recommend using different names for custom routes.
 >Alternatively you can also rename Payload's own routes via the [configuration](https://payloadcms.com/docs/configuration/overview).
 
 ## Production

package.json

@@ -29,6 +29,7 @@
     "@payloadcms/plugin-seo": "^1.0.10",
     "@payloadcms/richtext-lexical": "^0.11.3",
     "@payloadcms/richtext-slate": "^1.0.0",
+    "clsx": "^2.1.1",
     "cross-env": "^7.0.3",
     "dotenv": "^8.2.0",
     "escape-html": "^1.0.3",

src/app/(pages)/[slug]/page.tsx

@@ -3,15 +3,16 @@ import { draftMode } from 'next/headers'
 
 import { Page } from '../../../payload/payload-types'
 import { fetchDoc } from '../../_api/fetchDoc'
-import HubContentGrid from '../../_blocks/HubContentGrid/page'
+import HubContentGrid from '../../_blocks/HubContentGrid'
 import { Subscribe } from '../../_blocks/Subscribe'
 import SearchBar from '../../_components/SearchBar'
 import { ALL_CONTENT } from '../../_graphql/allContent'
 import { fetcher } from '../../_utilities/fetcher'
 import { generateMeta } from '../../_utilities/generateMeta'
 import styles from './styles.module.css'
 
-import { AllIcon } from '@/app/_icons/icons'
+import { fetchSettings } from '@/app/_api/fetchGlobals'
+import HubHead from '@/app/_blocks/HubHead'
 
 // Payload Cloud caches all files through Cloudflare, so we don't need Next.js to cache them as well
 // This means that we can turn off Next.js data caching and instead rely solely on the Cloudflare CDN
@@ -23,54 +24,17 @@ export const dynamic = 'force-dynamic'
 
 export default async function Page({ params: { slug = 'home' } }) {
   const articles = await fetcher({ query: ALL_CONTENT })
+  const highglights = await fetchSettings()
 
   return (
     <>
-      {/* Head Block*/}
-      <div className={styles.headBlock}>
-        <div className={styles.hubLogo}>
-          <p>
-            Content
-            <br />
-            <span style={{ fontFamily: 'var(--acta-bold)' }}>Hub</span>
-          </p>
-        </div>
-
-        {/*  Top Highlight  */}
-        <div className={`${styles.highlights} ${styles.topHighlight}`}>
-          <p> HIGHLIGHTS </p>
-          <h6> From nutritionist to product designer: Reinvinting my carrer at 30</h6>
-          <p>
-            <span className={styles.categoryPill}>Inside subvisual</span> Date and Readtime{' '}
-          </p>
-          <div className={styles.authorPill}>
-            <img className={styles.authorImage} src={'/static-image.jpg'} />
-            Rui Sousa
-          </div>
-        </div>
-
-        {/*  Bottom Highlight */}
-        <div className={`${styles.highlights} ${styles.bottomHighlight}`}>
-          <p> HIGHLIGHTS </p>
-          <p>
-            {' '}
-            From nutritionist to product designer: <br /> Reinvinting my carrer at 30
-          </p>
-          <p>
-            <span className={styles.categoryPill}>Inside subvisual</span> Date and Readtime{' '}
-          </p>
-          <div className={styles.authorPill}>
-            <img className={styles.authorImage} src={'/static-image.jpg'} />
-            Rui Sousa
-          </div>
-        </div>
-      </div>
+      <HubHead highlights={highglights} />
 
       {/* Search Bar */}
       <SearchBar />
+
       {/* Content Grid */}
       <HubContentGrid articles={articles} />
-
       <Subscribe />
     </>
   )

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

@@ -1,113 +0,0 @@
-/* Top block */
-.headBlock {
-  width: var(--content-width);
-  margin: 0 auto;
-  display: grid;
-  grid-template-rows: repeat(2, 1fr);
-  row-gap: 20px;
-  column-gap: 20px;
-}
-
-.hubLogo {
-  display: flex;
-  background-color: var(--sub-purple-600);
-  border-radius: 45px;
-  font-family: var(--colfax);
-  color: white;
-  align-items: flex-end;
-  line-height: 48px;
-  font-size: var(--size-48);
-  padding-bottom: 20px;
-  padding-left: 40px;
-}
-
-.highlights {
-  padding: 30px 20px;
-}
-
-.topHighlight {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  border-radius: 45px;
-  background-color: var(--sub-purple-400);
-  color: var(--soft-white-100);
-}
-
-.bottomHighlight {
-  display: none;
-}
-
-.categoryPill {
-  color: var(--sub-blue-800);
-  background-color: var(--sub-blue-100);
-  height: 28px;
-  padding: 4px 20px;
-  border-radius: 100px;
-  font-family: var(--colfax);
-  font-weight: bold;
-  font-size: var(--size-10);
-  align-content: center;
-}
-
-.authorPill {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  background-color: var(--soft-white-100);
-  width: fit-content;
-  border-radius: 100px;
-  padding: 5px 15px 5px 5px;
-  color: var(--dark-rock-800);
-  font-size: var(--size-12);
-  font-family: var(--colfax);
-}
-
-.authorImage {
-  width: 34px;
-  height: 34px;
-  border-radius: 50%;
-}
-
-
-
-
-
-
-
-@media (min-width: 1024px) {
-
-  /* Head block */
-  .headBlock {
-    grid-template-columns: 1fr 1fr;
-    grid-template-rows: repeat(2, 1fr);
-  }
-
-  .hubLogo {
-    grid-column: 1;
-    grid-row: 1 / 3;
-    font-size: var(--size-113);
-    line-height: 1;
-  }
-
-  .topHighlight {
-    grid-column: 2;
-  }
-
-  .bottomHighlight {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    border-radius: 45px;
-    border: 1px solid var(--dark-rock-800);
-    grid-column: 2;
-  }
-
-  .categoryPill {
-    font-size: var(--size-16);
-  }
-
-
-
-
-}

src/app/_components/ContentNavBar/DropdownMenu/index.tsx → src/app/_blocks/HubContentGrid/NavBar/DropdownMenu/index.tsx

@@ -8,8 +8,8 @@ import {
   ChevronUpIcon,
   PodcastIcon,
   TalksIcon,
-} from '../../../_icons/icons'
-import { ContentTypeArrays } from '../../../_interfaces/ContentTypeArrays'
+} from '../../../../_icons/icons'
+import { ContentTypeArrays } from '../../../../_interfaces/ContentTypeArrays'
 import styles from './styles.module.css'
 
 const iconMap = {

src/app/_components/ContentNavBar/DropdownMenu/styles.module.css → src/app/_blocks/HubContentGrid/NavBar/DropdownMenu/styles.module.css

@@ -79,4 +79,5 @@
   .dropdownContainer {
     display: none;
   }
+
 }

src/app/_components/ContentNavBar/ContentNavBar.tsx → src/app/_blocks/HubContentGrid/NavBar/index.tsx

@@ -1,11 +1,10 @@
 'use client'
 
+import { ContentTypeArrays } from '../../../_interfaces/ContentTypeArrays'
 import { AllContent, Blogposts, CaseStudies, Podcasts, Talks } from './Buttons'
 import DropdownMenu from './DropdownMenu'
 import styles from './styles.module.css'
 
-import { ContentTypeArrays } from '@/app/_interfaces/ContentTypeArrays'
-
 export default function ContentNavBar({
   activeButton,
   onActiveButtonChange,

src/app/_blocks/HubContentGrid/page.tsx → src/app/_blocks/HubContentGrid/index.tsx

@@ -3,11 +3,12 @@
 import { useState } from 'react'
 
 import ContentCard from '../../_components/ContentCard'
-import ContentNavBar from '../../_components/ContentNavBar/ContentNavBar'
 import { ContentTypeArrays } from '../../_interfaces/ContentTypeArrays'
 import { filterArticles } from '../../_utilities/filterArticles'
 import styles from './styles.module.css'
 
+import ContentNavBar from './NavBar'
+
 const colorMap = {
   All: 'var(--dark-rock-800)',
   Blogposts: 'var(--sub-blue-600)',
@@ -38,7 +39,10 @@ export default function HubContentGrid({ articles }: HubContentGridProps) {
     <>
       {/* ToDo: add conditional management of border-top-right-radius based on dropdown toggle */}
       <ContentNavBar activeButton={activeButton} onActiveButtonChange={handleActiveButtonChange} />
-      <div className={styles.contentGridContainer} style={{ borderColor: colorMap[activeButton] }}>
+      <div
+        className={styles.contentGridContainer}
+        style={{ '--dynamic-color': colorMap[activeButton] }}
+      >
         <div className={styles.contentGrid}>
           {filteredArticles.map((article, i) => (
             <div className={styles.contentCard} key={i}>

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

@@ -7,7 +7,7 @@
   border-bottom-right-radius: 45px;
   border-bottom-left-radius: 45px;
   border-top-right-radius: 45px;
-  border: 1px solid var(--dark-rock-800) !important;
+  border: 1px solid var(--dark-rock-800);
   border-top: none;
   overflow: hidden;
   z-index: 3;
@@ -30,20 +30,13 @@
 
 }
 
-.contentCard {
-  padding: 50px 20px;
-  height: min-content;
-  border: 1px solid var(--dark-rock-800);
-  border-top: none;
-}
-
 @media(min-width: 1024px) {
   .contentGrid {
     grid-template-columns: repeat(3, 1fr);
   }
 
   .contentGridContainer {
-    border-top: 1px solid;
+    border-top: 1px solid var(--dynamic-color);
     border-radius: 25px;
     margin: 0 auto;
   }

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

@@ -0,0 +1,37 @@
+import AuthorPill from '../../../_components/AuthorPill'
+import CategoryPill from '../../../_components/CategoryPill'
+import { SpectaclesIcon } from '../../../_icons/icons'
+import { estimateReadTime } from '../../../_utilities/estimateReadTime'
+import { formatDateTime } from '../../../_utilities/formatDateTime'
+import styles from './styles.module.css'
+
+export function Highlights({ content, main }) {
+  const { title, publisedAt, categories, authors } = content
+
+  return (
+    <div
+      className={`${styles.highlights} ${main ? styles.mainHighlight : styles.secondaryHighlight}`}
+    >
+      <p className={styles.overline}> HIGHLIGHTS </p>
+      <h6> {title} </h6>
+      <div className={styles.metadataContainer}>
+        {/* TODO: is this a good approach for multi category items? */}
+        {categories.length > 5 ? (
+          <CategoryPill title={categories[0].title} />
+        ) : (
+          categories.map((category, i) => <CategoryPill key={i} title={category.title} />)
+        )}
+
+        <span className={styles.publishedDate}>{formatDateTime(publisedAt)}</span>
+        <span className={styles.readTime}>
+          <SpectaclesIcon
+            width={'32'}
+            fill={main ? 'var(--soft-white-100)' : 'var(--dark-rock-800)'}
+          />
+          {estimateReadTime('Placeholder')}
+        </span>
+      </div>
+      <AuthorPill author={authors[0]} />
+    </div>
+  )
+}