Implement Repo UI - Same URI format like Github (https://<url>/<ownerSlug>/<repoSlug>). (#25)

Signed-off-by: Dae❤️ <74119677+daeisbae@users.noreply.github.com>

Author: daeisbae

package.json

@@ -16,12 +16,16 @@
     "@google/generative-ai": "^0.21.0",
     "@langchain/core": "^0.3.26",
     "axios": "^1.7.9",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
     "dotenv": "^16.4.7",
     "langchain": "^0.3.7",
+    "lucide-react": "^0.469.0",
     "next": "15.1.0",
     "pg": "^8.13.1",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "tailwind-merge": "^2.6.0"
   },
   "devDependencies": {
     "@babel/cli": "^7.26.4",

src/app/[ownerSlug]/[repoSlug]/loading.tsx

@@ -0,0 +1,16 @@
+import { Skeleton } from '@/components/ui/skeleton'
+
+export default function Loading() {
+    return (
+        <div className="space-y-4">
+            <Skeleton className="h-8 w-[250px]" />
+            <Skeleton className="h-4 w-[200px]" />
+            <Skeleton className="h-4 w-[150px]" />
+            <div className="space-y-2">
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-full" />
+                <Skeleton className="h-4 w-2/3" />
+            </div>
+        </div>
+    )
+}

src/app/[ownerSlug]/[repoSlug]/page.tsx

@@ -0,0 +1,34 @@
+import { JSX, Suspense } from 'react'
+import { RepoCard } from '@/components/RepoCard'
+import Loading from '@/app/[ownerSlug]/[repoSlug]/loading'
+import { FetchRepoService, FullRepository } from '@/db/get-db'
+import { notFound } from 'next/navigation'
+
+interface PageProps {
+    params: {
+        ownerSlug: string
+        repoSlug: string
+    }
+}
+
+export default async function RepoPage({
+    params,
+}: PageProps): Promise<JSX.Element> {
+    const { ownerSlug, repoSlug } = await params
+    console.log(ownerSlug, repoSlug)
+
+    const fetchRepoService = new FetchRepoService()
+    const repoDetails: FullRepository | null =
+        await fetchRepoService.getFullRepositoryTree(ownerSlug, repoSlug)
+
+    if (!repoDetails) {
+        console.log('Repo not found')
+        notFound()
+    }
+
+    return (
+        <Suspense fallback={<Loading />}>
+            <RepoCard repoInfo={repoDetails.repository} />
+        </Suspense>
+    )
+}

src/components/NavBar.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react'
+import Link from 'next/link'
+
+import { cn } from '@/lib/utils'
+
+import {
+    NavigationMenu,
+    NavigationMenuItem,
+    NavigationMenuLink,
+    NavigationMenuList,
+    navigationMenuTriggerStyle,
+} from '@/components/ui/navigation-menu'
+
+export default function Navbar() {
+    return (
+        <div className="border-b">
+            <div className="flex h-16 items-center px-4">
+                <Link href="/" className="mr-6 flex items-center space-x-2">
+                    <span className="text-xl font-bold">OpenRepoWiki</span>
+                </Link>
+                <NavigationMenu className="hidden md:flex">
+                    <NavigationMenuList>
+                        <NavigationMenuItem>
+                            <Link href="/repositories" legacyBehavior passHref>
+                                <NavigationMenuLink
+                                    className={cn(
+                                        navigationMenuTriggerStyle(),
+                                        'w-28'
+                                    )}
+                                >
+                                    Repo
+                                </NavigationMenuLink>
+                            </Link>
+                        </NavigationMenuItem>
+                        <NavigationMenuItem>
+                            <Link href="/blogs" legacyBehavior passHref>
+                                <NavigationMenuLink
+                                    className={cn(
+                                        navigationMenuTriggerStyle(),
+                                        'w-28'
+                                    )}
+                                >
+                                    Blogs
+                                </NavigationMenuLink>
+                            </Link>
+                        </NavigationMenuItem>
+                        <NavigationMenuItem>
+                            <Link href="/about" legacyBehavior passHref>
+                                <NavigationMenuLink
+                                    className={cn(
+                                        navigationMenuTriggerStyle(),
+                                        'w-28 h-auto'
+                                    )}
+                                >
+                                    About
+                                </NavigationMenuLink>
+                            </Link>
+                        </NavigationMenuItem>
+                    </NavigationMenuList>
+                </NavigationMenu>
+            </div>
+        </div>
+    )
+}

src/components/RepoCard.tsx

@@ -0,0 +1,66 @@
+import { Card, CardHeader, CardContent, CardTitle } from '@/components/ui/card'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import { Star, GitFork } from 'lucide-react'
+import React from 'react'
+
+export interface RepoDetails {
+    owner: string
+    repo: string
+    descriptions: string
+    stars: number
+    forks: number
+    url: string
+    default_branch: string
+    topics: string[]
+}
+
+export interface RepoCardProps {
+    repoInfo: RepoDetails
+}
+
+export function RepoCard({ repoInfo }: RepoCardProps) {
+    return (
+        <Card>
+            <CardHeader>
+                <CardTitle>
+                    {repoInfo.owner}/{repoInfo.repo}
+                </CardTitle>
+            </CardHeader>
+            <CardContent>
+                <p className="text-sm text-muted-foreground mb-4">
+                    {repoInfo.descriptions}
+                </p>
+                <div className="flex items-center gap-4 mb-4">
+                    <div className="flex items-center">
+                        <Star className="w-4 h-4 mr-1" />
+                        <span>{repoInfo.stars}</span>
+                    </div>
+                    <div className="flex items-center">
+                        <GitFork className="w-4 h-4 mr-1" />
+                        <span>{repoInfo.forks}</span>
+                    </div>
+                </div>
+                <a
+                    href={repoInfo.url}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="text-primary hover:underline"
+                >
+                    View on GitHub
+                </a>
+                <Separator className="my-4" />
+                <div>
+                    <h4 className="font-semibold mb-2">Topics</h4>
+                    <div className="flex flex-wrap gap-2">
+                        {repoInfo.topics.map((topic, index) => (
+                            <Badge key={index} variant="secondary">
+                                {topic}
+                            </Badge>
+                        ))}
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    )
+}

src/components/ui/navigation-menu.jsx

@@ -0,0 +1,104 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const NavigationMenu = React.forwardRef(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
+      className
+    )}
+    {...props}>
+    {children}
+    <NavigationMenuViewport />
+  </NavigationMenuPrimitive.Root>
+))
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
+
+const NavigationMenuList = React.forwardRef(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.List
+    ref={ref}
+    className={cn(
+      "group flex flex-1 list-none items-center justify-center space-x-1",
+      className
+    )}
+    {...props} />
+))
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
+
+const NavigationMenuItem = NavigationMenuPrimitive.Item
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-white px-4 py-2 text-sm font-medium transition-colors hover:bg-neutral-100 hover:text-neutral-900 focus:bg-neutral-100 focus:text-neutral-900 focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-neutral-100/50 data-[state=open]:bg-neutral-100/50 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50 dark:data-[active]:bg-neutral-800/50 dark:data-[state=open]:bg-neutral-800/50"
+)
+
+const NavigationMenuTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+  <NavigationMenuPrimitive.Trigger
+    ref={ref}
+    className={cn(navigationMenuTriggerStyle(), "group", className)}
+    {...props}>
+    {children}{""}
+    <ChevronDown
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true" />
+  </NavigationMenuPrimitive.Trigger>
+))
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
+
+const NavigationMenuContent = React.forwardRef(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Content
+    ref={ref}
+    className={cn(
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto",
+      className
+    )}
+    {...props} />
+))
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
+
+const NavigationMenuLink = NavigationMenuPrimitive.Link
+
+const NavigationMenuViewport = React.forwardRef(({ className, ...props }, ref) => (
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
+    <NavigationMenuPrimitive.Viewport
+      className={cn(
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border border-neutral-200 bg-white text-neutral-950 shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)] dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+        className
+      )}
+      ref={ref}
+      {...props} />
+  </div>
+))
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
+
+const NavigationMenuIndicator = React.forwardRef(({ className, ...props }, ref) => (
+  <NavigationMenuPrimitive.Indicator
+    ref={ref}
+    className={cn(
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
+      className
+    )}
+    {...props}>
+    <div
+      className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-neutral-200 shadow-md dark:bg-neutral-800" />
+  </NavigationMenuPrimitive.Indicator>
+))
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
+
+export {
+  navigationMenuTriggerStyle,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+}

src/components/ui/skeleton.jsx

@@ -0,0 +1,17 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}) {
+  return (
+    (<div
+      className={cn(
+        "animate-pulse rounded-md bg-neutral-900/10 dark:bg-neutral-50/10",
+        className
+      )}
+      {...props} />)
+  );
+}
+
+export { Skeleton }

src/db/get-db.ts

@@ -0,0 +1,73 @@
+import { Repository, RepositoryData } from '@/db/models/repository'
+import { Branch, BranchData } from '@/db/models/branch'
+import { Folder, FolderData } from '@/db/models/folder'
+import { File, FileData } from '@/db/models/file'
+
+export interface FullFolder extends FolderData {
+    files: FileData[]
+    subfolders: FullFolder[]
+}
+
+export interface FullRepository {
+    repository: RepositoryData
+    branch: BranchData | null
+    folders: FullFolder[]
+}
+
+export class FetchRepoService {
+    private repository = new Repository()
+    private branch = new Branch()
+    private folder = new Folder()
+    private file = new File()
+
+    async getFullRepositoryTree(
+        owner: string,
+        repo: string
+    ): Promise<FullRepository | null> {
+        const repositoryData = await this.repository.select(owner, repo)
+
+        if (!repositoryData) return null
+
+        const branchData = await this.branch.select(repositoryData.url)
+        const folders: FullFolder[] = branchData
+            ? await this.getFoldersRecursively(branchData.branch_id, null)
+            : []
+
+        // if (!branchData) {
+        //     throw new Error('No branch found for the repository')
+        // }
+
+        return {
+            repository: repositoryData,
+            branch: branchData,
+            folders,
+        }
+    }
+
+    private async getFoldersRecursively(
+        branchId: number,
+        parentFolderId: number | null
+    ): Promise<FullFolder[]> {
+        const allFolders = await this.folder.select(branchId)
+        if (!allFolders) throw new Error('No folders found for the repository')
+
+        const currentLevel = allFolders.filter(
+            (f) => f.parent_folder_id === parentFolderId
+        )
+
+        const foldersWithChildren: FullFolder[] = []
+        for (const folder of currentLevel) {
+            const subfolders = await this.getFoldersRecursively(
+                branchId,
+                folder.folder_id
+            )
+            const files = await this.file.select(folder.folder_id)
+            foldersWithChildren.push({
+                ...folder,
+                files,
+                subfolders,
+            })
+        }
+        return foldersWithChildren
+    }
+}