Merge branch 'content-navigation-setup'

app/components/mdx.tsx

@@ -0,0 +1,51 @@
+import { MDXRemote, MDXRemoteProps } from "next-mdx-remote/rsc";
+import { Heading } from "@chakra-ui/react";
+import { MDXComponents } from "mdx/types";
+const components: MDXComponents = {
+  // chakra-ui overrides heading styles so we need to use the Heading component
+  // see https://github.com/chakra-ui/chakra-ui/issues/107 for more info
+
+  h1: ({ children }) => {
+    return (
+      <Heading as="h1" lineHeight={"tall"}>
+        {children}
+      </Heading>
+    );
+  },
+  h2: ({ children }) => {
+    return (
+      <Heading as="h2" size="lg">
+        {children}
+      </Heading>
+    );
+  },
+  h3: ({ children }) => {
+    return (
+      <Heading as="h3" size="md">
+        {children}
+      </Heading>
+    );
+  },
+  h4: ({ children }) => {
+    return (
+      <Heading as="h4" size="sm">
+        {children}
+      </Heading>
+    );
+  },
+  h5: ({ children }) => {
+    return (
+      <Heading as="h5" size="xs">
+        {children}
+      </Heading>
+    );
+  },
+};
+export function CustomMDX(props: MDXRemoteProps) {
+  return (
+    <MDXRemote
+      {...props}
+      components={{ ...components, ...(props.components || {}) }}
+    />
+  );
+}

app/styles/theme.ts

@@ -1,5 +1,9 @@
 "use client";
-import { theme as chakraTheme, extendTheme } from "@chakra-ui/react";
+import {
+  background,
+  theme as chakraTheme,
+  extendTheme,
+} from "@chakra-ui/react";
 
 const Button = {
   variants: {
@@ -33,6 +37,7 @@ const Button = {
     },
   },
 };
+
 export const theme = extendTheme({
   styles: {
     global: {},

app/test/page.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+// import Page1, {
+//   metadata,
+// } from "@/content/01-introduction/01-why-json-schema.mdx";
+import ContentManager from "@/lib/contentManager";
+import { CustomMDX } from "../components/mdx";
+import { MDXRemote } from "next-mdx-remote/rsc";
+
+export default function Test() {
+  const cm = new ContentManager();
+  const { metadata, Page } = cm.parseMdxFile(
+    "01-introduction/01-why-json-schema.mdx"
+  );
+
+  return (
+    <div>
+      <Page />
+    </div>
+  );
+}

content/01-introduction/01-why-json-schema.mdx

@@ -0,0 +1,8 @@
+---
+title : "Demo"
+author: "Author Name"
+---
+
+
+# Welcome! 
+This is the demo content. 

content/01-introduction/02-modify-a-array.mdx

@@ -0,0 +1 @@
+

content/01-introduction/index.mdx

@@ -0,0 +1,3 @@
+---
+title: introduction
+---

content/02-types/01-why-json-schema.mdx

@@ -0,0 +1 @@
+

content/02-types/02-modify-a-array.mdx

@@ -0,0 +1 @@
+

content/02-types/index.mdx

@@ -0,0 +1,3 @@
+---
+title: types
+---

lib/contentManager.ts

@@ -0,0 +1,74 @@
+import { CustomMDX } from "@/app/components/mdx";
+import { ContentOutline } from "./types";
+import fs from "fs";
+import matter from "gray-matter";
+
+/* 
+
+ - the content is stored in the content folder
+ - this contentManager object will generate a outline of type ContentOutline
+ - it will keep track of the active chapter and step
+ - return full path of the active step
+ - return the next step
+ - return the previous step
+ - return the next chapter
+ - return the previous chapter
+ - change the active chapter
+ - change the active step
+ - parse a mdx file and return component and metadata using gray-matter
+
+
+The content folder follows this structure:
+
+├── 01-introduction
+|   ├── index.mdx
+│   ├── 01-welcome.mdx
+│   ├── 02-what-is-react.mdx
+├── 02-types
+│   ├── index.mdx
+│   ├── 01-primitive-types.mdx
+│   ├── 02-arrays.mdx
+├─
+
+*/
+
+export default class ContentManager {
+  private contentFolderPath: string = "./content";
+  public outline: ContentOutline;
+  public activeChapterIndex: number = 0;
+  public activeStepIndex: number = 0;
+
+  constructor() {
+    this.outline = this.generateOutline();
+  }
+
+  public parseMdxFile(relativeFilePath: string) {
+    const file = fs.readFileSync(
+      this.contentFolderPath + "/" + relativeFilePath,
+      "utf-8"
+    );
+    const { content, data } = matter(file);
+    const Page = () => CustomMDX({ source: content });
+    return { Page, metadata: data };
+  }
+
+  private generateOutline(): ContentOutline {
+    const contentOutline: ContentOutline = { chapters: [] };
+    const files = fs.readdirSync(this.contentFolderPath, {
+      withFileTypes: true,
+    });
+
+    files.forEach((file) => {
+      if (file.isDirectory()) {
+        const chapter = { title: file.name, folderName: file.name, steps: [] };
+        const chapterPath = `${this.contentFolderPath}/${file.name}`;
+        const chapterFiles = fs.readdirSync(chapterPath, {
+          withFileTypes: true,
+        });
+        contentOutline.chapters.push(chapter);
+      }
+    });
+
+    return contentOutline;
+  }
+}

lib/fileUtils.ts

@@ -0,0 +1,46 @@
+import fs from "fs";
+import path from "path";
+
+export function listFiles(directoryPath: string) {
+  // Initialize an empty array to store file paths
+  let fileList: any[] = [];
+
+  // Get the contents of the directory
+  const files = fs.readdirSync(directoryPath);
+  //   console.log(files);
+  // Iterate through each file/directory in the directory
+  files.forEach((file) => {
+    // Get the full path of the file/directory
+    const filePath = path.join(directoryPath, file);
+
+    // Check if it's a file or directory
+    const isFile = fs.statSync(filePath).isFile();
+
+    if (isFile) {
+      // If it's a file, add it to the file list
+      fileList.push(filePath);
+    } else {
+      // If it's a directory, recursively list files in that directory
+      fileList = fileList.concat(listFiles(filePath));
+    }
+  });
+
+  return fileList;
+}
+
+export function traverseDirectory(dirPath: string) {
+  const files = fs.readdirSync(dirPath, { withFileTypes: true });
+  const fileTree: any[] = [];
+
+  files.forEach((file) => {
+    const fullPath = path.join(dirPath, file.name);
+    if (file.isDirectory()) {
+      const children = traverseDirectory(fullPath);
+      fileTree.push({ name: file.name, isDirectory: true, children });
+    } else {
+      fileTree.push({ name: file.name, isDirectory: false });
+    }
+  });
+
+  return fileTree;
+}

lib/types.ts

@@ -0,0 +1,19 @@
+type ChapterStep = {
+  title: string;
+  fileName: string;
+  fullPath: string;
+};
+
+type Chapter = {
+  title: string;
+  folderName: string;
+  steps: ChapterStep[];
+};
+
+export type ContentOutline = {
+  chapters: Chapter[];
+};
+
+export type metadata = {
+  title: string;
+};

mdx-components.tsx

@@ -0,0 +1,46 @@
+import { Heading } from "@chakra-ui/react";
+import type { MDXComponents } from "mdx/types";
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+    // chakra-ui overrides heading styles so we need to use the Heading component
+    // see https://github.com/chakra-ui/chakra-ui/issues/107 for more info
+
+    h1: ({ children }) => {
+      return (
+        <Heading as="h1" lineHeight={"tall"}>
+          {children}
+        </Heading>
+      );
+    },
+    h2: ({ children }) => {
+      return (
+        <Heading as="h2" size="lg">
+          {children}
+        </Heading>
+      );
+    },
+    h3: ({ children }) => {
+      return (
+        <Heading as="h3" size="md">
+          {children}
+        </Heading>
+      );
+    },
+    h4: ({ children }) => {
+      return (
+        <Heading as="h4" size="sm">
+          {children}
+        </Heading>
+      );
+    },
+    h5: ({ children }) => {
+      return (
+        <Heading as="h5" size="xs">
+          {children}
+        </Heading>
+      );
+    },
+  };
+}