fixed metadata

app/posts/[id]/page.tsx

@@ -1,19 +1,21 @@
-import ShareButtons from '@/components/ShareButtons';
-import { getPostData, getSortedPostsData } from '@/lib/markdown';
-import { PostData, PostMetadata } from '@/types';
-import { format } from 'date-fns';
-import Image from 'next/image';
-import Link from 'next/link';
-import React from 'react';
+import ShareButtons from "@/components/ShareButtons";
+import { getPostData, getSortedPostsData } from "@/lib/markdown";
+import { PostData, PostMetadata } from "@/types";
+import { format } from "date-fns";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
 import CommentSection from "@/components/CommentSection";
-import { generateMetadata as createMetadata } from '@/components/Metadata';
-import type { Metadata } from 'next';
+import { generateMetadata as createMetadata } from "@/components/Metadata";
+import type { Metadata } from "next";
 
 interface PageProps {
   params: Promise<{ id: string }>;
 }
 
-export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+export async function generateMetadata({
+  params,
+}: PageProps): Promise<Metadata> {
   const { id } = await params;
   const post = await getPostData(id);
   const postUrl = `https://confessionsofgrace.com/posts/${post.id}`;
@@ -21,28 +23,34 @@ export async function generateMetadata({ params }: PageProps): Promise<Metadata>
   return createMetadata({
     title: post.title,
     description: post.excerpt,
-        keywords: post.tags.join(', '),
+    keywords: post.tags.join(", "),
     image: post.coverImage,
     url: postUrl,
-        type: 'article'
+    type: "article",
   });
 }
 
-async function getPostAndMorePosts(id: string): Promise<{ post: PostData; morePosts: PostMetadata[] }> {
+async function getPostAndMorePosts(
+  id: string,
+): Promise<{ post: PostData; morePosts: PostMetadata[] }> {
   const post = await getPostData(id);
   const allPosts = getSortedPostsData();
 
   // Filter out the current post and get a few related posts (by tags)
-    const otherPosts = allPosts.filter(p => p.id !== post.id);
+  const otherPosts = allPosts.filter((p) => p.id !== post.id);
 
   // Find posts with matching tags
   const relatedPosts = otherPosts
-        .filter(p => p.tags.some(tag => post.tags.includes(tag)))
+    .filter((p) => p.tags.some((tag) => post.tags.includes(tag)))
     .slice(0, 2);
 
   // If we don't have enough related posts, add recent posts
-    const morePosts = relatedPosts.length < 2
-        ? [...relatedPosts, ...otherPosts.filter(p => !relatedPosts.includes(p))].slice(0, 2)
+  const morePosts =
+    relatedPosts.length < 2
+      ? [
+          ...relatedPosts,
+          ...otherPosts.filter((p) => !relatedPosts.includes(p)),
+        ].slice(0, 2)
       : relatedPosts;
 
   return { post, morePosts };
@@ -61,7 +69,7 @@ export default async function PostPage({ params }: PageProps) {
           <span>{post.author}</span>
           <span className="mx-2">•</span>
           <time dateTime={post.date}>
-                        {format(new Date(post.date), 'MMMM d, yyyy')}
+            {format(new Date(post.date), "MMMM d, yyyy")}
           </time>
         </div>
         {post.coverImage && (
@@ -76,7 +84,7 @@ export default async function PostPage({ params }: PageProps) {
           </div>
         )}
         <div className="flex flex-wrap gap-2 mb-6">
-                    {post.tags.map(tag => (
+          {post.tags.map((tag) => (
             <Link
               key={tag}
               href={`/tags/${tag}`}
@@ -104,15 +112,21 @@ export default async function PostPage({ params }: PageProps) {
       <div className="mt-12 pt-6 border-t border-primary-200">
         <h2 className="text-2xl font-bold mb-6">More Posts</h2>
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-                    {morePosts.slice(0, 2).map(post => (
-                        <div key={post.id} className="bg-white p-6 rounded-md border border-primary-200 shadow-sm">
+          {morePosts.slice(0, 2).map((post) => (
+            <div
+              key={post.id}
+              className="bg-white p-6 rounded-md border border-primary-200 shadow-sm"
+            >
               <h3 className="font-bold mb-2">
-                                <Link href={`/posts/${post.id}`} className="hover:text-accent-dark">
+                <Link
+                  href={`/posts/${post.id}`}
+                  className="hover:text-accent-dark"
+                >
                   {post.title}
                 </Link>
               </h3>
               <p className="text-primary-600 text-sm mb-2">
-                                {format(new Date(post.date), 'MMMM d, yyyy')}
+                {format(new Date(post.date), "MMMM d, yyyy")}
               </p>
               <p className="text-primary-700">{post.excerpt}</p>
             </div>
@@ -123,9 +137,22 @@ export default async function PostPage({ params }: PageProps) {
       <CommentSection postId={post.id} />
 
       <div className="mt-12 pt-6 border-t border-primary-200">
-                <Link href="/public" className="text-accent-dark hover:text-accent inline-flex items-center">
-                    <svg className="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+        <Link
+          href="/public"
+          className="text-accent-dark hover:text-accent inline-flex items-center"
+        >
+          <svg
+            className="mr-2 h-4 w-4"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M10 19l-7-7m0 0l7-7m-7 7h18"
+            />
           </svg>
           Back to all posts
         </Link>

components/Metadata.tsx

@@ -1,4 +1,4 @@
-import type {Metadata} from "next";
+import type { Metadata } from "next";
 
 interface MetaProps {
   title?: string;
@@ -10,18 +10,21 @@ interface MetaProps {
 }
 
 export function generateMetadata({
-                                     title = 'Confessions of Grace',
-                                     description = 'A blog dedicated to exploring the doctrines of grace and Reformed theology.',
-                                     keywords = 'reformed theology, doctrines of grace, christianity, calvinism, theology',
-                                     image = '/images/og-default.jpg',
-                                     url = 'https://confessionsofgrace.com',
-                                     type = 'website'
-                                 }: MetaProps = {}): Metadata {
-    const siteTitle = title === 'Confessions of Grace'
-        ? 'Confessions of Grace | Confessing Christ. Rejoicing in Grace.'
+  title = "Confessions of Grace",
+  description = "A blog dedicated to exploring the doctrines of grace and Reformed theology.",
+  keywords = "reformed theology, doctrines of grace, christianity, calvinism, theology",
+  image = "/images/og-default.jpg",
+  url = "https://confessionsofgrace.com",
+  type = "website",
+}: MetaProps = {}): Metadata {
+  const siteTitle =
+    title === "Confessions of Grace"
+      ? "Confessions of Grace | Confessing Christ. Rejoicing in Grace."
       : `${title} | Confessions of Grace`;
 
-    const fullImageUrl = image.startsWith('http') ? image : `https://www.confessionsofgrace.com${image}`;
+  const fullImageUrl = image.startsWith("http")
+    ? image
+    : `https://confessionsofgrace.com${image}`;
 
   return {
     title: siteTitle,
@@ -35,21 +38,21 @@ export function generateMetadata({
       images: [
         {
           url: fullImageUrl,
-                    alt: title || 'Confessions of Grace'
-                }
+          alt: title || "Confessions of Grace",
+        },
       ],
-            locale: 'en_US',
-            siteName: 'Confessions of Grace'
+      locale: "en_US",
+      siteName: "Confessions of Grace",
     },
     twitter: {
-            card: 'summary_large_image',
+      card: "summary_large_image",
       title: siteTitle,
       description,
-            images: [fullImageUrl]
+      images: [fullImageUrl],
     },
     alternates: {
-            canonical: url
-        }
+      canonical: url,
+    },
   };
 }