chore: reorganize project structure, add About/Docs components, update video format to WebM

Author: coder-ralph

package-lock.json

@@ -12,12 +12,12 @@
     "@octokit/rest": "^21.0.2",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",
-    "@shadcn/ui": "^0.0.4",
     "@types/react-syntax-highlighter": "^15.5.13",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "file-saver": "^2.0.5",
     "framer-motion": "^11.11.17",
+    "lodash": "^4.17.21",
     "lucide-react": "^0.456.0",
     "mini-svg-data-uri": "^1.4.4",
     "next": "15.0.3",
@@ -31,6 +31,7 @@
   },
   "devDependencies": {
     "@types/file-saver": "^2.0.7",
+    "@types/lodash": "^4.17.13",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",

package.json

@@ -0,0 +1,60 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { ArrowLeft } from 'lucide-react'
+import { Button } from "@/components/ui/button"
+import Link from 'next/link'
+
+const AboutPage = () => {
+  const router = useRouter()
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-3xl mx-auto">
+        <Button
+          onClick={() => router.back()}
+          className="mb-8 flex items-center text-white rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors duration-300"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Go back
+        </Button>
+
+        <h1 className="text-3xl font-bold mb-6">About RepoTree</h1>
+
+        <div className="p-6 space-y-4 transition-colors duration-300">
+          <p>
+            RepoTree is a simple tool to visualize GitHub repositories. It helps developers and teams easily explore and understand their project structures.
+          </p>
+
+          <h2 className="text-xl font-semibold">Our Vision</h2>
+          <p>
+            We want every developer to quickly see the structure of any project, making it easier to collaborate and build efficiently.
+          </p>
+
+          <h2 className="text-xl font-semibold">Features</h2>
+          <ul className="list-disc pl-6 space-y-2">
+            <li>Clean ASCII view of GitHub repository structure</li>
+            <li>Interactive tree view for easy navigation</li>
+            <li>Download options in various formats</li>
+            <li>Real-time search to find files or folders quickly</li>
+          </ul>
+
+          <p>
+            Whether documenting a project or getting a quick overview, RepoTree makes it simple to understand your codebase.
+          </p>
+
+          <div className="mt-8">
+            <Link
+              href="/generator"
+              className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300"
+            >
+              Try RepoTree Now
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default AboutPage

public/file.svg

@@ -0,0 +1,68 @@
+'use client'
+
+import { useRouter } from 'next/navigation'
+import { ArrowLeft } from 'lucide-react'
+import { Button } from "@/components/ui/button"
+import Link from 'next/link'
+
+const DocsPage = () => {
+  const router = useRouter()
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-300 py-12 px-4 sm:px-6 lg:px-8">
+      <div className="max-w-3xl mx-auto">
+        <Button
+          onClick={() => router.back()}
+          className="mb-8 flex items-center text-white rounded-full bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 transition-colors duration-300"
+        >
+          <ArrowLeft className="h-4 w-4" />
+          Go back
+        </Button>
+
+        <h1 className="text-3xl font-bold mb-6">RepoTree Documentation</h1>
+
+        <div className="p-6 space-y-4 transition-colors duration-300">
+          <h2 className="text-xl font-semibold">Introduction</h2>
+          <p>
+            RepoTree is a powerful tool that generates a clean ASCII representation of a GitHub repository structure, perfect for documentation and sharing.
+          </p>
+
+          <h2 className="text-xl font-semibold">Features</h2>
+          <ul className="list-disc pl-6 space-y-2">
+            <li><strong>Download in Different Formats:</strong> Users can download the directory structure in formats like README.md, .txt, .json, or .html.</li>
+            <li><strong>Syntax Highlighting:</strong> Enhances readability using prism-react-renderer for syntax highlighting.</li>
+            <li><strong>Real-time Search Bar:</strong> Quickly filter and highlight specific files or directories within the generated structure.</li>
+            <li><strong>Persistent State with LocalStorage:</strong> Saves the last fetched repository URL, maintaining input between sessions.</li>
+            <li><strong>Interactive Tree View:</strong> Allows expansion or collapse of folders for better navigation.</li>
+            <li><strong>Clipboard Copy Notification:</strong> Provides a toast notification when the directory structure is copied to the clipboard.</li>
+            <li><strong>View Mode Toggle:</strong> Switch between ASCII view and Interactive view for an enhanced user experience.</li>
+            <li><strong>Clear Input Functionality:</strong> Includes a button to clear the input field, improving usability.</li>
+            <li><strong>Loading State Animation:</strong> Displays a spinner during data fetching for a smoother experience.</li>
+            <li><strong>Error Handling and Validation:</strong> Validates GitHub URLs and shows error messages for invalid inputs.</li>
+            <li><strong>Expandable ASCII Tree:</strong> Toggle the expansion of the ASCII tree to view a complete or limited structure.</li>
+            <li><strong>Filtered Structure Generation:</strong> Generates a structure based on search terms for quick file/folder location.</li>
+            <li><strong>Enhanced UI with Tailwind CSS:</strong> Provides a responsive and visually appealing interface using Tailwind CSS.</li>
+            <li><strong>Server-Side Fetching with Next.js:</strong> Optimized server-side fetching improves performance and SEO.</li>
+            <li><strong>Save Last Fetched URL:</strong> Automatically saves and repopulates the last fetched URL for convenience.</li>
+          </ul>
+
+          <h2 className="text-xl font-semibold mt-8">Future Features</h2>
+          <ul className="list-disc pl-6 space-y-2">
+            <li><strong>Fetching User Branches:</strong> Allows users to select a specific branch instead of defaulting to the main branch.</li>
+          </ul>
+
+          <div className="mt-8">
+            <Link
+              href="/generator"
+              className="bg-blue-600 hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300"
+            >
+              Try RepoTree Now
+            </Link>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default DocsPage

public/globe.svg

@@ -1,7 +1,7 @@
 'use client'
 
-import Header from '@/components/header'
-import Footer from '@/components/footer'
+import Header from '@/components/layout/header'
+import Footer from '@/components/layout/footer'
 import RepoTree from '@/app/generator/repo-tree-generator'
 
 export default function RepoStructurePage() {

public/next.svg

@@ -1,18 +1,6 @@
 import type { Metadata } from "next"
-import localFont from "next/font/local"
 import { ThemeProvider } from '@/components/theme-provider'
-import "./globals.css"
-
-const geistSans = localFont({
-  src: "./fonts/GeistVF.woff",
-  variable: "--font-geist-sans",
-  weight: "100 900",
-})
-const geistMono = localFont({
-  src: "./fonts/GeistMonoVF.woff",
-  variable: "--font-geist-mono",
-  weight: "100 900",
-})
+import "../styles/globals.css";
 
 export const metadata: Metadata = {
   title: "RepoTree - ASCII Tree Generator",
@@ -26,9 +14,7 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
+      <body className="antialiased">
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
           {children}
         </ThemeProvider>

public/vercel.svg

@@ -1,4 +1,4 @@
-import LandingPage from './landing-page'
+import LandingPage from '@/components/landing-page'
 
 export default function Home() {
   return <LandingPage />

public/video/demo.mp4

@@ -3,12 +3,12 @@
 import { useEffect } from 'react'
 import { useAnimation } from 'framer-motion'
 import { useInView } from 'react-intersection-observer'
-import Header from '@/components/header'
+import Header from '@/components/layout/header'
 import Hero from '@/components/hero'
 import About from '@/components/about'
 import ProductShowcase from '@/components/product-showcase'
 import FAQ from '@/components/faq'
-import Footer from '@/components/footer'
+import Footer from '@/components/layout/footer'
 
 export default function LandingPage() {
   const controls = useAnimation()

public/video/demo.webm

@@ -23,20 +23,15 @@ const Footer = () => {
             <h3 className="text-base sm:text-lg md:text-xl font-semibold mb-4">Quick Links</h3>
             <ul className="space-y-2">
               <li>
-                <Link href="/" className="hover:text-blue-400 transition-colors">
-                  Home
+                <Link href="/docs" className="hover:text-blue-400 transition-colors">
+                  Docs
                 </Link>
               </li>
               <li>
-                <Link href="#about" className="hover:text-blue-400 transition-colors">
+                <Link href="/about" className="hover:text-blue-400 transition-colors">
                   About
                 </Link>
               </li>
-              <li>
-                <Link href="#faq" className="hover:text-blue-400 transition-colors">
-                  FAQs
-                </Link>
-              </li>
             </ul>
           </div>
           <div>

public/window.svg

@@ -1,5 +1,5 @@
 import { Github, FolderTreeIcon } from 'lucide-react'
-import ThemeToggle from './theme-toggle'
+import ThemeToggle from '../theme-toggle';
 import Link from 'next/link'
 
 const Header = () => {

src/app/about/page.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useRef } from 'react'
+
+interface LazyVideoProps {
+  src: string
+  className?: string
+}
+
+export default function LazyVideo({ src, className }: LazyVideoProps) {
+  const videoRef = useRef<HTMLVideoElement>(null)
+
+  useEffect(() => {
+    const options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1
+    }
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting && videoRef.current) {
+          videoRef.current.src = src
+          videoRef.current.load()
+
+          // Play the video only once it's ready
+          videoRef.current.oncanplay = () => {
+            videoRef.current?.play().catch(error => console.error('Auto-play was prevented:', error))
+          }
+
+          observer.unobserve(entry.target)
+        }
+      })
+    }, options)
+
+    // Capture the current ref value at the time the effect runs
+    const currentVideoRef = videoRef.current;
+
+    if (currentVideoRef) {
+      observer.observe(currentVideoRef)
+    }
+
+    return () => {
+      // Cleanup by referencing the captured currentVideoRef
+      if (currentVideoRef) {
+        observer.unobserve(currentVideoRef)
+      }
+    }
+  }, [src])
+
+  return (
+    <video 
+      ref={videoRef}
+      loop
+      muted
+      playsInline
+      className={className}
+      aria-label="Product demo video"
+    >
+      <source type="video/webm" />
+      Your browser does not support the video tag.
+    </video>
+  )
+}

src/app/docs/page.tsx

@@ -1,18 +1,26 @@
 'use client'
 
+import { useState, useEffect } from 'react'
 import { motion } from 'framer-motion'
 import { Button } from '@/components/ui/button'
 import Link from 'next/link'
+import LazyVideo from '@/components/lazy-video'
 
 const ProductShowcase = () => {
+  const [isClient, setIsClient] = useState(false)
+
+  useEffect(() => {
+    setIsClient(true)
+  }, [])
+
   return (
     <section className="py-20 bg-white dark:bg-gray-900 overflow-hidden">
       <div className="container mx-auto px-4">
         <div className="flex flex-col lg:flex-row items-center">
           <motion.div
-            initial={{ opacity: 0, x: -50 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.6 }}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
             className="lg:w-1/2 mb-10 lg:mb-0"
           >
             <h2 className="text-3xl md:text-4xl font-bold mb-6 text-gray-900 dark:text-white">
@@ -26,7 +34,6 @@ const ProductShowcase = () => {
               Perfect for documentation and easy sharing with your team.
             </p>
 
-            {/* "Try it now" Button */}
             <Link href="/generator">
               <Button
                 size="lg"
@@ -38,16 +45,18 @@ const ProductShowcase = () => {
           </motion.div>
 
           <motion.div
-            initial={{ opacity: 0, x: 50 }}
-            animate={{ opacity: 1, x: 0 }}
-            transition={{ duration: 0.6, delay: 0.2 }}
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
             className="lg:w-1/2"
           >
             <div className="rounded-lg shadow-2xl overflow-hidden">
-              <video autoPlay loop muted playsInline className="w-full h-auto">
-                <source src="/video/demo.mp4" type="video/mp4" />
-                Your browser does not support the video tag.
-              </video>
+              {isClient && (
+                <LazyVideo
+                  src="/video/demo.webm"
+                  className="w-full h-auto"
+                />
+              )}
             </div>
           </motion.div>
         </div>