Fix code formatting and styling issues

json-schema-org · May 15, 2024 · f88bf0c · f88bf0c
1 parent 0ceac29
commit f88bf0c
Show file tree

Hide file tree

Showing 8 changed files with 48 additions and 28 deletions.
diff --git a/app/[...markdownPath]/page.tsx b/app/[...markdownPath]/page.tsx
@@ -31,28 +31,30 @@ export default async function Content({
 
   return (
     <div className={styles.wrapper}>
-      <Link href="/outline">
-        <Button size={"sm"} variant={"default"}>
-          Back TO OUTLINE
-        </Button>
-      </Link>
-      <Flex gap={4}>
-        <span>
-          Chapter {chapterIndex + 1}: {chapterTitle} (
-          {((chapterIndex + 1) / totalChapters) * 100}%)
-        </span>
+      <div>
+        <Link href="/outline">
+          <Button size={"sm"} variant={"default"}>
+            Back TO OUTLINE
+          </Button>
+        </Link>
+        <Flex gap={4}>
+          <span>
+            Chapter {chapterIndex + 1}: {chapterTitle} (
+            {((chapterIndex + 1) / totalChapters) * 100}%)
+          </span>
 
-        <span>
-          Step {stepIndex + 1}: {metadata.title} (
-          {((stepIndex + 1) / totalSteps) * 100} %)
-        </span>
-      </Flex>
-      <Flex dir="row" height={"100%"} gap={"8px"}>
+          <span>
+            Step {stepIndex + 1}: {metadata.title} (
+            {((stepIndex + 1) / totalSteps) * 100} %)
+          </span>
+        </Flex>
+      </div>
+      <Flex dir="row" height={"inherit"} gap={"8px"}>
         <ContentViewer>
           <Page />
         </ContentViewer>
 
-        <CodeEditor urlPath={urlPath} />
+        {/* <CodeEditor urlPath={urlPath} /> */}
       </Flex>
       <div className={styles.navigationBtnWrapper}>
         <NavigationBtn path={previousStepPath} direction="prev" />

diff --git a/app/components/CodeEditor/CodeEditor.tsx b/app/components/CodeEditor/CodeEditor.tsx
@@ -4,6 +4,8 @@ import fs from "fs";
 import SyntaxHighlighter from "react-syntax-highlighter";
 import { tomorrow } from "react-syntax-highlighter/dist/esm/styles/hljs";
 import styles from "./CodeEditor.module.css";
+import ctx from "classnames";
+import { GeistMono } from "geist/font/mono";
 
 type moduleExports = {
   exports: CodeFile;
@@ -21,8 +23,12 @@ export default function CodeEditor({ urlPath }: { urlPath: string }) {
   const codeString = JSON.stringify(code, null, 2);
 
   return (
-    <div className={styles.codeEditor}>
-      <SyntaxHighlighter language="json" style={tomorrow}>
+    <div className={ctx(styles.codeEditor, GeistMono.className)}>
+      <SyntaxHighlighter
+        language="json"
+        style={tomorrow}
+        className={GeistMono.className}
+      >
         {codeString}
       </SyntaxHighlighter>
     </div>

diff --git a/app/components/ContentViewer/ContentViewer.module.css b/app/components/ContentViewer/ContentViewer.module.css
@@ -7,5 +7,4 @@
   max-width: max(50%, 800px);
   overflow-y: scroll;
   height: 100%;
-  flex: 1;
 }
diff --git a/app/components/mdx.tsx b/app/components/mdx.tsx
@@ -35,8 +35,8 @@ function createHeading(level: number): any {
       <Heading
         as={`h${level}` as As}
         size={headingSizes[level]}
-        lineHeight={"tall"}
-        letterSpacing={"tight"}
+        lineHeight={"tallest"}
+        letterSpacing={"tighter"}
       >
         {children?.toString()}
       </Heading>

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Open_Sans } from "next/font/google";
 // import { Providers } from "./providers";
 import "./styles/globals.css";
+import { GeistSans } from "geist/font/sans";
 import { Providers } from "./providers";
 const font = Open_Sans({ subsets: ["latin"] });
 
@@ -17,7 +18,7 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en">
-      <body className={font.className}>
+      <body className={GeistSans.className}>
         <Providers>
           <main>{children}</main>
         </Providers>

diff --git a/content/01-introduction/01-Why-JSON-Schema/instructions.mdx b/content/01-introduction/01-Why-JSON-Schema/instructions.mdx
@@ -13,13 +13,13 @@ Welcome to the JSON Schema Tour! In this interactive tour your will be introduce
 ## Are there any prerequisites?
 **No!** You just need to know what [JSON](https://www.mongodb.com/resources/languages/what-is-json) is.
 
-## Why JSON Schema?
-When you are working with JSON data, you may want to ensure that your json data is in a specific format. 
-
+## What is JSON Schema?
+When you are working with JSON data, you may want to ensure that your json data is in a specific format, you may want to enforce some constraints on the data.
+<br/>
 This is where JSON Schema can help you. JSON Schema is a vocabulary that allows you to annotate and validate JSON documents.
 
-## The Smallest JSON Schema
-
+## Let's Start Simple 
+We will start with a simple example.
 Consider you have a json document like this:
 ```json
 {

diff --git a/package.json b/package.json
@@ -18,7 +18,9 @@
     "@mdx-js/react": "^3.0.1",
     "@next/mdx": "^14.2.3",
     "@types/mdx": "^2.0.13",
+    "classnames": "^2.5.1",
     "framer-motion": "^11.1.9",
+    "geist": "^1.3.0",
     "gray-matter": "^4.0.3",
     "next": "14.2.3",
     "next-mdx-remote": "^4.4.1",

diff --git a/yarn.lock b/yarn.lock
@@ -1884,6 +1884,11 @@ character-reference-invalid@^2.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz#85c66b041e43b47210faf401278abf808ac45cb9"
   integrity sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==
 
+classnames@^2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
+  integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
+
 [email protected]:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/client-only/-/client-only-0.0.1.tgz#38bba5d403c41ab150bff64a95c85013cf73bca1"
@@ -2772,6 +2777,11 @@ functions-have-names@^1.2.3:
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
 
+geist@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/geist/-/geist-1.3.0.tgz#e22a87478d64ab452c03e4766f8929d76058f93f"
+  integrity sha512-IoGBfcqVEYB4bEwsfHd35jF4+X9LHRPYZymHL4YOltHSs9LJa24DYs1Z7rEMQ/lsEvaAIc61Y9aUxgcJaQ8lrg==
+
 get-intrinsic@^1.1.3, get-intrinsic@^1.2.1, get-intrinsic@^1.2.3, get-intrinsic@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.4.tgz#e385f5a4b5227d449c3eabbad05494ef0abbeadd"