Update docs OG and add image response demo for vercel (#817)

* Docs update test

* vercel og update

docs/api/og.tsx

@@ -0,0 +1,31 @@
+import { ImageResponse } from "@vercel/og";
+
+export const config = {
+  runtime: "experimental-edge",
+};
+
+export default function GET(request: Request) {
+  const { searchParams } = new URL(request.url);
+
+  const title = searchParams.get("title");
+  const description = searchParams.get("description");
+
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          display: "flex",
+          fontSize: 128,
+          background: "white",
+          width: "100%",
+          height: "100%",
+          gap: 40,
+        }}
+      >
+        <img src="/og-trim.png" alt="ZORA" />
+        {title && <div style={{}}>{title}</div>}
+        {description && <div style={{ fontSize: 18 }}>{description}</div>}
+      </div>
+    ),
+  );
+}

docs/package.json

@@ -17,13 +17,15 @@
     "@types/node": "^20.13.0",
     "@types/react": "latest",
     "@vanilla-extract/css": "^1.15.3",
+    "@vercel/og": "^0.6.3",
     "@zoralabs/protocol-deployments": "workspace:*",
     "@zoralabs/protocol-sdk": "workspace:*",
     "react": "latest",
     "react-dom": "latest",
     "typescript": "^5.2.2",
     "viem": "^2.13.2",
     "vite-plugin-radar": "^0.9.6",
+    "vite-plugin-vercel": "^9.0.2",
     "vite-tsconfig-paths": "^4.3.2",
     "vocs": "^1.0.0-alpha.55",
     "wagmi": "^2.9.4",

docs/pages/contracts/intro.mdx

@@ -1,7 +1,9 @@
 ---
 id: intro
 title: Introduction
+description: Zora's onchain suite of contracts allow for seamless and advanced creation and market building tools.
 ---
+
 # Introduction
 
 ##### Creator contracts make it easy to deploy and sell an NFT collection

docs/pages/protocol-sdk/introduction.mdx

@@ -1,3 +1,8 @@
+---
+title: Protocol SDK Introduction
+description: Zora Protocol SDKs are a suite of typescript libraries and utilites that simplify interacting with the Zora protocol
+---
+
 # Zora Protocol SDKs
 
 The Zora Protocol SDKs are a suite of typescript libraries and utilities that simplify interacting with the Zora protocol contracts.

docs/pages/zora-network/intro.mdx

@@ -1,3 +1,8 @@
+---
+title: Zora Network
+description: The Zora Network is a fast, cost-efficient, and scalable Layer 2 built to help bring media onchain.
+---
+
 # Introduction
 
 #### Imagination Onchain

docs/vocs.config.ts

@@ -1,13 +1,14 @@
 import VitePluginRadar from "vite-plugin-radar";
 import { defineConfig } from "vocs";
+import vercel from "vite-plugin-vercel";
 
 export default defineConfig({
   title: "ZORA Docs",
   titleTemplate: "%s | ZORA Docs",
   iconUrl: "https://docs.zora.co/Zorb.png",
   logoUrl: "https://docs.zora.co/Zorb.png",
   ogImageUrl:
-    "https://vocs.dev/api/og?logo=%logo&title=%title&description=%description",
+    "https://docs.zora.co/og.png",
   basePath: process.env.BASE_PATH,
   rootDir: ".",
   topNav: [
@@ -43,11 +44,11 @@ export default defineConfig({
       {
         text: "NFT Smart Contracts",
         items: [
-          { text: "Deployments", link: "/contracts/deployments" },
           {
             text: "Introduction",
             link: "/contracts/intro",
           },
+          { text: "Deployments", link: "/contracts/deployments" },
           {
             text: "Factories",
             link: "/contracts/factories",
@@ -264,15 +265,18 @@ export default defineConfig({
     ],
   },
   vite: {
-    plugins: process.env.NODE_ENV === 'production' 
-      ? [
-          VitePluginRadar({
-            analytics: {
-              id: "G-CDE92MLBTZ",
-            },
-          }),
-        ]
-      : [],
+    plugins: [
+      vercel(),
+      ...(process.env.NODE_ENV === "production"
+        ? [
+            VitePluginRadar({
+              analytics: {
+                id: "G-CDE92MLBTZ",
+              },
+            }),
+          ]
+        : []),
+    ],
     esbuild: {
       supported: {
         "top-level-await": true, //browsers can handle top-level-await features