Feature/adding ogimage to app

.env.example

@@ -1,3 +1,4 @@
+NEXT_PUBLIC_BASE_URL=https://www.devtoolsacademy.com
 DATABASE_URL=
 NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=
 CLERK_SECRET_KEY=

package.json

@@ -9,7 +9,8 @@
     "lint": "next lint",
     "migrate": "npx prisma migrate dev --schema=./prisma/schema.prisma",
     "db-create": "npx prisma db push --schema=./prisma/schema.prisma",
-    "format": "prettier --write --ignore-path .gitignore ."
+    "format": "prettier --write --ignore-path .gitignore .",
+     "postinstall": "prisma generate"
   },
   "dependencies": {
     "@clerk/nextjs": "^5.2.4",

src/app/api/og/route.tsx

@@ -0,0 +1,100 @@
+import { ImageResponse } from "next/og"
+import { NextRequest } from "next/server"
+
+export async function GET(req: NextRequest) {
+  const { searchParams } = req.nextUrl
+  const postTitle = searchParams.get("title")
+
+  return new (ImageResponse as any)(
+    (
+      <div
+        style={{
+          height: "100%",
+          width: "100%",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          justifyContent: "center",
+          backgroundImage: `url("${process.env.NEXT_PUBLIC_BASE_URL}/og-bg.png")`,
+        }}
+      >
+        <h1 tw="absolute inset-0 flex justify-center items-center mb-96 flex-row">
+          {/* eslint-disable-next-line @next/next/no-img-element */}
+          <img
+            tw="h-10 w-10"
+            alt="Alt"
+            // @ts-ignore
+            src={`${process.env.NEXT_PUBLIC_BASE_URL}/favicon.png`}
+          />
+          <span
+            tw="ml-3"
+            style={{
+              background:
+                "linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(156, 163, 175, 1) 100%)",
+              backgroundClip: "text",
+              WebkitBackgroundClip: "text",
+              color: "transparent",
+              fontSize: 35,
+              letterSpacing: "-1.5px",
+            }}
+          >
+            DevToolsAcademy
+          </span>
+        </h1>
+
+        {postTitle && (
+          <div
+            style={{
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              height: "100vh",
+              width: "100vw",
+            }}
+          >
+            <p
+              style={{
+                whiteSpace: "pre-wrap",
+                alignContent: "center",
+                justifyContent: "center",
+                background:
+                  "linear-gradient(180deg, rgba(105, 105, 105, 1) 0%, rgba(211, 211, 211, 1) 100%)",
+                backgroundClip: "text",
+                WebkitBackgroundClip: "text",
+                textAlign: "center",
+                fontSize: 100,
+                letterSpacing: "-5px",
+                color: "transparent",
+                WebkitTextFillColor: "transparent",
+              }}
+            >
+              {postTitle}
+            </p>
+          </div>
+        )}
+
+        <h1 tw="absolute inset-0 flex justify-center items-center mt-57 flex-col">
+          <span
+            style={{
+              background:
+                "linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(156, 163, 175, 1) 100%)",
+              // "linear-gradient(180deg,rgba(240,238,249,.8) 0%,#E2E8FF 100%)",
+              backgroundClip: "text",
+              WebkitBackgroundClip: "text",
+              color: "transparent",
+              fontSize: 50,
+              letterSpacing: "-1.5px",
+              marginTop: 150,
+            }}
+          >
+            A special blog made for Developers.
+          </span>
+        </h1>
+      </div>
+    ),
+    {
+      width: 1920,
+      height: 1080,
+    }
+  )
+}

src/app/blog/[slug]/page.tsx

@@ -20,6 +20,7 @@ import BackToTop from "@/components/BackToTop"
 import ScrollProgressBar from "@/components/ScrollProgressBar"
 import { cn } from "@/lib/utils"
 import { SocialMetadata } from "@/components/SocialMetadata"
+import { Metadata } from "next"
 
 const components: MDXComponents = {
   h1: (props: any) => <h1 {...props}>{props.children}</h1>,
@@ -103,6 +104,51 @@ const components: MDXComponents = {
 
 const baseUrl = "https://devtoolsacademy.com"
 
+export async function generateMetadata({
+  params,
+}: {
+  params: { slug: string }
+}): Promise<Metadata> {
+  const post = await getPostBySlug(params.slug)
+  if (!post) {
+    return {}
+  }
+  const { title, featuredImage } = post
+  const ogImage = featuredImage
+    ? featuredImage
+    : `${process.env.NEXT_PUBLIC_BASE_URL}/api/og?title=${post.title}`
+  return {
+    title: `${post.title} | Dev Tools Academy`,
+    description: post.description,
+    openGraph: {
+      title: post.title,
+      description: post.description,
+      type: "article",
+      url: `${process.env.NEXT_PUBLIC_BASE_URL}/${post.slug}`,
+      images: [
+        {
+          url: ogImage,
+          width: 1200,
+          height: 630,
+          alt: "Dev Tools Academy",
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: post.title,
+      description: post.description,
+      images: [
+        {
+          url: ogImage,
+          width: 1200,
+          height: 630,
+          alt: title,
+        },
+      ],
+    },
+  }
+}
 export default async function BlogPost({
   params,
 }: {

src/app/blog/page.tsx

@@ -2,6 +2,38 @@ import Link from "next/link"
 
 import { getAllPosts } from "@/lib/posts"
 import { formatDate } from "@/lib/utils"
+import { Metadata } from "next"
+
+export const metadata: Metadata = {
+  title: "Blogs | Dev Tools Academy",
+  description: "A special blog made for Developers.",
+  openGraph: {
+    title: "Blogs | Dev Tools Academy",
+    description: "A special blog made for Developers.",
+    url: process.env.NEXT_PUBLIC_BASE_URL,
+    images: [
+      {
+        url: `${process.env.NEXT_PUBLIC_BASE_URL}/api/og?title=Blogs%20|%20DevToolsAcademy`,
+        width: 1200,
+        height: 639,
+        alt: "DevToolsAcademy",
+      },
+    ],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Blogs | Dev Tools Academy",
+    description: "A special blog made for Developers.",
+    images: [
+      {
+        url: `${process.env.NEXT_PUBLIC_BASE_URL}/api/og?title=Blogs%20|%20DevToolsAcademy`,
+        width: 1200,
+        height: 639,
+        alt: "DevToolsAcademy",
+      },
+    ],
+  },
+}
 
 export default async function BlogPage() {
   const posts = await getAllPosts()

src/app/layout.tsx

@@ -18,14 +18,22 @@ export const metadata: Metadata = {
     template: "%s | Dev Tools Academy",
   },
   description: "Learn about awesome developer tools",
-  metadataBase: new URL("https://devtoolsacademy.com"),
+  metadataBase: new URL(`${process.env.NEXT_PUBLIC_BASE_URL}`),
   openGraph: {
     title: "Dev Tools Academy",
     description: "Learn about awesome developer tools",
-    url: "https://devtoolsacademy.com",
+    url: process.env.NEXT_PUBLIC_BASE_URL ?? "https://devtoolsacademy.com",
     siteName: "Dev Tools Academy",
     locale: "en_US",
     type: "website",
+    images: [
+      {
+        url: `${process.env.NEXT_PUBLIC_BASE_URL}/og-image.png`,
+        width: 1200,
+        height: 639,
+        alt: "Dev Tools Academ",
+      },
+    ],
   },
   twitter: {
     card: "summary_large_image",
@@ -83,7 +91,9 @@ export default function RootLayout({ children }: RootLayoutProps) {
           url={
             metadata.metadataBase?.toString() ?? "https://devtoolsacademy.com"
           }
-          image={`${metadata.metadataBase?.toString() ?? "https://devtoolsacademy.com"}/favicon.png`}
+          image={`${
+            metadata.metadataBase?.toString() ?? "https://devtoolsacademy.com"
+          }/favicon.png`}
           type="website"
         />
         <Script