Dynamic OG Adjustments

app/api/og/route.tsx

@@ -5,8 +5,9 @@ import {NextRequest} from 'next/server';
 export const runtime = 'edge'; // Required for @vercel/og
 
 const muotoBold = new URL('../../fonts/muoto-bold.woff', import.meta.url);
-const zeroLogo = new URL(
-  '../../../public/images/zero-logo.svg',
+const muotoReg = new URL('../../fonts/muoto-regular.woff', import.meta.url);
+const zeroDocsLogo = new URL(
+  '../../../public/images/zero-docs-logo.svg',
   import.meta.url,
 );
 
@@ -27,7 +28,6 @@ export async function GET(req: NextRequest) {
           backgroundColor: 'black',
           justifyContent: 'center',
           color: 'white',
-          fontFamily: 'muoto-bold',
           padding: '0 200px',
           textAlign: 'center',
         }}
@@ -36,27 +36,30 @@ export async function GET(req: NextRequest) {
           style={{
             fontSize: 86,
             letterSpacing: '-2.58px' /* 86 * -3% */,
+            fontFamily: 'muoto-bold',
           }}
         >
           {title}
         </div>
         {subtitle && (
           <div
             style={{
-              fontSize: 30,
-              marginTop: 15,
+              fontSize: 48,
+              marginTop: 36,
+              lineHeight: 1.4,
+              padding: '0 80px',
               color: 'white',
-              fontFamily: 'muoto-bold',
-              letterSpacing: '-.09px' /* 48 * -3% */,
+              fontWeight: 400,
+              fontFamily: 'muoto-reg',
             }}
           >
             {subtitle}
           </div>
         )}
         <img
-          src={await loadFileAsBase64URL(zeroLogo, 'image/svg+xml')}
+          src={await loadFileAsBase64URL(zeroDocsLogo, 'image/svg+xml')}
           alt="Zero"
-          style={{width: 266, height: 72.88, marginTop: 75}}
+          style={{width: 424, height: 80, marginTop: 75}}
         />
       </div>
     ),
@@ -68,6 +71,10 @@ export async function GET(req: NextRequest) {
           name: 'muoto-bold',
           data: await loadFile(muotoBold),
         },
+        {
+          name: 'muoto-reg',
+          data: await loadFile(muotoReg),
+        },
       ],
     },
   );

app/docs/[[...slug]]/page.tsx

@@ -22,10 +22,12 @@ export default async function DocsPage({params: {slug = []}}: PageProps) {
     <div className="flex flex-[4] min-w-0 items-start gap-14">
       <div className="flex-[3] min-w-0 py-10">
         <Typography>
-          <h1 className="text-3xl -mt-2">{res.frontmatter.title}</h1>
-          <p className="-mt-4 text-muted-foreground text-[16.5px]">
-            {res.frontmatter.description}
-          </p>
+          <h1 className="text-3xl -mt-2 mb-12">{res.frontmatter.title}</h1>
+          {res.frontmatter.description && (
+            <p className="-mt-10 text-muted-foreground text-[16.5px]">
+              {res.frontmatter.description}
+            </p>
+          )}
           {/* Wrap content with CopyableContent */}
           <CopyContent content={res.content} />
           <Pagination previousNext={previousNext} />

contents/docs/status.mdx

@@ -1,3 +1,6 @@
+---
+title: Project Status
+---
 
 <Note type="warning" emoji="🚧" heading="Zero is in Alpha">
 Zero is a new sync engine based on a novel streaming query engine. This is an ambitious project at an early stage.