From 47b786daf78b32a124f13237a32a8aa33c95cc01 Mon Sep 17 00:00:00 2001 From: Naheel Muhammed Date: Mon, 9 Feb 2026 21:05:06 +0530 Subject: [PATCH] update frontend Co-Authored-By: ansif mk <215146833+ansifmk@users.noreply.github.com> --- src/app/docs/page.tsx | 81 +++++++++++++ src/app/examples/page.tsx | 121 +++++++++++++++++++ src/app/features/page.tsx | 76 ++++++++++++ src/app/generate/page.tsx | 69 +++++++++++ src/app/page.tsx | 8 +- src/components/Generator/MarkdownPreview.tsx | 40 ++++++ src/components/Generator/SearchInput.tsx | 56 +++++++++ src/components/layout/Navbar.tsx | 2 +- src/components/sections/Hero.tsx | 77 ++++++++---- src/components/sections/TerminalMockup.tsx | 3 +- 10 files changed, 501 insertions(+), 32 deletions(-) create mode 100644 src/app/docs/page.tsx create mode 100644 src/app/examples/page.tsx create mode 100644 src/app/features/page.tsx create mode 100644 src/app/generate/page.tsx create mode 100644 src/components/Generator/MarkdownPreview.tsx create mode 100644 src/components/Generator/SearchInput.tsx diff --git a/src/app/docs/page.tsx b/src/app/docs/page.tsx new file mode 100644 index 0000000..b5e3da5 --- /dev/null +++ b/src/app/docs/page.tsx @@ -0,0 +1,81 @@ +"use client"; +import React from 'react'; +import { Navbar } from '@/components/layout/Navbar'; +import { Footer } from '@/components/layout/Footer'; +import { ChevronRight, Terminal } from 'lucide-react'; + +export default function DocsPage() { + const navLinks = [ + { name: 'Home', href: '/' }, + { name: 'Features', href: '/features' }, + { name: 'Examples', href: '/examples' }, + { name: 'Docs', href: '/docs' }, + ]; + + return ( +
+ +
+ + {/* Sidebar Nav */} + + + {/* Main Content */} +
+

Getting Started

+

+ ReadmeGenAI is designed to be plug-and-play. Our goal is to remove the friction + of writing documentation so you can focus on writing code. +

+ +
+
+

+ 1. Provide your URL +

+

+ Enter your public GitHub repository URL into the generator. Ensure the repo + contains at least a main entry point (like `index.js` or `main.py`). +

+
+ +
+
+ + Quick Start Command +
+ + npx readmegenai@latest --repo [your-url] + +
+ +
+

2. AI Analysis

+

+ Our engine uses Octokit to build a virtual file tree. This tree is passed to + Gemini 2.5 Flash with a specific context window optimized for software architecture. +

+
+
+
+
+
+
+ ); +} \ No newline at end of file diff --git a/src/app/examples/page.tsx b/src/app/examples/page.tsx new file mode 100644 index 0000000..c4aa742 --- /dev/null +++ b/src/app/examples/page.tsx @@ -0,0 +1,121 @@ +"use client"; +import React from 'react'; +import { Navbar } from '@/components/layout/Navbar'; +import { Footer } from '@/components/layout/Footer'; +import { Button } from '@/components/ui/Button'; +import { ExternalLink, Star, Box, Cpu, Globe } from 'lucide-react'; +import Link from 'next/link'; + +const examples = [ + { + title: "Modern Web App", + repo: "nextjs-saas-template", + icon: , + tags: ["Next.js 16", "Tailwind", "Prisma"], + stars: "1.2k", + description: "A comprehensive README featuring deployment guides, environment variable tables, and architecture diagrams." + }, + { + title: "Utility Library", + repo: "ts-utils-core", + icon: , + tags: ["TypeScript", "Rollup", "Vitest"], + stars: "850", + description: "Technical-heavy documentation with API references, installation via multiple package managers, and usage snippets." + }, + { + title: "Backend Engine", + repo: "go-stream-processor", + icon: , + tags: ["Go", "Docker", "Redis"], + stars: "2.4k", + description: "High-performance oriented README focusing on benchmark results, configuration flags, and horizontal scaling." + } +]; + +export default function ExamplesPage() { + const navLinks = [ + { name: 'Home', href: '/' }, + { name: 'Features', href: '/#features' }, + { name: 'Examples', href: '/examples' }, + { name: 'Docs', href: '#docs' }, + ]; + + return ( +
+ + +
+ {/* Header Section */} +
+

+ Trusted by developers
+ + to tell their story. + +

+

+ Explore how ReadmeGenAI adapts to different tech stacks and project scales to create documentation that converts visitors into users. +

+
+ + {/* Examples Grid */} +
+ {examples.map((example, idx) => ( +
+
+
+ {example.icon} +
+
+ + {example.stars} +
+
+ +

+ {example.title} +

+

+ {example.repo} +

+

+ {example.description} +

+ +
+ {example.tags.map(tag => ( + + {tag} + + ))} +
+ + + + +
+ ))} +
+ + {/* Bottom CTA */} +
+

Ready to document your project?

+ + + +
+
+ +
+
+ ); +} \ No newline at end of file diff --git a/src/app/features/page.tsx b/src/app/features/page.tsx new file mode 100644 index 0000000..d13383a --- /dev/null +++ b/src/app/features/page.tsx @@ -0,0 +1,76 @@ +"use client"; +import React from 'react'; +import { Navbar } from '@/components/layout/Navbar'; +import { Footer } from '@/components/layout/Footer'; +import { Cpu, Globe, ShieldCheck, Sparkles, Zap, Code2 } from 'lucide-react'; + +const features = [ + { + icon: , + title: "Gemini 2.5 Intelligence", + desc: "Leverages the latest LLM to understand not just your files, but the intent behind your code." + }, + { + icon: , + title: "Octokit Integration", + desc: "Seamlessly pulls repository metadata, stars, and real-time structure directly from GitHub." + }, + { + icon: , + title: "Security First", + desc: "We never store your code. We only analyze structure and public metadata to ensure your IP stays yours." + }, + { + icon: , + title: "Instant Generation", + desc: "Generate a complete, production-ready README in under 5 seconds—saving hours of manual writing." + }, + { + icon: , + title: "Framework Aware", + desc: "Automatically detects Next.js, Go, Python, and more to provide relevant setup instructions." + }, + { + icon: , + title: "Custom Logic", + desc: "Uses custom-tuned prompts to ensure your documentation sounds human, professional, and clear." + } +]; + +export default function FeaturesPage() { + const navLinks = [ + { name: 'Home', href: '/' }, + { name: 'Features', href: '/features' }, + { name: 'Examples', href: '/examples' }, + { name: 'Docs', href: '/docs' }, + ]; + + return ( +
+ +
+
+

+ Documentation
+ + reimagined. + +

+
+ +
+ {features.map((f, i) => ( +
+
+ {f.icon} +
+

{f.title}

+

{f.desc}

+
+ ))} +
+
+
+
+ ); +} \ No newline at end of file diff --git a/src/app/generate/page.tsx b/src/app/generate/page.tsx new file mode 100644 index 0000000..a8347bf --- /dev/null +++ b/src/app/generate/page.tsx @@ -0,0 +1,69 @@ +"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'; + +export default function GeneratePage() { + const [markdown, setMarkdown] = useState(''); + const [isLoading, setIsLoading] = useState(false); + + const handleGenerate = async (githubUrl: string) => { + setIsLoading(true); + setMarkdown(''); // Clear previous results + try { + const response = await fetch('/api/generate', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ url: githubUrl }), + }); + + const data = await response.json(); + if (data.markdown) { + setMarkdown(data.markdown); + } else { + alert(data.error || "Something went wrong"); + } + } catch (error) { + console.error("Generation failed:", error); + alert("Failed to connect to the server."); + } finally { + setIsLoading(false); + } + }; + + const navLinks = [ + { name: 'Home', href: '/' }, + { name: 'Features', href: '/features' }, + { name: 'Examples', href: '/examples' }, + { name: 'Docs', href: '/docs' }, + ]; + + return ( +
+ + +
+
+

Generate Documentation

+

Enter your repository URL and let the AI do the heavy lifting.

+
+ + + + {/* Results will appear here once generated */} + + + {/* Empty state helper */} + {!markdown && !isLoading && ( +
+

Waiting for repository URL...

+
+ )} +
+ +
+
+ ); +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 81409f9..9ffd8ef 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -6,10 +6,10 @@ import { Code, Layout, FileText } from 'lucide-react'; export default function Home() { const navLinks = [ - { name: 'Home', href: '#' }, - { name: 'Features', href: '#features' }, - { name: 'Examples', href: '#examples' }, - { name: 'Docs', href: '#docs' }, + { name: 'Home', href: '/' }, + { name: 'Features', href: '/features' }, + { name: 'Examples', href: '/examples' }, + { name: 'Docs', href: '/docs' }, ]; const featureList = [ diff --git a/src/components/Generator/MarkdownPreview.tsx b/src/components/Generator/MarkdownPreview.tsx new file mode 100644 index 0000000..80594e2 --- /dev/null +++ b/src/components/Generator/MarkdownPreview.tsx @@ -0,0 +1,40 @@ +"use client"; +import React, { useState } from 'react'; +import { Copy, Check, FileCode } from 'lucide-react'; + +export const MarkdownPreview = ({ content }: { content: string }) => { + const [copied, setCopied] = useState(false); + + const handleCopy = () => { + navigator.clipboard.writeText(content); + setCopied(true); + setTimeout(() => setCopied(false), 2000); + }; + + if (!content) return null; + + return ( +
+
+
+
+ + README.md +
+ +
+
+ 
+            {content}
+
+
+
+
+ ); +}; \ No newline at end of file diff --git a/src/components/Generator/SearchInput.tsx b/src/components/Generator/SearchInput.tsx new file mode 100644 index 0000000..b14b373 --- /dev/null +++ b/src/components/Generator/SearchInput.tsx @@ -0,0 +1,56 @@ +"use client"; +import React, { useState } from 'react'; +import { Search, Loader2, Github } from 'lucide-react'; +import { Button } from '../ui/Button'; + +interface SearchInputProps { + onGenerate: (url: string) => void; + isLoading: boolean; +} + +export const SearchInput = ({ onGenerate, isLoading }: SearchInputProps) => { + const [url, setUrl] = useState(''); + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (url.includes('github.com')) { + onGenerate(url); + } else { + alert("Please enter a valid GitHub URL"); + } + }; + + return ( +
+
+
+ +
+ setUrl(e.target.value)} + placeholder="https://github.com/username/repo" + className="w-full bg-zinc-900/50 border border-white/10 rounded-2xl py-6 pl-14 pr-40 text-white placeholder:text-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500/50 transition-all backdrop-blur-xl" + required + /> +
+ +
+
+
+ ); +}; \ No newline at end of file diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx index 5c9c8f1..946ae74 100644 --- a/src/components/layout/Navbar.tsx +++ b/src/components/layout/Navbar.tsx @@ -44,7 +44,7 @@ export const Navbar = ({ links }: { links: { name: string; href: string }[] }) =
{/* Using an anchor tag with button styling for the GitHub Link */} ( -
-
-
-
- - v2.0: Now with real-time codebase context -
-

- Ship documentation
- as fast as your code. -

-

- ReadmeGenAI scans your repository and crafts professional README files automatically. -

-
- - +export const Hero = () => { + return ( +
+ {/* Background Glow - Arbitrary values for Tailwind v4 compatibility */} +
+ +
+ {/* Badge */} +
+ + v2.0: Now with real-time codebase context +
+ + {/* Headline */} +

+ Ship documentation
+ + as fast as your code. + +

+ + {/* Sub-headline */} +

+ ReadmeGenAI scans your repository and crafts professional, + engaging README files automatically. The perfect intro for your next big project. +

+ + {/* CTA Buttons - Now Functional */} +
+ + + + + + + +
+ + {/* Terminal Section */} +
+ +
- -
-
-); \ No newline at end of file +
+ ); +}; \ No newline at end of file diff --git a/src/components/sections/TerminalMockup.tsx b/src/components/sections/TerminalMockup.tsx index 827a66d..d993b81 100644 --- a/src/components/sections/TerminalMockup.tsx +++ b/src/components/sections/TerminalMockup.tsx @@ -26,7 +26,8 @@ export const TerminalMockup = () => (

● Analyzing codebase...

-

✓ Detected Next.js 15 & TailwindCSS

+ {/* UPDATED: Reflecting Next.js 16 as per package.json */} +

✓ Detected Next.js 16 & TailwindCSS

✓ Parsed 14 API endpoints

✓ Metadata successfully pulled from Octokit