feat: add og image generator

thedaviddias · Aug 11, 2023 · 03810d9 · 03810d9
1 parent d756c28
commit 03810d9
Show file tree

Hide file tree

Showing 7 changed files with 91 additions and 327 deletions.
diff --git a/app/(main)/[slug]/page.tsx b/app/(main)/[slug]/page.tsx
@@ -30,6 +30,19 @@ export const generateMetadata = ({
       type: 'article',
       publishedTime: episode.publicationDate,
       authors: ['David Dias', 'Jean-Rémy Duboc'],
+      images: [
+        {
+          url: `/api/og?title=${episode.title}`,
+          width: 1200,
+          height: 630,
+        },
+      ],
+    },
+    twitter: {
+      title: episode.title,
+      card: 'summary_large_image',
+      creator: '@erreur200radio',
+      images: `/api/og?title=${episode.title}`,
     },
   }
 }

diff --git a/app/api/og/route.tsx b/app/api/og/route.tsx
@@ -0,0 +1,43 @@
+/* eslint-disable @next/next/no-img-element */
+import { ImageResponse } from 'next/server'
+
+export const runtime = 'edge'
+
+export async function GET(request: Request) {
+  const imageData = (await fetch(
+    new URL('../../../public/images/social-card-template.jpg', import.meta.url)
+  ).then((res) => res.arrayBuffer())) as string
+
+  try {
+    const { searchParams } = new URL(request.url)
+
+    const title = searchParams.get('title') ?? 'No post title'
+
+    return new ImageResponse(
+      (
+        <div tw="absolute inset-0 flex flex-col">
+          <img
+            src={imageData}
+            alt=""
+            tw="flex-1 w-full h-full"
+            style={{ objectFit: 'cover', objectPosition: 'center' }}
+          />
+          <div tw="absolute flex flex-col items-start justify-start w-full px-10 py-10 sm:justify-between">
+            <div tw="flex items-start justify-start w-full">
+              <div tw="text-white text-7xl font-bold">{title}</div>
+            </div>
+          </div>
+        </div>
+      ),
+      {
+        width: 1200,
+        height: 630,
+      }
+    )
+  } catch (e: any) {
+    console.log(`${e.message}`)
+    return new Response(`Failed to generate the image`, {
+      status: 500,
+    })
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -10,6 +10,20 @@ export const metadata: Metadata = {
     template: '%s - Erreur 200',
     default: 'Erreur 200 - Le podcast des gens qui font le web',
   },
+  keywords: [
+    'podcast',
+    'francophone',
+    'web',
+    'développement',
+    'développeur',
+    'développeuse',
+    'développeurs',
+    'développeuses',
+    'développeur frontend',
+    'développeuse frontend',
+    'développeurs frontend',
+    'développeuses frontend',
+  ],
   description:
     "Erreur 200 est un podcast dédié aux gens qui font le web. Animé par deux développeurs français, l'un vivant au Canada, l'autre en Angleterre, nous échangeons sur le web d'aujourd'hui et de demain.",
   authors: [
@@ -42,8 +56,9 @@ export const metadata: Metadata = {
   },
   twitter: {
     title: 'Erreur 200',
-    card: 'summary_large_image',
     creator: '@erreur200radio',
+    images:
+      'https://res.cloudinary.com/thedaviddias/image/upload/v1612027685/erreur-200/erreur-200-podcast-artwork.jpg',
   },
 }
 

diff --git a/app/rss.xml/route.ts b/app/rss.xml/route.ts
@@ -46,10 +46,10 @@ export async function GET() {
     itunesOwner: { name: 'Erreur 200', email: 'info@erreur200.com' },
     itunesExplicit: false,
     namespaces: {
-      'podcast': true,
+      podcast: true,
     },
     customNamespaces: {
-      'googleplay': 'http://www.google.com/schemas/play-podcasts/1.0',
+      googleplay: 'http://www.google.com/schemas/play-podcasts/1.0',
     },
   })
 
@@ -67,9 +67,10 @@ export async function GET() {
       itunesSeason: episode.season,
       itunesEpisode: episode.episodeNumber,
       itunesEpisodeType: episode.episodeType,
-      itunesImage: 'https://erreur200.com/images/erreur-200-podcast-artwork.jpg',
+      itunesImage:
+        'https://erreur200.com/images/erreur-200-podcast-artwork.jpg',
       content: episode.body.html,
-      enclosure : {url: episode.url, type: 'audio/mpeg', size: episode.size}
+      enclosure: { url: episode.url, type: 'audio/mpeg', size: episode.size },
     })
   }
 

diff --git a/next.config.js b/next.config.js
@@ -10,6 +10,20 @@ const nextConfig = {
     // your project has type errors.
     // !! WARN !!
     ignoreBuildErrors: true,
+    async redirects() {
+      return [
+        {
+          source: '/analytics-web-gdpr-et-google-analytics/analytics-web-gdpr-et-google-analytics',
+          destination: '/analytics-web-gdpr-et-google-analytics',
+          permanent: true,
+        },
+        {
+          source: '/la-jamstack/la-jamstack',
+          destination: '/la-jamstack',
+          permanent: true,
+        },
+      ]
+    }
   }
 }