adding static metadata and dynamically upating title per blog post

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

@@ -1,9 +1,22 @@
 import { getAllPosts, getPostBySlug } from "@/lib/api";
 import { markdownToHtml } from "@/lib/utils";
 import { formatDateString } from "@/utils";
+import { Metadata } from "next";
 import Link from "next/link";
 import React from "react";
 
+interface Props {
+  params: {
+    slug: string;
+  };
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  return {
+    title: getPostBySlug(params.slug).frontmatter.title,
+  };
+}
+
 export default async function Post({ params }: { params: { slug: string } }) {
   const post = getPostBySlug(params.slug);
   const allPosts = getAllPosts();

src/app/blog/page.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 import { getAllPosts } from "@/lib/api";
 import Post from "@/components/Post";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Blog",
+};
 
 const BlogPage = () => {
   const posts = getAllPosts();

src/app/layout.tsx

@@ -3,9 +3,15 @@ import "../../public/css/globals.css";
 import { Layout } from "@/components/layout";
 
 export const metadata: Metadata = {
-  title: "Nate Spilman Dot Com",
+  title: {
+    absolute: "Nate Spilman Dot Com",
+    template: "%s | Nate Spilman Dot Com",
+  },
   description: "Nate Spilman's Personal Website",
   icons: "/favicon.png",
+  authors: [{ name: "Nate Spilman", url: "https://natespilman.com" }],
+  creator: "Nate Spilman",
+  publisher: "Nate Spilman",
 };
 
 export default function RootLayout({