Update page.tsx, ContentViewer.module.css,

NavigationBtn.tsx, mdx.tsx, and theme.ts

Author: JeelRajodiya

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

@@ -31,6 +31,9 @@ export default async function Content({
   const outline = contentManager.generateOutline();
 
   const { chapterIndex, stepIndex } = contentManager.getStepLocation(mdPath);
+  const totalChapters = contentManager.getTotalChapters();
+  const totalSteps = contentManager.getTotalSteps(chapterIndex);
+
   const chapterTitle = outline[chapterIndex].title;
 
   return (
@@ -42,12 +45,14 @@ export default async function Content({
       </Link>
       <div>
         <span>
-          Chapter {chapterIndex + 1}: {chapterTitle}
+          Chapter {chapterIndex + 1}: {chapterTitle} (
+          {((chapterIndex + 1) / totalChapters) * 100}%)
         </span>
       </div>
       <div>
         <span>
-          Step {stepIndex + 1}: {metadata.title}
+          Step {stepIndex + 1}: {metadata.title} (
+          {(stepIndex / totalSteps) * 100} %)
         </span>
       </div>
       <ContentViewer>

app/components/ContentViewer/ContentViewer.module.css

@@ -4,7 +4,7 @@
   border: 1px solid rgba(0, 0, 0, 0.334);
   border-radius: 16px;
   padding: 16px;
-  width: 50%;
+  max-width: max(50%, 800px);
   overflow-y: scroll;
   height: 100%;
 }

app/components/NavigationBtn/NavigationBtn.tsx

@@ -21,7 +21,7 @@ export default function NavigationBtn({
         router.push("/" + path);
       }}
     >
-      {direction === "next" ? "Next" : "Previous"}
+      {direction === "next" ? "NEXT" : "PREVIOUS"}
     </Button>
   );
 }

app/components/mdx.tsx

@@ -1,5 +1,6 @@
 import { MDXRemote, MDXRemoteProps } from "next-mdx-remote/rsc";
-import { As, Heading } from "@chakra-ui/react";
+import { As, Heading, Link } from "@chakra-ui/react";
+
 import { MDXComponents } from "mdx/types";
 
 function createHeading(level: number): any {
@@ -27,7 +28,7 @@ function createHeading(level: number): any {
         as={`h${level}` as As}
         size={headingSizes[level]}
         lineHeight={"tall"}
-        letterSpacing={"tighter"}
+        letterSpacing={"tight"}
       >
         {children}
       </Heading>
@@ -45,7 +46,9 @@ export const components: MDXComponents = {
   h4: createHeading(4),
   h5: createHeading(5),
   h6: createHeading(6),
+  a: (props) => <Link {...props} style={{ color: "blue" }} target="_" />,
 };
+
 export function CustomMDX(props: MDXRemoteProps) {
   return (
     <MDXRemote

app/styles/theme.ts

@@ -12,6 +12,9 @@ const Button = {
       bg: "hsl(var(--primary))",
       _hover: {
         bg: "hsl(var(--primary) / 0.8)",
+        _disabled: {
+          bg: "hsl(var(--primary) / 0.6)",
+        },
       },
       _active: {
         bg: "hsl(var(--primary) / 0.6)",

content/01-introduction/01-welcome.mdx

@@ -0,0 +1,14 @@
+---
+title : "Welcome"
+
+---
+
+
+
+# JSON Schema Tour
+Welcome to the JSON Schema Tour! In this interactive tour your will be introduced to JSON Schema. You will learn how to use JSON Schema to validate JSON documents.
+
+
+### Are there any prerequisites?
+**No!** You just need to know what [JSON](https://www.mongodb.com/resources/languages/what-is-json) is.
+

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

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

content/01-introduction/index.mdx

@@ -1,12 +1,12 @@
 [
   {
-    "title": "introduction",
+    "title": "Introduction",
     "folderName": "01-introduction",
     "steps": [
       {
-        "title": "Why json schema?",
-        "fileName": "01-why-json-schema.mdx",
-        "fullPath": "01-introduction/01-why-json-schema.mdx"
+        "title": "Welcome",
+        "fileName": "01-welcome.mdx",
+        "fullPath": "01-introduction/01-welcome.mdx"
       },
       {
         "title": "Modify an array",

content/outline.json

@@ -157,6 +157,12 @@ export default class ContentManager {
       );
     }
   }
+  public getTotalChapters() {
+    return this.getOutline().length;
+  }
+  public getTotalSteps(chapterIndex: number) {
+    return this.getOutline()[chapterIndex].steps.length;
+  }
 }
 
 const contentManager = new ContentManager();