debugging making app work again

next-env.d.ts

@@ -1,6 +1,4 @@
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference types="next" />
-// eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

next.config.js

@@ -1,4 +1,4 @@
-export default function webpack(config) {
+export function webpack(config) {
   config.resolve.fallback = { ...config.resolve.fallback, fs: false }
   return config
 }

package.json

@@ -58,8 +58,10 @@
     "vfile-reporter": "latest"
   },
   "devDependencies": {
+    "@types/bun": "^1.0.0",
     "autoprefixer": "^10.4.16",
     "bimap": "latest",
+    "bun-types": "latest",
     "cytoscape": "latest",
     "eslint": "^8.0.1",
     "eslint-config-next": "latest",
@@ -68,8 +70,7 @@
     "remark-react": "latest",
     "remark-stringify": "latest",
     "tailwindcss": "latest",
-    "uuid": "latest",
-    "bun-types": "latest"
+    "uuid": "latest"
   },
   "resolutions": {
     "react": "^18",

pages/notes/index.tsx

@@ -1,11 +1,17 @@
-import Layout from "../../components/Layout";
-import Util from '../../lib/utils'
-import FolderTree from "../../components/FolderTree";
-import MDContent from "../../components/MDContent";
+import Layout from "components/Layout";
+import Util from 'lib/utils'
+import FolderTree from "components/FolderTree";
+import MDContent from "components/MDContent";
 
 
+interface HomeProps {
+  content: string
+  tree: Record<string, unknown>
+  flattenNodes: unknown[]
+  backLinks: unknown[]
+}
 // This trick is to dynamically load component that interact with window object (browser only)
-export default function Home({ content, tree, flattenNodes, backLinks }) {
+export default function Home({ content, tree, flattenNodes, backLinks }: HomeProps) {
   return (
     <Layout>
       <div className='notes-container'>
@@ -21,12 +27,21 @@ export default function Home({ content, tree, flattenNodes, backLinks }) {
 
 
 export function getStaticProps() {
-  const { nodes, edges } = Util.constructGraphData()
+  const { nodes, edges }: { nodes: unknown[], edges: unknown[] } = Util.constructGraphData()
   const tree = Util.convertObject(Util.getDirectoryData());
   const contentData = Util.getSinglePost("index");
   const flattenNodes = Util.getFlattenArray(tree)
-  const listOfEdges = edges.filter(anEdge => anEdge.target === "index")
-  const internalLinks = listOfEdges.map(anEdge => nodes.find(aNode => aNode.slug === anEdge.source)).filter(element => element !== undefined)
+  const listOfEdges = edges
+    .filter((anEdge) => (
+      anEdge as { target: string }).target === "index"
+    )
+  const internalLinks = 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 {

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {}
+  }
+}

postcss.config.js

@@ -1,4 +0,0 @@
-export const plugins = {
-  tailwindcss: {},
-  autoprefixer: {}
-}