h2h

backend/main.py

@@ -36,7 +36,7 @@
 
 app.add_middleware(
     CORSMiddleware,
-    allow_origins=origins,
+    allow_origins=['*'],
     allow_credentials=True,
     allow_methods=["*"],
     allow_headers=["*"],
@@ -99,7 +99,6 @@ async def render_latex(request: LatexDocSchema):
         result = subprocess.run(compile_command, cwd=f"{root_dir}/{render_dir}/", capture_output=True, text=True)
         if result.returncode != 0:
             raise HTTPException(status_code=501, detail=result.stderr)
-# docker run --rm -v /Users/derekmiller/Documents/sideproj/treehacks-2024/backend/render_dir:/workdir texlive/texlive pdflatex test.tex
 
     except Exception as e:
         print("something", e)

client/package.json

@@ -15,25 +15,27 @@
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.7",
-
-
     "@react-pdf/renderer": "^3.3.8",
-
     "@tanstack/react-query": "^5.21.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.1",
+    "localforage": "^1.10.0",
     "lodash": "^4.17.21",
     "lucide-react": "^0.331.0",
+    "match-sorter": "^6.3.4",
     "monaco-editor-core": "^0.46.0",
     "pdfjs-dist": "^4.0.379",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-pdf": "^7.7.0",
+    "react-router-dom": "^6.22.1",
+    "sort-by": "^1.2.0",
     "tailwind-merge": "^2.2.1",
     "tailwindcss-animate": "^1.0.7"
   },

client/src/App.tsx

@@ -1,13 +1,13 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { ThemeProvider } from "@/components/theme-provider";
 import { ModeToggle } from "@/components/mode-toggle";
 import MonacoEditor from "@/components/monaco-editor";
 import { useQuery } from "@tanstack/react-query";
 import PDFViewer from "@/components/pdf";
 import {latexTemplate} from '@/components/defaultText';
-
+import { Skeleton } from "@/components/ui/skeleton"
+import {NavBar} from "@/components/navbar";
 import { ScrollBaby } from "@/components/ScrollBaby";
 
 import { useMonaco } from "@monaco-editor/react";
@@ -75,43 +75,28 @@ export default function Home() {
 
 
   return (
-    <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
-      <main className="flex min-h-screen flex-col items-center justify-between p-32">
-        <nav className="w-full flex justify-between items-center mb-4">
+      <main className="flex min-h-screen flex-col items-center justify-between px-16">
+        <NavBar />
+        <hr></hr>
+        {/* <nav className="w-full flex justify-between items-center mb-4">
           <div className="flex">
             <h1 className="font-bold text-9xl">AI.DE</h1>
             <p className="pt-24 pl-5">
               For the next generation of resume builders and math proof makers.
             </p>
           </div>
           <ModeToggle />
-        </nav>
+        </nav> */}
         <div className="flex items-center justify-between w-full">
           <div className="flex w-full h-full rounded-md overflow-hidden">
             {" "}
             <MonacoEditor editorText = {editorText} setEditorText={setEditorText} />
           </div>
             {!isLoading ?
                 <PDFViewer filePath={data} />
-              // <iframe src={data} width="100%" height="500px" style={{ border: 'none' }}></iframe>
-              : null}
-        </div>
-        <div className="flex w-full h-full items-center justify-between py-10">
-          <div className="flex flex-col">
-            <div className="z-1 bg-[#e9c7f2] rounded-3xl">
-              <h1 className="text-5xl font-bold z-2 py-2 px-2 text-[#a803d2]">
-                Discover
-              </h1>
-            </div>
-            <h2>See the commands we offer</h2>
-            <ScrollBaby />
-          </div>
-          <div className="flex flex-col">
-            <h1>Search</h1>
-            <h2>Look for what piques your interest</h2>
-          </div>
+              : <Skeleton className="w-8/12 h-[792px] rounded-[10px]" />
+              }
         </div>
       </main>
-    </ThemeProvider>
   );
 }

client/src/Docs.tsx

@@ -0,0 +1,27 @@
+import {NavBar} from "@/components/navbar";
+import { Card}  from "@/components/ui/card";
+import { ScrollBaby } from "@/components/ScrollBaby";
+import { CardContent } from "./components/ui/card";
+
+const Docs = () => {
+  return (
+    <main className="flex h-screen flex-col items-center justify-between px-16">
+        <NavBar />
+        <div className="flex w-full h-full items-start justify-between py-10">
+          <div className="flex flex-col">
+            <div className="">
+              <h1 className="text-5xl font-bold z-2 py-2 text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-pink-500">
+                Discover
+              </h1>
+            </div>
+            <h2 className="text-xl font-bold z-2 py-2 bg-clip-text bg-secondary">See the commands we offer</h2>
+            <ScrollBaby />
+          </div>
+
+        </div>
+
+    </main>
+  )
+}
+
+export default Docs

client/src/components/navbar.tsx

@@ -0,0 +1,162 @@
+"use client"
+
+import * as React from "react"
+
+
+import { cn } from "@/lib/utils"
+// import { Icons } from "@/components/icons"
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu"
+import { ModeToggle } from "./mode-toggle"
+
+const components: { title: string; href: string; description: string }[] = [
+  {
+    title: "Alert Dialog",
+    href: "/docs/primitives/alert-dialog",
+    description:
+      "A modal dialog that interrupts the user with important content and expects a response.",
+  },
+  {
+    title: "Hover Card",
+    href: "/docs/primitives/hover-card",
+    description:
+      "For sighted users to preview content available behind a link.",
+  },
+  {
+    title: "Progress",
+    href: "/docs/primitives/progress",
+    description:
+      "Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.",
+  },
+  {
+    title: "Scroll-area",
+    href: "/docs/primitives/scroll-area",
+    description: "Visually or semantically separates content.",
+  },
+  {
+    title: "Tabs",
+    href: "/docs/primitives/tabs",
+    description:
+      "A set of layered sections of content—known as tab panels—that are displayed one at a time.",
+  },
+  {
+    title: "Tooltip",
+    href: "/docs/primitives/tooltip",
+    description:
+      "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.",
+  },
+]
+
+export function NavBar() {
+  return (
+    <main className="flex flex-row justify-center items-start w-screen pt-4 pb-12 px-4">
+        <div className="w-1/3 ">
+            <NavigationMenu className=" flex justify-between w-full">
+            <NavigationMenuList className="w-full flex-row justify-start">
+                {/* <div className="flex-row justify-between items-center w-1/3"> */}
+                    <NavigationMenuItem>
+                    <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+                    <NavigationMenuContent>
+                        <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                        <li className="row-span-3">
+                            <NavigationMenuLink asChild>
+                            <a
+                                className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                                href="/"
+                            >
+                                {/* <Icons.logo className="h-6 w-6" /> */}
+                                <div className="mb-2 mt-4 text-lg font-medium">
+                                shadcn/ui
+                                </div>
+                                <p className="text-sm leading-tight text-muted-foreground">
+                                Beautifully designed components that you can copy and
+                                paste into your apps. Accessible. Customizable. Open
+                                Source.
+                                </p>
+                            </a>
+                            </NavigationMenuLink>
+                        </li>
+                        <ListItem href="/docs" title="Introduction">
+                            Re-usable components built using Radix UI and Tailwind CSS.
+                        </ListItem>
+                        <ListItem href="/docs/installation" title="Installation">
+                            How to install dependencies and structure your app.
+                        </ListItem>
+                        <ListItem href="/docs/primitives/typography" title="Typography">
+                            Styles for headings, paragraphs, lists...etc
+                        </ListItem>
+                        </ul>
+                    </NavigationMenuContent>
+                    </NavigationMenuItem>
+                    <NavigationMenuItem>
+                    <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+                    <NavigationMenuContent>
+                        <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                        {components.map((component) => (
+                            <ListItem
+                            key={component.title}
+                            title={component.title}
+                            href={component.href}
+                            >
+                            {component.description}
+                            </ListItem>
+                        ))}
+                        </ul>
+                    </NavigationMenuContent>
+                    </NavigationMenuItem>
+                    <NavigationMenuItem>
+                    {/* <Link href="/docs" legacyBehavior passHref> */}
+                        <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                        Documentation
+                        </NavigationMenuLink>
+                    {/* </Link> */}
+                    </NavigationMenuItem>
+                {/* </div> */}
+            </NavigationMenuList>
+            </NavigationMenu>
+        </div>
+        <div className="w-1/3 flex justify-center">
+            <h1 className="font-bold text-3xl text-transparent bg-clip-text bg-gradient-to-r from-blue-500 to-pink-500">Latex</h1>
+            {/* <p className="pt-24 pl-5">
+                For the next generation of resume builders and math proof makers.
+            </p> */}
+        </div>
+        <div className="w-1/3  flex justify-end">
+            <ModeToggle />
+        </div>
+    </main>
+  )
+}
+
+const ListItem = React.forwardRef<
+  React.ElementRef<"a">,
+  React.ComponentPropsWithoutRef<"a">
+>(({ className, title, children, ...props }, ref) => {
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <a
+          ref={ref}
+          className={cn(
+            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+            className
+          )}
+          {...props}
+        >
+          <div className="text-sm font-medium leading-none">{title}</div>
+          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+            {children}
+          </p>
+        </a>
+      </NavigationMenuLink>
+    </li>
+  )
+})
+ListItem.displayName = "ListItem"

client/src/components/pdf.tsx

@@ -20,7 +20,7 @@ const PDFViewer = ({ filePath }: {filePath: string | undefined}) => {
       <Document
         file={starterPath}
         onLoadSuccess={onDocumentLoadSuccess}
-        className={"flex-col w-[1300px] h-[792px] overflow-auto border-2 border-gray-300 rounded-md"}
+        className={"flex-col w-8/12 h-[792px] overflow-auto justify-center items-center border-2 border-gray-300 rounded-md"}
       >
         {Array.from(new Array(numPages), (el, index) => (
           <Page key={`page_${index + 1}`} pageNumber={index + 1} renderTextLayer={false}/>
@@ -32,7 +32,7 @@ const PDFViewer = ({ filePath }: {filePath: string | undefined}) => {
       <Document
         file={filePath}
         onLoadSuccess={onDocumentLoadSuccess}
-        className={"flex-col w-[1300px] h-[792px] overflow-auto border-2 border-gray-300 rounded-md"}
+        className={"flex-col w-8/12 h-[792px] justify-center items-center overflow-auto border-2 border-gray-300 rounded-md"}
       >
         {Array.from(new Array(numPages), (el, index) => (
           <Page key={`page_${index + 1}`} pageNumber={index + 1} renderTextLayer={false}/>