feat!: remove /note/ slug (#13)

src/components/Graph.tsx

@@ -99,8 +99,7 @@ function Graph({ graph }: { graph: LocalGraphData }): JSX.Element {
               cy.on("tap", "node", (evt) => {
                 const node: Core = evt.target;
                 const { id }: MdObject = node.data();
-                const path = "/note/" + id;
-                void router.push(path);
+                void router.push(`/${id}`);
               });
             }}
           />

src/components/RootContainer.tsx

@@ -1,6 +1,6 @@
 import FolderTree from "./FolderTree";
 import MDContent from "./MDContentData";
-import { Prop } from "../pages";
+import { Prop } from "../pages/[...id]";
 import dynamic from "next/dynamic";
 import { SearchBar } from "./Search";
 

src/lib/graph.ts

@@ -1,7 +1,6 @@
 import { ElementDefinition } from "cytoscape";
 import { Transformer } from "./transformer";
 import { getShortSummary, toFilePath, toSlug } from "./slug";
-import { FIRST_PAGE } from "../pages";
 import path from "path";
 import { getAllMarkdownFiles, isFile } from "./io";
 import fs from "fs";
@@ -70,7 +69,7 @@ export function getLocalGraphData(currentNodeId: string): LocalGraphData {
   const { nodes, edges } = constructGraphData();
   const newNodes: ElementDefinition[] = nodes.map((aNode) => ({
     data: {
-      id: aNode.slug.toString(),
+      id: aNode.slug,
       label: Transformer.parseFileNameFromPath(toFilePath(aNode.slug)),
     },
   }));
@@ -83,8 +82,8 @@ export function getLocalGraphData(currentNodeId: string): LocalGraphData {
   }));
 
   const existingNodeIDs = newNodes.map((aNode) => aNode.data.id);
-  const firstPage = FIRST_PAGE();
-  currentNodeId = currentNodeId === firstPage ? `__${firstPage}` : currentNodeId;
+  // const firstPage = FIRST_PAGE();
+  // currentNodeId = currentNodeId === firstPage ? `__${firstPage}` : currentNodeId;
   if (currentNodeId != null && existingNodeIDs.includes(currentNodeId)) {
     const outGoingNodeIds = newEdges
       .filter((anEdge) => anEdge.data.source === currentNodeId)

src/lib/slug.ts

@@ -1,11 +1,11 @@
-import { FIRST_PAGE } from "../pages";
 import { getAllMarkdownFiles, getFiles, getMarkdownFolder, isFile, readFileSync } from "./io";
 import directoryTree from "directory-tree";
 import markdown from "remark-parse";
 import { toString } from "mdast-util-to-string";
 import { convertObject, MdObject } from "./markdown";
 import { Transformer } from "./transformer";
 import unified from "unified";
+import { FIRST_PAGE } from "../pages/[...id]";
 
 interface SlugMap extends Map<string, string> {
   index: string;
@@ -39,15 +39,16 @@ export function getSinglePost(slug: string): Content {
         shouldBreakLine = !shouldBreakLine;
         return line;
       } else if (shouldBreakLine && !(line.startsWith("#") && line.includes(" ")) && line !== "") {
-        const next = array[index + 1]
+        const next = array[index + 1];
         if (next === undefined || next === "") {
-          return line
+          return line;
         }
         return `${line}  `;
       } else {
         return line;
       }
-    }).join("\n");
+    })
+    .join("\n");
 
   // console.log("===============\n\nFile is scanning: ", slug)
   const htmlContent = Transformer.getHtmlContent(`# ${fileName}`);
@@ -95,12 +96,7 @@ export function getSlugHashMap(): Map<string, string> {
 
 export function toSlug(filePath: string): string {
   if (isFile(filePath) && filePath.includes(getMarkdownFolder())) {
-    return filePath
-      .replace(getMarkdownFolder(), "")
-      .replaceAll("/", "__")
-      .replaceAll(" ", "++++")
-      .replaceAll("&", "ambersand")
-      .replace(".md", "");
+    return filePath.replace(getMarkdownFolder(), "").replace(".md", "");
   } else {
     // TODO handle this properly
     return "/";
@@ -141,14 +137,12 @@ export function getShortSummary(slug: string): string {
 }
 
 export function getRouterPath(fileName: string): string | null {
-  const routerPath =
-    getAllSlugs().find((slug) => {
-      const slugFileName = Transformer.parseFileNameFromPath(toFilePath(slug));
-      return (
-        Transformer.normalizeFileName(slugFileName ?? "") ===
-        Transformer.normalizeFileName(fileName)
-      );
-    }) ?? "";
+  const routerPath = getAllSlugs().find((slug) => {
+    const slugFileName = Transformer.parseFileNameFromPath(toFilePath(slug));
+    return (
+      Transformer.normalizeFileName(slugFileName ?? "") === Transformer.normalizeFileName(fileName)
+    );
+  });
   const nameAndExtension = fileName.split(".");
-  return nameAndExtension.length > 1 && routerPath !== "" ? `/note/${routerPath}` : null;
+  return nameAndExtension.length > 1 && routerPath !== undefined ? routerPath : null;
 }

src/lib/transformer.ts

@@ -33,7 +33,7 @@ export const Transformer = {
     return {};
   },
 
-  pageResolver: function (pageName) {
+  pageResolver: function (pageName: string): string[] {
     const allFileNames = getAllMarkdownFiles();
     const result = allFileNames.find((aFile) => {
       const parseFileNameFromPath = Transformer.parseFileNameFromPath(aFile);
@@ -55,7 +55,7 @@ export const Transformer = {
   hrefTemplate: function (permalink: string) {
     // permalink = Transformer.normalizeFileName(permalink)
     permalink = permalink.replace("ç", "c").replace("ı", "i").replace("ş", "s");
-    return `/note/${permalink}`;
+    return permalink;
   },
   getHtmlContent: function (content: string): string[] {
     const htmlContent: string[] = [];
@@ -138,7 +138,8 @@ export const Transformer = {
   /* Parse file name from path then sanitize it */
   parseFileNameFromPath: function (filepath: string): string | null {
     if (filepath.includes("/")) {
-      const parsedFileFromPath = filepath.split("/")[filepath.split("/").length - 1];
+      const splitPath = filepath.split("/");
+      const parsedFileFromPath = splitPath[splitPath.length - 1];
       return parsedFileFromPath.replace(".md", "");
     } else {
       return null;

src/pages/note/[id].tsx → src/pages/[...id].tsx

@@ -1,12 +1,25 @@
 import Head from "next/head";
-import Layout from "../../components/Layout";
-import { Prop } from "../index";
-import { Content, getAllSlugs, getDirectoryData, getSinglePost } from "../../lib/slug";
-import { constructGraphData, CustomNode, getLocalGraphData } from "../../lib/graph";
-import { getFlattenArray } from "../../lib/markdown";
-import RootContainer from "../../components/RootContainer";
-import { getSearchIndex } from "../../lib/search";
+import Layout from "../components/Layout";
+import { Content, getAllSlugs, getDirectoryData, getSinglePost } from "../lib/slug";
+import { constructGraphData, CustomNode, getLocalGraphData, LocalGraphData } from "../lib/graph";
+import { getFlattenArray, MdObject } from "../lib/markdown";
+import RootContainer from "../components/RootContainer";
+import { getSearchIndex, SearchData } from "../lib/search";
 
+// TODO make customizable
+// FIXME This should be a string field, but I don't know to avoid init error
+export function FIRST_PAGE(): string {
+  return "README";
+}
+
+export interface Prop {
+  content: string[];
+  tree: MdObject;
+  flattenNodes: MdObject[];
+  graphData: LocalGraphData;
+  backLinks: CustomNode[];
+  searchIndex: SearchData[];
+}
 interface InternalProp extends Prop {
   note: Content;
 }
@@ -35,11 +48,11 @@ export default function Home({
 }
 
 export async function getStaticPaths(): Promise<{
-  paths: Array<{ params: { id: string } }>;
+  paths: Array<{ params: { id: string[] } }>;
   fallback: false;
 }> {
   const allPostsData = getAllSlugs();
-  const paths = allPostsData.map((p) => ({ params: { id: p } }));
+  const paths = allPostsData.map((p) => ({ params: { id: p.replace("/", "").split("/") } }));
 
   return {
     paths,
@@ -49,25 +62,25 @@ export async function getStaticPaths(): Promise<{
 
 const { nodes, edges } = constructGraphData();
 
-export function getStaticProps({ params }): { props: InternalProp } {
-  const note = getSinglePost(params.id);
+export function getStaticProps({ params }: { params: { id: string[] } }): { props: InternalProp } {
+  const note = getSinglePost(`/${params.id.join("/")}`);
   const tree = getDirectoryData();
   const flattenNodes = getFlattenArray(tree);
 
-  const listOfEdges = edges.filter((anEdge) => anEdge.target === params.id);
+  const listOfEdges = edges.filter((anEdge) => anEdge.target === params.id.join("/"));
   const internalLinks = listOfEdges
     .map((anEdge) => nodes.find((aNode) => aNode.slug === anEdge.source) ?? null)
     .filter((element): element is CustomNode => element !== null);
   const backLinks = [...new Set(internalLinks)];
-  const graphData = getLocalGraphData(params.id);
+  const graphData = getLocalGraphData(params.id.join("/"));
   const searchIndex = getSearchIndex();
   return {
     props: {
       content: [],
       note,
       tree,
       flattenNodes,
-      backLinks: backLinks.filter((link) => link.slug !== params.id),
+      backLinks: backLinks.filter((link) => link.slug !== params.id.join("/")),
       graphData,
       searchIndex,
     },