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

@@ -48,7 +48,7 @@ const Layout: FC<Props> = (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 (

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',
       }}
     >
-      <div tw="flex flex-row items-center justify-center absolute top-[60px] left-[64px]">
-        {icon && (
-          <img
-            src={`https://raw.githubusercontent.com/supabase/supabase/master/apps/docs/public/img/icons/${icon}-icon.svg`}
-            width="50px"
-            height="50px"
-          />
-        )}
-        {type && icon && <div tw="h-[50px] border-[1px] border-white mx-4"></div>}
-        {type && (
-          <>
-            <div tw="w-[50px] h-[50px] bg-[#164430] rounded-md flex items-center justify-center">
+      <div tw="w-full flex flex-row items-center justify-between">
+        <div tw="flex flex-row items-center" style={{ lineHeight: '100%' }}>
+          {icon && (
+            <img
+              src={`https://raw.githubusercontent.com/supabase/supabase/master/apps/docs/public/img/icons/${icon}-icon.svg`}
+              width="50px"
+              height="50px"
+            />
+          )}
+          {type && icon && <div tw="h-[50px] border-[1px] border-white mx-4"></div>}
+          {type && (
+            <>
               <img
-                src={`https://raw.githubusercontent.com/supabase/supabase/master/apps/docs/public/img/icons/menu/${typeIcon}.svg`}
-                width="80%"
-                height="80%"
+                src={`https://raw.githubusercontent.com/supabase/supabase/master/apps/docs/public/img/icons/menu/grayscale/${typeIcon}.svg`}
+                width="40px"
+                height="40px"
               />
-            </div>
-            <span tw="text-[36px] text-[#ededed] ml-[16px]">{typeName}</span>
-          </>
-        )}
-      </div>
-      <div tw="flex flex-col">
-        <div tw="flex flex-col absolute left-[64px] top-[154px] w-[1072px]">
-          <h1 tw="my-0 mb-2 text-[60px]">{!title ? 'Supabase' : title}</h1>
-          <p tw="my-0 mt-2 text-[40px] text-[#f2fff9] opacity-50">{description}</p>
+              <span tw="text-[36px] text-[#ededed] ml-4 -mt-[2px]">{typeName}</span>
+            </>
+          )}
         </div>
-        <div tw="flex flex-row items-center justify-center absolute left-[64px] top-[500px]">
+        <div tw="flex flex-row items-center justify-center">
           <img
-            src="https://raw.githubusercontent.com/supabase/supabase/master/packages/common/assets/images/supabase-logo-wordmark--dark.png"
+            src="https://raw.githubusercontent.com/supabase/supabase/master/packages/common/assets/images/supabase-logo-wordmark--dark.svg"
             width={180}
             height={34}
           />
-          <span tw="text-lg font-normal text-[#3ecf8e] ml-2">DOCS</span>
+          <span tw="text-2xl font-normal text-[#3ecf8e] ml-4" style={{ fontFamily: 'SourceCode' }}>
+            DOCS
+          </span>
+        </div>
+      </div>
+      <div tw="w-full flex flex-col border-t border-[#4D4D4D] mt-10">
+        <div tw="w-full flex flex-col mt-5">
+          <h1 tw="my-0 mb-2 text-[60px]" style={{ lineHeight: '115%' }}>
+            {!title ? 'Supabase' : title}
+          </h1>
+          <p tw="my-0 mt-2 text-[40px] text-[#f2fff9] opacity-50">{description}</p>
         </div>
       </div>
     </div>

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',