restor mdx route

Author: jderochervlk

app/routes/Guides.res

@@ -12,6 +12,46 @@ type loaderData = {
   filePath: option<string>,
 }
 
+/**
+ 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,
+  "td": Markdown.Td.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,
+  "CommunityContent": CommunityContent.make,
+  "WarningTable": WarningTable.make,
+  "Docson": DocsonLazy.make,
+  "Suspense": React.Suspense.make,
+}
+
 let convertToNavItems = (items, rootPath) =>
   Array.map(items, (item): SidebarLayout.Sidebar.NavItem.t => {
     let href = switch item.slug {
@@ -242,7 +282,7 @@ let loader: ReactRouter.Loader.t<loaderData> = async ({request}) => {
 
 let default = () => {
   let {pathname} = ReactRouter.useLocation()
-  let component = useMdxComponent(~components=Mdx.components)
+  let component = useMdxComponent(~components)
   let attributes = useMdxAttributes()
 
   let loaderData: loaderData = ReactRouter.useLoaderData()

app/routes/MdxRoute.res

@@ -370,7 +370,7 @@ let make = (
   <div className={"min-w-320 " ++ theme}>
     <div className="w-full">
       <div className="flex lg:justify-center">
-        <div className="flex w-full max-w-1280 md:mx-10">
+        <div className="flex w-full max-w-1280 md:mx-10 md:mt-16">
           sidebar
           <main className="px-4 w-full pt-4 md:ml-12 lg:mr-8 mb-32 md:max-w-576 lg:max-w-740">
             //width of the right content part

src/layouts/SidebarLayout.res

@@ -1,5 +1,3 @@
-// @ts-check
-
 import { reactRouter } from "@react-router/dev/vite";
 import tailwindcss from "@tailwindcss/vite";
 import react from "@vitejs/plugin-react";