add docs page

Author: jderochervlk

app/routes.mjs

@@ -47,6 +47,9 @@ let $$default = Belt_Array.concatMany([
     Routes.route("blog/archived", "./routes/BlogRoute.mjs", {
       id: "blog-archived"
     }),
+    Routes.route("docs", "./routes/DocsOverview.mjs", {
+      id: "docs-overview"
+    }),
     Routes.route("docs/manual/api/stdlib", "./routes/ApiRoute.mjs", {
       id: "api-stdlib"
     }),

app/routes.res

@@ -35,6 +35,7 @@ let default = [
   route("syntax-lookup", "./routes/SyntaxLookupRoute.mjs", ~options={id: "syntax-lookup"}),
   route("blog", "./routes/BlogRoute.mjs", ~options={id: "blog-index"}),
   route("blog/archived", "./routes/BlogRoute.mjs", ~options={id: "blog-archived"}),
+  route("docs", "./routes/DocsOverview.mjs", ~options={id: "docs-overview"}),
   route("docs/manual/api/stdlib", "./routes/ApiRoute.mjs", ~options={id: "api-stdlib"}),
   route("docs/manual/api/introduction", "./routes/ApiRoute.mjs", ~options={id: "api-intro"}),
   route("docs/manual/api/belt", "./routes/ApiRoute.mjs", ~options={id: "api-belt"}),

src/DocsOverview.res app/routes/DocsOverview.ressrc/DocsOverview.res renamed to app/routes/DocsOverview.res

@@ -5,7 +5,7 @@ module Card = {
       <h2 className="font-bold text-24 mb-4"> {React.string(title)} </h2>
       <ul>
         {Array.map(hrefs, ((text, href)) =>
-          <li key=text className="text-16 mb-1 last:mb-0">
+          <li key=text className="text-16 mb-1 last:mb-0 text-fire hover:underline">
             <ReactRouter.Link.String to=href> {React.string(text)} </ReactRouter.Link.String>
           </li>
         )->React.array}
@@ -30,15 +30,16 @@ let default = (~showVersionSelect=true) => {
     ("Reanalyze", "https://github.com/rescript-lang/reanalyze"),
   ]
 
-  <>
-    <div>
-      <div className="mb-6" />
+  <MainLayout>
+    <div className="max-w-740 w-full m-auto mt-16 md:mt-6">
+      // <div className="mb-6" />
       <Markdown.H1> {React.string("Docs")} </Markdown.H1>
+
+      <div className="grid grid-cols-1 xs:grid-cols-2 gap-8">
+        <Card title="Language Manual" hrefs=languageManual />
+        <Card title="Ecosystem" hrefs=ecosystem />
+        <Card title="Tools" hrefs=Constants.tools />
+      </div>
     </div>
-    <div className="grid grid-cols-1 xs:grid-cols-2 gap-8">
-      <Card title="Language Manual" hrefs=languageManual />
-      <Card title="Ecosystem" hrefs=ecosystem />
-      <Card title="Tools" hrefs=Constants.tools />
-    </div>
-  </>
+  </MainLayout>
 }

src/DocsOverview.resi app/routes/DocsOverview.resisrc/DocsOverview.resi renamed to app/routes/DocsOverview.resi

@@ -431,7 +431,6 @@ let make = (props: props) => {
     />
     <div className="mt-16 pt-2">
       <div className="text-gray-80 text-18">
-        // <Navigation isOverlayOpen setOverlayOpen />
         <div className="flex overflow-hidden">
           <div
             className="flex justify-between min-w-320 px-4 pt-16 lg:align-center w-full lg:px-8 pb-48"

src/Packages.res

@@ -387,7 +387,6 @@ let make = (
     />
     <div className="mt-4 xs:mt-16">
       <div className="text-gray-80">
-        // <Navigation isOverlayOpen setOverlayOpen />
         <div className="flex xs:justify-center overflow-hidden pb-48">
           <main className="mt-24 min-w-320 lg:align-center w-full px-4 md:px-8 max-w-1280">
             <div className="flex justify-center">

src/SyntaxLookup.res

@@ -22,7 +22,7 @@ let isActiveLink = (~includes: string, ~excludes: option<string>=?, ~route: Path
 
 let isDocRoute = (~route: Path.t) => {
   let route = (route :> string)
-  route->String.includes("/docs/") || route->String.includes("/syntax-lookup")
+  route->String.includes("/docs/") || route->String.includes("/syntax-lookup") || route == "/docs"
 }
 
 let isDocRouteActive = (~route: Path.t) => isDocRoute(~route) ? activeLink : link

src/components/Navigation.res

@@ -5,7 +5,6 @@ let make = (~components=MarkdownComponents.default, ~children) => {
   <>
     <div className={"mt-4 xs:mt-16"}>
       <div className="text-gray-80">
-        // <Navigation isOverlayOpen setOverlayOpen />
         <div className="flex xs:justify-center overflow-hidden pb-48">
           <main className="mt-16 min-w-320 lg:align-center w-full px-4 md:px-8 max-w-1280 ">
             children