fix bug preventing home notes from rendering

components/FolderTree.js

@@ -1,7 +1,5 @@
 import * as React from 'react';
 import { TreeView, TreeItem } from '@mui/x-tree-view';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { useRouter } from 'next/router'
 import { styled } from '@mui/material/styles';
 import { Divider } from '@mui/material';
@@ -36,7 +34,7 @@ export default function FolderTree(props) {
       <Divider />
       <TreeView
         aria-label="rich object"
-        defaultCollapseIcon={<ExpandMoreIcon />}
+        defaultCollapseIcon={<ChevronDownIcon />}
         defaultExpanded={expandedNodes}
         defaultExpandIcon={<ChevronRightIcon />}
         onNodeSelect={(event, nodIds) => {
@@ -54,3 +52,20 @@ export default function FolderTree(props) {
     </>
   );
 }
+
+function ChevronRightIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+      <path strokeLinecap="round" strokeLinejoin="round" d="m8.25 4.5 7.5 7.5-7.5 7.5" />
+    </svg>
+  )
+}
+
+function ChevronDownIcon() {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="w-6 h-6">
+      <path strokeLinecap="round" strokeLinejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+    </svg>
+  )
+}
+

package.json

@@ -14,7 +14,6 @@
     "@emotion/styled": "latest",
     "@headlessui/react": "^1.7.17",
     "@heroicons/react": "^2.1.1",
-    "@mui/icons-material": "latest",
     "@mui/lab": "latest",
     "@mui/material": "latest",
     "@mui/x-tree-view": "^6.17.0",

pages/notes/[id].tsx

@@ -3,9 +3,19 @@ import Layout from "../../components/Layout";
 import Util from "../../lib/utils"
 import FolderTree from "../../components/FolderTree";
 import MDContent from "../../components/MDContent";
+import type { GetStaticProps } from "next/types";
+import type { ParsedUrlQuery } from "querystring";
 
+interface HomeProps {
+  note: { title: string, data: string }
+  fileNames: string[]
+  content: string
+  tree: Record<string, unknown>
+  flattenNodes: unknown[]
+  backLinks: unknown[]
+}
 
-export default function Home({ note, backLinks, fileNames, tree, flattenNodes }) {
+export default function Home({ note, backLinks, fileNames: _, tree, flattenNodes }: HomeProps) {
 
   return (
     <Layout>
@@ -16,7 +26,7 @@ export default function Home({ note, backLinks, fileNames, tree, flattenNodes })
         <nav className="nav-bar">
           <FolderTree tree={tree} flattenNodes={flattenNodes} />
         </nav>
-        <MDContent content={note.data} handleOpenNewContent={null} backLinks={backLinks} />
+        <MDContent content={note.data} backLinks={backLinks} />
       </div>
     </Layout>
   );
@@ -33,21 +43,23 @@ export async function getStaticPaths() {
 }
 
 
-export function getStaticProps({ params }) {
+export const getStaticProps: GetStaticProps = (context) => {
-  const { nodes, edges } = Util.constructGraphData()
+  const { nodes, edges }: { nodes: unknown[], edges: unknown[] } = Util.constructGraphData()
-  const note = Util.getSinglePost(params.id);
+  const { id } = context.params as ParsedUrlQuery & { id: string }
+
+  const note = Util.getSinglePost(id);
   const tree = Util.convertObject(Util.getDirectoryData());
   const flattenNodes = Util.getFlattenArray(tree)
 
-  const listOfEdges: unknown[] = edges.filter(anEdge => anEdge.target === params.id)
+  const listOfEdges: unknown[] = edges.filter(anEdge => (anEdge as { target: string }).target === id)
-  const internalLinks: unknown[] = listOfEdges.map((anEdge: { source: string }) => nodes.find(aNode => aNode.slug === anEdge.source)).filter(element => element !== undefined)
+  const internalLinks: unknown[] = listOfEdges.map((anEdge) => nodes.find(aNode => (aNode as { slug: string }).slug === (anEdge as { source: string }).source)).filter(element => element !== undefined)
   const backLinks = [...new Set(internalLinks)]
   return {
     props: {
       note,
       tree: tree,
       flattenNodes: flattenNodes,
-      backLinks: backLinks.filter((link: { slug: string }) => link.slug !== params.id),
+      backLinks: backLinks.filter((link) => (link as { slug: string }).slug !== id),
     },
   };
 }

styles/global.css

@@ -13,7 +13,7 @@
 @layer components {
 
   .nav-bar {
-    @apply bg-blue-100 p-5;
+    @apply text-black bg-blue-100 p-5;
   }
 
   .notes-container {