tyaga001 · tyaga001 · Oct 14, 2024 · Oct 14, 2024
diff --git a/src/app/blog/[slug]/page.tsx b/src/app/blog/[slug]/page.tsx
@@ -57,6 +57,8 @@ export default async function BlogPost({params}: { params: { slug: string } }) {
                 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">

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,6 +4,7 @@ import { GeistMono } from 'geist/font/mono';
 import { Analytics } from '@vercel/analytics/react';
 import { ClerkProvider } from '@clerk/nextjs';
 import Navbar from '@/components/Navbar';
+import { SocialMetadata } from '@/components/SocialMetadata';
 import './globals.css';
 import 'highlight.js/styles/github-dark.css';
 import { Metadata } from 'next';
@@ -43,10 +44,28 @@ interface RootLayoutProps {
     children: React.ReactNode;
 }
 
+function getTitle(title: Metadata['title']): string {
+    if (typeof title === 'string') {
+        return title;
+    } else if (title && typeof title === 'object' && 'default' in title) {
+        return title.default;
+    }
+    return 'Dev Tools Academy';
+}
+
 export default function RootLayout({ children }: RootLayoutProps) {
+    const title = getTitle(metadata.title);
+
     return (
         <html lang="en" suppressHydrationWarning>
         <head>
+            <SocialMetadata
+                title={title}
+                description={metadata.description ?? 'Learn about awesome developer tools'}
+                url={metadata.metadataBase?.toString() ?? 'https://devtoolsacademy.com'}
+                image={`${metadata.metadataBase?.toString() ?? 'https://devtoolsacademy.com'}/favicon.png`}
+                type="website"
+            />
             <Script
                 src="https://cloud.umami.is/script.js"
                 data-website-id={process.env.NEXT_PUBLIC_UMAMI_WEBSITE_ID}

diff --git a/src/components/BlogPostClient.tsx b/src/components/BlogPostClient.tsx
@@ -4,32 +4,55 @@ import React, { useState } from 'react';
 import BlogChatInterface from '@/components/BlogChatInterface';
 import { EyeIcon } from '@heroicons/react/24/outline';
 import ViewCounter from '@/components/ViewCounter';
+import { SocialMetadata } from '@/components/SocialMetadata';
+import SocialShare from '@/components/SocialShare';
 
 interface BlogPostClientProps {
     slug: string;
     title: string;
     publishedAt: string;
     initialViews: number;
     content: string;
+    description: string;
+    featuredImage: string;
 }
 
-const BlogPostClient: React.FC<BlogPostClientProps> = ({ slug, title, publishedAt, initialViews, content }) => {
+const BlogPostClient: React.FC<BlogPostClientProps> = ({
+                                                           slug,
+                                                           title,
+                                                           publishedAt,
+                                                           initialViews,
+                                                           content,
+                                                           description,
+                                                           featuredImage
+                                                       }) => {
     const [showChat, setShowChat] = useState(false);
 
     const formatDate = (dateString: string) => {
         const date = new Date(dateString);
         return date.toLocaleDateString('en-US', {year: 'numeric', month: 'long', day: 'numeric'});
     };
 
+    const baseUrl = 'https://devtoolsacademy.com';
+    const postUrl = `${baseUrl}/blog/${slug}`;
+
     return (
         <>
+            <SocialMetadata
+                title={title}
+                description={description}
+                url={postUrl}
+                image={`${baseUrl}${featuredImage}`}
+                type="article"
+            />
             <h1 className="text-4xl font-bold mb-4 text-white">{title}</h1>
             <div className="flex justify-between items-center mb-8">
                 <div className="flex items-center space-x-4">
                     <span className="text-gray-400">{formatDate(publishedAt)}</span>
                     <button
                         onClick={() => setShowChat(true)}
-                        className="text-blue-400 bg-blue-900 bg-opacity-30 hover:bg-opacity-50 transition-colors duration-200 text-sm px-4 py-2 rounded-full border border-blue-500">
+                        className="text-blue-400 bg-blue-900 bg-opacity-30 hover:bg-opacity-50 transition-colors duration-200 text-sm px-4 py-2 rounded-full border border-blue-500"
+                    >
                         Chat with Claude AI
                     </button>
                 </div>
@@ -38,6 +61,7 @@ const BlogPostClient: React.FC<BlogPostClientProps> = ({ slug, title, publishedA
                     <ViewCounter slug={slug} initialViews={initialViews}/>
                 </div>
             </div>
+            <SocialShare url={`/blog/${slug}`} title={title} />
             {showChat && (
                 <BlogChatInterface
                     blogContent={content}

diff --git a/src/components/SocialMetadata.tsx b/src/components/SocialMetadata.tsx
@@ -0,0 +1,32 @@
+import Head from 'next/head'
+
+interface SocialMetadataProps {
+    title: string
+    description: string
+    url: string
+    image: string
+    type?: 'website' | 'article'
+}
+
+export function SocialMetadata({
+                                   title,
+                                   description,
+                                   url,
+                                   image,
+                                   type = 'website',
+                               }: SocialMetadataProps) {
+    return (
+        <Head>
+            <meta property="og:title" content={title} />
+            <meta property="og:description" content={description} />
+            <meta property="og:url" content={url} />
+            <meta property="og:image" content={image} />
+            <meta property="og:type" content={type} />
+
+            <meta name="twitter:card" content="summary_large_image" />
+            <meta name="twitter:title" content={title} />
+            <meta name="twitter:description" content={description} />
+            <meta name="twitter:image" content={image} />
+        </Head>
+    )
+}
diff --git a/src/components/SocialShare.tsx b/src/components/SocialShare.tsx
@@ -3,8 +3,13 @@
 import { motion } from 'framer-motion'
 import { Twitter, Facebook, Linkedin } from 'lucide-react'
 
-export default function SocialShare({ url, title }: { url: string; title: string }) {
-    const shareUrl = encodeURIComponent(`https://yourblog.com${url}`)
+interface SocialShareProps {
+    url: string;
+    title: string;
+}
+
+export default function SocialShare({ url, title }: SocialShareProps) {
+    const shareUrl = encodeURIComponent(`https://devtoolsacademy.com${url}`)
     const shareTitle = encodeURIComponent(title)
 
     return (
@@ -14,13 +19,13 @@ export default function SocialShare({ url, title }: { url: string; title: string
             transition={{ duration: 0.5 }}
             className="mt-8 flex justify-center space-x-4"
         >
-            <a href={`https://twitter.com/intent/tweet?url=${shareUrl}&text=${shareTitle}`} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300">
+            <a href={`https://twitter.com/intent/tweet?url=${shareUrl}&text=${shareTitle}`} target="_blank" rel="noopener noreferrer" className="text-blue-400 hover:text-blue-300 transition-colors duration-200">
                 <Twitter size={24} />
             </a>
-            <a href={`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:text-blue-500">
+            <a href={`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`} target="_blank" rel="noopener noreferrer" className="text-blue-600 hover:text-blue-500 transition-colors duration-200">
                 <Facebook size={24} />
             </a>
-            <a href={`https://www.linkedin.com/shareArticle?mini=true&url=${shareUrl}&title=${shareTitle}`} target="_blank" rel="noopener noreferrer" className="text-blue-700 hover:text-blue-600">
+            <a href={`https://www.linkedin.com/shareArticle?mini=true&url=${shareUrl}&title=${shareTitle}`} target="_blank" rel="noopener noreferrer" className="text-blue-700 hover:text-blue-600 transition-colors duration-200">
                 <Linkedin size={24} />
             </a>
         </motion.div>

diff --git a/src/lib/posts.ts b/src/lib/posts.ts
@@ -60,6 +60,8 @@ export async function getPostBySlug(slug: string) {
         publishedAt: data.publishedAt,
         summary: data.summary,
         views: postMeta.views,
+        description: data.description || data.summary || '',
+        featuredImage: data.featuredImage || '/T.png',
     }
 }