add formatting to markdown

Author: jderochervlk

app/routes/MdxRoute.res

@@ -8,14 +8,49 @@ module Category = Sidebar.Category
 
 type loaderData = {...Mdx.t}
 
+/**
+ This configures the MDX component to use our custom markdown components
+ */
+let components = {
+  // Replacing HTML defaults
+  "a": Markdown.A.make,
+  "blockquote": Markdown.Blockquote.make,
+  "code": Markdown.Code.make,
+  "h1": Markdown.H1.make,
+  "h2": Markdown.H2.make,
+  "h3": Markdown.H3.make,
+  "h4": Markdown.H4.make,
+  "h5": Markdown.H5.make,
+  "hr": Markdown.Hr.make,
+  "intro": Markdown.Intro.make,
+  "li": Markdown.Li.make,
+  "ol": Markdown.Ol.make,
+  "p": Markdown.P.make,
+  "pre": Markdown.Pre.make,
+  "strong": Markdown.Strong.make,
+  "table": Markdown.Table.make,
+  "th": Markdown.Th.make,
+  "thead": Markdown.Thead.make,
+  "ul": Markdown.Ul.make,
+  // These are custom components we provide
+  "Cite": Markdown.Cite.make,
+  "CodeTab": Markdown.CodeTab.make,
+  "Image": Markdown.Image.make,
+  "Info": Markdown.Info.make,
+  "Intro": Markdown.Intro.make,
+  "UrlBox": Markdown.UrlBox.make,
+  "Video": Markdown.Video.make,
+  "Warn": Markdown.Warn.make,
+}
+
 let loader: Loader.t<loaderData> = async ({request}) => {
   let mdx = await loadMdx(request)
   let res: loaderData = {__raw: mdx.__raw, attributes: mdx.attributes}
   res
 }
 
 let default = () => {
-  let component = useMdxComponent()
+  let component = useMdxComponent(~components)
   let attributes = useMdxAttributes()
   let _ = Toc.useToc(~category="manual")
 
@@ -28,8 +63,10 @@ let default = () => {
   //   availableVersions=Constants.allManualVersions
   //   nextVersion=?Constants.nextVersion>
   //   // {React.string(attributes.title)} </h1>
-  <div className="markdown-body">
-    <DocsLayout metaTitleCategory="Foo" categories=[]> {component()} </DocsLayout>
+  <div>
+    <DocsLayout metaTitleCategory="Foo" categories=[]>
+      <div className="markdown-body"> {component()} </div>
+    </DocsLayout>
   </div>
   // </ManualDocsLayout.V1200Layout>
 }

docs/manual/installation.mdx

@@ -8,6 +8,7 @@ canonical: "/docs/manual/v12.0.0/installation"
 
 ## Prerequisites
 
+<div class="install-list">
 - [Node.js](https://nodejs.org/) version >= 20
 - One of the following package managers:
   - [npm](https://docs.npmjs.com/cli/) (comes with Node.js)
@@ -17,6 +18,7 @@ canonical: "/docs/manual/v12.0.0/installation"
   - [bun](https://bun.sh/)
   - [deno](http://deno.com/)
     - Configure `"nodeModulesDir": "auto"` in `deno.json`
+</div>
 
 ## New Project
 

src/bindings/ReactRouter.res

@@ -105,7 +105,7 @@ module Mdx = {
   external useMdxAttributes: unit => attributes = "useMdxAttributes"
 
   @module("react-router-mdx/client")
-  external useMdxComponent: unit => Jsx.component<'a> = "useMdxComponent"
+  external useMdxComponent: (~components: {..}=?) => Jsx.component<'a> = "useMdxComponent"
 
   @module("react-router-mdx/server")
   external loadAllMdx: (~filterByPaths: array<string>=?) => promise<array<t>> = "loadAllMdx"

src/components/Markdown.res

@@ -116,7 +116,8 @@ module Anchor = {
     <span className="inline group relative">
       <a
         className="invisible text-gray-60 opacity-50 hover:opacity-100 hover:text-gray-60 hover:cursor-pointer group-hover:visible"
-        href={"#" ++ id}>
+        href={"#" ++ id}
+      >
         <Icon.Hyperlink className="inline-block align-middle text-gray-40" />
       </a>
       <a className="absolute -top-28" id />
@@ -170,7 +171,8 @@ module H5 = {
   let make = (~id, ~children) =>
     <h5
       id
-      className="group mt-12 mb-3 text-12 leading-2 font-sans font-semibold uppercase tracking-wide text-gray-80">
+      className="group mt-12 mb-3 text-12 leading-2 font-sans font-semibold uppercase tracking-wide text-gray-80"
+    >
       children
       <span className="ml-2">
         <Anchor id />
@@ -187,7 +189,8 @@ module InlineCode = {
   @react.component
   let make = (~children) =>
     <code
-      className="md-inline-code px-2 py-0.5  text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90/5">
+      className="md-inline-code px-2 py-0.5  text-gray-60 font-mono rounded-sm bg-gray-10-tr border border-gray-90/5"
+    >
       children
     </code>
 }
@@ -209,7 +212,8 @@ module Th = {
   @react.component
   let make = (~children) =>
     <th
-      className="py-2 pr-8 text-12 text-gray-60 uppercase font-medium tracking-wide text-left border-b-2 border-gray-20">
+      className="py-2 pr-8 text-12 text-gray-60 uppercase font-medium tracking-wide text-left border-b-2 border-gray-20"
+    >
       children
     </th>
 }

styles/_markdown.css

@@ -1,66 +1,75 @@
 /* Markdown related stuff */
 /* Sometimes we cannot circumvent the cascade, especially for nested lists */
+.markdown-body {
 
-.md-ul,
-.md-ol {
-  @apply mb-8;
-}
+  ol {
+    li {
+      counter-increment: li;
 
-.md-ul ul {
-  @apply mb-0;
-}
+      &::before {
+        content: counter(li) ".";
+        @apply absolute font-semibold;
+      }
+    }
+  }
 
-.md-ol > li {
-  counter-increment: li;
-}
+  ul {
+    @apply mb-0;
 
-.md-ul .md-li {
-  @apply relative my-6;
-}
+    ol {
+      @apply mb-0;
+    }
 
-.md-ol > .md-li::before {
-  content: counter(li) ".";
-  @apply absolute font-semibold;
-}
+    li {
+      @apply relative my-6;
 
-.md-ul > .md-li::before {
-  content: "•";
-  @apply absolute;
-}
+      &::before {
+        content: "•";
+        @apply absolute;
+      }
 
-.md-ul > .md-li > ul > li::before {
-  content: "—";
-  @apply absolute;
-}
+      ul {
+        @apply mb-14 ml-4;
+      }
 
-.md-ul > .md-li > ul {
-  @apply mb-14 ml-4;
-}
+      p {
+        @apply text-gray-80 ml-5;
+      }
+    }
+  }
 
-.md-li > p {
-  @apply text-gray-80 ml-5;
-}
+  li {
+    ul {
+      p {
+        @apply ml-6;
+      }
+    }
+  }
 
-.md-li > ul > li p {
-  @apply ml-6;
-}
+  p+p {
+    @apply mt-6;
+  }
 
-.md-p + .md-p {
-  @apply mt-6;
-}
+  /* INFOBOX (Markdown.res) Find a better solution for <p> text inside of Info-Box (Markdown)? */
+  .infobox {
+    p {
+      @apply text-14 mt-0;
 
-/* INFOBOX (Markdown.res) Find a better solution for <p> text inside of Info-Box (Markdown)? */
-.infobox > p {
-  @apply text-14 mt-0;
-}
+      a {
+        @apply underline text-current;
 
-.infobox > .md-p {
-  @apply mt-0;
-}
+        &::hover {
+          @apply no-underline text-current text-gray-70;
+        }
+      }
+    }
+  }
 
-.infobox > p > a {
-  @apply underline text-current;
-}
-.infobox > p > a:hover {
-  @apply no-underline text-current text-gray-70;
-}
+  .install-list {
+    li {
+      ul {
+        @apply !mb-0;
+      }
+    }
+  }
+}

styles/main.css

@@ -2,6 +2,7 @@
 @import "./_fonts.css" layer(base);
 @import "./_docsearch.css" layer(base);
 
+
 @import "tailwindcss";
 
 @source '../src/**/*.{mjs,js,res}';
@@ -163,6 +164,7 @@
   --shadow-sm: 0 0.5px 0.5px 0 rgba(0, 0, 0, 0.05);
 
   @keyframes pulse {
+
     0%,
     100% {
       opacity: 1;
@@ -183,6 +185,7 @@
   color utility to any element that depends on these defaults.
 */
 @layer base {
+
   *,
   ::after,
   ::before,
@@ -294,7 +297,7 @@
     /* Chrome/Safari/Webkit */
   }
 
-  a > code {
+  a>code {
     @apply text-fire;
   }
 }
@@ -351,14 +354,14 @@
 }
 
 .cm-s-material .CodeMirror-line::selection,
-.cm-s-material .CodeMirror-line > span::selection,
-.cm-s-material .CodeMirror-line > span > span::selection {
+.cm-s-material .CodeMirror-line>span::selection,
+.cm-s-material .CodeMirror-line>span>span::selection {
   background: rgba(128, 203, 196, 0.2);
 }
 
 .cm-s-material .CodeMirror-line::-moz-selection,
-.cm-s-material .CodeMirror-line > span::-moz-selection,
-.cm-s-material .CodeMirror-line > span > span::-moz-selection {
+.cm-s-material .CodeMirror-line>span::-moz-selection,
+.cm-s-material .CodeMirror-line>span>span::-moz-selection {
   background: rgba(128, 203, 196, 0.2);
 }
 
@@ -548,4 +551,4 @@
 .CodeMirror-overlayscroll-vertical div {
   right: 0;
   width: 100%;
-}
+}