add SEO

src/app/generate/GeneratePageClient.tsx

@@ -0,0 +1,83 @@
+"use client";
+import React, { useState, useEffect } from "react";
+import { Navbar } from "@/components/layout/Navbar";
+import { Footer } from "@/components/layout/Footer";
+import { SearchInput } from "@/components/Generator/SearchInput";
+import { MarkdownPreview } from "@/components/Generator/MarkdownPreview";
+import { navLinks } from "@/constants/navLinks";
+
+interface GeneratePageProps {
+  repoSlug?: string; // Optional pre-filled repo from server-side route
+}
+
+export default function GeneratePageClient({ repoSlug }: GeneratePageProps) {
+  const [markdown, setMarkdown] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+
+  // Optional: Update document title for SPA navigation
+  useEffect(() => {
+    if (repoSlug) {
+      const repoName = repoSlug.split("/").pop();
+      document.title = `Generate README for ${repoName} | ReadmeGenAI`;
+    } else {
+      document.title = "ReadmeGenAI – AI GitHub README Generator";
+    }
+  }, [repoSlug]);
+
+  const handleGenerate = async (githubUrl: string) => {
+    setIsLoading(true);
+    setMarkdown("");
+    try {
+      const response = await fetch("/api/generate", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ url: githubUrl }),
+      });
+
+      if (!response.ok) {
+        const errorText = await response.text();
+        let errorMessage: string;
+        try {
+          const errorData = JSON.parse(errorText);
+          errorMessage = errorData.error || errorData.message || errorText;
+        } catch {
+          errorMessage = errorText || response.statusText;
+        }
+        throw new Error(
+          `[${response.status} ${response.statusText}]: ${errorMessage}`,
+        );
+      }
+
+      const data = await response.json();
+      if (data && typeof data.markdown === "string") {
+        setMarkdown(data.markdown);
+      } else {
+        setMarkdown("");
+        throw new Error(
+          "Invalid response: markdown content is missing or invalid",
+        );
+      }
+    } catch (error: unknown) {
+      console.error("Generation Error:", error);
+      alert(error instanceof Error ? error.message : "Something went wrong");
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-black text-white">
+      <Navbar links={navLinks} />
+      <main className="pt-40 pb-20 px-4 max-w-6xl mx-auto">
+        <SearchInput
+          onGenerate={handleGenerate}
+          isLoading={isLoading}
+          initialValue={repoSlug ? `https://github.com/${repoSlug}` : ""}
+          aria-label="Enter GitHub repository URL to generate README"
+        />
+        <MarkdownPreview content={markdown} />
+      </main>
+      <Footer />
+    </div>
+  );
+}

src/app/generate/[repo]/page.tsx

@@ -0,0 +1,50 @@
+import type { Metadata } from "next";
+import GeneratePageClient from "@/app/generate/GeneratePageClient";
+
+interface PageProps {
+  params: Promise<{
+    repo: string; // e.g., "facebook/react"
+  }>;
+}
+
+// Dynamic Metadata for SEO and social sharing
+export async function generateMetadata({
+  params,
+}: PageProps): Promise<Metadata> {
+  const resolvedParams = await params;
+  const repoName = resolvedParams.repo; // full repo slug like "facebook/react"
+  const repoDisplayName = repoName.split("/").pop(); // e.g., "react"
+
+  return {
+    title: `AI-Generated README for ${repoDisplayName} | ReadmeGenAI`,
+    description: `Use ReadmeGenAI to automatically generate a professional README.md for the ${repoName} repository. Paste your repo URL and get documentation instantly.`,
+    openGraph: {
+      title: `README for ${repoDisplayName} | ReadmeGenAI`,
+      description: `Generate a polished README.md for ${repoName} using ReadmeGenAI.`,
+      url: `/generate/${repoName}`,
+      siteName: "ReadmeGenAI",
+      images: [
+        {
+          url: "/og-image.png",
+          width: 1200,
+          height: 630,
+          alt: `ReadmeGenAI - AI README Generator for ${repoDisplayName}`,
+        },
+      ],
+      type: "website",
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: `AI-Generated README for ${repoDisplayName}`,
+      description: `Generate a professional README for ${repoName} using ReadmeGenAI in seconds.`,
+      images: ["/og-image.png"],
+    },
+  };
+}
+
+// Server-side wrapper for your client component
+export default async function GeneratePageServer({ params }: PageProps) {
+  // Pass the repoSlug to the client component so it can pre-fill input & update title
+  const resolvedParams = await params;
+  return <GeneratePageClient repoSlug={resolvedParams.repo} />;
+}