feat: get to displaying markdown copy

src/app/components/Article.module.css

@@ -1,14 +0,0 @@
-.container {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  gap: 1rem;
-}
-
-.copy {
-  flex: 1;
-}
-
-.example {
-  flex: 1;
-}

src/app/components/Article.tsx

@@ -1,14 +0,0 @@
-import styles from './Article.module.css';
-
-export default function Article() {
-  return (
-    <article className={styles.container}>
-      <section className={styles.copy}>
-        This is the copy
-      </section>
-      <section className={styles.example}>
-        This is the example
-      </section>
-    </article>
-  );
-}

src/app/components/NavBar.module.css

@@ -2,8 +2,10 @@
   display: flex;
   justify-content: flex-end;
   align-items: center;
-  padding: 0 1rem;
+  padding: 1rem;
   width: 100%;
+  max-width: 1450px;
+  margin: 0 auto;
 }
 
 .navList {

src/app/components/Section.module.css

@@ -0,0 +1,20 @@
+.container {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 1rem;
+  border-bottom: 1px solid #848586;
+  padding: 5rem;
+}
+
+@media screen and (max-width: 1000px) {
+  .container {
+    flex-direction: column;
+    align-items: flex-start;
+    justify-content: center;
+  }
+}
+
+.container>article {
+  flex: 1;
+}

src/app/components/Section.tsx

@@ -0,0 +1,18 @@
+import styles from './Section.module.css';
+
+export default function Section({
+  copy,
+  example,
+}: {
+  copy: string;
+  example: string;
+}) {
+  return (
+    <section
+      className={styles.container}
+      dangerouslySetInnerHTML={{
+        __html: `${copy}${example}`,
+      }}
+    ></section>
+  );
+}

src/app/components/SideBar.tsx

@@ -14,13 +14,11 @@ function TreeNode({ doc }: { doc: DocsStructure }) {
   return (
     <li className={styles.listItem}>
       {hasChildren ? (
-        <div className={styles.expandable}>
-          <a
+        <div
           onClick={() => setIsExpanded(!isExpanded)}
-            className={styles.link}
+          className={styles.expandable}
         >
-            {doc.title}
-          </a>
+          <a className={styles.link}>{doc.title}</a>
           {isExpanded ? (
             <svg
               xmlns="http://www.w3.org/2000/svg"

src/app/globals.css

@@ -25,7 +25,4 @@ body {
   flex-direction: column;
   height: 100%;
   width: 100%;
-  max-width: 1450px;
-  margin: 0 auto;
-  padding: 20px;
 }

src/app/page.module.css

@@ -1,7 +1,5 @@
 .container {
-  margin: 0 auto;
   max-width: 1450px;
-  padding: 5rem;
   display: flex;
   width: 100%;
   flex-direction: column;

src/app/page.tsx

@@ -1,10 +1,83 @@
-import Article from './components/Article';
+import { versionTwo } from '@/docs/version_002/docsStructure';
+import Markdoc from '@markdoc/markdoc';
+import fs from 'fs';
+import path from 'path';
+import Section from './components/Section';
 import styles from './page.module.css';
+import { DocsStructure } from './types/types';
+
+type Section = {
+  title: string;
+  copy: string;
+  example: string;
+};
+
+function loadSections(
+  docs: DocsStructure[],
+  sections: Section[] = []
+): Section[] {
+  for (const doc of docs) {
+    try {
+      const copyPath = path.join(
+        process.cwd(),
+        'src/docs',
+        'version_002',
+        doc.folder,
+        doc.copy!
+      );
+
+      const examplePath = path.join(
+        process.cwd(),
+        'src/docs',
+        'version_002',
+        doc.folder,
+        doc.example!
+      );
+
+      const copySource = fs.readFileSync(copyPath, 'utf8');
+      const exampleSource = fs.readFileSync(
+        examplePath,
+        'utf8'
+      );
+
+      const copyAst = Markdoc.parse(copySource);
+      const exampleAst = Markdoc.parse(exampleSource);
+      const copyContent = Markdoc.transform(copyAst);
+      const exampleContent = Markdoc.transform(exampleAst);
+      const copyHtml = Markdoc.renderers.html(copyContent);
+      const exampleHtml =
+        Markdoc.renderers.html(exampleContent);
+
+      sections.push({
+        title: doc.title,
+        copy: copyHtml,
+        example: exampleHtml,
+      });
+
+      if (doc.children && doc.children.length > 0) {
+        loadSections(doc.children, sections);
+      }
+    } catch (error) {
+      console.log(error);
+      continue;
+    }
+  }
+
+  return sections;
+}
 
 export default function Home() {
+  const versionTwoSections = loadSections(versionTwo);
+  console.log(versionTwoSections);
   return (
     <main className={styles.container}>
-      <Article />
+      {versionTwoSections.map(article => (
+        <Section
+          key={article.title}
+          copy={article.copy}
+          example={article.example}
+        />
+      ))}
     </main>
   );
 }

src/docs/version_002/authentication/copy.md

@@ -0,0 +1,3 @@
+# Authentication
+
+This is the copy for the authentication page.

src/docs/version_002/authentication/example.md

@@ -0,0 +1,3 @@
+# Example
+
+This is an example for the authentication page.

src/docs/version_002/introduction/copy.md

@@ -0,0 +1,3 @@
+# Introduction
+
+This is the copy for the introduction page.

src/docs/version_002/introduction/example.md

@@ -0,0 +1,5 @@
+{% .custom-class-name-here %}
+
+# Example
+
+This is the example for the introduction page.