From 4feabb2f8b22c5a2d9335751b5abe032479ab32a Mon Sep 17 00:00:00 2001 From: Francesco Sansalvadore Date: Fri, 14 Jun 2024 14:47:52 +0200 Subject: [PATCH] update docs ogs (#27210) * update docs og img layout * refactor * update docs og image icon * center icon and title vertically * use svg supabase logo --- apps/docs/layouts/guides/index.tsx | 2 +- .../functions/og-images/component/Docs.tsx | 66 ++++++++++--------- supabase/functions/og-images/handler.tsx | 57 +++++++++++----- 3 files changed, 76 insertions(+), 49 deletions(-) diff --git a/apps/docs/layouts/guides/index.tsx b/apps/docs/layouts/guides/index.tsx index a95a115d987..1c510cd3315 100644 --- a/apps/docs/layouts/guides/index.tsx +++ b/apps/docs/layouts/guides/index.tsx @@ -48,7 +48,7 @@ const Layout: FC = (props) => { const ogImageUrl = encodeURI( `https://obuldanrptloktxcffvn.supabase.co/functions/v1/og-images?site=docs${ ogPageType ? `&type=${ogPageType}` : '' - }&title=${props.meta?.title}&description=${props.meta?.description}` + }&title=${encodeURIComponent(props.meta?.title)}&description=${encodeURIComponent(props.meta?.description)}` ) return ( diff --git a/supabase/functions/og-images/component/Docs.tsx b/supabase/functions/og-images/component/Docs.tsx index c1bb2a87300..dbfdb46b270 100644 --- a/supabase/functions/og-images/component/Docs.tsx +++ b/supabase/functions/og-images/component/Docs.tsx @@ -29,50 +29,52 @@ const Docs = (props: Props) => { style={{ height: '100%', width: '100%', + padding: '64px', display: 'flex', flexDirection: 'column', - color: 'white', - backgroundColor: '#1c1c1c', + color: '#EDEDED', + backgroundColor: '#181818', fontFamily: 'Circular', - backgroundImage: - 'url(https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/og-images/gradient.svg)', - backgroundRepeat: 'no-repeat', }} > -
- {icon && ( - - )} - {type && icon &&
} - {type && ( - <> -
+
+
+ {icon && ( + + )} + {type && icon &&
} + {type && ( + <> -
- {typeName} - - )} -
-
-
-

{!title ? 'Supabase' : title}

-

{description}

+ {typeName} + + )}
-
+
- DOCS + + DOCS + +
+
+
+
+

+ {!title ? 'Supabase' : title} +

+

{description}

diff --git a/supabase/functions/og-images/handler.tsx b/supabase/functions/og-images/handler.tsx index 29b0da17cf7..d3d79a2fb08 100644 --- a/supabase/functions/og-images/handler.tsx +++ b/supabase/functions/og-images/handler.tsx @@ -9,25 +9,45 @@ const corsHeaders = { 'Content-Type': 'application/json', } -// Load custom font -const FONT_URL = - 'https://obuldanrptloktxcffvn.supabase.co/storage/v1/object/public/images/lw6/CircularStd-Book.otf' -const font = fetch(new URL(FONT_URL, import.meta.url)).then((res) => res.arrayBuffer()) -const fontData = await font +// Load custom fonts +const FONT_URLS = { + CIRCULAR: + 'https://xguihxuzqibwxjnimxev.supabase.co/storage/v1/object/public/fonts/CircularStd-Book.otf', + MONO: 'https://xguihxuzqibwxjnimxev.supabase.co/storage/v1/object/public/fonts/SourceCodePro-Regular.ttf', +} +const FONT_CIRCULAR = fetch(new URL(FONT_URLS['CIRCULAR'], import.meta.url)).then((res) => + res.arrayBuffer() +) +const FONT_MONO = fetch(new URL(FONT_URLS['MONO'], import.meta.url)).then((res) => + res.arrayBuffer() +) +const CIRCULAR_FONT_DATA = await FONT_CIRCULAR +const MONO_FONT_DATA = await FONT_MONO + +const getParamValue = ( + url: string, + value: string, + options?: { + lowercase?: boolean + decodeURI?: boolean + } +) => { + const param = url.searchParams.get(value) ?? url.searchParams.get(`amp;${value}`) + const maybeDecoded = options?.decodeURI ? decodeURIComponent(param) : param + const maybeLowercased = options?.lowercase ? maybeDecoded?.toLowerCase() : maybeDecoded + + return maybeLowercased +} export async function handler(req: Request) { const url = new URL(req.url) - const site = - url.searchParams.get('site')?.toLowerCase() ?? url.searchParams.get('amp;site')?.toLowerCase() - const icon = - url.searchParams.get('icon')?.toLowerCase() ?? url.searchParams.get('amp;icon')?.toLowerCase() - const customer = - url.searchParams.get('customer')?.toLowerCase() ?? - url.searchParams.get('amp;customer')?.toLowerCase() - const type = url.searchParams.get('type') ?? url.searchParams.get('amp;type') - const title = url.searchParams.get('title') ?? url.searchParams.get('amp;title') - const description = url.searchParams.get('description') ?? url.searchParams.get('amp;description') + const site = getParamValue(url, 'site', { lowercase: true }) + const icon = getParamValue(url, 'icon', { lowercase: true }) + const customer = getParamValue(url, 'customer', { lowercase: true }) + const type = getParamValue(url, 'type') + const title = getParamValue(url, 'title', { decodeURI: true }) + const description = getParamValue(url, 'description', { decodeURI: true }) if (!site || !title) { return new Response(JSON.stringify({ message: 'missing params' }), { @@ -53,9 +73,14 @@ export async function handler(req: Request) { fonts: [ { name: 'Circular', - data: fontData, + data: CIRCULAR_FONT_DATA, style: 'normal', }, + { + name: 'SourceCode', + data: MONO_FONT_DATA, + style: 'mono', + }, ], headers: { 'content-type': 'image/png',