ReformedWitness/confessions-of-grace
Archived
1
0
Fork 0
Code Issues 1 Pull Requests 4 Actions Packages Projects Releases Wiki Activity

fixed metadata

Browse Source
This commit is contained in:
austin
2025-08-19 07:16:53 -05:00
parent f49a5ec9bf
commit 6ddd0663c7
3 changed files with 286 additions and 11509 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/posts/[id]/page.tsx
+139 -112
View File
@@ -1,135 +1,162 @@
import ShareButtons from '@/components/ShareButtons'; import ShareButtons from "@/components/ShareButtons";
import { getPostData, getSortedPostsData } from '@/lib/markdown'; import { getPostData, getSortedPostsData } from "@/lib/markdown";
import { PostData, PostMetadata } from '@/types'; import { PostData, PostMetadata } from "@/types";
import { format } from 'date-fns'; import { format } from "date-fns";
import Image from 'next/image'; import Image from "next/image";
import Link from 'next/link'; import Link from "next/link";
import React from 'react'; import React from "react";
import CommentSection from "@/components/CommentSection"; import CommentSection from "@/components/CommentSection";
import { generateMetadata as createMetadata } from '@/components/Metadata'; import { generateMetadata as createMetadata } from "@/components/Metadata";
import type { Metadata } from 'next'; import type { Metadata } from "next";
interface PageProps { interface PageProps {
params: Promise<{ id: string }>; params: Promise<{ id: string }>;
} }
export async function generateMetadata({ params }: PageProps): Promise<Metadata> { export async function generateMetadata({
const { id } = await params; params,
const post = await getPostData(id); }: PageProps): Promise<Metadata> {
const postUrl = `https://confessionsofgrace.com/posts/${post.id}`; const { id } = await params;
const post = await getPostData(id);
const postUrl = `https://confessionsofgrace.com/posts/${post.id}`;
return createMetadata({ return createMetadata({
title: post.title, title: post.title,
description: post.excerpt, description: post.excerpt,
keywords: post.tags.join(', '), keywords: post.tags.join(", "),
image: post.coverImage, image: post.coverImage,
url: postUrl, url: postUrl,
type: 'article' type: "article",
}); });
} }
async function getPostAndMorePosts(id: string): Promise<{ post: PostData; morePosts: PostMetadata[] }> { async function getPostAndMorePosts(
const post = await getPostData(id); id: string,
const allPosts = getSortedPostsData(); ): 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) // 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 // Find posts with matching tags
const relatedPosts = otherPosts 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); .slice(0, 2);
// If we don't have enough related posts, add recent posts // If we don't have enough related posts, add recent posts
const morePosts = relatedPosts.length < 2 const morePosts =
? [...relatedPosts, ...otherPosts.filter(p => !relatedPosts.includes(p))].slice(0, 2) relatedPosts.length < 2
: relatedPosts; ? [
...relatedPosts,
...otherPosts.filter((p) => !relatedPosts.includes(p)),
].slice(0, 2)
: relatedPosts;
return { post, morePosts }; return { post, morePosts };
} }
export default async function PostPage({ params }: PageProps) { export default async function PostPage({ params }: PageProps) {
const { id } = await params; const { id } = await params;
const { post, morePosts } = await getPostAndMorePosts(id); const { post, morePosts } = await getPostAndMorePosts(id);
const postUrl = `https://confessionsofgrace.com/posts/${post.id}`; const postUrl = `https://confessionsofgrace.com/posts/${post.id}`;
return ( return (
<article className="max-w-3xl mx-auto"> <article className="max-w-3xl mx-auto">
<header className="mb-8"> <header className="mb-8">
<h1 className="text-3xl md:text-4xl font-bold mb-2">{post.title}</h1> <h1 className="text-3xl md:text-4xl font-bold mb-2">{post.title}</h1>
<div className="flex items-center text-primary-500 mb-6"> <div className="flex items-center text-primary-500 mb-6">
<span>{post.author}</span> <span>{post.author}</span>
<span className="mx-2">•</span> <span className="mx-2">•</span>
<time dateTime={post.date}> <time dateTime={post.date}>
{format(new Date(post.date), 'MMMM d, yyyy')} {format(new Date(post.date), "MMMM d, yyyy")}
</time> </time>
</div> </div>
{post.coverImage && ( {post.coverImage && (
<div className="relative h-64 md:h-96 w-full mb-8 rounded-lg overflow-hidden"> <div className="relative h-64 md:h-96 w-full mb-8 rounded-lg overflow-hidden">
<Image <Image
src={post.coverImage} src={post.coverImage}
alt={post.title} alt={post.title}
fill fill
className="object-cover" className="object-cover"
priority priority
/>
</div>
)}
<div className="flex flex-wrap gap-2 mb-6">
{post.tags.map(tag => (
<Link
key={tag}
href={`/tags/${tag}`}
className="text-sm bg-primary-100 text-primary-600 px-3 py-1 rounded-md hover:bg-primary-200"
>
{tag}
</Link>
))}
</div>
</header>
<div
className="blog-post prose prose-lg max-w-none"
dangerouslySetInnerHTML={{ __html: post.content }}
/> />
</div>
)}
<div className="flex flex-wrap gap-2 mb-6">
{post.tags.map((tag) => (
<Link
key={tag}
href={`/tags/${tag}`}
className="text-sm bg-primary-100 text-primary-600 px-3 py-1 rounded-md hover:bg-primary-200"
>
{tag}
</Link>
))}
</div>
</header>
<div className="mt-8 pt-6 border-t border-primary-200"> <div
<ShareButtons className="blog-post prose prose-lg max-w-none"
url={postUrl} dangerouslySetInnerHTML={{ __html: post.content }}
title={post.title} />
description={post.excerpt}
/>
</div>
<div className="mt-12 pt-6 border-t border-primary-200"> <div className="mt-8 pt-6 border-t border-primary-200">
<h2 className="text-2xl font-bold mb-6">More Posts</h2> <ShareButtons
<div className="grid grid-cols-1 md:grid-cols-2 gap-6"> url={postUrl}
{morePosts.slice(0, 2).map(post => ( title={post.title}
<div key={post.id} className="bg-white p-6 rounded-md border border-primary-200 shadow-sm"> description={post.excerpt}
<h3 className="font-bold mb-2"> />
<Link href={`/posts/${post.id}`} className="hover:text-accent-dark"> </div>
{post.title}
</Link>
</h3>
<p className="text-primary-600 text-sm mb-2">
{format(new Date(post.date), 'MMMM d, yyyy')}
</p>
<p className="text-primary-700">{post.excerpt}</p>
</div>
))}
</div>
</div>
<CommentSection postId={post.id} /> <div className="mt-12 pt-6 border-t border-primary-200">
<h2 className="text-2xl font-bold mb-6">More Posts</h2>
<div className="mt-12 pt-6 border-t border-primary-200"> <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<Link href="/public" className="text-accent-dark hover:text-accent inline-flex items-center"> {morePosts.slice(0, 2).map((post) => (
<svg className="mr-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <div
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" /> key={post.id}
</svg> className="bg-white p-6 rounded-md border border-primary-200 shadow-sm"
Back to all posts >
<h3 className="font-bold mb-2">
<Link
href={`/posts/${post.id}`}
className="hover:text-accent-dark"
>
{post.title}
</Link> </Link>
</h3>
<p className="text-primary-600 text-sm mb-2">
{format(new Date(post.date), "MMMM d, yyyy")}
</p>
<p className="text-primary-700">{post.excerpt}</p>
</div> </div>
</article> ))}
); </div>
</div>
<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"
/>
</svg>
Back to all posts
</Link>
</div>
</article>
);
} }
components/Metadata.tsx
+49 -46
View File
@@ -1,56 +1,59 @@
import type {Metadata} from "next"; import type { Metadata } from "next";
interface MetaProps { interface MetaProps {
title?: string; title?: string;
description?: string; description?: string;
keywords?: string; keywords?: string;
image?: string; image?: string;
url?: string; url?: string;
type?: string; type?: string;
} }
export function generateMetadata({ export function generateMetadata({
title = 'Confessions of Grace', title = "Confessions of Grace",
description = 'A blog dedicated to exploring the doctrines of grace and Reformed theology.', description = "A blog dedicated to exploring the doctrines of grace and Reformed theology.",
keywords = 'reformed theology, doctrines of grace, christianity, calvinism, theology', keywords = "reformed theology, doctrines of grace, christianity, calvinism, theology",
image = '/images/og-default.jpg', image = "/images/og-default.jpg",
url = 'https://confessionsofgrace.com', url = "https://confessionsofgrace.com",
type = 'website' type = "website",
}: MetaProps = {}): Metadata { }: MetaProps = {}): Metadata {
const siteTitle = title === 'Confessions of Grace' const siteTitle =
? 'Confessions of Grace | Confessing Christ. Rejoicing in Grace.' title === "Confessions of Grace"
: `${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 { return {
title: siteTitle, title: siteTitle,
description, description,
keywords, keywords,
openGraph: { openGraph: {
type: type as any, type: type as any,
url, url,
title: siteTitle, title: siteTitle,
description, description,
images: [ images: [
{ {
url: fullImageUrl, url: fullImageUrl,
alt: title || 'Confessions of Grace' alt: title || "Confessions of Grace",
}
],
locale: 'en_US',
siteName: 'Confessions of Grace'
}, },
twitter: { ],
card: 'summary_large_image', locale: "en_US",
title: siteTitle, siteName: "Confessions of Grace",
description, },
images: [fullImageUrl] twitter: {
}, card: "summary_large_image",
alternates: { title: siteTitle,
canonical: url description,
} images: [fullImageUrl],
}; },
alternates: {
canonical: url,
},
};
} }
// Default metadata for the site // Default metadata for the site
@@ -58,5 +61,5 @@ export const defaultMetadata: Metadata = generateMetadata();
// Helper function for pages that need custom metadata // Helper function for pages that need custom metadata
export function createPageMetadata(props: MetaProps): Metadata { export function createPageMetadata(props: MetaProps): Metadata {
return generateMetadata(props); return generateMetadata(props);
} }
package-lock.json
Generated
+96 -11349
View File
File diff suppressed because it is too large Load Diff