WIP: c9f5dfc Update 'content/projects/RE-Chess.md'

pages/project/[slug].tsx

@@ -1,7 +1,11 @@
 import { GetStaticPaths, GetStaticProps } from "next";
 import fs from "fs";
 import { ParsedUrlQuery } from "querystring";
-import { getProjectContentBySlug, PROJECTS_PATH } from "../../utils/markdown";
+import {
+  getHeadings,
+  getProjectContentBySlug,
+  PROJECTS_PATH,
+} from "../../utils/markdown";
 import { MarkdownRenderingResult } from "../../types/types";
 import { MainLayout } from "../../layouts/MainLayout";
 import Link from "next/link";
@@ -52,6 +56,9 @@ export const getStaticProps: GetStaticProps<MarkdownRenderingResult> = async ({
   params,
 }) => {
   const markdownContent = getProjectContentBySlug(params?.slug as string);
+
+  console.log(getHeadings(markdownContent.content));
+
   return {
     props: {
       frontMatter: markdownContent.frontMatter,

styles/globals.css

@@ -27,14 +27,17 @@ pre > code {
 }
 
 .codeStyle {
-  @apply bg-transparent !important
+  @apply bg-transparent !important;
 }
 
 pre > div > div > button > svg:hover {
   @apply hover:text-action transition-all ease-in-out duration-100 !important;
 }
 
-h1 > a, h2 > a, h3 > a, h4 > a {
+h1 > a,
+h2 > a,
+h3 > a,
+h4 > a {
   @apply cursor-pointer relative text-gray-800 dark:text-gray-100 decoration-transparent font-bold !important;
 }
 
@@ -57,9 +60,9 @@ h4 > a:hover::before {
   @apply -left-4;
 }
 
-
+div > code,
-div > code, pre > code {
+pre > code {
-  @apply p-0 m-0 !important
+  @apply p-0 m-0 !important;
 }
 
 .slider {

utils/markdown.ts

@@ -74,6 +74,24 @@ export const getAllProjectsFrontMatter = (): Post[] => {
   );
 };
 
+export const getHeadings = (markdown: string): any => {
+  const headingOne = markdown.match(/^(#{1})\s(.*)/gm);
+  const headingTwo = markdown.match(/^(#{2})\s(.*)/gm);
+  const headingThree = markdown.match(/^(#{3})\s(.*)/gm);
+  const headingFour = markdown.match(/^(#{4})\s(.*)/gm);
+
+  const headings = markdown.match(/^(#{1,4})\s(.*)/gm);
+  var tree: any[] = [];
+  var prev = "";
+  headings?.forEach((heading) => {
+    if (headingOne?.includes(heading)) {
+      tree.push(heading);
+    }
+  });
+
+  return tree;
+};
+
 export async function markdownToHtml(markdown: any) {
   const result = await remark().use(html).process(markdown);
   return result.toString();