[WIP] Setup og image endpoints: one for generating image itself (/api/og-image.svg) and the other for testing purposes (/api/get-og-image-url).

Author: psd-coder

astro.config.mjs

@@ -7,10 +7,19 @@ import starlightOpenAPI, { openAPISidebarGroups } from "starlight-openapi";
 import vercel from "@astrojs/vercel";
 import remarkMath from "remark-math";
 import rehypeKatex from "rehype-katex";
+import { getEnvsSchema } from "./src/lib/og-image/schema.mjs";
+
+const isProduction = process.env.NODE_ENV === "production";
 
 // https://astro.build/config
 export default defineConfig({
-  site: "https://aptos.dev",
+  site: isProduction ? "https://aptos.dev" : "http://localhost:4321",
+  env: {
+    schema: {
+      ...getEnvsSchema(),
+    },
+    validateSecrets: true,
+  },
   integrations: [
     starlight({
       title: "Aptos Developer Docs",

public/fonts/DMMono-Light.ttf

@@ -0,0 +1,14 @@
+import type { APIRoute } from "astro";
+import { optionsSchema } from "./og-image.svg";
+import { getImageUrl } from "~/lib/og-image/getImageUrl";
+
+export const prerender = false;
+export const GET: APIRoute = ({ request }) => {
+  const url = new URL(request.url);
+  const options = optionsSchema.parse({
+    title: url.searchParams.get("title"),
+    description: url.searchParams.get("description"),
+  });
+
+  return new Response(getImageUrl(new URL("/api/og-image.svg", request.url), options));
+};

src/pages/api/get-og-image-url.ts

@@ -0,0 +1,95 @@
+import fs from "node:fs/promises";
+import path from "node:path";
+import type { APIRoute } from "astro";
+import { z } from "astro:schema";
+import { generateImage } from "~/lib/og-image/generateImage";
+import { parseTokenOptions } from "~/lib/og-image/parseTokenOptions";
+
+export const optionsSchema = z.object({
+  title: z.string(),
+  description: z.string(),
+});
+const fontDefinitions = [
+  {
+    name: "DMMono Light",
+    data: fs.readFile(path.resolve("public/fonts/DMMono-Light.ttf")),
+    weight: 400,
+    style: "normal",
+  },
+] as const;
+
+export const prerender = false;
+export const GET: APIRoute = async ({ request }) => {
+  const url = new URL(request.url);
+  const { title, description } = parseTokenOptions(url.searchParams.get("token"), optionsSchema);
+
+  const fonts = await Promise.all(
+    fontDefinitions.map(async (fontDefinition) => ({
+      ...fontDefinition,
+      data: await fontDefinition.data,
+    })),
+  );
+  const image = await generateImage({ width: 1200, height: 630, fonts, embedFont: true })`
+    <div
+      style="
+        font-family: DMMono Light;
+        background: #fefbfb;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      "
+    >
+      <div
+        style="
+          border: 4px solid #000;
+          background: #fefbfb;
+          border-radius: 4px;
+          display: flex;
+          justify-content: center;
+          margin: 2rem;
+          width: 88%;
+          height: 80%;
+        "
+      >
+        <div
+          style="
+            display: flex;
+            flex-direction: column;
+            margin: 20px;
+            width: 90%;
+            height: 90%;
+          "
+        >
+          <p
+            style="
+              font-size: 72px;
+              font-weight: bold;
+              max-height: 84%;
+              overflow: hidden;
+            "
+          >
+            ${title}
+          </p>
+          <div
+            style="
+              width: 100%;
+              margin-bottom: 8px;
+              font-size: 28px;
+            "
+          >
+            ${description}
+          </div>
+        </div>
+      </div>
+    </div>
+  `;
+
+  return new Response(image, {
+    headers: {
+      "Content-Type": "image/svg+xml",
+      "Cache-Control": "public, max-age=3600", // Optional: Cache control
+    },
+  });
+};