add netlify builder to capture social images

plus also added an invalidator that should invalidate the image each
month

app/web/src/components/Seo/Seo.tsx

@@ -1,6 +1,6 @@
 import { Helmet } from 'react-helmet'
 
-const Seo = ({ title, description, lang }) => {
+const Seo = ({ title, description, lang, socialImageUrl}: { title: string; description: string; lang: string; socialImageUrl?: string}) => {
   return (
     <>
       <Helmet
@@ -14,6 +14,7 @@ const Seo = ({ title, description, lang }) => {
         <meta property="og:title" content={title} />
         <meta property="og:description" content={description} />
         <meta name="description" content={description} />
+        <meta property="og:image" content={socialImageUrl} />
         <title>Cadhub - {title}</title>
       </Helmet>
     </>

app/web/src/components/SocialCardCell/SocialCardCell.tsx

@@ -41,7 +41,7 @@ export const Success = ({
   const image = userProject?.Project?.mainImage
   const gravatar = userProject?.image
   return (
-    <div className="flex-col flex h-screen bg-ch-gray-800 text-ch-gray-300">
+    <div className="flex-col flex h-screen bg-ch-gray-800 text-ch-gray-300" id="social-card-loaded">
       <div
         className="flex-grow grid"
         style={{ gridTemplateColumns: '7fr 5fr' }}
@@ -82,7 +82,7 @@ export const Success = ({
           </div>
         </div>
         <div className="h-full overflow-hidden relative">
-          <div className="absolute inset-0 flex items-center">
+          <div className="absolute inset-0 flex items-center justify-center">
             <CloudinaryImage
               cloudName="irevdev"
               publicId={image || 'CadHub/eia1kwru54g2kf02s2xx'}

app/web/src/pages/NotFoundPage/NotFoundPage.js

@@ -43,6 +43,7 @@ export default () => (
     <section className="">
       <h1>
         <span className="font-ropa-sans">404 Page Not Found</span>
+        <div className="text-sm">{location.href} 🤷</div>
       </h1>
     </section>
   </MainLayout>

app/web/src/pages/ProjectPage/ProjectPage.tsx

@@ -9,9 +9,11 @@ import { Toaster } from '@redwoodjs/web/toast'
 const ProjectPage = ({ userName, projectTitle }) => {
   const { currentUser } = useAuth()
   const [state, thunkDispatch] = useIdeState()
+  const cacheInvalidator = new Date().toISOString().split('-').slice(0, 2).join('-')
+  const socialImageUrl = `/.netlify/functions/og-image-generator/${userName}/${projectTitle}/og-image-${cacheInvalidator}.jpg`
   return (
     <>
-      <Seo title={projectTitle} description={projectTitle} lang="en-US" />
+      <Seo title={projectTitle} description={projectTitle} socialImageUrl={socialImageUrl} lang="en-US" />
       <Toaster timeout={1500} />
       <IdeContext.Provider value={{ state, thunkDispatch, project: null }}>
         <ProjectCell