✨ NICE-92 Relations rewrite; Secondary addition [b] (#2306)

Still hard-coded a bit, but this removes a double-API call and adds feature to get secondary relations.

Refactors the Relations components as a result.

- [x] ♻️  NICE-92 error handling, radix comps
- [x] ♻️  NICE-92 Tabs for Banner
- [x] ♻️  NICE-92 generateMetadataCustom image cache 1/2
  - This will be reworked more in a later PR
- [x] ♻️  NICE-92 tab colors and label
- [x] ♻️  NICE-92 swap filenames, +/-gray for body

packages/tailwind-config/tailwind.config.js

@@ -121,11 +121,11 @@ const config = ({ useTailwind = true }) => ({
         // black: '#000000', // Black
         // white: '#ffffff', // White
 
-        // black: '#030303', // Gray 01
-        // white: '#fcfcfc', // Gray 99
+        black: '#030303', // Gray 01
+        white: '#fcfcfc', // Gray 99
 
-        black: '#050505', // Gray 02
-        white: '#fafafa', // Gray 98
+        // black: '#050505', // Gray 02
+        // white: '#fafafa', // Gray 98
 
         // black: '#0f0f0f', // Gray 06
         // white: '#f4f4f4', // Gray 94

sites/jeromefitzgerald.com/src/app/(notion)/_config/temp/generateMetadataCustom.ts

@@ -4,27 +4,89 @@
  * This needs to be moved elsewhere
  *
  */
+import https from 'node:https'
+
+import { isObjectEmpty } from '@jeromefitz/utils'
+
+import { Redis } from '@upstash/redis'
+import { slug as _slug } from 'github-slugger'
 import _title from 'title'
+import validUrl from 'valid-url'
+
+const redis = Redis.fromEnv({
+  agent: new https.Agent({ keepAlive: true }),
+  retry: {
+    backoff: (retryCount) => Math.exp(retryCount) * 50,
+    retries: 5,
+  },
+})
 
+const CACHE_KEY_PREFIX__IMAGE = `${process.env.NEXT_PUBLIC__SITE}/image`
+
+// @todo(complexity) 17
+// eslint-disable-next-line complexity
 async function generateMetadataCustom({ data, pageData, segmentInfo }) {
   const hasImage = !!pageData?.seoImage
-  let images: any = undefined
+  const images: any = undefined
   if (hasImage) {
-    const { getImage } = await import('@jeromefitz/shared/plaiceholder/index')
-    const imageUrl = pageData?.seoImage[pageData?.seoImage?.type]?.url
-    // console.dir(`imageUrl:`)
-    // console.dir(imageUrl)
-    const imageData = await getImage(imageUrl)
-    // console.dir(`imageData:`)
-    // console.dir(imageData)
-    images = [
-      {
+    /**
+     * @todo(notion) check against cache first
+     */
+    const imageUrl = !!pageData?.seoImage
+      ? pageData?.seoImage[pageData?.seoImage?.type]?.url
+      : undefined
+
+    let key = '',
+      slugImage = ''
+
+    if (imageUrl) {
+      if (validUrl.isHttpsUri(imageUrl)) {
+        slugImage = _slug(imageUrl.includes('?') ? imageUrl.split('?')[0] : imageUrl)
+        key = `${CACHE_KEY_PREFIX__IMAGE}/${slugImage}`.toLowerCase()
+      }
+    }
+
+    const cache: any = await redis.get(key)
+    const isCached = !!cache && !isObjectEmpty(cache)
+    const images = !!cache ? cache : []
+
+    if (!isCached && !!imageUrl) {
+      // console.dir(`[generateMetadataCustom] !isCached && !!imageUrl`)
+      const { getImage } = await import('@jeromefitz/shared/plaiceholder/index')
+      const imageData = await getImage(imageUrl)
+      // image.blurDataURL = imageData?.base64
+      // image = {
+      //   alt: imageSeoDescription,
+      //   ...image,
+      //   ...imageData?.img,
+      // }
+      images.push({
         alt: pageData?.seoImageDescription,
         height: imageData?.img?.height,
         url: imageData?.img?.src,
         width: imageData?.img?.width,
-      },
-    ]
+      })
+    } else {
+      // console.dir(`[generateMetadataCustom] isCached`)
+    }
+    /**
+     * @todo(notion) setCache
+     */
+
+    // const { getImage } = await import('@jeromefitz/shared/plaiceholder/index')
+    // // console.dir(`imageUrl:`)
+    // // console.dir(imageUrl)
+    // const imageData = await getImage(imageUrl)
+    // // console.dir(`imageData:`)
+    // // console.dir(imageData)
+    // images = [
+    //   {
+    //     alt: pageData?.seoImageDescription,
+    //     height: imageData?.img?.height,
+    //     url: imageData?.img?.src,
+    //     width: imageData?.img?.width,
+    //   },
+    // ]
   }
 
   let titleSeo = ''

sites/jeromefitzgerald.com/src/app/(notion)/events/[[...catchAll]]/_components/Event.Slug.tsx

@@ -21,7 +21,11 @@ import { notFound } from 'next/navigation.js'
 // import { Image } from '@/app/(notion)/(utils)/blocks/Image'
 import type { PropertiesEvent } from '@/app/(notion)/_config/index'
 
-import { CONFIG, getEventData } from '@/app/(notion)/_config/index'
+import {
+  CONFIG,
+  getEventData,
+  getPropertyTypeDataEvent,
+} from '@/app/(notion)/_config/index'
 import { Grid } from '@/components/Grid/index'
 import {
   HeadlineColumnA,
@@ -73,7 +77,8 @@ const RELATIONS_SECONDARY = [
       'Relation.People.Thanks',
       'Relation.People.Writer',
     ],
-    to: 'people',
+    // to: 'people',
+    to: 'shows',
   },
 ]
 
@@ -174,12 +179,52 @@ async function Slug({ revalidate, segmentInfo }) {
   if (is404) return notFound()
 
   const { properties }: { properties: PropertiesEvent } = data?.page
-  const { isPublished, tags, title } = getEventData(properties)
+  const { id, isPublished, tags, title } = getEventData(properties)
 
   // console.dir(`isPublished:      ${isPublished ? 'y' : 'n'}`)
 
   if (!isPublished) return notFound()
 
+  const R: any = {}
+  RELATIONS.map((relation: RELATIONS_TYPE) => {
+    R[relation] = []
+    const items = getPropertyTypeDataEvent(properties, relation)
+    items.map((item) => {
+      R[relation].push(item.id)
+    })
+  })
+
+  const showPrimarySlug = getPropertyTypeDataEvent(
+    properties,
+    'Rollup.Shows.Primary.Slug',
+  )[0]
+  // console.dir(`showPrimarySlug: ${showPrimarySlug}`)
+  const showPrimaryData = await getDataFromCache({
+    database_id: DATABASE_ID,
+    draft: false,
+    filterType: 'equals',
+    revalidate: false,
+    segmentInfo: {
+      catchAll: ['shows', showPrimarySlug],
+      hasMeta: true,
+      isIndex: false,
+      segment: 'shows',
+      segmentCount: 2,
+      slug: `/shows/${showPrimarySlug}`,
+    },
+  })
+  if (!!showPrimaryData?.page) {
+    const { properties: showPrimaryProperties }: { properties: any } =
+      showPrimaryData?.page
+    RELATIONS_SECONDARY[0]?.relations?.map((relation: RELATIONS_TYPE) => {
+      R[relation] = []
+      const items = getPropertyTypeDataEvent(showPrimaryProperties, relation)
+      items.map((item) => {
+        R[relation].push(item.id)
+      })
+    })
+  }
+
   return (
     <>
       <Grid>
@@ -217,11 +262,7 @@ async function Slug({ revalidate, segmentInfo }) {
         </HeadlineColumnA>
         <HeadlineContent className="">
           <Separator className="mb-4 opacity-50" />
-          <Relations
-            properties={properties}
-            relations={RELATIONS}
-            relationsSecondary={RELATIONS_SECONDARY}
-          />
+          <Relations id={id} key={`relations--${id}--wrapper`} relations={R} />
         </HeadlineContent>
       </Grid>
     </>

sites/jeromefitzgerald.com/src/app/(notion)/people/[[...catchAll]]/_components/Person.Slug.tsx

@@ -6,7 +6,11 @@ import { notFound } from 'next/navigation.js'
 
 import type { PropertiesPerson } from '@/app/(notion)/_config/index'
 
-import { CONFIG, getPersonData } from '@/app/(notion)/_config/index'
+import {
+  CONFIG,
+  getPersonData,
+  getPropertyTypeDataPerson,
+} from '@/app/(notion)/_config/index'
 import { Grid } from '@/components/Grid/index'
 import {
   HeadlineColumnA,
@@ -39,10 +43,19 @@ async function Slug({ revalidate, segmentInfo }) {
   if (is404) return notFound()
 
   const { properties }: { properties: PropertiesPerson } = data?.page
-  const { isPublished, title } = getPersonData(properties)
+  const { id, isPublished, title } = getPersonData(properties)
 
   if (!isPublished) return notFound()
 
+  const R: any = {}
+  RELATIONS.map((relation: RELATIONS_TYPE) => {
+    R[relation] = []
+    const items = getPropertyTypeDataPerson(properties, relation)
+    items.map((item) => {
+      R[relation].push(item.id)
+    })
+  })
+
   return (
     <>
       <Grid>
@@ -62,11 +75,7 @@ async function Slug({ revalidate, segmentInfo }) {
           </HeadlineTitle>
         </HeadlineColumnA>
         <HeadlineContent className="">
-          <Relations
-            properties={properties}
-            relations={RELATIONS}
-            relationsSecondary={[]}
-          />
+          <Relations id={id} relations={R} />
         </HeadlineContent>
       </Grid>
       <Grid>

sites/jeromefitzgerald.com/src/app/(notion)/podcasts/[[...catchAll]]/_components/Episode.Slug.tsx

@@ -17,7 +17,11 @@ import { notFound } from 'next/navigation.js'
 
 import type { PropertiesEpisode } from '@/app/(notion)/_config/index'
 
-import { CONFIG, getEpisodeData } from '@/app/(notion)/_config/index'
+import {
+  CONFIG,
+  getEpisodeData,
+  getPropertyTypeDataEpisode,
+} from '@/app/(notion)/_config/index'
 import { Image } from '@/app/(notion)/events/[[...catchAll]]/_components/Image'
 import { Grid } from '@/components/Grid/index'
 import {
@@ -32,6 +36,7 @@ const { DATABASE_ID } = CONFIG.EPISODES
 
 type RELATIONS_TYPE = keyof PropertiesEpisode
 const RELATIONS: RELATIONS_TYPE[] = [
+  'Relation.Podcasts',
   'Relation.People.Guest',
   'Relation.People.SoundEngineer',
   // 'Relation.People.Thanks',
@@ -171,10 +176,54 @@ async function EpisodeSlug({ revalidate, segmentInfo }) {
   if (is404) return notFound()
 
   const { properties }: { properties: PropertiesEpisode } = data?.page
-  const { isPublished, title } = getEpisodeData(properties)
+  const { href, id, isPublished, title } = getEpisodeData(properties)
+  // console.dir(props)
+  // console.dir(properties)
 
   if (!isPublished) return notFound()
 
+  const R: any = {}
+  RELATIONS.map((relation: RELATIONS_TYPE) => {
+    R[relation] = []
+    const items = getPropertyTypeDataEpisode(properties, relation)
+    items.map((item) => {
+      R[relation].push(item.id)
+    })
+  })
+
+  /**
+   * @note(notion) this rollup does not work?!
+   */
+  // const podcastSlug = getPropertyTypeDataEpisode(properties, 'Rollup.Podcasts.Slug')
+  const podcastSlug = href.split('/')[2]
+  // console.dir(`href:        ${href}`)
+  // console.dir(`podcastSlug: ${podcastSlug}`)
+  const podcastPrimaryData = await getDataFromCache({
+    database_id: DATABASE_ID,
+    draft: false,
+    filterType: 'equals',
+    revalidate: false,
+    segmentInfo: {
+      catchAll: ['podcasts', podcastSlug],
+      hasMeta: true,
+      isIndex: false,
+      segment: 'podcasts',
+      segmentCount: 2,
+      slug: `/podcasts/${podcastSlug}`,
+    },
+  })
+  if (!!podcastPrimaryData) {
+    const { properties: podcastPrimaryProperties }: { properties: any } =
+      podcastPrimaryData?.page
+    RELATIONS_SECONDARY[0]?.relations?.map((relation: RELATIONS_TYPE) => {
+      R[relation] = []
+      const items = getPropertyTypeDataEpisode(podcastPrimaryProperties, relation)
+      items.map((item) => {
+        R[relation].push(item.id)
+      })
+    })
+  }
+
   return (
     <>
       <Grid>
@@ -199,11 +248,7 @@ async function EpisodeSlug({ revalidate, segmentInfo }) {
         <HeadlineContent className="">
           <Separator className="mb-4 opacity-50" />
           <Rollups properties={properties} />
-          <Relations
-            properties={properties}
-            relations={RELATIONS}
-            relationsSecondary={RELATIONS_SECONDARY}
-          />
+          <Relations id={id} relations={R} />
         </HeadlineContent>
       </Grid>
     </>

sites/jeromefitzgerald.com/src/app/(notion)/podcasts/[[...catchAll]]/_components/Podcast.Slug.tsx

@@ -10,7 +10,11 @@ import { notFound } from 'next/navigation.js'
 
 import type { PropertiesPodcast } from '@/app/(notion)/_config/index'
 
-import { CONFIG, getPodcastData } from '@/app/(notion)/_config/index'
+import {
+  CONFIG,
+  getPodcastData,
+  getPropertyTypeDataPodcast,
+} from '@/app/(notion)/_config/index'
 import { Grid } from '@/components/Grid/index'
 import {
   HeadlineColumnA,
@@ -47,10 +51,19 @@ async function Slug({ revalidate, segmentInfo }) {
   if (is404) return notFound()
 
   const { properties }: { properties: PropertiesPodcast } = data?.page
-  const { isPublished, tags, title } = getPodcastData(properties)
+  const { id, isPublished, tags, title } = getPodcastData(properties)
 
   if (!isPublished) return notFound()
 
+  const R: any = {}
+  RELATIONS.map((relation: RELATIONS_TYPE) => {
+    R[relation] = []
+    const items = getPropertyTypeDataPodcast(properties, relation)
+    items.map((item) => {
+      R[relation].push(item.id)
+    })
+  })
+
   return (
     <>
       <Grid>
@@ -90,11 +103,7 @@ async function Slug({ revalidate, segmentInfo }) {
         </HeadlineColumnA>
         <HeadlineContent className="">
           <Separator className="mb-4 opacity-50" />
-          <Relations
-            properties={properties}
-            relations={RELATIONS}
-            relationsSecondary={[]}
-          />
+          <Relations id={id} relations={R} />
         </HeadlineContent>
       </Grid>
     </>