Skip to content

Commit c6c36be

Browse files
coder-ralphcoder-ralph
committed
feat: Improve documentation page
1 parent 17530ab commit c6c36be

File tree

5 files changed

+242
-82
lines changed

5 files changed

+242
-82
lines changed

‎package-lock.json

Lines changed: 60 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
"dependencies": {
1212
"@google/generative-ai": "^0.21.0",
1313
"@octokit/rest": "^21.0.2",
14+
"@radix-ui/react-accordion": "^1.2.1",
1415
"@radix-ui/react-dialog": "^1.1.2",
1516
"@radix-ui/react-form": "^0.1.0",
1617
"@radix-ui/react-icons": "^1.3.2",

‎src/app/docs/page.tsx

Lines changed: 95 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
'use client';
22

3-
import Link from 'next/link';
43
import { useRouter } from 'next/navigation';
5-
4+
import Link from 'next/link';
65
import { Button } from '@/components/ui/button';
76
import { ArrowLeft } from 'lucide-react';
7+
import {
8+
Accordion,
9+
AccordionContent,
10+
AccordionItem,
11+
AccordionTrigger,
12+
} from "@/components/ui/accordion"
813

914
const DocsPage = () => {
1015
const router = useRouter();
@@ -16,94 +21,102 @@ const DocsPage = () => {
1621
onClick={() => router.back()}
1722
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"
1823
>
19-
<ArrowLeft className="h-4 w-4" />
24+
<ArrowLeft className="h-4 w-4 mr-2" />
2025
Go back
2126
</Button>
2227

2328
<h1 className="text-3xl font-bold mb-6">RepoTree Documentation</h1>
2429

2530
<div className="p-6 space-y-4 transition-colors duration-300">
26-
<h2 className="text-xl font-semibold">Introduction</h2>
27-
<p>
28-
RepoTree is a powerful tool that generates a clean ASCII
29-
representation of a GitHub repository structure, perfect for
30-
documentation and sharing.
31-
</p>
31+
<section id="introduction" className="mb-8">
32+
<h2 className="text-2xl font-semibold mb-4">Introduction</h2>
33+
<p>
34+
RepoTree is a powerful tool that generates a clean ASCII
35+
representation of a GitHub or GitLab repository structure, perfect for
36+
documentation and sharing.
37+
</p>
38+
</section>
39+
40+
<section id="features" className="mb-8">
41+
<h2 className="text-2xl font-semibold mb-4">Features</h2>
42+
<Accordion type="single" collapsible className="w-full">
43+
<AccordionItem value="item-1">
44+
<AccordionTrigger>Core Features</AccordionTrigger>
45+
<AccordionContent>
46+
<ul className="list-disc pl-6 space-y-2">
47+
<li><strong>Download in Different Formats:</strong> Users can download the directory structure in formats like README.md, .txt, .json, or .html.</li>
48+
<li><strong>Syntax Highlighting:</strong> Enhances readability using prism-react-renderer for syntax highlighting.</li>
49+
<li><strong>Real-time Search Bar:</strong> Quickly filter and highlight specific files or directories within the generated structure.</li>
50+
<li><strong>AI Feedback Analysis:</strong> Provides feedback and suggestions for your repository structure based on AI analysis.</li>
51+
<li><strong>Repository Analysis Graphs:</strong> Visualizes repository data, such as file type distribution and languages breakdown, with interactive graphs.</li>
52+
</ul>
53+
</AccordionContent>
54+
</AccordionItem>
55+
<AccordionItem value="item-2">
56+
<AccordionTrigger>User Experience</AccordionTrigger>
57+
<AccordionContent>
58+
<ul className="list-disc pl-6 space-y-2">
59+
<li><strong>Interactive Tree View:</strong> Allows expansion or collapse of folders for better navigation.</li>
60+
<li><strong>Clipboard Copy Notification:</strong> Provides a toast notification when the directory structure is copied to the clipboard.</li>
61+
<li><strong>View Mode Toggle:</strong> Switch between ASCII view and Interactive view for an enhanced user experience.</li>
62+
</ul>
63+
</AccordionContent>
64+
</AccordionItem>
65+
<AccordionItem value="item-3">
66+
<AccordionTrigger>Technical Features</AccordionTrigger>
67+
<AccordionContent>
68+
<ul className="list-disc pl-6 space-y-2">
69+
<li><strong>Persistent State with LocalStorage:</strong> Saves the last fetched repository URL, maintaining input between sessions.</li>
70+
<li><strong>Server-Side Fetching with Next.js:</strong> Optimized server-side fetching improves performance and SEO.</li>
71+
<li><strong>Error Handling and Validation:</strong> Validates GitHub URLs and shows error messages for invalid inputs.</li>
72+
</ul>
73+
</AccordionContent>
74+
</AccordionItem>
75+
</Accordion>
76+
</section>
77+
78+
<section id="tech-stack" className="mb-8">
79+
<h2 className="text-2xl font-semibold mb-4">Tech Stack</h2>
80+
<ul className="list-disc pl-6 space-y-2">
81+
<li><strong>Next.js:</strong> React framework for server-side rendering and routing</li>
82+
<li><strong>React:</strong> JavaScript library for building user interfaces</li>
83+
<li><strong>TypeScript:</strong> Typed superset of JavaScript for improved developer experience</li>
84+
<li><strong>Tailwind CSS:</strong> Utility-first CSS framework for rapid UI development</li>
85+
<li><strong>Shadcn UI:</strong> Component library for consistent and customizable UI elements</li>
86+
<li><strong>Octokit:</strong> GitHub API client for fetching repository data</li>
87+
<li><strong>Recharts:</strong> Composable charting library for data visualization</li>
88+
<li><strong>Axios:</strong> Promise-based HTTP client for making requests</li>
89+
<li><strong>Framer Motion:</strong> Animation library for React</li>
90+
<li><strong>Lucide:</strong> A set of open-source icons for React</li>
91+
<li><strong>Radix UI:</strong> Low-level UI primitives for building accessible, high-quality design systems</li>
92+
<li><strong>File Saver:</strong> Library to save files on the client-side</li>
93+
<li><strong>Mini SVG Data URI:</strong> Utility for converting SVGs to data URIs</li>
94+
</ul>
95+
</section>
3296

33-
<h2 className="text-xl font-semibold">Features</h2>
34-
<ul className="list-disc pl-6 space-y-2">
35-
<li>
36-
<strong>Download in Different Formats:</strong> Users can download
37-
the directory structure in formats like README.md, .txt, .json, or
38-
.html.
39-
</li>
40-
<li>
41-
<strong>Syntax Highlighting:</strong> Enhances readability using
42-
prism-react-renderer for syntax highlighting.
43-
</li>
44-
<li>
45-
<strong>Real-time Search Bar:</strong> Quickly filter and
46-
highlight specific files or directories within the generated
47-
structure.
48-
</li>
49-
<li>
50-
<strong>Persistent State with LocalStorage:</strong> Saves the
51-
last fetched repository URL, maintaining input between sessions.
52-
</li>
53-
<li>
54-
<strong>Interactive Tree View:</strong> Allows expansion or
55-
collapse of folders for better navigation.
56-
</li>
57-
<li>
58-
<strong>Clipboard Copy Notification:</strong> Provides a toast
59-
notification when the directory structure is copied to the
60-
clipboard.
61-
</li>
62-
<li>
63-
<strong>View Mode Toggle:</strong> Switch between ASCII view and
64-
Interactive view for an enhanced user experience.
65-
</li>
66-
<li>
67-
<strong>Clear Input Functionality:</strong> Includes a button to
68-
clear the input field, improving usability.
69-
</li>
70-
<li>
71-
<strong>Loading State Animation:</strong> Displays a spinner
72-
during data fetching for a smoother experience.
73-
</li>
74-
<li>
75-
<strong>Error Handling and Validation:</strong> Validates GitHub
76-
URLs and shows error messages for invalid inputs.
77-
</li>
78-
<li>
79-
<strong>Expandable ASCII Tree:</strong> Toggle the expansion of
80-
the ASCII tree to view a complete or limited structure.
81-
</li>
82-
<li>
83-
<strong>Filtered Structure Generation:</strong> Generates a
84-
structure based on search terms for quick file/folder location.
85-
</li>
86-
<li>
87-
<strong>Enhanced UI with Tailwind CSS:</strong> Provides a
88-
responsive and visually appealing interface using Tailwind CSS.
89-
</li>
90-
<li>
91-
<strong>Server-Side Fetching with Next.js:</strong> Optimized
92-
server-side fetching improves performance and SEO.
93-
</li>
94-
<li>
95-
<strong>Save Last Fetched URL:</strong> Automatically saves and
96-
repopulates the last fetched URL for convenience.
97-
</li>
98-
</ul>
97+
<section id="demo" className="mb-8">
98+
<h2 className="text-2xl font-semibold mb-4">Demo</h2>
99+
<div className="relative w-full overflow-hidden rounded-lg" style={{ paddingTop: '56.25%' }}>
100+
<iframe
101+
className="absolute top-0 left-0 w-full h-full"
102+
src="https://www.youtube.com/embed/49qcrWgHT9M?si=2BnYxyBXXmh1EQd5"
103+
title="YouTube video player"
104+
frameBorder="0"
105+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
106+
referrerPolicy="strict-origin-when-cross-origin"
107+
allowFullScreen
108+
></iframe>
109+
</div>
110+
</section>
99111

100-
<h2 className="text-xl font-semibold mt-8">Future Features</h2>
101-
<ul className="list-disc pl-6 space-y-2">
102-
<li>
103-
<strong>Fetching User Branches:</strong> Allows users to select a
104-
specific branch instead of defaulting to the main branch.
105-
</li>
106-
</ul>
112+
<section id="future-features" className="mb-8">
113+
<h2 className="text-2xl font-semibold mb-4">Future Features</h2>
114+
<ul className="list-disc pl-6 space-y-2">
115+
<li>Integration with Bitbucket repositories</li>
116+
<li>Advanced filtering options for large repositories</li>
117+
<li>Customizable ASCII art styles for tree representation</li>
118+
</ul>
119+
</section>
107120

108121
<div className="mt-8">
109122
<Link

‎src/components/ui/accordion.tsx

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
"use client"
2+
3+
import * as React from 'react'
4+
import * as AccordionPrimitive from '@radix-ui/react-accordion'
5+
import { ChevronDown } from 'lucide-react'
6+
7+
import { cn } from "@/lib/utils"
8+
9+
const Accordion = AccordionPrimitive.Root
10+
11+
const AccordionItem = React.forwardRef<
12+
React.ElementRef<typeof AccordionPrimitive.Item>,
13+
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
14+
>(({ className, ...props }, ref) => (
15+
<AccordionPrimitive.Item
16+
ref={ref}
17+
className={cn("border-b", className)}
18+
{...props}
19+
/>
20+
))
21+
AccordionItem.displayName = "AccordionItem"
22+
23+
const AccordionTrigger = React.forwardRef<
24+
React.ElementRef<typeof AccordionPrimitive.Trigger>,
25+
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
26+
>(({ className, children, ...props }, ref) => (
27+
<AccordionPrimitive.Header className="flex">
28+
<AccordionPrimitive.Trigger
29+
ref={ref}
30+
className={cn(
31+
"flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
32+
className
33+
)}
34+
{...props}
35+
>
36+
{children}
37+
<ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
38+
</AccordionPrimitive.Trigger>
39+
</AccordionPrimitive.Header>
40+
))
41+
AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
42+
43+
const AccordionContent = React.forwardRef<
44+
React.ElementRef<typeof AccordionPrimitive.Content>,
45+
React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
46+
>(({ className, children, ...props }, ref) => (
47+
<AccordionPrimitive.Content
48+
ref={ref}
49+
className={cn(
50+
"overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
51+
className
52+
)}
53+
{...props}
54+
>
55+
<div className="pb-4 pt-0">{children}</div>
56+
</AccordionPrimitive.Content>
57+
))
58+
AccordionContent.displayName = AccordionPrimitive.Content.displayName
59+
60+
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

‎src/styles/globals.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,3 +70,29 @@ body {
7070
@apply bg-background text-foreground;
7171
}
7272
}
73+
74+
@keyframes accordion-down {
75+
from {
76+
height: 0;
77+
}
78+
to {
79+
height: var(--radix-accordion-content-height);
80+
}
81+
}
82+
83+
@keyframes accordion-up {
84+
from {
85+
height: var(--radix-accordion-content-height);
86+
}
87+
to {
88+
height: 0;
89+
}
90+
}
91+
92+
.animate-accordion-down {
93+
animation: accordion-down 0.2s ease-out;
94+
}
95+
96+
.animate-accordion-up {
97+
animation: accordion-up 0.2s ease-out;
98+
}

0 commit comments

Comments
 (0)