[Monorepo] opengraph stuff to own package (#423)

Closes DG-133
## What changed? Why?
OpenGraph is now its own package

apps/web/package.json

@@ -31,6 +31,7 @@
     "lucide-react": "0.300.0",
     "mapbox-gl": "3.0.1",
     "next": "14.0.4",
+    "og": "workspace:*",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-intersection-observer": "9.5.3",

apps/web/src/pages/api/og/[text].tsx

@@ -1,17 +1,16 @@
 import type { NextApiRequest } from 'next';
-import { ImageResponse } from 'next/og';
-import { LOGO_FONT, OpenGraphImage, TEXT_FONT } from 'og/OpenGraphImage';
+import { generateOpenGraphImage } from 'og/generateOpenGraphImage';
 
 export const config = {
   runtime: 'edge',
 };
 
-const normalFont = fetch(new URL('../../../og/SFProText.ttf', import.meta.url)).then((res) =>
-  res.arrayBuffer(),
-);
-const boldFont = fetch(new URL('../../../og/SFProDisplayHeavy.ttf', import.meta.url)).then((res) =>
-  res.arrayBuffer(),
-);
+const normalFont = fetch(
+  new URL('../../../../../../packages/og/SFProText.ttf', import.meta.url),
+).then((res) => res.arrayBuffer());
+const boldFont = fetch(
+  new URL('../../../../../../packages/og/SFProDisplayHeavy.ttf', import.meta.url),
+).then((res) => res.arrayBuffer());
 
 /**
  * For GETs, returns an Open Graph image for the text in the query string.
@@ -20,28 +19,7 @@ export default async function handler(request: NextApiRequest) {
   const { method } = request;
   switch (method) {
     case 'GET': {
-      const [normalFontData, boldFontData] = await Promise.all([normalFont, boldFont]);
-      const params = new URL(request.url ?? '').searchParams;
-      return new ImageResponse(
-        (
-          <OpenGraphImage
-            subtitle={params.get('subtitle') ?? ''}
-            text={params.get('text') ?? 'Dylan Gattey'}
-          />
-        ),
-        {
-          fonts: [
-            {
-              name: TEXT_FONT,
-              data: normalFontData,
-            },
-            {
-              name: LOGO_FONT,
-              data: boldFontData,
-            },
-          ],
-        },
-      );
+      return generateOpenGraphImage({ url: request.url, normalFont, boldFont });
     }
     default: {
       return new Response(JSON.stringify({ error: `Method ${method ?? ''} Not Allowed` }), {

packages/og/.eslintrc.js

@@ -0,0 +1,14 @@
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ['dg/library'],
+  rules: {
+    // This must be here otherwise the package dir it looks at is wrong
+    'import/no-extraneous-dependencies': [
+      'error',
+      {
+        packageDir: __dirname,
+      },
+    ],
+  },
+};

packages/og/BackgroundPattern.tsx

@@ -0,0 +1,85 @@
+import { COLORS } from 'ui/theme/color';
+
+/**
+ * Creates a fun SVG background pattern.
+ */
+export function BackgroundPattern() {
+  return (
+    <svg
+      fill={COLORS.DARK.DEFAULT_BACKGROUND}
+      height="630"
+      preserveAspectRatio="none"
+      stroke={COLORS.DARK.CARD_BACKGROUND}
+      strokeWidth={4}
+      style={{ position: 'absolute' }}
+      viewBox="0 0 1200 630"
+      width="1200"
+    >
+      <rect fill="#001220" height="630" width="1200" x="0" y="0" />
+      <defs>
+        <linearGradient id="grad1_0" x1="33.3%" x2="100%" y1="100%" y2="0%">
+          <stop offset="20%" stopColor="#16ac7f" stopOpacity="1" />
+          <stop offset="80%" stopColor="#16ac7f" stopOpacity="1" />
+        </linearGradient>
+      </defs>
+      <defs>
+        <linearGradient id="grad1_1" x1="33.3%" x2="100%" y1="100%" y2="0%">
+          <stop offset="20%" stopColor="#16ac7f" stopOpacity="1" />
+          <stop offset="80%" stopColor="#005b69" stopOpacity="1" />
+        </linearGradient>
+      </defs>
+      <defs>
+        <linearGradient id="grad1_2" x1="33.3%" x2="100%" y1="100%" y2="0%">
+          <stop offset="20%" stopColor="#001220" stopOpacity="1" />
+          <stop offset="80%" stopColor="#005b69" stopOpacity="1" />
+        </linearGradient>
+      </defs>
+      <defs>
+        <linearGradient id="grad2_0" x1="0%" x2="66.7%" y1="100%" y2="0%">
+          <stop offset="20%" stopColor="#16ac7f" stopOpacity="1" />
+          <stop offset="80%" stopColor="#16ac7f" stopOpacity="1" />
+        </linearGradient>
+      </defs>
+      <defs>
+        <linearGradient id="grad2_1" x1="0%" x2="66.7%" y1="100%" y2="0%">
+          <stop offset="20%" stopColor="#005b69" stopOpacity="1" />
+          <stop offset="80%" stopColor="#16ac7f" stopOpacity="1" />
+        </linearGradient>
+      </defs>
+      <defs>
+        <linearGradient id="grad2_2" x1="0%" x2="66.7%" y1="100%" y2="0%">
+          <stop offset="20%" stopColor="#005b69" stopOpacity="1" />
+          <stop offset="80%" stopColor="#001220" stopOpacity="1" />
+        </linearGradient>
+      </defs>
+      <g transform="translate(1200, 630)">
+        <path
+          d="M-405.6 0C-402.7 -55.1 -399.8 -110.2 -374.7 -155.2C-349.7 -200.2 -302.7 -235.1 -258.8 -258.8C-214.9 -282.5 -174.2 -295.2 -131.6 -317.8C-89 -340.4 -44.5 -373 0 -405.6L0 0Z"
+          fill="#003448"
+        />
+        <path
+          d="M-270.4 0C-268.5 -36.7 -266.5 -73.5 -249.8 -103.5C-233.2 -133.5 -201.8 -156.7 -172.5 -172.5C-143.3 -188.4 -116.2 -196.8 -87.8 -211.9C-59.4 -227 -29.7 -248.7 0 -270.4L0 0Z"
+          fill="#00837c"
+        />
+        <path
+          d="M-135.2 0C-134.2 -18.4 -133.3 -36.7 -124.9 -51.7C-116.6 -66.7 -100.9 -78.4 -86.3 -86.3C-71.6 -94.2 -58.1 -98.4 -43.9 -105.9C-29.7 -113.5 -14.8 -124.3 0 -135.2L0 0Z"
+          fill="#16ac7f"
+        />
+      </g>
+      <g transform="translate(0, 0)">
+        <path
+          d="M405.6 0C382.6 47.7 359.6 95.4 338.1 140.1C316.7 184.7 296.8 226.2 268 268C239.2 309.8 201.4 351.8 155.2 374.7C109.1 397.7 54.5 401.7 0 405.6L0 0Z"
+          fill="#003448"
+        />
+        <path
+          d="M270.4 0C255.1 31.8 239.7 63.6 225.4 93.4C211.1 123.1 197.9 150.8 178.7 178.7C159.4 206.5 134.3 234.5 103.5 249.8C72.7 265.2 36.4 267.8 0 270.4L0 0Z"
+          fill="#00837c"
+        />
+        <path
+          d="M135.2 0C127.5 15.9 119.9 31.8 112.7 46.7C105.6 61.6 98.9 75.4 89.3 89.3C79.7 103.3 67.1 117.3 51.7 124.9C36.4 132.6 18.2 133.9 0 135.2L0 0Z"
+          fill="#16ac7f"
+        />
+      </g>
+    </svg>
+  );
+}

apps/web/src/og/OpenGraphImage.tsx → packages/og/OpenGraphImage.tsx

@@ -1,5 +1,5 @@
 import { COLORS } from 'ui/theme/color';
-import { BackgroundPattern } from 'og/BackgroundPattern';
+import { BackgroundPattern } from './BackgroundPattern';
 
 export const TEXT_FONT = 'SF Pro Text';
 export const LOGO_FONT = 'SF Pro Text Black';

packages/og/README.md

@@ -0,0 +1 @@
+OpenGraph related code for generating OG images for use in meta tags

packages/og/generateOpenGraphImage.tsx

@@ -0,0 +1,38 @@
+import { ImageResponse } from '@vercel/og';
+import { LOGO_FONT, OpenGraphImage, TEXT_FONT } from './OpenGraphImage';
+
+/**
+ * Generates a basic OpenGraph image with font data
+ */
+export async function generateOpenGraphImage({
+  url,
+  normalFont,
+  boldFont,
+}: {
+  url: string | undefined;
+  normalFont: Promise<ArrayBuffer>;
+  boldFont: Promise<ArrayBuffer>;
+}) {
+  const [normalFontData, boldFontData] = await Promise.all([normalFont, boldFont]);
+  const params = new URL(url ?? '').searchParams;
+  return new ImageResponse(
+    (
+      <OpenGraphImage
+        subtitle={params.get('subtitle') ?? ''}
+        text={params.get('text') ?? 'Dylan Gattey'}
+      />
+    ),
+    {
+      fonts: [
+        {
+          name: TEXT_FONT,
+          data: normalFontData,
+        },
+        {
+          name: LOGO_FONT,
+          data: boldFontData,
+        },
+      ],
+    },
+  );
+}

packages/og/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "og",
+  "private": true,
+  "scripts": {
+    "format": "prettier --write .",
+    "lint": "eslint . --fix",
+    "lint:types": "tsc"
+  },
+  "dependencies": {
+    "@vercel/og": "0.6.1",
+    "react": "18.2.0",
+    "ui": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.45",
+    "dotenv-mono": "1.3.13",
+    "eslint-config-dg": "workspace:*",
+    "tsconfig": "workspace:*",
+    "typescript": "5.3.3"
+  }
+}

packages/og/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig.json",
+  "extends": "tsconfig/library.json",
+  "compilerOptions": {
+    "baseUrl": "."
+  }
+}

packages/tsconfig/library.json

@@ -7,6 +7,6 @@
     "target": "ESNext",
     "lib": ["ESNext"],
     "module": "ESNext",
-    "jsx": "preserve"
+    "jsx": "react-jsx"
   }
 }