updating blog pages

_blogposts/2020-08-28-new-rescript-logo.mdx

@@ -7,8 +7,6 @@ description: |
   Today, our resident designer Bettina is unveiling to us the fresh new ReScript branding we've been long waiting for. We hope you're as excited about the result as us!
 ---
 
-import Image from "src/components/Image";
-
 ## Why the Rebranding?
 
 ReScript is the evolution and fusion of Reason and BuckleScript. As we're a design-minded community, we'd like to convey this new identity not only through new technical changes as we've done so far, but also through a proper, more professionally crafted logo, color scheme and font. At the same time, we'd like to do so while recalling our roots.

_blogposts/2020-11-17-editor-support-custom-operators-and-more.mdx

@@ -8,8 +8,6 @@ description: |
   Update on what we're doing around the end of 2020 and early next year.
 ---
 
-import Video from "src/components/Video";
-
 ## Upcoming Improvements
 
 As we're approaching the end of 2020, we'd like to inform our community of our remaining tasks for the year and early next year.

_blogposts/2021-06-25-roadmap-2021-and-new-landing-page.mdx

@@ -7,8 +7,6 @@ description: |
   Announcing our roadmap for 2021 / 2022, release cycle plans and new landing page.
 ---
 
-import Image from "src/components/Image.mjs";
-
 ## Team Update
 
 It has almost been a year since we originally [launched our new ReScript brand](/blog/bucklescript-is-rebranding), and we think it has been a pretty successful journey so far:

_blogposts/archive/2018-11-19-bucklescript-roadmap-q3-4-2018.mdx

@@ -63,7 +63,7 @@ style: as an JS dictionary for both global modules and local modules.
 BuckleScript is focused on making better use of JS ecosystem and provide
 values to ship JS code in production (produced by BuckleScript).
 
-<!-- There are still bunch of things to address, most importantly -->
+{/* There are still bunch of things to address, most importantly */}
 
 #### Making Bucklescript toolchain more lightweight
 

_blogposts/archive/2019-05-21-ffi-overview.mdx

@@ -191,4 +191,4 @@ setDate(date, 3);
 var d = getDate(date);
 ```
 
-<!-- ,  and provide various methods over such abstract data type. -->
+{/* ,  and provide various methods over such abstract data type. */}

_blogposts/archive/2020-02-07-union-types-in-bucklescript.mdx

@@ -77,7 +77,7 @@ module A_b_c: {
 };
 ```
 
-<!-- Union types are useful for modeling situations when values can overlap in the types they can take on.  -->
+{/* Union types are useful for modeling situations when values can overlap in the types they can take on.  */}
 
 What happens when we need to know specifically whether we have a value of type `a`? This is a case by case issue; it depends on whether there are some intersections in the runtime encoding of `a`, `b` or `c`. For some primitive types, it is easy enough to use `Js.typeof` to tell the difference between, e.g, `number` and `string`.
 

_blogposts/archive/2020-02-20-loading-stdlib-in-memory.mdx

@@ -10,7 +10,7 @@ description: |
 
 ## Loading stdlib from memory
 
-<!-- Do you mean "external files" instead of "external file system"? In Linux world, a file system is means something like EXT4 or btrfs -->
+  // {/* Do you mean "external files" instead of "external file system"? In Linux world, a file system is means something like EXT4 or btrfs */}
 
 In the next release, we are going to load stdlib from memory instead of from
 external files, which will make the BuckleScript toolchain more accessible and
@@ -61,7 +61,7 @@ file system.
 
 ## What are the benefits?
 
-<!-- In the phrase "we can make it installable", what does "it" refer to? -->
+{/* In the phrase "we can make it installable", what does "it" refer to? */}
 
 ### More accessiblity.
 
@@ -71,7 +71,7 @@ subtle interaction with [yarn
 reinstall](https://github.com/BuckleScript/bucklescript/issues/2799) is also
 solved once and for all.
 
-<!-- instead of "between compiler and stdlib version schemes", perhaps say "for aligning compiler and stdlib version schemes" -->
+{/* instead of "between compiler and stdlib version schemes", perhaps say "for aligning compiler and stdlib version schemes" */}
 
 ### Easy separation between compiler and JS artifacts
 
@@ -89,9 +89,9 @@ now!
 Depending on your network speed, the installation is reduced from 15
 seconds to 3 seconds. Reinstallation is almost a no-op now.
 
-<!-- TODO: collect data points later -->
+{/* TODO: collect data points later */}
 
-<!-- I'm not sure what you mean by "compiling a single file to a string" -->
+{/* I'm not sure what you mean by "compiling a single file to a string" */}
 
 ### JS playground is easier to build
 

_blogposts/archive/2020-05-06-state-of-reasonml-org-2020-q2-pt1.mdx

@@ -9,8 +9,6 @@ description: |
   to expect in the future. The first part is an introduction to our project.
 ---
 
-import Image from "src/components/Image";
-
 ## Hello World!
 
 We are happy to finally show off our brand new blog system for `reasonml.org`. It unifies all the previous articles from the different Reason, BuckleScript, and ReasonReact websites and also acts as a communication channel for community and documentation updates as well.

_blogposts/archive/2020-05-12-state-of-reasonml-org-2020-q2-pt3.mdx

@@ -8,8 +8,6 @@ description: |
   talk about upcoming tools and features.
 ---
 
-import Image from "src/components/Image";
-
 ## Future Tools for the Community
 
 In [part 2](/blog/state-of-reasonml-org-2020-q2-pt2) of this blog series, we talked about the automation process for quality assurance within the documentation platform itself, and how we want to improve the collaboration process for our contributors.

_blogposts/archive/2020-05-15-state-of-reasonml-org-2020-q2-pt4.mdx

@@ -8,8 +8,6 @@ description: |
   This is the final part of the series about our vision of a more accessible Reason platform.
 ---
 
-import Image from "src/components/Image";
-
 ## It's all Opinions
 
 This is the final part of our "State of reasonml.org Q1-2020" series. In [part 3](/blog/state-of-reasonml-org-2020-q2-pt3), we gave our readers some insights on advanced features we've been working on for `reasonml.org` and showed how our tools might help the community to build better documentation experiences themselves.

app/routes/MdxRoute.res

@@ -99,43 +99,87 @@ let manualTableOfContents = () => {
   categories
 }
 
-let loader: Loader.t<loaderData> = async ({request}) => {
-  let {pathname} = WebAPI.URL.make(~url=request.url)
-
-  let mdx = await loadMdx(request)
+let apiTableOfContents = () => {
+  let groups =
+    allMdx
+    ->filterMdxPages("docs/manual/api")
+    ->groupBySection
+    ->Dict.mapValues(values => values->sortSection->convertToNavItems)
 
-  let categories = manualTableOfContents()
+  // Console.log(groups)
 
-  let fileContents = await allMdx
-  ->Array.filter(mdx => (mdx.path :> string)->String.includes(pathname))
-  ->Array.get(0)
-  ->Option.map(mdx => mdx.path)
-  ->Option.map(path => Node.Fs.readFile((path :> string), "utf-8"))
-  ->Option.getOrThrow
+  // these are the categories that appear in the sidebar
+  let categories: array<SidebarLayout.Sidebar.Category.t> = [
+    {name: "Overview", items: groups->Dict.get("Overview")->Option.getOr([])},
+    {
+      name: "Additional Libraries",
+      items: groups->Dict.get("Additional Libraries")->Option.getOr([]),
+    },
+  ]
+  categories
+}
 
-  let markdownTree = Mdast.fromMarkdown(fileContents)
-  let tocResult = Mdast.toc(markdownTree, {maxDepth: 2})
+let loader: Loader.t<loaderData> = async ({request}) => {
+  let {pathname} = WebAPI.URL.make(~url=request.url)
+  Console.log(pathname)
+  let mdx = await loadMdx(request)
 
-  let headers = Js.Dict.empty()
+  // TODO: actually render the blog pages
+  if pathname->String.includes("blog") {
+    let res: loaderData = {
+      __raw: mdx.__raw,
+      attributes: mdx.attributes,
+      entries: [],
+      categories: [],
+    }
 
-  Mdast.reduceHeaders(tocResult.map, headers)
+    res
+  } else {
+    let categories = {
+      if pathname->String.includes("docs/manual/api") {
+        Console.log(apiTableOfContents())
+        []
+      } else if pathname->String.includes("docs/manual") {
+        manualTableOfContents()
+      } else {
+        []
+      }
+    }
 
-  let entries =
-    headers
-    ->Dict.toArray
-    ->Array.map(((header, url)): TableOfContents.entry => {
-      header,
-      href: (url :> string),
-    })
-    ->Array.slice(~start=2) // skip first two entries which are the document entry and the H1 title for the page, we just want the h2 sections
+    // TODO: this can be optionally called if we need markdown
+    // TODO: extract this out into a separate function
+    let fileContents = await allMdx
+    ->Array.filter(mdx => (mdx.path :> string)->String.includes(pathname))
+    ->Array.get(0)
+    ->Option.map(mdx => mdx.path)
+    ->Option.map(path => Node.Fs.readFile((path :> string), "utf-8"))
+    ->Option.getOrThrow
+
+    let markdownTree = Mdast.fromMarkdown(fileContents)
+    let tocResult = Mdast.toc(markdownTree, {maxDepth: 2})
+
+    let headers = Js.Dict.empty()
+
+    Mdast.reduceHeaders(tocResult.map, headers)
+
+    let entries =
+      headers
+      ->Dict.toArray
+      ->Array.map(((header, url)): TableOfContents.entry => {
+        header,
+        href: (url :> string),
+      })
+      ->Array.slice(~start=2) // skip first two entries which are the document entry and the H1 title for the page, we just want the h2 sections
+
+    let res: loaderData = {
+      __raw: mdx.__raw,
+      attributes: mdx.attributes,
+      entries,
+      categories,
+    }
 
-  let res: loaderData = {
-    __raw: mdx.__raw,
-    attributes: mdx.attributes,
-    entries,
-    categories,
+    res
   }
-  res
 }
 
 let default = () => {

docs/manual/async-await.mdx

@@ -6,7 +6,7 @@ section: "Language Features"
 order: 22
 ---
 
-<!-- This prelude is used in many different followup examples, so we use it to shorten the noise of the example code. -->
+{/* This prelude is used in many different followup examples, so we use it to shorten the noise of the example code. */}
 
 <div className="hidden">
 
@@ -17,7 +17,7 @@ order: 22
 
 </div>
 
-<!-- See https://github.com/cristianoc/rescript-compiler-experiments/pull/1#issuecomment-1131182023 for all async/await use-case examples -->
+{/* See https://github.com/cristianoc/rescript-compiler-experiments/pull/1#issuecomment-1131182023 for all async/await use-case examples */}
 
 # Async / Await
 

docs/manual/bind-to-global-js-values.mdx

@@ -150,4 +150,4 @@ if (match !== undefined) {
 
 </CodeTab>
 
-<!-- TODO: revamp this page. Not good. Tell to use globalThis["foo"], and look in our stdlib -->
+{/* TODO: revamp this page. Not good. Tell to use globalThis["foo"], and look in our stdlib */}

docs/manual/bind-to-js-function.mdx

@@ -342,7 +342,7 @@ function register(rl) {
 
 </CodeTab>
 
-<!-- TODO: GADT phantom type -->
+{/* TODO: GADT phantom type */}
 
 ## Fixed Arguments
 
@@ -465,7 +465,7 @@ function test(dom) {
 
 Currently 4 directives are supported: `null_to_opt`, `undefined_to_opt`, `nullable` and `identity`.
 
-<!-- When the return type is unit: the compiler will append its return value with an OCaml unit literal to make sure it does return unit. Its main purpose is to make the user consume FFI in idiomatic OCaml code, the cost is very very small and the compiler will do smart optimizations to remove it when the returned value is not used (mostly likely). -->
+{/* When the return type is unit: the compiler will append its return value with an OCaml unit literal to make sure it does return unit. Its main purpose is to make the user consume FFI in idiomatic OCaml code, the cost is very very small and the compiler will do smart optimizations to remove it when the returned value is not used (mostly likely). */}
 
 `identity` will make sure that compiler will do nothing about the returned value. It is rarely used, but introduced here for debugging purpose.
 

docs/manual/bind-to-js-object.mdx

@@ -17,7 +17,7 @@ JavaScript objects are a combination of several use-cases:
 
 ReScript cleanly separates the binding methods for JS object based on these 4 use-cases. This page documents the first three. Binding to JS module objects is described in the [Import from/Export to JS](import-from-export-to-js.md) section.
 
-<!-- TODO: mention scope here too? -->
+{/* TODO: mention scope here too? */}
 
 ## Bind to Record-like JS Objects
 

docs/manual/build-performance.mdx

@@ -21,8 +21,6 @@ Sometime your build can be slow due to some confused infra setups. We provide an
 
 Run the above command at your ReScript project's root; it'll spit out a JSON file you can drag and drop into `chrome://tracing`.
 
-import Image from "src/components/Image";
-
 <Image
   withShadow={true}
   src="/static/img/bstracing.png"
@@ -53,7 +51,7 @@ Cleaning the artifacts should be instantaneous.
 
 We've stress-tested `rescript.exe` on a big project of 10,000 files (2 directories, 5000 files each, first 5000 no dependencies, last 5000 10 dependencies on files from the former directory) using https://github.com/rescript-lang/build-benchmark, on a Retina Macbook Pro Early 2015 (3.1 GHz Intel Core i7).
 
-<!-- TODO: better repro -->
+{/* TODO: better repro */}
 
 - No-op build of 10k files: `800ms` (the minimum amount of time required to check the mtimes of 10k files).
 - Clean build: \<3 minutes.

docs/manual/generate-converters-accessors.mdx

@@ -17,7 +17,7 @@ order: 12
 
 These particular ones are no longer needed. Select a doc version lower than `9.0` in the sidebar to see their old docs.
 
-<!-- TODO: genType -->
+{/* TODO: genType */}
 
 When using ReScript, you will sometimes come into situations where you want to
 

docs/manual/interop-cheatsheet.mdx

@@ -14,18 +14,18 @@ This is a glossary with examples. All the features are described by later pages.
 
 > **Note:** In ReScript < 8.3, all our attributes started with the `bs.` prefix. This is no longer needed and our formatter automatically removes them in newer ReScript versions.
 
-<!-- Synced from https://github.com/rescript-lang/syntax/blob/123760c5a264da5288eeee5213ddd25eb86d62fe/src/res_printer.ml#L19-L51 -->
+{/* Synced from https://github.com/rescript-lang/syntax/blob/123760c5a264da5288eeee5213ddd25eb86d62fe/src/res_printer.ml#L19-L51 */}
 
 ### Attributes
 
 - `@as`: [here](attribute#usage), [here](bind-to-js-function#fixed-arguments), [here](bind-to-js-function#constrain-arguments-better) and [here](generate-converters-accessors#usage-3)
 - [`@deriving`](generate-converters-accessors#generate-functions--plain-values-for-variants)
 - [`@get`](bind-to-js-object#bind-using-special-bs-getters--setters)
 - [`@get_index`](bind-to-js-object#bind-using-special-bs-getters--setters)
-<!-- - `@ignore` -->
+{/* - `@ignore` */}
 - [`@inline`](inlining-constants)
 - [`@int`](bind-to-js-function#constrain-arguments-better)
-<!-- - `@meth` -->
+{/* - `@meth` */}
 - [`@module`](import-from-export-to-js#import-a-javascript-modules-content)
 - [`@new`](bind-to-js-object#bind-to-a-js-object-thats-a-class)
 - [`@optional`](generate-converters-accessors#optional-labels)

docs/manual/object.mdx

@@ -15,7 +15,7 @@ ReScript objects are like [records](record.md), but:
 - Doesn't support updates unless the object comes from the JS side.
 - Doesn't support [pattern matching](pattern-matching-destructuring).
 
-<!-- TODO: support update man -->
+{/* TODO: support update man */}
 
 Although ReScript records compile to clean JavaScript objects, ReScript objects are a better candidate for emulating/binding to JS objects, as you'll see.
 
@@ -40,7 +40,7 @@ type person = {
 
 Visually similar to record type's syntax, with the field names quoted.
 
-<!-- TODO: document {.} and {..} -->
+{/* TODO: document {.} and {..} */}
 
 ## Creation
 

docs/manual/primitive-types.mdx

@@ -10,7 +10,7 @@ order: 4
 
 ReScript comes with the familiar primitive types like `string`, `int`, `float`, etc.
 
-<!-- TODO: doc unit -->
+{/* TODO: doc unit */}
 
 ## String