feat(routes/og): add preview image generation

.eslintrc.js

@@ -214,6 +214,12 @@ module.exports = {
     // @see {@link https://robinpokorny.medium.com/index-as-a-key-is-an-anti-pattern-e0349aece318}
     'react/no-array-index-key': 'warn',
 
+    // Allow `tw` properties when using Tailwind with `@vercel/og`.
+    // @see {@link https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/no-unknown-property.md}
+    // @see {@link https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation}
+    // @see {@link http://bit.ly/3Kfwovz}
+    'react/no-unknown-property': ['error', { ignore: ['tw'] }],
+
     // Configure `jsx-a11y` to recognize RMWC input components as controls.
     // {@link https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-associated-control.md#case-my-label-and-input-components-are-custom-components}
     'jsx-a11y/label-has-associated-control': [

app/root.tsx

@@ -48,8 +48,6 @@ export const handle: Handle = {
   breadcrumb: () => <Link to='/'>nicholas.engineering</Link>,
 }
 
-export const config = { runtime: 'edge' }
-
 function Header() {
   const matches = useMatches()
   const user = useOptionalUser()

app/routes/og.tsx

@@ -0,0 +1,37 @@
+import { ImageResponse } from '@vercel/og'
+
+export const config = { runtime: 'edge' }
+
+export function loader() {
+  return new ImageResponse(
+    (
+      <div
+        style={{
+          height: '100%',
+          width: '100%',
+          display: 'flex',
+          flexDirection: 'row',
+          alignItems: 'center',
+          gap: 12,
+          justifyContent: 'center',
+          backgroundColor: '#000',
+          color: '#fff',
+          fontSize: 32,
+          fontWeight: 400,
+        }}
+      >
+        <img
+          alt=''
+          src='https://nicholas.engineering/favicon.png'
+          width={50}
+          height={50}
+        />
+        <div>nicholas.engineering</div>
+      </div>
+    ),
+    {
+      width: 800,
+      height: 400,
+    },
+  )
+}

app/routes/shows.$showId.og.tsx

@@ -0,0 +1,45 @@
+import { ImageResponse } from '@vercel/og'
+import { type LoaderArgs } from '@vercel/remix'
+
+import { prisma } from 'db.server'
+import { log } from 'log.server'
+
+export const config = { runtime: 'edge' }
+
+export async function loader({ params }: LoaderArgs) {
+  log.debug('getting show...')
+  const showId = Number(params.showId)
+  if (Number.isNaN(showId)) throw new Response(null, { status: 404 })
+  const show = await prisma.show.findUnique({
+    where: { id: showId },
+    include: {
+      looks: { include: { image: true }, orderBy: { number: 'asc' }, take: 3 },
+    },
+  })
+  log.debug('got show %o', show)
+  if (show == null) throw new Response(null, { status: 404 })
+  return new ImageResponse(
+    (
+      <div tw='flex flex-col bg-zinc-950 text-white items-center justify-center relative'>
+        <div tw='flex items-center justify-center mb-6'>
+          <div tw='font-bold text-xl ml-2'>{show.name}</div>
+        </div>
+        <div tw='flex'>
+          {show.looks.map((look) => (
+            <div key={look.id} tw='flex w-50 mr-2 border border-white'>
+              <img
+                src={look.image.url}
+                alt=''
+                tw='bg-white object-cover w-full'
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    ),
+    {
+      width: 800,
+      height: 400,
+    },
+  )
+}

package.json

@@ -11,7 +11,10 @@
     "build:css": "pnpm generate:css --minify",
     "build:remix": "remix build",
     "build:server": "esbuild --platform=node --format=cjs ./server.ts --outdir=build --bundle",
-    "vercel-build": "replace 'prisma/client' 'prisma/client/edge' app -r && pnpm build",
+    "vercel-build": "pnpm replace && pnpm build",
+    "replace": "run-p 'replace:*'",
+    "replace:prisma": "replace 'prisma/client' 'prisma/client/edge' app -r",
+    "replace:og": "replace '@m5r/og' '@vercel/og' app -r",
     "dev": "run-p 'dev:*' | pino-pretty",
     "dev:prisma": "prisma generate --watch",
     "dev:build": "cross-env NODE_ENV=development pnpm build:server --watch",
@@ -60,6 +63,7 @@
     "@remix-run/express": "^1.19.1",
     "@remix-run/react": "^1.19.1",
     "@vercel/analytics": "^0.1.11",
+    "@vercel/og": "^0.5.9",
     "@vercel/remix": "^1.19.1",
     "bcryptjs": "^2.4.3",
     "class-variance-authority": "^0.7.0",

remix.config.js

@@ -14,10 +14,4 @@ module.exports = {
   ignoredRouteFiles: ['**/.*', '**/*.css', '**/*.test.{js,jsx,ts,tsx}'],
   serverModuleFormat: 'cjs',
   serverDependenciesToBundle: ['nanoid/non-secure'],
-  images: {
-    sizes: [200, 300, 400, 500, 600, 700, 800, 900, 1000],
-    domains: ['aritzia.scene7.com'],
-    minimumCacheTTL: 60,
-    formats: ['image/webp', 'image/avif'],
-  },
 }