diff --git a/package-lock.json b/package-lock.json index 3c2e980..f013488 100644 --- a/package-lock.json +++ b/package-lock.json @@ -87,7 +87,6 @@ "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@babel/code-frame": "^7.29.0", "@babel/generator": "^7.29.0", @@ -1829,7 +1828,6 @@ "resolved": "https://registry.npmjs.org/@octokit/core/-/core-7.0.6.tgz", "integrity": "sha512-DhGl4xMVFGVIyMwswXeyzdL4uXD5OGILGX5N8Y+f6W7LhC1Ze2poSNrkF/fedpVDHEEZ+PHFW0vL14I+mm8K3Q==", "license": "MIT", - "peer": true, "dependencies": { "@octokit/auth-token": "^6.0.0", "@octokit/graphql": "^9.0.3", @@ -2816,6 +2814,7 @@ "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@babel/code-frame": "^7.10.4", "@babel/runtime": "^7.12.5", @@ -2836,6 +2835,7 @@ "integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==", "dev": true, "license": "Apache-2.0", + "peer": true, "dependencies": { "dequal": "^2.0.3" } @@ -2911,7 +2911,8 @@ "resolved": "https://registry.npmjs.org/@types/aria-query/-/aria-query-5.0.4.tgz", "integrity": "sha512-rfT93uj5s0PRL7EzccGMs3brplhcrghnDoV26NqKhCAS1hVo+WdNsPvE/yb6ilfr5hi2MEk6d5EWJTKdxg8jVw==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/@types/aws-lambda": { "version": "8.10.160", @@ -3005,7 +3006,6 @@ "integrity": "sha512-BkmoP5/FhRYek5izySdkOneRyXYN35I860MFAGupTdebyE66uZaR+bXLHq8k4DirE5DwQi3NuhvRU1jqTVwUrQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "undici-types": "~7.16.0" } @@ -3015,7 +3015,6 @@ "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.13.tgz", "integrity": "sha512-KkiJeU6VbYbUOp5ITMIc7kBfqlYkKA5KhEHVrGMmUUMt7NeaZg65ojdPk+FtNrBAOXNVM5QM72jnADjM+XVRAQ==", "license": "MIT", - "peer": true, "dependencies": { "csstype": "^3.2.2" } @@ -3026,7 +3025,6 @@ "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==", "dev": true, "license": "MIT", - "peer": true, "peerDependencies": { "@types/react": "^19.2.0" } @@ -3082,7 +3080,6 @@ "integrity": "sha512-BtE0k6cjwjLZoZixN0t5AKP0kSzlGu7FctRXYuPAm//aaiZhmfq1JwdYpYr1brzEspYyFeF+8XF5j2VK6oalrA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@typescript-eslint/scope-manager": "8.54.0", "@typescript-eslint/types": "8.54.0", @@ -3730,7 +3727,6 @@ "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==", "dev": true, "license": "MIT", - "peer": true, "bin": { "acorn": "bin/acorn" }, @@ -3771,6 +3767,7 @@ "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=8" } @@ -4132,7 +4129,6 @@ } ], "license": "MIT", - "peer": true, "dependencies": { "baseline-browser-mapping": "^2.9.0", "caniuse-lite": "^1.0.30001759", @@ -4579,7 +4575,8 @@ "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz", "integrity": "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/dunder-proto": { "version": "1.0.1", @@ -4891,7 +4888,6 @@ "integrity": "sha512-LEyamqS7W5HB3ujJyvi0HQK/dtVINZvd5mAAp9eT5S/ujByGjiZLCzPcHVzuXbpJDJF/cxwHlfceVUDZ2lnSTw==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@eslint-community/eslint-utils": "^4.8.0", "@eslint-community/regexpp": "^4.12.1", @@ -5077,7 +5073,6 @@ "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@rtsao/scc": "^1.1.0", "array-includes": "^3.1.9", @@ -7079,6 +7074,7 @@ "integrity": "sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "lz-string": "bin/bin.js" } @@ -8587,6 +8583,7 @@ "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "ansi-regex": "^5.0.1", "ansi-styles": "^5.0.0", @@ -8602,6 +8599,7 @@ "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==", "dev": true, "license": "MIT", + "peer": true, "engines": { "node": ">=10" }, @@ -8614,7 +8612,8 @@ "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==", "dev": true, - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/prop-types": { "version": "15.8.1", @@ -8674,7 +8673,6 @@ "resolved": "https://registry.npmjs.org/react/-/react-19.2.4.tgz", "integrity": "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==", "license": "MIT", - "peer": true, "engines": { "node": ">=0.10.0" } @@ -8684,7 +8682,6 @@ "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.4.tgz", "integrity": "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ==", "license": "MIT", - "peer": true, "dependencies": { "scheduler": "^0.27.0" }, @@ -9573,8 +9570,7 @@ "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.1.18.tgz", "integrity": "sha512-4+Z+0yiYyEtUVCScyfHCxOYP06L5Ne+JiHhY2IjR2KWMIWhJOYZKLSGZaP5HkZ8+bY0cxfzwDE5uOmzFXyIwxw==", "dev": true, - "license": "MIT", - "peer": true + "license": "MIT" }, "node_modules/tapable": { "version": "2.3.0", @@ -9648,7 +9644,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -9850,7 +9845,6 @@ "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==", "dev": true, "license": "Apache-2.0", - "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -10139,7 +10133,6 @@ "integrity": "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", @@ -10233,7 +10226,6 @@ "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==", "dev": true, "license": "MIT", - "peer": true, "engines": { "node": ">=12" }, @@ -10247,7 +10239,6 @@ "integrity": "sha512-hOQuK7h0FGKgBAas7v0mSAsnvrIgAvWmRFjmzpJ7SwFHH3g1k2u37JtYwOwmEKhK6ZO3v9ggDBBm0La1LCK4uQ==", "dev": true, "license": "MIT", - "peer": true, "dependencies": { "@vitest/expect": "4.0.18", "@vitest/mocker": "4.0.18", @@ -10501,7 +10492,6 @@ "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==", "dev": true, "license": "MIT", - "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/src/app/generate/GeneratePageClient.tsx b/src/app/generate/GeneratePageClient.tsx new file mode 100644 index 0000000..40ab6f9 --- /dev/null +++ b/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 ( +
+ +
+ + +
+
+ ); +} diff --git a/src/app/generate/[repo]/page.tsx b/src/app/generate/[repo]/page.tsx new file mode 100644 index 0000000..e388230 --- /dev/null +++ b/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 { + 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 ; +} diff --git a/src/app/generate/page.tsx b/src/app/generate/page.tsx index 1c09827..88e25e8 100644 --- a/src/app/generate/page.tsx +++ b/src/app/generate/page.tsx @@ -1,64 +1,5 @@ -"use client"; -import React, { useState } 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"; +import GeneratePageClient from "./GeneratePageClient"; export default function GeneratePage() { - const [markdown, setMarkdown] = useState(""); - const [isLoading, setIsLoading] = useState(false); - - 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 }), - }); - - // Updated Error Handling logic - if (!response.ok) { - // First, get the raw text to avoid JSON parsing errors on HTML responses - const errorText = await response.text(); - let errorMessage: string; - - try { - // Attempt to parse the text as JSON - const errorData = JSON.parse(errorText); - errorMessage = errorData.error || errorData.message || errorText; - } catch { - // Fallback to raw text if JSON.parse fails (e.g., 502 Bad Gateway HTML) - errorMessage = errorText || response.statusText; - } - - // Throw an error that includes the HTTP status for better debugging - throw new Error( - `[${response.status} ${response.statusText}]: ${errorMessage}`, - ); - } - - const data = await response.json(); - setMarkdown(data.markdown); - } catch (error: unknown) { - console.error("Generation Error:", error); - alert(error instanceof Error ? error.message : "Something went wrong"); - } finally { - setIsLoading(false); - } - }; - - return ( -
- -
- - -
-
-
- ); + return ; } diff --git a/src/app/layout.tsx b/src/app/layout.tsx index f4e6124..8c75cfc 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -13,14 +13,48 @@ const geistMono = Geist_Mono({ }); export const metadata: Metadata = { - title: "ReadmeGenAI", + metadataBase: new URL( + process.env.NEXT_PUBLIC_SITE_URL || "https://readmegen-ai.vercel.app", + ), + title: { + default: "ReadmeGenAI – AI GitHub README Generator", + template: "%s | ReadmeGenAI", + }, description: - "REadmeGenAI is an AI-powered tool that automatically generates professional README files for your GitHub projects.", + "ReadmeGenAI is an AI-powered tool that automatically generates professional README files for your GitHub projects. Paste your repo URL and get a polished readme.md instantly.", icons: { icon: "/ReadmeGenAI.png", shortcut: "/ReadmeGenAI.png", apple: "/ReadmeGenAI.png", }, + openGraph: { + title: "ReadmeGenAI – AI GitHub README Generator", + description: + "Automatically generate professional README files from your GitHub repositories using AI.", + url: "/", + siteName: "ReadmeGenAI", + images: [ + { + url: "/og-image.png", + width: 1200, + height: 630, + alt: "ReadmeGenAI - AI README Generator", + }, + ], + locale: "en_US", + type: "website", + }, + twitter: { + card: "summary_large_image", + title: "Generate README Files with AI", + description: + "Paste your GitHub repository URL and get a professional readme.md instantly.", + images: ["/og-image.png"], + }, + robots: { + index: true, + follow: true, + }, }; export default function RootLayout({ @@ -28,8 +62,29 @@ export default function RootLayout({ }: Readonly<{ children: React.ReactNode; }>) { + const siteUrl = + process.env.NEXT_PUBLIC_SITE_URL || "https://readmegen-ai.vercel.app"; + return ( + + {/* JSON-LD structured data */} +