Added a ReadMe page

xannyxs · Dec 21, 2023 · 0963869 · 0963869
1 parent 2bd8fa0
commit 0963869
Show file tree

Hide file tree

Showing 10 changed files with 958 additions and 21 deletions.
diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx
@@ -66,7 +66,7 @@ export default function Home() {
             handleItemClick={handleItemClick}
           />
           <div
-            className={`w-[35rem] relative ${
+            className={`w-full relative ${
               activeView === ActiveView.None ? "z-0" : "z-10"
             }`}
           >

diff --git a/app/api/fetch_file/route.ts b/app/api/fetch_file/route.ts
@@ -0,0 +1,29 @@
+import { NextResponse, NextRequest } from "next/server";
+import fs from "fs";
+import path from "path";
+
+export async function GET(req: NextRequest): Promise<NextResponse> {
+  const fileName = req.nextUrl.searchParams.get("file");
+
+  if (!fileName) {
+    return new NextResponse("Bad Request: Missing file name", { status: 400 });
+  }
+
+  const filePath = path.join(process.cwd(), fileName);
+  if (!fs.existsSync(filePath)) {
+    return new NextResponse("Not Found: File does not exist", { status: 404 });
+  }
+
+  try {
+    const data = await fs.promises.readFile(filePath, "utf-8");
+    return new NextResponse(data, {
+      status: 200,
+      headers: {
+        "Content-Type": "text/plain",
+      },
+    });
+  } catch (err) {
+    console.error(err);
+    return new NextResponse("Internal Server Error", { status: 500 });
+  }
+}
diff --git a/app/components/Layout/SideBarComponent.tsx b/app/components/Layout/SideBarComponent.tsx
@@ -30,14 +30,12 @@ const SidebarComponent: React.FC<SidebarComponentProps> = ({
           active={activeView === "list"}
           onClick={() => handleItemClick(ActiveView.List)}
         />
-        {
-          // <SidebarItem
-          //   icon={<Gem size={20} />}
-          //   text="Credits"
-          //   active={activeView === "credits"}
-          //   onClick={() => handleItemClick("credits")}
-          // />
-        }
+        <SidebarItem
+          icon={<Gem size={20} />}
+          text="Credits"
+          active={activeView === "credits"}
+          onClick={() => handleItemClick(ActiveView.Credits)}
+        />
         <SidebarItem
           icon={<Bug size={20} />}
           text="Report bug"

diff --git a/app/components/context/GraphDataContext.tsx b/app/components/context/GraphDataContext.tsx
@@ -45,7 +45,9 @@ export default function GraphDataProvider({
       setAddressHashMap(hashMap);
     };
 
-    fetchData();
+    if (!graphData || !addressHashMap) {
+      fetchData();
+    }
   }, [round]);
 
   return (

diff --git a/app/components/views/Credits/CreditsView.tsx b/app/components/views/Credits/CreditsView.tsx
@@ -1,7 +1,42 @@
+"use client";
+
+import Markdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { useEffect, useState } from "react";
+
 export default function CreditsView() {
+  const [readMe, setReadMe] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      const response = await fetch("/api/fetch_file?file=README.md", {
+        cache: "force-cache",
+      });
+      if (!response.ok) {
+        console.log("Failed to fetch:", response.status);
+        return;
+      }
+      const data = await response.text();
+      setReadMe(data);
+    };
+
+    if (!readMe) {
+      fetchData();
+    }
+  });
+
   return (
-    <div className="h-full w-full">
-      <h1 className="text-emerald-600"> hello World</h1>
+    <div className="relative bg-white h-full w-full overflow-y-auto max-h-[calc(100vh)]">
+      <div className="sticky top-0 mx-2 border-b border-gray-300 pt-4 pb-3 bg-white flex justify-between items-center">
+        <div className="text-3xl">Read Me</div>
+      </div>
+      <article className="mx-auto py-5 prose">
+        {readMe ? (
+          <Markdown remarkPlugins={[remarkGfm]}>{readMe}</Markdown>
+        ) : (
+          <p>Loading README content...</p>
+        )}
+      </article>
     </div>
   );
 }
diff --git a/app/components/views/Grid/GridView.tsx b/app/components/views/Grid/GridView.tsx
@@ -40,7 +40,7 @@ export default function ListView() {
 
   if (!addressHashMap) {
     return (
-      <div className="relative bg-white h-full w-full overflow-y-auto max-h-[calc(100vh)]">
+      <div className="relative bg-white h-full w-[35rem] overflow-y-auto max-h-[calc(100vh)]">
         <SearchBar view={"Grid view"} onChange={handleSearchChange} />
 
         <div className="grid grid-cols-2 gap-2 m-2">
@@ -57,7 +57,7 @@ export default function ListView() {
   };
 
   return (
-    <div className="relative bg-white h-full w-full overflow-y-auto max-h-[calc(100vh)]">
+    <div className="relative bg-white h-full w-[35rem] overflow-y-auto max-h-[calc(100vh)]">
       <SearchBar view={"Grid view"} onChange={handleSearchChange} />
 
       <div className="grid grid-cols-2 gap-2 m-2">

diff --git a/app/components/views/List/ListView.tsx b/app/components/views/List/ListView.tsx
@@ -40,7 +40,7 @@ export default function ListView() {
 
   if (!addressHashMap) {
     return (
-      <div className="relative bg-white h-full w-full overflow-y-auto max-h-[calc(100vh)]">
+      <div className="relative bg-white h-full w-[35rem] overflow-y-auto max-h-[calc(100vh)]">
         <SearchBar view={"List view"} onChange={handleSearchChange} />
 
         {Array.from({ length: 16 }).map((_, index) => (
@@ -55,7 +55,7 @@ export default function ListView() {
   };
 
   return (
-    <div className="relative bg-white h-full w-full overflow-y-auto max-h-[calc(100vh)]">
+    <div className="relative bg-white h-full w-[35rem] overflow-y-auto max-h-[calc(100vh)]">
       <SearchBar view={"List view"} onChange={handleSearchChange} />
 
       {filteredCards.map(([key, value]) => (

diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@apollo/client": "^3.8.1",
     "@ethereum-attestation-service/eas-sdk": "^1.1.0-beta.2",
     "@fontsource-variable/league-spartan": "^5.0.8",
+    "@preact/signals-react": "^2.0.0",
     "@vercel/analytics": "^1.1.1",
     "@vercel/speed-insights": "^1.0.2",
     "autoprefixer": "10.4.15",
@@ -29,13 +30,16 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-force-graph-3d": "^1.23.0",
+    "react-markdown": "^9.0.1",
+    "remark-gfm": "^4.0.0",
     "tailwindcss": "3.3.3",
     "three": "^0.155.0",
     "typescript": "5.1.6",
     "viem": "^1.10.7",
     "wagmi": "1.4.12"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.10",
     "@tsconfig/recommended": "^1.0.3",
     "@types/node": "20.5.0",
     "@types/react": "18.2.20",

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -7,6 +7,6 @@ const config: Config = {
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {},
-  plugins: [],
+  plugins: [require("@tailwindcss/typography")],
 };
 export default config;