diff --git a/app/api/src/services/og-image-generator.ts b/app/api/src/services/og-image-generator.ts index f5877c6..93adbdd 100644 --- a/app/api/src/services/og-image-generator.ts +++ b/app/api/src/services/og-image-generator.ts @@ -2,14 +2,14 @@ // Got the proof of concept working locally, but even though chrome-aws-lambda is supposed to fit into a AWS lambda it did not for me // in the mean time this is causing builds to fail so moved it out here. import { builder } from '@netlify/functions' -const { headless, executablePath, puppeteer} = require('chrome-aws-lambda') +const { headless, executablePath, puppeteer } = require('chrome-aws-lambda') const captureWidth = 1200 const captureHeight = 630 const clipY = 0 -async function unwrappedHandler (event, context) { - let path = event.path +async function unwrappedHandler(event, context) { + 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, } } diff --git a/app/web/src/components/Seo/Seo.tsx b/app/web/src/components/Seo/Seo.tsx index 1697b8d..7c8adc5 100644 --- a/app/web/src/components/Seo/Seo.tsx +++ b/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 ( <> +
{ 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 ( <> - +