switched to approuter

2025-08-18 13:10:47 -05:00
parent c2b0d905e1
commit 6cd941295c
82 changed files with 5154 additions and 9772 deletions
@@ -0,0 +1,103 @@
+'use client';
+
+import React, { useEffect, useState } from 'react';
+import { supabase } from '@/utils/supabase';
+import { PostMetadata } from '@/types';
+
+interface AuthorProfile {
+    name: string;
+    bio: string;
+    x_link?: string;
+    fb_link?: string;
+    insta_link?: string;
+    pfp_link?: string;
+}
+
+interface AuthorProfileProps {
+    author: string;
+    posts: PostMetadata[];
+}
+
+export default function AuthorProfile({ author, posts }: AuthorProfileProps) {
+    const [authorProfile, setAuthorProfile] = useState<AuthorProfile | null>(null);
+
+    const fetchAuthorProfile = async () => {
+        const { data, error } = await supabase
+            .from('authors')
+            .select('name, bio, x_link, fb_link, insta_link, pfp_link')
+            .eq('name', author)
+            .single();
+
+        if (error) {
+            console.warn('No author profile found for:', author, '→', error.message);
+        }
+
+        if (data) {
+            setAuthorProfile(data);
+        }
+    };
+
+    useEffect(() => {
+        fetchAuthorProfile();
+    }, [author]);
+
+    return (
+        <div className="mb-12 flex flex-col md:flex-row items-start md:items-center gap-6">
+            {/* Profile Picture */}
+            {authorProfile?.pfp_link ? (
+                <img
+                    src={authorProfile.pfp_link}
+                    alt={`${authorProfile.name}'s profile picture`}
+                    className="w-24 h-24 rounded-full object-cover shadow-md"
+                />
+            ) : (
+                <div className="w-24 h-24 rounded-full bg-gray-200 flex items-center justify-center text-xl font-bold text-gray-500">
+                    ?
+                </div>
+            )}
+
+            <div>
+                {/* Author Name */}
+                <h1 className="text-3xl md:text-4xl font-bold mb-2">
+                    {authorProfile?.name || author}
+                </h1>
+
+                {/* Author Bio */}
+                {authorProfile?.bio && (
+                    <p className="text-primary-600 mb-2">{authorProfile.bio}</p>
+                )}
+
+                {/* Social Links */}
+                <div className="flex gap-4 mt-2">
+                    {authorProfile?.x_link && (
+                        <a
+                            href={authorProfile.x_link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <img src="/icons/x.svg" alt="X (Twitter)" className="w-5 h-5" />
+                        </a>
+                    )}
+                    {authorProfile?.fb_link && (
+                        <a
+                            href={authorProfile.fb_link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <img src="/icons/facebook.svg" alt="Facebook" className="w-5 h-5" />
+                        </a>
+                    )}
+                    {authorProfile?.insta_link && (
+                        <a
+                            href={authorProfile.insta_link}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                        >
+                            <img src="/icons/instagram.svg" alt="Instagram" className="w-5 h-5" />
+                        </a>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+}
@@ -0,0 +1,67 @@
+import React from 'react';
+import PostCard from '@/components/PostCard';
+import { getSortedPostsData, getPostsByAuthor } from '@/lib/markdown';
+import { PostMetadata } from '@/types';
+import { generateMetadata as createMetadata } from '@/components/Metadata';
+import type { Metadata } from 'next';
+import AuthorProfile from './AuthorProfile';
+
+interface PageProps {
+    params: Promise<{ author: string }>;
+}
+
+export async function generateStaticParams() {
+    try {
+        const posts = getSortedPostsData();
+        const authors = Array.from(new Set(posts.flatMap(post => post.author)));
+
+        return authors.map((author) => ({
+            author: author,
+        }));
+    } catch (error) {
+        console.error('Failed to generate author paths during build:', error);
+        return [];
+    }
+}
+
+export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
+    const { author } = await params;
+    return createMetadata({
+        title: `${author} | Author`,
+        description: `Posts authored by ${author} on Confessions of Grace.`,
+        url: `https://confessionsofgrace.com/authors/${author}`,
+        type: 'website'
+    });
+}
+
+async function getPostsByAuthorData(author: string): Promise<PostMetadata[]> {
+    return getPostsByAuthor(author);
+}
+
+export default async function AuthorPage({ params }: PageProps) {
+    const { author } = await params;
+    const posts = await getPostsByAuthorData(author);
+
+    return (
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
+            <AuthorProfile author={author} posts={posts} />
+
+            {/* Posts */}
+            <p className="text-lg text-primary-600 mb-6">
+                {posts.length} {posts.length === 1 ? 'post' : 'posts'} authored by "{author}"
+            </p>
+
+            {posts.length > 0 ? (
+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    {posts.map((post) => (
+                        <PostCard key={post.id} post={post} />
+                    ))}
+                </div>
+            ) : (
+                <div className="text-center py-12">
+                    <p className="text-xl text-primary-500">No posts found for this author.</p>
+                </div>
+            )}
+        </div>
+    );
+}
@@ -0,0 +1,80 @@
+import React from 'react';
+import Link from 'next/link';
+import Image from 'next/image';
+import { supabase } from '@/utils/supabase';
+import { generateMetadata as createMetadata } from '@/components/Metadata';
+import type { Metadata } from 'next';
+
+interface AuthorProfile {
+    name: string;
+    bio: string;
+    x_link?: string;
+    fb_link?: string;
+    insta_link?: string;
+    pfp_link?: string;
+}
+
+export async function generateMetadata(): Promise<Metadata> {
+    return createMetadata({
+        title: 'Authors',
+        description: 'Meet the authors of Confessions of Grace and learn about their backgrounds in Reformed theology.',
+        url: 'https://confessionsofgrace.com/authors',
+        type: 'website'
+    });
+}
+
+async function getAuthors(): Promise<AuthorProfile[]> {
+    try {
+        const { data: authorsData, error } = await supabase
+            .from('authors')
+            .select('name, bio, x_link, fb_link, insta_link, pfp_link');
+
+        if (error || !authorsData) {
+            console.error('Error fetching authors:', error);
+            return [];
+        }
+
+        return authorsData;
+    } catch (error) {
+        console.error('Failed to fetch authors during build:', error);
+        return [];
+    }
+}
+
+export default async function AuthorsPage() {
+    const authors = await getAuthors();
+
+    return (
+        <div className="max-w-5xl mx-auto px-4">
+            <h1 className="text-4xl font-bold mb-10 text-center">Meet the Authors</h1>
+
+            <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6">
+                {authors.map((author) => (
+                    <Link
+                        key={author.name}
+                        href={`/authors/${author.name}`}
+                        className="bg-white rounded-lg shadow-md p-5 flex flex-col items-center hover:shadow-lg transition-shadow"
+                    >
+                        <div className="w-24 h-24 mb-4 relative">
+                            <Image
+                                src={author.pfp_link || '/images/authors/default.jpg'}
+                                alt={`${author.name}'s profile`}
+                                fill
+                                className="rounded-full object-cover"
+                                sizes="96px"
+                            />
+                        </div>
+                        <h2 className="text-lg font-semibold">{author.name}</h2>
+                        {/* You can include bio or social icons here */}
+                    </Link>
+                ))}
+            </div>
+
+            <div className="mt-12 text-center">
+                <Link href="/posts" className="button">
+                    View All Posts
+                </Link>
+            </div>
+        </div>
+    );
+}