update: added pfp to blog posts

next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import './.next/types/routes.d.ts';
+import './.next/dev/types/routes.d.ts';
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

next.config.ts

@@ -3,6 +3,9 @@ import type { NextConfig } from 'next';
 const nextConfig: NextConfig = {
   /* config options here */
   reactCompiler: true,
+  images: {
+    remotePatterns: [new URL('https://github.com/**')],
+  },
 };
 
 export default nextConfig;

src/app/blog/[slug]/page.tsx

@@ -4,6 +4,74 @@
 import Footer from '@/components/footer';
 import ReactMarkdown from 'react-markdown';
 import Link from 'next/link';
+import { Metadata } from 'next';
+import Image from 'next/image';
+
+const SITE_URL = 'https://ferrumc.com';
+const DEFAULT_OG_IMAGE = `${SITE_URL}/images/in_game.png`;
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+
+  const blogs: Blog[] = getAllBlogs();
+  const blog = blogs.find((b) => b.markdown_path === slug);
+
+  // Not found metadata
+  if (!blog) {
+    return {
+      title: 'Blog Not Found',
+      description: 'This blog post does not exist.',
+      alternates: {
+        canonical: `${SITE_URL}/blog/${slug}`,
+      },
+    };
+  }
+
+  const ogImage = DEFAULT_OG_IMAGE;
+  const url = `${SITE_URL}/blog/${slug}`;
+
+  return {
+    title: blog.title,
+    description: blog.description || 'Read this blog post on FerrumC.',
+
+    keywords: ['minecraft', 'ferrumc', 'rust', 'blog', 'server performance'],
+
+    alternates: {
+      canonical: url,
+    },
+
+    openGraph: {
+      type: 'article',
+      url,
+      title: blog.title,
+      description: blog.description,
+      siteName: 'FerrumC',
+      images: [
+        {
+          url: ogImage,
+          width: 1200,
+          height: 630,
+          alt: blog.title,
+        },
+      ],
+      locale: 'en_US',
+      publishedTime: blog.date,
+    },
+
+    twitter: {
+      card: 'summary_large_image',
+      title: blog.title,
+      description: blog.description,
+      images: [ogImage],
+      site: '@ferrumc',
+      creator: '@ferrumc',
+    },
+  };
+}
 
 export default async function BlogPost({ params }: { params: Promise<{ slug: string }> }) {
   const { slug } = await params;
@@ -53,6 +121,15 @@
                   day: 'numeric',
                 })}
               </time>
+              -{' '}
+              <Image
+                src={'https://github.com/' + blog.author + '.png'}
+                alt="profile picture"
+                width={16}
+                height={16}
+                className="rounded-xl"
+              />{' '}
+              {blog.author}
             </div>
 
             {blog.description && (
@@ -131,7 +208,7 @@
                   </blockquote>
                 ),
                 img: ({ src, alt }) => (
                   <img
                     src={src}
                     alt={alt}
                     className="rounded-lg border border-white/10 my-8 w-full"

src/app/blog/blogCard.tsx

@@ -1,5 +1,6 @@
 import { Blog } from '@/app/lib/types';
 import { BsPinAngle } from 'react-icons/bs';
+import Image from 'next/image';
 
 export default function BlogCard({ blog }: { blog: Blog }) {
   return (
@@ -27,7 +28,17 @@ export default function BlogCard({ blog }: { blog: Blog }) {
 
         {/* Date + Published Status */}
         <div className="flex items-center gap-3 text-sm text-neutral-400">
-          <span>{new Date(blog.date).toLocaleDateString()}</span>
+          <span className="flex items-center gap-2 text-sm text-neutral-400">
+            {new Date(blog.date).toLocaleDateString()} -{' '}
+            <Image
+              src={'https://github.com/' + blog.author + '.png'}
+              alt="profile picture"
+              width={16}
+              height={16}
+              className="rounded-xl"
+            />{' '}
+            {blog.author}
+          </span>
         </div>
 
         {/* Description */}

src/app/blog/blogParser.ts

@@ -26,6 +26,7 @@ export function getAllBlogs(): Blog[] {
           published: data.published ?? false,
           markdown_path: slug,
           pinned: data.pinned ?? false,
+          author: data.author ?? '',
         } satisfies Blog;
       })
       .filter((b) => b.published)

src/app/lib/types.ts

@@ -3,6 +3,7 @@ import React from 'react';
 export type Blog = {
   title: string;
   description: string;
+  author: string;
   date: string;
   published: boolean;
   pinned: boolean;