add the syllabus

lib/getPostMetadata.js

@@ -0,0 +1,19 @@
+import fs from "fs";
+import matter from "gray-matter";
+
+export default function getPostMetadata(basePath) {
+  const folder = basePath + "/";
+  const files = fs.readdirSync(folder);
+  const markdownPosts = files.filter((file) => file.endsWith(".md"));
+
+  // get the file data
+  const posts = markdownPosts.map((filename) => {
+    const fileContents = fs.readFileSync(`${basePath}/${filename}`, "utf8");
+    const matterResult = matter(fileContents);
+    return {
+      title: matterResult.data.title,
+      slug: filename.replace(".md", ""),
+    };
+  });
+  return posts;
+}

package.json

@@ -18,6 +18,8 @@
     "contentlayer": "^0.3.4",
     "date-fns": "^3.6.0",
     "github-slugger": "^2.0.0",
+    "gray-matter": "^4.0.3",
+    "markdown-to-jsx": "^7.4.7",
     "next": "13.5.4",
     "next-contentlayer": "^0.3.4",
     "react": "^18",

src/app/course-book/[chapter]/[section]/page.js

@@ -3,8 +3,8 @@
 import { useParams } from "next/navigation";
 
 import { allDocs } from "@/.contentlayer/generated";
-import DocDetails from "@/src/components/Doc/DocDetails";
 import RenderMdx from "@/src/components/Doc/RenderMdx";
+// import DocDetails from "@/src/components/Doc/DocDetails";
 
 const DocPage = () => {
   const params = useParams();
@@ -29,7 +29,6 @@ const DocPage = () => {
         </div>
         <div className="absolute top-0 left-0 right-0 bottom-0 h-full bg-dark/60 dark:bg-dark/40" />
       </div>
-      {/* <DocDetails doc={doc} slug={slug} /> */}
 
       <div className="grid grid-cols-12  gap-y-8 lg:gap-8 sxl:gap-16 mt-8 px-5 md:px-10">
         <div className="col-span-12  lg:col-span-4">

src/app/syllabus/page.css

@@ -0,0 +1,4 @@
+.active {
+  font-weight: bold;
+  color: #ff0000; /* Example color */
+}