Remove unused files and update code structure

resolves #14

app/[...markdownPath]/page.tsx

@@ -13,25 +13,16 @@ export default async function Content({
 }: {
   params: { markdownPath: string[] };
 }) {
-  const mdPath = params.markdownPath.join("/") + ".mdx";
-  const { Page, metadata } = contentManager.parseMdxFile(mdPath);
-
-  // const folderName = contentManager.contentFolderName;
-  // const file = await import(
-  //   `./../../../${folderName}/${params.path.join("/")}.mdx`
-  // );
-  // console.log(file.data);
-  //   console.log(
-  //     contentManager.getNextStep(params.markdownPath.join("/") + ".mdx"),
-  //     "next step"
-  //   );
+  const urlPath = params.markdownPath.join("/");
+  const mdPath = contentManager.getInstructionsPath(urlPath);
 
-  const nextStepPath = contentManager.getNextStepPath(mdPath);
+  const { Page, metadata } = contentManager.parseMdxFile(mdPath);
+  const nextStepPath = contentManager.getNextStepPath(urlPath);
 
-  const previousStepPath = contentManager.getPreviousStepPath(mdPath);
+  const previousStepPath = contentManager.getPreviousStepPath(urlPath);
   const outline = contentManager.generateOutline();
 
-  const { chapterIndex, stepIndex } = contentManager.getStepLocation(mdPath);
+  const { chapterIndex, stepIndex } = contentManager.getStepLocation(urlPath);
   const totalChapters = contentManager.getTotalChapters();
   const totalSteps = contentManager.getTotalSteps(chapterIndex);
 
@@ -61,7 +52,7 @@ export default async function Content({
           <Page />
         </ContentViewer>
 
-        <CodeEditor mdPath={mdPath} />
+        <CodeEditor urlPath={urlPath} />
       </Flex>
       <div className={styles.navigationBtnWrapper}>
         <NavigationBtn path={previousStepPath} direction="prev" />
@@ -77,9 +68,10 @@ export async function generateStaticParams() {
   outline.map((item) => {
     item.steps.map((step) => {
       pathList.push({
-        markdownPath: [item.folderName, step.fileName.replaceAll(".mdx", "")],
+        markdownPath: [item.folderName, step.fileName],
       });
     });
   });
+
   return pathList;
 }

app/components/CodeEditor/CodeEditor.tsx

@@ -1,21 +1,26 @@
 import { contentManager } from "@/lib/contentManager";
+import { CodeFile } from "@/lib/types";
 import fs from "fs";
 
-export default function CodeEditor({ mdPath }: { mdPath: string }) {
+type moduleExports = {
+  exports: CodeFile;
+};
+
+export default function CodeEditor({ urlPath }: { urlPath: string }) {
   const folderName = contentManager.contentFolderName;
-  const path = `./${folderName}/${mdPath}`.replace(".mdx", ".ts");
-  console.log(path);
+  const path = `./${folderName}/${urlPath}/${contentManager.codeFileName}`;
   const fileContent = fs.readFileSync(path, "utf-8");
-  console.log(fileContent);
   const dynmicFunction = new Function("module", fileContent);
-  const moduleExports = {};
+  const moduleExports: {} | moduleExports = {};
   dynmicFunction(moduleExports);
-  moduleExports.exports.validationLogicFunction();
-  console.log(moduleExports);
+  const { exports } = moduleExports as moduleExports;
+  const code = exports.code;
+
+  console.log();
   //   const ast = parser.parse(fileContent, {
   //     sourceType: "module",
   //     plugins: ["jsx"],
   //   });
 
-  return <div>CodeEditor</div>;
+  return <div>{JSON.stringify(code, null, 2)}</div>;
 }

app/components/NavigationBtn/NavigationBtn.tsx

@@ -12,6 +12,7 @@ export default function NavigationBtn({
   direction: "next" | "prev";
 }) {
   const router = useRouter();
+  console.log(path);
   return (
     <Button
       variant={"default"}

content/01-introduction/02-modify-an-array/code.ts

@@ -0,0 +1,7 @@
+const code = {
+  step: 2,
+};
+
+module.exports = {
+  code,
+};

content/02-types/01-strings/code.ts

@@ -0,0 +1,8 @@
+const code = {
+  title: "Welcome to the course!",
+  content: "this is the content",
+};
+
+module.exports = {
+  code,
+};

content/02-types/02-objects/code.ts

@@ -0,0 +1,8 @@
+const code = {
+  title: "Welcome to the course!",
+  content: "this is the content",
+};
+
+module.exports = {
+  code,
+};

lib/contentManager.ts

@@ -21,35 +21,26 @@ import { Metadata } from "./types";
 
 The content folder follows this structure:
 
+
 ├── 01-introduction
-|   ├── index.mdx
-│   ├── 01-welcome.mdx
-│   ├── 02-what-is-react.mdx
+│   ├── index.mdx
+│   ├── 01-welcome
+│       ├── instructions.mdx
+│       ├── code.ts
+│   ├── 02-what-is-json-schema
+│       ├── instructions.mdx
+│       ├── code.ts
 ├── 02-types
 │   ├── index.mdx
-│   ├── 01-primitive-types.mdx
-│   ├── 02-arrays.mdx
-├─
+│   ├── 01-primitive-types
+│       ├── instructions.mdx
+│       ├── code.ts
+│   ├── 02-arrays
+│       ├── instructions.mdx
+│       ├── code.ts
 
-*/
 
-function parseFrontmatter(fileContent: string) {
-  let frontmatterRegex = /---\s*([\s\S]*?)\s*---/;
-  let match = frontmatterRegex.exec(fileContent);
-  let frontMatterBlock = match![1];
-  let content = fileContent.replace(frontmatterRegex, "").trim();
-  let frontMatterLines = frontMatterBlock.trim().split("\n");
-  let metadata: Partial<Metadata> = {};
-
-  frontMatterLines.forEach((line) => {
-    let [key, ...valueArr] = line.split(": ");
-    let value = valueArr.join(": ").trim();
-    value = value.replace(/^['"](.*)['"]$/, "$1"); // Remove quotes
-    metadata[key.trim() as keyof Metadata] = value;
-  });
-
-  return { metadata: metadata as Metadata, content };
-}
+*/
 
 export default class ContentManager {
   private contentFolderPath: string = "./content";
@@ -58,6 +49,8 @@ export default class ContentManager {
   public outlineJSONPath: string = "./content/outline.json";
 
   private indexFileName = "index.mdx";
+  public instructionsFileName = "instructions.mdx";
+  public codeFileName = "code.ts";
 
   public getOutline() {
     // check if outline.json exists
@@ -73,11 +66,8 @@ export default class ContentManager {
     return outline;
   }
 
-  public parseMdxFile(relativeFilePath: string) {
-    const file = fs.readFileSync(
-      this.contentFolderPath + "/" + relativeFilePath,
-      "utf-8"
-    );
+  public parseMdxFile(fullFilePath: string) {
+    const file = fs.readFileSync(fullFilePath, "utf-8");
 
     const { content, data } = matter(file);
     const Page = () => CustomMDX({ source: content });
@@ -94,7 +84,7 @@ export default class ContentManager {
     files.forEach((file, chapterNumber) => {
       if (file.isDirectory()) {
         const { metadata } = this.parseMdxFile(
-          `${file.name}/${this.indexFileName}`
+          `${this.contentFolderName}/${file.name}/${this.indexFileName}`
         );
 
         const chapter: Chapter = {
@@ -111,7 +101,7 @@ export default class ContentManager {
         );
         chapterFiles.forEach((chapterFile, stepNumber) => {
           const { metadata } = this.parseMdxFile(
-            `${file.name}/${chapterFile.name}`
+            `${this.contentFolderName}/${file.name}/${chapterFile.name}/${this.instructionsFileName}`
           );
 
           const step = {
@@ -121,7 +111,6 @@ export default class ContentManager {
           };
           chapter.steps.push(step);
         });
-
         contentOutline.push(chapter);
       }
     });
@@ -152,11 +141,11 @@ export default class ContentManager {
     const chapter = outline[chapterIndex];
     const nextStep = chapter.steps[stepIndex + 1];
     if (nextStep) {
-      return this.removeMdxExtension(nextStep.fullPath);
+      return nextStep.fullPath;
     }
     const nextChapter = outline[chapterIndex + 1];
     if (nextChapter) {
-      return this.removeMdxExtension(nextChapter.steps[0].fullPath);
+      return nextChapter.steps[0].fullPath;
     }
   }
 
@@ -166,13 +155,11 @@ export default class ContentManager {
     const chapter = outline[chapterIndex];
     const previousStep = chapter.steps[stepIndex - 1];
     if (previousStep) {
-      return this.removeMdxExtension(previousStep.fullPath);
+      return previousStep.fullPath;
     }
     const previousChapter = outline[chapterIndex - 1];
     if (previousChapter) {
-      return this.removeMdxExtension(
-        previousChapter.steps[previousChapter.steps.length - 1].fullPath
-      );
+      return previousChapter.steps[previousChapter.steps.length - 1].fullPath;
     }
   }
   public getTotalChapters() {
@@ -181,6 +168,12 @@ export default class ContentManager {
   public getTotalSteps(chapterIndex: number) {
     return this.getOutline()[chapterIndex].steps.length;
   }
+  public getInstructionsPath(urlPath: string) {
+    return `${this.contentFolderName}/${urlPath}/${this.instructionsFileName}`;
+  }
+  public getCodePath(urlPath: string) {
+    return `${this.contentFolderName}/${urlPath}/${this.codeFileName}`;
+  }
 }
 
 const contentManager = new ContentManager();

lib/types.ts

@@ -17,3 +17,7 @@ export type ContentOutline = Chapter[];
 export type Metadata = {
   title: string;
 };
+
+export type CodeFile = {
+  code: Object;
+};

tsconfig.json

@@ -10,6 +10,7 @@
     "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
+    "moduleDetection": "force",
 
     "jsx": "preserve",
     "incremental": true,