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

@@ -1,88 +1,175 @@
-import Image from 'next/image';
-import Link from 'next/link';
-import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote/rsc';
-import { getPostBySlug, getViewCount, getAllPosts } from '@/lib/posts';
-import TableOfContents from '@/components/TableOfContents';
-import Breadcrumb from '@/components/Breadcrumb';
-import CommentSection from '@/components/CommentSection';
-import BlogPostClient from '@/components/BlogPostClient';
-import ServerlessDiagram from '@/components/ServerlessDiagram';
-import CodeBlock from '@/components/CodeBlock';
-import { Callout } from '@/components/Callout';
-import { Alert, AlertDescription } from '@/components/Alert';
-import { MDXComponents } from 'mdx/types';
-import BackToTop from '@/components/BackToTop';
-
+import Image from 'next/image'
+import Link from 'next/link'
+import { MDXRemote, MDXRemoteProps } from 'next-mdx-remote/rsc'
+import { getPostBySlug, getViewCount, getAllPosts } from '@/lib/posts'
+import TableOfContents from '@/components/TableOfContents'
+import Breadcrumb from '@/components/Breadcrumb'
+import CommentSection from '@/components/CommentSection'
+import BlogPostClient from '@/components/BlogPostClient'
+import ServerlessDiagram from '@/components/ServerlessDiagram'
+import CodeBlock from '@/components/CodeBlock'
+import { Callout } from '@/components/Callout'
+import { Alert, AlertDescription } from '@/components/Alert'
+import { MDXComponents } from 'mdx/types'
+import BackToTop from '@/components/BackToTop'
+import { Metadata } from 'next'
 
 const generateId = (children: any) => {
-    if (Array.isArray(children)) {
-        children = children.join('');
-    }
-    return typeof children === 'string' ? children.toLowerCase().replace(/\s+/g, '-') : '';
-};
+  if (Array.isArray(children)) {
+    children = children.join('')
+  }
+  return typeof children === 'string'
+    ? children.toLowerCase().replace(/\s+/g, '-')
+    : ''
+}
 
 const components = {
-    h1: (props: any) => <h1 className="text-4xl font-bold mt-8 mb-4" {...props} />,
-    h2: (props: any) => <h2 id={generateId(props.children)} className="text-3xl font-semibold mt-6 mb-3" {...props} />,
-    h3: (props: any) => <h3 id={generateId(props.children)} className="text-2xl font-semibold mt-4 mb-2" {...props} />,
-    h4: (props: any) => <h4 id={generateId(props.children)} className="text-xl font-semibold mt-3 mb-2" {...props} />,
-    p: (props: any) => <p className="my-2" {...props} />,
-    a: (props: any) => <Link className="text-blue-500 hover:underline" {...props} />,
-    Image: (props: any) => <Image className="my-4" {...props} />,
-    blockquote: (props: any) => <blockquote className="border-l-4 border-gray-300 pl-4 my-4 italic" {...props} />,
-    ServerlessDiagram: ServerlessDiagram,
-    code: CodeBlock,
-    Callout: Callout,
-    Alert: Alert,
-    AlertDescription: AlertDescription,
-    table: (props: any) => <table className="min-w-full border border-gray-300 my-4" {...props} />,
-    th: (props: any) => <th className="border border-gray-300 px-4 py-2 bg-gray-100" {...props} />,
-    td: (props: any) => <td className="border border-gray-300 px-4 py-2" {...props} />,
-};
+  h1: (props: any) => (
+    <h1 className="text-4xl font-bold mt-8 mb-4" {...props} />
+  ),
+  h2: (props: any) => (
+    <h2
+      id={generateId(props.children)}
+      className="text-3xl font-semibold mt-6 mb-3"
+      {...props}
+    />
+  ),
+  h3: (props: any) => (
+    <h3
+      id={generateId(props.children)}
+      className="text-2xl font-semibold mt-4 mb-2"
+      {...props}
+    />
+  ),
+  h4: (props: any) => (
+    <h4
+      id={generateId(props.children)}
+      className="text-xl font-semibold mt-3 mb-2"
+      {...props}
+    />
+  ),
+  p: (props: any) => <p className="my-2" {...props} />,
+  a: (props: any) => (
+    <Link className="text-blue-500 hover:underline" {...props} />
+  ),
+  Image: (props: any) => <Image className="my-4" {...props} alt="Image" />,
+  blockquote: (props: any) => (
+    <blockquote
+      className="border-l-4 border-gray-300 pl-4 my-4 italic"
+      {...props}
+    />
+  ),
+  ServerlessDiagram: ServerlessDiagram,
+  code: CodeBlock,
+  Callout: Callout,
+  Alert: Alert,
+  AlertDescription: AlertDescription,
+  table: (props: any) => (
+    <table className="min-w-full border border-gray-300 my-4" {...props} />
+  ),
+  th: (props: any) => (
+    <th className="border border-gray-300 px-4 py-2 bg-gray-100" {...props} />
+  ),
+  td: (props: any) => (
+    <td className="border border-gray-300 px-4 py-2" {...props} />
+  ),
+}
 
-export default async function BlogPost({params}: { params: { slug: string } }) {
-    const post = await getPostBySlug(params.slug);
-    const initialViews = await getViewCount(params.slug);
+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,
+}: {
+  params: { slug: string }
+}) {
+  const post = await getPostBySlug(params.slug)
+  const initialViews = await getViewCount(params.slug)
 
-    const breadcrumbItems = [
-        {label: 'Home', href: '/'},
-        {label: 'Blog', href: '/blog'},
-        {label: post.title, href: `#`},
-    ];
+  const breadcrumbItems = [
+    { label: 'Home', href: '/' },
+    { label: 'Blog', href: '/blog' },
+    { label: post.title, href: `#` },
+  ]
 
-    return (
-        <div className="max-w-5xl mx-auto px-4 py-12 relative">
-            <Breadcrumb items={breadcrumbItems}/>
-            <BlogPostClient
-                slug={params.slug}
-                title={post.title}
-                publishedAt={post.publishedAt}
-                initialViews={initialViews}
-                content={post.content}
-                description={post.description}
-                featuredImage={post.featuredImage || '/T.png'}
+  return (
+    <div className="max-w-5xl mx-auto px-4 py-12 relative">
+      <Breadcrumb items={breadcrumbItems} />
+      <BlogPostClient
+        slug={params.slug}
+        title={post.title}
+        publishedAt={post.publishedAt}
+        initialViews={initialViews}
+        content={post.content}
+        description={post.description}
+        featuredImage={post.featuredImage || '/T.png'}
+      />
+      <div className="flex flex-col lg:flex-row">
+        <div className="w-full lg:w-3/4">
+          <article className="prose prose-lg dark:prose-invert max-w-none">
+            <MDXRemote
+              source={post.content}
+              components={components as MDXComponents}
             />
-            <div className="flex flex-col lg:flex-row">
-                <div className="w-full lg:w-3/4">
-                    <article className="prose prose-lg dark:prose-invert max-w-none">
-                        <MDXRemote source={post.content} components={components as MDXComponents} />
-                    </article>
-                    <CommentSection postSlug={params.slug}/>
-                </div>
-                <aside className="lg:w-1/4 lg:pl-8">
-                    <div className="sticky top-24">
-                        <TableOfContents />
-                    </div>
-                </aside>
-            </div>
-                <BackToTop />
+          </article>
+          <CommentSection postSlug={params.slug} />
         </div>
-    )
+        <aside className="lg:w-1/4 lg:pl-8">
+          <div className="sticky top-24">
+            <TableOfContents />
+          </div>
+        </aside>
+      </div>
+      <BackToTop />
+    </div>
+  )
 }
 
 export async function generateStaticParams() {
-    const posts = await getAllPosts()
-    return posts.map((post) => ({
-        slug: post.slug,
-    }))
-}
+  const posts = await getAllPosts()
+  return posts.map((post) => ({
+    slug: post.slug,
+  }))
+}