Implement Repo UI - Implement document alike markdown viewer with white background (#25)

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

Author: daeisbae

next.config.mjs

@@ -1,4 +1,6 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
+const nextConfig = {
+    transpilePackages: ['next-mdx-remote'],
+}
 
-export default nextConfig;
+export default nextConfig

package.json

@@ -22,6 +22,7 @@
     "langchain": "^0.3.7",
     "lucide-react": "^0.469.0",
     "next": "15.1.0",
+    "next-mdx-remote": "^5.0.0",
     "pg": "^8.13.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",

src/agent/structured-output/schema-factory.ts

@@ -49,36 +49,10 @@ File Schema Example Output:
                 summary: z
                     .string()
                     .describe(
-                        'Summary of the file, its main purpose, and its role in the project. Include Markdown links to important code blocks within this file using the format `[{Description of Code Block}]({Full github url of the file including the start line with optional ending line}#L{startLine}-L{endLine})` where applicable.'
-                    ),
-                relevantCodeBlocks: z
-                    .array(
-                        z.object({
-                            name: z
-                                .string()
-                                .describe(
-                                    'Name or identifier of the code block (e.g., function name, class name, key variable).'
-                                ),
-                            description: z
-                                .string()
-                                .describe(
-                                    'Description of the code block and its significance within the file.'
-                                ),
-                            startLine: z
-                                .number()
-                                .describe(
-                                    'Starting line number of the code block.'
-                                ),
-                            endLine: z
-                                .number()
-                                .describe(
-                                    'Ending line number of the code block.'
-                                ),
-                        })
-                    )
-                    .optional()
-                    .describe(
-                        'List of important code blocks (functions, classes, key sections) within the file, with line numbers.'
+                        'Summary of the file talking about its main purpose, and its role in the project.\n'
+                        + 'Include Markdown links to important code blocks within this file using the format\n`'
+                        + '[{Description of Code Block}]({Full github url of the file including the start line with optional ending line}#L{startLine}-L{endLine})` where applicable.\n'
+                        + 'Also you should not return more than 2-3 paragraphs of summary.'
                     ),
             })
 

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

@@ -2,6 +2,7 @@ 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 { MarkdownContent } from '@/components/MarkdownContent'
 import { notFound } from 'next/navigation'
 
 interface PageProps {
@@ -11,24 +12,49 @@ interface PageProps {
     }
 }
 
-export default async function RepoPage({
-    params,
-}: PageProps): Promise<JSX.Element> {
-    const { ownerSlug, repoSlug } = await params
-    console.log(ownerSlug, repoSlug)
+interface RepoPageProps {
+    ownerSlug: string
+    repoSlug: string
+}
+
+const placeholder = `
+# parser.cpp\n\n
+
+- Reference \`parser/parser.cpp\`\n
 
+This file defines the \`Parser\` class, responsible for transforming a stream of tokens into an Abstract Syntax Tree (AST). The parser utilizes a queue of \`TokenPtr\` objects (\`tok_queue_\`) and provides methods for consuming tokens (\`Eat\`), peeking at the next token (\`Peek\`), and expecting specific token types (\`ExpectedTokenType\`). The core functionality resides in \`ProduceAST\` which drives the parsing process by repeatedly calling \`ParseStatement\` until an end-of-line token is encountered. Different parsing methods are present to handle various expressions such as \`ParsePrimaryExpression\`, \`ParseAdditionExpression\`, \`ParseMultiplicationExpression\`, and \`ParseComparisonExpression\`. It supports variable declarations and assignments, and also handles whitespace using \`ParseWhitespaceExpression\`. The parser uses recursive descent parsing strategy with helper functions for each type of expression. It throws \`UnexpectedTokenParsedException\` when unexpected tokens are encountered. The \`Parser\` class depends on the \`TokenPtr\` and the \`ast.hpp\` module for the AST node definitions. Key methods include: [\`Eat\`](https://github.com/daeisbae/AParser/blob/9bbea84efa9f8eeed5576f53e4a65ca87a7f023c/parser/parser.cpp#L11-L15) for consuming tokens, [\`Peek\`](https://github.com/daeisbae/AParser/blob/9bbea84efa9f8eeed5576f53e4a65ca87a7f023c/parser/parser.cpp#L17-L17) for peeking at tokens, [\`ExpectedTokenType\`](https://github.com/daeisbae/AParser/blob/9bbea84efa9f8eeed5576f53e4a65ca87a7f023c/parser/parser.cpp#L19-L39) for validating token types, [\`ProduceAST\`](https://github.com/daeisbae/AParser/blob/9bbea84efa9f8eeed5576f53e4a65ca87a7f023c/parser/parser.cpp#L41-L53) for generating the AST, [\`ParseStatement\`](https://github.com/daeisbae/AParser/blob/9bbea84efa9f8eeed5576f53e4a65ca87a7f023c/parser/parser.cpp#L55-L62) for parsing statements, and [\`ParseExpression\`](https://github.com/daeisbae/AParser/blob/9bbea84efa9f8eeed5576f53e4a65ca87a7f023c/parser/parser.cpp#L64-L66) for parsing expressions. The file also handles different types of expressions using separate parsing methods like [\`ParsePrimaryExpression\`](https://github.com/daeisbae/AParser/blob/9bbea84efa9f8eeed5576f53e4a65ca87a7f023c/parser/parser.cpp#L68-L145), [\`ParseAdditionExpression\`](https://github.com/daeisbae/AParser/blob/9bbea84efa9f8eeed5576f53e4a65ca87a7f023c/parser/parser.cpp#L147-L165), [\`ParseMultiplicationExpression\`](https://github.com/daeisbae/AParser/blob/9bbea84efa9f8eeed5576f53e4a65ca87a7f023c/parser/parser.cpp#L167-L185), [\`ParseWhitespaceExpression\`](https://github.com/daeisbae/AParser/blob/9bbea84efa9f8eeed5576f53e4a65ca87a7f023c/parser/parser.cpp#L187-L192), [\`ParseIdentifierDeclarationExpression\`](https://github.com/daeisbae/AParser/blob/9bbea84efa9f8eeed5576f53e4a65ca87a7f023c/parser/parser.cpp#L194-L217), [\`ParseIdentifierAssignmentExpression\`](https://github.com/daeisbae/AParser/blob/9bbea84efa9f8eeed5576f53e4a65ca87a7f023c/parser/parser.cpp#L219-L243), and [\`ParseComparisonExpression\`](https://github.com/daeisbae/AParser/blob/9bbea84efa9f8eeed5576f53e4a65ca87a7f023c/parser/parser.cpp#L245-L263).
+`
+
+async function RepoPage({
+    ownerSlug,
+    repoSlug,
+}: RepoPageProps): Promise<JSX.Element> {
     const fetchRepoService = new FetchRepoService()
     const repoDetails: FullRepository | null =
         await fetchRepoService.getFullRepositoryTree(ownerSlug, repoSlug)
 
     if (!repoDetails) {
-        console.log('Repo not found')
         notFound()
     }
 
+    return (
+        <div className="flex gap-6 p-6">
+            <div className="flex-1">
+                <MarkdownContent content={placeholder} />
+            </div>
+            <div className="w-[300px]">
+                <RepoCard repoInfo={repoDetails.repository} />
+            </div>
+        </div>
+    )
+}
+
+export default function DocumentationPage({ params }: PageProps) {
+    const { ownerSlug, repoSlug } = params
+
     return (
         <Suspense fallback={<Loading />}>
-            <RepoCard repoInfo={repoDetails.repository} />
+            <RepoPage ownerSlug={ownerSlug} repoSlug={repoSlug} />
         </Suspense>
     )
 }

src/app/layout.tsx

@@ -0,0 +1,22 @@
+import './globals.css'
+import Navbar from '@/components/NavBar'
+
+export const metadata = {
+    title: 'OpenRepoWiki',
+    description: 'A Wikipedia of Github Repositories of how it is made.',
+}
+
+interface RootLayoutProps {
+    children: React.ReactNode
+}
+
+export default function RootLayout({ children } : RootLayoutProps) {
+    return (
+        <html lang="en">
+            <body className="bg-white">
+                <Navbar />
+                <main className="max-w-7xl mx-auto p-6">{children}</main>
+            </body>
+        </html>
+    )
+}

src/components/MarkdownContent.tsx

@@ -0,0 +1,33 @@
+'use client'
+
+import { MDXRemote } from 'next-mdx-remote'
+import { serialize } from 'next-mdx-remote/serialize'
+import { useState, useEffect } from 'react'
+import React from 'react'
+import { Skeleton } from '@/components/ui/skeleton'
+
+interface MarkdownContentProps {
+    content: string
+}
+
+export function MarkdownContent({ content }: MarkdownContentProps) {
+    const [serializedContent, setSerializedContent] = useState<any>(null)
+
+    useEffect(() => {
+        const serializeMarkdown = async () => {
+            const serialized = await serialize(content)
+            setSerializedContent(serialized)
+        }
+        serializeMarkdown()
+    }, [content])
+
+    if (!serializedContent) {
+        return <Skeleton className="h-[200px] w-full" />
+    }
+
+    return (
+        <div className="prose dark:prose-invert max-w-none">
+            <MDXRemote {...serializedContent} />
+        </div>
+    )
+}

src/components/ui/badge.jsx

@@ -0,0 +1,34 @@
+import * as React from "react"
+import { cva } from "class-variance-authority";
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-md border border-neutral-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-neutral-950 focus:ring-offset-2 dark:border-neutral-800 dark:focus:ring-neutral-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-neutral-900 text-neutral-50 shadow hover:bg-neutral-900/80 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/80",
+        secondary:
+          "border-transparent bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
+        destructive:
+          "border-transparent bg-red-500 text-neutral-50 shadow hover:bg-red-500/80 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/80",
+        outline: "text-neutral-950 dark:text-neutral-50",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  ...props
+}) {
+  return (<div className={cn(badgeVariants({ variant }), className)} {...props} />);
+}
+
+export { Badge, badgeVariants }

src/components/ui/card.jsx

@@ -0,0 +1,53 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border border-neutral-200 bg-white text-neutral-950 shadow dark:border-neutral-800 dark:bg-neutral-950 dark:text-neutral-50",
+      className
+    )}
+    {...props} />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props} />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props} />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm text-neutral-500 dark:text-neutral-400", className)}
+    {...props} />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props} />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

src/components/ui/separator.jsx

@@ -0,0 +1,25 @@
+"use client"
+
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+const Separator = React.forwardRef((
+  { className, orientation = "horizontal", decorative = true, ...props },
+  ref
+) => (
+  <SeparatorPrimitive.Root
+    ref={ref}
+    decorative={decorative}
+    orientation={orientation}
+    className={cn(
+      "shrink-0 bg-neutral-200 dark:bg-neutral-800",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    )}
+    {...props} />
+))
+Separator.displayName = SeparatorPrimitive.Root.displayName
+
+export { Separator }