working on tables

Author: jderochervlk

app/routes/MdxRoute.res

@@ -40,6 +40,7 @@ let components = {
   "UrlBox": Markdown.UrlBox.make,
   "Video": Markdown.Video.make,
   "Warn": Markdown.Warn.make,
+  "MarkdownTable": Markdown.MarkdownTable.make,
 }
 
 // The loadAllMdx function logs out all of the file contents as it reads them, which is noisy and not useful.

docs/manual/overview.mdx

@@ -2,7 +2,7 @@
 title: "Overview"
 metaTitle: "Language Features Overview"
 description: "A quick overview on ReScript's syntax"
-canonical: "/docs/manual/overview"
+canonical: "/docs/manual/v12.0.0/overview"
 section: "Language Features"
 order: 1
 ---
@@ -13,39 +13,53 @@ order: 1
 
 ### Semicolon
 
+<MarkdownTable>
+{`
 | JavaScript                         | ReScript             |
 | ---------------------------------- | -------------------- |
 | Rules enforced by linter/formatter | No semicolon needed! |
+`}</MarkdownTable>
 
 ### Comments
 
+<MarkdownTable>
+{`
 | JavaScript           | ReScript                         |
 | -------------------- | -------------------------------- |
 | `// Line comment`    | Same                             |
 | `/* Comment */`      | Same                             |
 | `/** Doc Comment */` | `/** Before Types/Values */`     |
 |                      | `/*** Standalone Doc Comment */` |
+`}</MarkdownTable>
 
 ### Variable
 
+<MarkdownTable>
+{`
 | JavaScript              | ReScript                              |
 | ----------------------- | ------------------------------------- |
 | `const x = 5;`          | `let x = 5`                           |
 | `var x = y;`            | No equivalent (thankfully)            |
 | `let x = 5; x = x + 1;` | `let x = ref(5); x := x.contents + 1` |
+`}</MarkdownTable>
 
 ### String & Character
 
+<MarkdownTable>
+{`
 | JavaScript                   | ReScript              |
 | ---------------------------- | --------------------- |
 | `"Hello world!"`             | Same                  |
 | `'Hello world!'`             | Strings must use `"`  |
 | `"hello " + "world"`         | `"hello " ++ "world"` |
 | `` `hello ${message}` ``     | Same                  |
 | `` sql`select ${fnName};` `` | Same                  |
+`}</MarkdownTable>
 
 ### Boolean
 
+<MarkdownTable>
+{`
 | JavaScript                           | ReScript                                       |
 | ------------------------------------ | ---------------------------------------------- |
 | `true`, `false`                      | Same                                           |
@@ -54,64 +68,83 @@ order: 1
 | `a === b`, `a !== b`                 | Same                                           |
 | No deep equality (recursive compare) | `a == b`, `a != b`                             |
 | `a == b`                             | No equality with implicit casting (thankfully) |
+`}</MarkdownTable>
 
 ### Number
 
+<MarkdownTable>
+{`
 | JavaScript  | ReScript     |
 | ----------- | ------------ |
 | `3`         | Same \*      |
 | `3.1415`    | Same         |
 | `3 + 4`     | Same         |
 | `3.0 + 4.5` | `3.0 +. 4.5` |
 | `5 % 3`     | `mod(5, 3)`  |
+`}</MarkdownTable>
 
 \* JS has no distinction between integer and float.
 
 ### Object/Record
 
+<MarkdownTable>
+{`
 | JavaScript          | ReScript                                |
 | ------------------- | --------------------------------------- |
 | no types            | `type point = {x: int, mutable y: int}` |
 | `{x: 30, y: 20}`    | Same                                    |
 | `point.x`           | Same                                    |
 | `point.y = 30;`     | Same                                    |
 | `{...point, x: 30}` | Same                                    |
+`}</MarkdownTable>
 
 ### Array
 
+<MarkdownTable>
+{`
 | JavaScript         | ReScript              |
 | ------------------ | --------------------- |
 | `[1, 2, 3]`        | Same                  |
 | `myArray[1] = 10`  | Same                  |
 | `[1, "Bob", true]` | `(1, "Bob", true)` \* |
 
 \* ReScript does not have heterogenous arrays. Use tuples or [Untagged Variants](variant#untagged-variants) instead.
+`}</MarkdownTable>
 
 ### Null
 
+<MarkdownTable>
+{`
 | JavaScript          | ReScript  |
 | ------------------- | --------- |
 | `null`, `undefined` | `None` \* |
+`}</MarkdownTable>
 
 \* Again, only a spiritual equivalent; we don't have nulls, nor null bugs! But we do have an `option` type for when you actually need nullability.
 
 ### Function
 
+<MarkdownTable>
+{`
 | JavaScript                      | ReScript                     |
 | ------------------------------- | ---------------------------- |
 | `arg => retVal`                 | Same                         |
 | `function named(arg) {...}`     | `let named = (arg) => {...}` |
 | `const f = function(arg) {...}` | `let f = (arg) => {...}`     |
 | `add(4, add(5, 6))`             | Same                         |
+`}</MarkdownTable>
 
 ### Async Function / Await
 
+<MarkdownTable>
+{`
 | JavaScript                              | ReScript                                              |
 | --------------------------------------- | ----------------------------------------------------- |
 | `async (arg) => {...}`                  | Same                                                  |
 | `async function named(arg) {...}`       | `let named = async (arg) => {...}`                    |
 | `await somePromise`                     | Same                                                  |
 | `async (arg): Promise<string> => {...}` | `async (arg): string => {...}` (note the return type) |
+`}</MarkdownTable>
 
 ### Blocks
 
@@ -148,49 +181,64 @@ order: 1
 
 ### If-else
 
+<MarkdownTable>
+{`
 | JavaScript            | ReScript                                                                          |
 | --------------------- | --------------------------------------------------------------------------------- |
 | `if (a) {b} else {c}` | `if a {b} else {c}` \*                                                            |
 | `a ? b : c`           | Same                                                                              |
 | `switch`              | `switch` but [super-powered pattern matching!](pattern-matching-destructuring.md) |
+`}</MarkdownTable>
 
 \* Our conditionals are always expressions! You can write `let result = if a {"hello"} else {"bye"}`
 
 ### Destructuring
 
+<MarkdownTable>
+{`
 | JavaScript                    | ReScript                    |
 | ----------------------------- | --------------------------- |
 | `const {a, b} = data`         | `let {a, b} = data`         |
 | `const [a, b] = data`         | `let [a, b] = data` \*      |
 | `const {a: aa, b: bb} = data` | `let {a: aa, b: bb} = data` |
+`}</MarkdownTable>
 
 \* Gives good compiler warning that `data` might not be of length 2.
 
 ### Loop
 
+<MarkdownTable>
+{`
 | JavaScript                            | ReScript                     |
 | ------------------------------------- | ---------------------------- |
 | `for (let i = 0; i <= 10; i++) {...}` | `for i in 0 to 10 {...}`     |
 | `for (let i = 10; i >= 0; i--) {...}` | `for i in 10 downto 0 {...}` |
 | `while (true) {...}`                  | `while true {...}`           |
+`}</MarkdownTable>
 
 ### JSX
 
+<MarkdownTable>
+{`
 | JavaScript                                | ReScript                   |
 | ----------------------------------------- | -------------------------- |
 | `<Comp message="hi" onClick={handler} />` | Same                       |
 | `<Comp message={message} />`              | `<Comp message />` \*      |
 | `<input checked />`                       | `<input checked=true />`   |
 | No children spread                        | `<Comp>...children</Comp>` |
+`}</MarkdownTable>
 
 \* Argument punning!
 
 ### Exception
 
+<MarkdownTable>
+{`
 | JavaScript                                | ReScript                                         |
 | ----------------------------------------- | ------------------------------------------------ |
 | `throw new SomeError(...)`                | `throw(SomeException(...))`                      |
 | `try {a} catch (err) {...} finally {...}` | `try a catch { \| SomeException(err) => ...}` \* |
+`}</MarkdownTable>
 
 \* No finally.
 
@@ -231,6 +279,8 @@ The last expression of a block delimited by `{}` implicitly returns (including f
 
 ## Common Features' JS Output
 
+<MarkdownTable>
+{`
 | Feature                         | Example                              | JavaScript Output                          |
 | ------------------------------- | ------------------------------------ | ------------------------------------------ |
 | String                          | `"Hello"`                            | `"Hello"`                                  |
@@ -253,5 +303,6 @@ The last expression of a block delimited by `{}` implicitly returns (including f
 | Record                          | `type t = {b: int}; let a = {b: 10}` | `var a = {b: 10}`                          |
 | Multiline Comment               | `/* Comment here */`                 | Not in output                              |
 | Single line Comment             | `// Comment here`                    | Not in output                              |
+`}</MarkdownTable>
 
 _Note that this is a cleaned-up comparison table; a few examples' JavaScript output are slightly different in reality._

package-lock.json

@@ -45,6 +45,8 @@
     "mdast": "^2.3.2",
     "mdast-util-from-markdown": "^2.0.2",
     "mdast-util-toc": "^7.1.0",
+    "micromark": "^4.0.2",
+    "micromark-extension-gfm": "^3.0.0",
     "next": "^15.4.7",
     "next-mdx-remote": "^5.0.0",
     "react": "^19.1.0",
@@ -87,4 +89,4 @@
     "tailwindcss": "^4",
     "vite": "^7.0.6"
   }
-}
+}

package.json

@@ -561,3 +561,43 @@ module Video = {
 /* Sets our preferred branded styles
    We most likely will never need a different ~components
    option on our website. */
+
+module MarkdownTable = {
+  // react-router-mdx doesn't support gfm tables natively yet, so this is a simple table wrapper for us to do it manually
+  // If it ever adds support, we can remove this component
+
+  type extension
+  type htmlExtension
+
+  @module("micromark-extension-gfm")
+  external gfmHtml: unit => htmlExtension = "gfmHtml"
+
+  @module("micromark-extension-gfm")
+  external gfm: unit => extension = "gfm"
+
+  type micromarkOptions = {
+    extensions: array<extension>,
+    htmlExtensions: array<htmlExtension>,
+  }
+
+  @module("micromark")
+  external micromark: (string, micromarkOptions) => string = "micromark"
+
+  @react.component
+  let make = (~children) => {
+    let html = micromark(
+      children,
+      {
+        extensions: [gfm()],
+        htmlExtensions: [gfmHtml()],
+      },
+    )
+    <div
+      dangerouslySetInnerHTML={{
+        "__html": html,
+      }}
+      className="markdown-table"
+    >
+    </div>
+  }
+}

src/components/Markdown.res

@@ -174,3 +174,8 @@ module Video: {
 /* Sets our preferred branded styles
    We most likely will never need a different ~components
    option on our website. */
+
+module MarkdownTable: {
+  @react.component
+  let make: (~children: string) => React.element
+}

src/components/Markdown.resi

@@ -72,4 +72,20 @@
       }
     }
   }
+}
+
+.markdown-table {
+  @apply overflow-x-auto mt-10 mb-16;
+
+  /* table {
+    @apply
+  } */
+
+  td {
+    @apply border-b border-gray-20 py-3 pr-8;
+  }
+
+  th {
+    @apply py-2 pr-8 text-12 text-gray-60 uppercase font-medium tracking-wide text-left border-b-2 border-gray-20;
+  }
 }