XeNote/pages/notes/index.tsx

import Layout from 'components/Layout'
import Util from 'lib/utils'
import FolderTree from 'components/FolderTree'
import MDContent, { type LinkType } from 'components/MDContent'

export interface HomeProps {
  content: string
  tree: Record<string, unknown>
  flattenNodes: unknown[]
  backLinks: LinkType[]
}
// This trick is to dynamically load component that interact with window object (browser only)
export default function Home({ content, tree, flattenNodes, backLinks }: HomeProps) {
  return (
    <Layout>
      <div className='flex gap-1 w-full'>
        <nav className="">
          <FolderTree tree={tree} flattenNodes={flattenNodes} />
        </nav>
        <MDContent content={content} backLinks={backLinks} />
      </div>
    </Layout >
  )
}

export function getStaticProps() {
  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 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 {
    props: {
      content: contentData.data,
      tree,
      flattenNodes,
      // backLinks,
      body_class_name: 'm-0 p-0'
    }
  }
}