fix: featured images

app/api/index.ts

@@ -4,6 +4,7 @@ import he from 'he'
 import { keysToCamelDeep } from '~/helpers/keys-to-camel'
 import type {
   Category,
+  MediaDetails,
   MediaItem,
   Menu,
   Pagination,
@@ -305,14 +306,17 @@ const getPageBySlug = async (slug: string): Promise<WPPage> => {
   }
 }
 
-export const getPostPreview = async(id: string, nonce: string, request: Request): Promise<Post> => {
+export const getPostPreview = async (
+  id: string,
+  nonce: string,
+  request: Request
+): Promise<Post> => {
   console.log('sending nonce and cookies', nonce, request.headers.get('cookie'))
 
-
   const response = await fetch(
     `https://content.gotripod.com/wp-json/wp/v2/posts/${id}?preview=true&_wpnonce=${nonce}&_embed=1`,
     {
-      headers: { cookie: request.headers.get("cookie") || '' }
+      headers: { cookie: request.headers.get('cookie') || '' }
     }
   )
   const json = (await response.json()) as any
@@ -324,15 +328,17 @@ const getPostBySlug = async (slug: string): Promise<Post> => {
     `https://content.gotripod.com/wp-json/wp/v2/posts?_embed=1&slug=${slug}`
   )
   const json = (await response.json()) as any
-  
+
   return postResponseToPost(json[0])
 }
 
 interface PostResponse {
   acf?: {
-    article_author: {
-      ID: number
-    } | false
+    article_author:
+      | {
+          ID: number
+        }
+      | false
   }
   yoast_head: string
   id: number
@@ -346,6 +352,12 @@ interface PostResponse {
   slug: string
   link: string
   _embedded: {
+    'wp:featuredmedia': Array<{
+      title: {
+        rendered: string
+      }
+      media_details: MediaDetails
+    }>
     'wp:term': Array<{
       name: string
       link: string
@@ -354,10 +366,9 @@ interface PostResponse {
       id: number
     }>
   }
-
 }
 
-const postResponseToPost = async(post: PostResponse): Promise<Post> => {
+const postResponseToPost = async (post: PostResponse): Promise<Post> => {
   console.log('post.acf', post.acf)
   const teamMemberId = post.acf?.article_author ? post.acf.article_author.ID : null
   console.log('teamMemberId', teamMemberId)
@@ -371,6 +382,8 @@ const postResponseToPost = async(post: PostResponse): Promise<Post> => {
   return {
     yoastHtml: post.yoast_head,
     id: post.id,
+    featuredMedia:
+      post._embedded['wp:featuredmedia'] && post._embedded['wp:featuredmedia'][0].media_details,
     title: he.decode(post.title.rendered),
     content: post.content.rendered,
     date: post.date,

app/components/footer.tsx

@@ -7,6 +7,7 @@ import {
 import Link from './link'
 import type { FooterProps, NavProps, PProps } from 'react-html-props'
 import { useMenu } from '~/hooks/menu'
+import { ClientOnly } from 'remix-utils/client-only'
 
 const Footer = () => {
   const menu = useMenu()
@@ -65,8 +66,20 @@ const Footer = () => {
       </div>
 
       <ul className="list-none px-8 xl:p-0 flex justify-center md:justify-end max-w-[1140px] md:text-base mx-auto mb-4 mt-0 items-center">
-        <li className='flex-1'>
-          <div className="clutch-widget" data-url="https://widget.clutch.co" data-widget-type="1" data-height="40" data-nofollow="true" data-expandifr="true" data-scale="100" data-clutchcompany-id="1916066"></div>
+        <li className="flex-1">
+          <ClientOnly>
+            {() => (
+              <div
+                className="clutch-widget"
+                data-url="https://widget.clutch.co"
+                data-widget-type="1"
+                data-height="40"
+                data-nofollow="true"
+                data-expandifr="true"
+                data-scale="100"
+                data-clutchcompany-id="1916066"></div>
+            )}
+          </ClientOnly>
         </li>
         <li className="mr-2">
           <a
@@ -95,7 +108,6 @@ const Footer = () => {
             <Linkedin size={18} color={'white'} />
           </a>
         </li>
-
       </ul>
 
       <Rights className="bg-zinc-800 text-sm py-4 px-4 md:px-8">

app/components/header/index.tsx

@@ -30,9 +30,9 @@ const Header = React.memo(() => {
           setLoaded(true)
         }}
         alt=""
-        src={hero?.guid}
-        srcSet={hero?.srcSet}
-        className="absolute md:object-cover object-top md:object-center grayscale-[50%] opacity-60 blur-[1px] md:blur-[3px]"
+        src={hero && ('srcSet' in hero ? hero.guid : hero.sizes.full.source_url)}
+        srcSet={hero && 'srcSet' in hero ? hero?.srcSet : ''}
+        className="absolute object-cover object-top grayscale-[30%] opacity-90 blur-[1px] md:blur-[2px]"
       />
     </header>
   )

app/hooks/wp.ts

@@ -1,19 +1,28 @@
 import type { SerializeFrom } from '@remix-run/cloudflare'
 import { useMatches } from '@remix-run/react'
 import type { loader } from '~/routes/insights'
-import type { Category, Taxonomy, WPPage } from '~/types'
+import type { Category, Post, Taxonomy, WPPage } from '~/types'
 
 export const useHero = () => {
   const matches = useMatches()
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const match = matches.find((x: any) => 'page' in x.data)
-  if (match) {
+  const pageMatch = matches.find((x: any) => 'page' in x.data)
+  if (pageMatch) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const page = (match.data as any).page as WPPage
+    const page = (pageMatch.data as any).page as WPPage
     return page.hero as GQLMediaItem
   }
 
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const postMatch = matches.find((x: any) => 'post' in x.data)
+
+  if (postMatch) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const post = (postMatch.data as any).post as Post
+    return post.featuredMedia
+  }
+
   return undefined
 }
 

app/root.tsx

@@ -7,7 +7,8 @@ import {
   Scripts,
   ScrollRestoration,
   useLoaderData,
-  useLocation
+  useLocation,
+  useRouteError
 } from '@remix-run/react'
 import stylesheet from '~/tailwind.css?url'
 import { useEffect } from 'react'
@@ -57,14 +58,32 @@ export const links: LinksFunction = () => {
     //   rel: "stylesheet",
     //   href: styles,
     // },
-    { rel: 'stylesheet', href: stylesheet },
+    { rel: 'stylesheet', href: stylesheet }
   ]
 }
 
 interface Env {
   GA_TRACKING_ID: string | undefined
 }
 
+export function ErrorBoundary() {
+  const error = useRouteError()
+  console.error(error)
+  return (
+    <html>
+      <head>
+        <title>Oh no!</title>
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <h1>There was an unexpected error!</h1>
+        <Scripts />
+      </body>
+    </html>
+  )
+}
+
 export const loader = async ({ context }: LoaderFunctionArgs) => {
   const env = (context.env || {}) as Env
 
@@ -134,7 +153,6 @@ export default function App() {
 
         <ScrollRestoration />
         <Scripts />
-
       </body>
     </html>
   )

app/tailwind.css

@@ -12,6 +12,10 @@ h2 {
 }
 
 @layer utilities {
+  .is-layout-flex {
+    @apply md:flex gap-8;
+  }
+
   .fancy {
     position: relative;
   }

app/types.ts

@@ -87,6 +87,7 @@ export interface Post {
   link: string
   id: number
   title: string
+  featuredMedia: MediaDetails
   content: string
   taxonomies: Taxonomy[]
   teamMember?: {