format project

app/api/src/services/og-image-generator.ts

@@ -9,7 +9,7 @@ const captureHeight = 630
 const clipY = 0
 
 async function unwrappedHandler(event, context) {
-  let path = event.path
+  const path = event.path
     .replace(/.+\/og-image-generator/, '')
     .replace(/\/og-image-.+\.jpg/, '')
 
@@ -19,17 +19,23 @@ async function unwrappedHandler (event, context) {
     executablePath: process.env.URL?.includes('localhost')
       ? null
       : await executablePath,
-    args: ['--no-sandbox','--disable-web-security','--disable-gpu', '--hide-scrollbars', '--disable-setuid-sandbox'],
+    args: [
+      '--no-sandbox',
+      '--disable-web-security',
+      '--disable-gpu',
+      '--hide-scrollbars',
+      '--disable-setuid-sandbox',
+    ],
     // args: chromium.args,
     defaultViewport: {
       width: captureWidth,
-      height: captureHeight + clipY
+      height: captureHeight + clipY,
     },
-    headless: headless
+    headless: headless,
   })
   const page = await browser.newPage()
 
-  await page.goto(url, {"waitUntil" : "networkidle0"});
+  await page.goto(url, { waitUntil: 'networkidle0' })
 
   const screenshot = await page.screenshot({
     type: 'jpeg',
@@ -40,8 +46,8 @@ async function unwrappedHandler (event, context) {
       x: 0,
       y: clipY,
       width: captureWidth,
-      height: captureHeight
-    }
+      height: captureHeight,
+    },
   })
 
   await browser.close()
@@ -55,10 +61,10 @@ async function unwrappedHandler (event, context) {
   return {
     statusCode: 200,
     headers: {
-      'Content-Type': 'image/jpg'
+      'Content-Type': 'image/jpg',
     },
     body: screenshot,
-    isBase64Encoded: true
+    isBase64Encoded: true,
   }
 }
 

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

@@ -1,6 +1,16 @@
 import { Helmet } from 'react-helmet'
 
-const Seo = ({ title, description, lang, socialImageUrl}: { title: string; description: string; lang: string; socialImageUrl?: string}) => {
+const Seo = ({
+  title,
+  description,
+  lang,
+  socialImageUrl,
+}: {
+  title: string
+  description: string
+  lang: string
+  socialImageUrl?: string
+}) => {
   return (
     <>
       <Helmet

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

@@ -41,7 +41,10 @@ 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" id="social-card-loaded">
+    <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' }}

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

@@ -9,11 +9,20 @@ 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 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} socialImageUrl={socialImageUrl} lang="en-US" />
+      <Seo
+        title={projectTitle}
+        description={projectTitle}
+        socialImageUrl={socialImageUrl}
+        lang="en-US"
+      />
       <Toaster timeout={1500} />
       <IdeContext.Provider value={{ state, thunkDispatch, project: null }}>
         <ProjectCell