Convert from JSX to TSX

app/blog/[slug]/page.tsx

@@ -1,8 +1,9 @@
 import { notFound } from "next/navigation";
-import Link from "next/link";
+import type { Metadata } from "next";
 import {
   getBlogPostBySlug,
   getAllBlogPosts as getAllPosts,
+  type BlogPost,
 } from "../../../lib/content";
 import ContentBanner from "../../components/ContentBanner";
 import RelatedArticles from "../../components/RelatedArticles";
@@ -17,6 +18,10 @@ const askOrganizerData = {
   buttonHref: "#contact",
 };
 
+interface PageProps {
+  params: Promise<{ slug: string }>;
+}
+
 /**
  * Generate static params for all blog posts
  * This enables static generation for all blog posts at build time
@@ -36,7 +41,9 @@ export async function generateStaticParams() {
 /**
  * Generate metadata for each blog post
  */
-export async function generateMetadata({ params }) {
+export async function generateMetadata({
+  params,
+}: PageProps): Promise<Metadata> {
   try {
     const { slug } = await params;
     const post = getBlogPostBySlug(slug);
@@ -80,7 +87,7 @@ export async function generateMetadata({ params }) {
 /**
  * Dynamic blog post page
  */
-export default async function BlogPostPage({ params }) {
+export default async function BlogPostPage({ params }: PageProps) {
   // Get the blog post data
   const { slug } = await params;
   const post = getBlogPostBySlug(slug);
@@ -97,7 +104,11 @@ export default async function BlogPostPage({ params }) {
   const slugOrder = allPosts.map((post) => post.slug);
 
   // Simple related articles algorithm based on content similarity
-  const getRelatedArticles = (currentPost, allPosts, limit = 3) => {
+  const getRelatedArticles = (
+    currentPost: BlogPost,
+    allPosts: BlogPost[],
+    limit = 3,
+  ): BlogPost[] => {
     const otherPosts = allPosts.filter((p) => p.slug !== currentPost.slug);
 
     // Score posts based on content similarity
@@ -202,7 +213,7 @@ export default async function BlogPostPage({ params }) {
   };
 
   // Get article-specific background color from frontmatter
-  const getBackgroundColor = (post) => {
+  const getBackgroundColor = (post: BlogPost): string => {
     if (post.frontmatter?.background?.color) {
       return post.frontmatter.background.color;
     }

app/blog/page.tsx

@@ -1,8 +1,9 @@
 import { getAllBlogPosts } from "../../lib/content";
 import ContentThumbnailTemplate from "../components/ContentThumbnailTemplate";
 import ContentContainer from "../components/ContentContainer";
+import type { Metadata } from "next";
 
-export const metadata = {
+export const metadata: Metadata = {
   title: "Blog - CommunityRule",
   description:
     "Learn about community governance, decision-making, and building successful organizations.",