Add more comprehensive examples

.vitepress/config.js

@@ -12,12 +12,14 @@ export default defineConfig({
     // https://vitepress.dev/reference/default-theme-config
     nav: [
       { text: 'Home', link: '/' },
+      { text: "Examples", link: '/code-examples' },
     ],
 
     sidebar: [
       {
         text: 'Examples',
         items: [
+          { text: 'Code Snippet Examples', link: '/code-examples' },
           { text: 'Markdown Examples', link: '/markdown-examples' },
           { text: 'Runtime API Examples', link: '/api-examples' }
         ]

code-examples.md

@@ -0,0 +1,36 @@
+# Code Snippet Examples
+
+## Line highlighting
+
+```reason{3,6-11}
+[@react.component]
+let make = () => {
+  let (counter, setCounter) = React.useState(() => 0);
+
+  <div
+    style={ReactDOMStyle.make(
+      ~padding="1em",
+      ~display="flex",
+      ~gridGap="1em",
+      (),
+    )}>
+    <button onClick={_evt => setCounter(v => v - 1)}>
+      {React.string("-")}
+    </button>
+    <span> {counter |> Int.to_string |> React.string} </span>
+    <button onClick={_evt => setCounter(v => v + 1)}>
+      {React.string("+")}
+    </button>
+  </div>;
+};
+```
+
+## Import from file
+
+<<< @/src/CelsiusConverter.re
+
+## Import region from file
+
+Just the sandwich region and nothing else
+
+<<< @/src/Order.re#sandwich

index.md

@@ -21,32 +21,3 @@ features:
   - title: Feature C
     details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
 ---
-
-Hello World!
-
-What're you looking at?
-
-"Oh no"---is this even working?
-
-```reason
-[@react.component]
-let make = () => {
-  let (counter, setCounter) = React.useState(() => 0);
-
-  <div
-    style={ReactDOMStyle.make(
-      ~padding="1em",
-      ~display="flex",
-      ~gridGap="1em",
-      (),
-    )}>
-    <button onClick={_evt => setCounter(v => v - 1)}>
-      {React.string("-")}
-    </button>
-    <span> {counter |> Int.to_string |> React.string} </span>
-    <button onClick={_evt => setCounter(v => v + 1)}>
-      {React.string("+")}
-    </button>
-  </div>;
-};
-```

markdown-examples.md

@@ -1,6 +1,44 @@
 # Markdown Extension Examples
 
-This page demonstrates some of the built-in markdown extensions provided by VitePress.
+## Nested lists
+
+- foo
+  - seems normal
+- bar
+  - baz
+  - hullo
+    - most secret, inner desires
+
+## Tables
+
+| Title  | Summary | Topics covered |
+| ------ | ------- | -------------- |
+| Counter | Number that can be incremented or decremented | module, Option, pipe last operator, function chaining, switch |
+| Melange Playground | Use Melange Playground to explore OCaml’s numeric types | Playground, Int, Float |
+| Celsius Converter | Single input that converts from  Celsius to Fahrenheit | polymorphic object, exception handling, ternary expression, if-else expression, labeled argument, partial application |
+| Celsius Converter using Option | The same component from the last chapter but replacing exception handling with Option | Option, Option.map, when guard |
+
+## Typographer
+
+What're you looking at?
+
+Gazing at the mirror, she suddenly exclaimed "Oh no!"
+
+The potion---is it even working?
+
+## Footnotes
+
+https://github.com/markdown-it/markdown-it-footnote
+
+Here is a footnote reference,[^1] and another.[^longnote]
+
+[^1]: Here is the footnote.
+
+[^longnote]: Here's one with multiple blocks.
+
+    Subsequent paragraphs are indented to show that they
+belong to the previous footnote.
+
 
 ## Syntax Highlighting
 

src/CelsiusConverter.re

@@ -0,0 +1,34 @@
+let getValueFromEvent = (evt): string => ReactEvent.Form.target(evt)##value;
+
+let convert = celsius => 9.0 /. 5.0 *. celsius +. 32.0;
+
+[@react.component]
+let make = () => {
+  let (celsius, setCelsius) = React.useState(() => "");
+
+  <div>
+    <input
+      value=celsius
+      onChange={evt => {
+        let newCelsius = getValueFromEvent(evt);
+        setCelsius(_ => newCelsius);
+      }}
+    />
+    {React.string({js|°C = |js})}
+    {(
+       String.trim(celsius) == ""
+         ? {js|? °F|js}
+         : (
+           switch (celsius |> float_of_string_opt |> Option.map(convert)) {
+           | None => "error"
+           | Some(fahrenheit) when fahrenheit < (-128.6) => {js|Unreasonably cold🥶|js}
+           | Some(fahrenheit) when fahrenheit > 212.0 => {js|Unreasonably hot🥵|js}
+           | Some(fahrenheit) =>
+             Js.Float.toFixedWithPrecision(fahrenheit, ~digits=2)
+             ++ {js| °F|js}
+           }
+         )
+     )
+     |> React.string}
+  </div>;
+};

src/Order.re

@@ -0,0 +1,95 @@
+[%%mel.raw {|import "./order.css"|}];
+
+let sprintf = Printf.sprintf;
+
+// #region sandwich
+module Sandwich = {
+  type t =
+    | Portabello
+    | Ham
+    | Unicorn;
+
+  let toPrice =
+    fun
+    | Portabello => 9.
+    | Ham => 10.
+    | Unicorn => 88.8;
+
+  let toEmoji = t =>
+    sprintf(
+      "%s(%s)",
+      {js|🥪|js},
+      switch (t) {
+      | Portabello => {js|🍄|js}
+      | Ham => {js|🐷|js}
+      | Unicorn => {js|🦄|js}
+      },
+    );
+};
+// #endregion sandwich
+
+module Burger = {
+  type t = {
+    tomatoes: bool,
+    lettuce: bool,
+    bacon: int,
+    onions: int,
+    cheese: int,
+  };
+
+  let toEmoji = ({lettuce, tomatoes, bacon, onions, cheese}) => {
+    let multiple = (str, n) =>
+      switch (n) {
+      | 0 => ""
+      | 1 => str
+      | n => Printf.sprintf("%s%s%d", str, {js|×|js}, n)
+      };
+
+    sprintf(
+      "%s{%s}",
+      {js|🍔|js},
+      [|
+        lettuce ? {js|🥬|js} : "",
+        tomatoes ? {js|🍅|js} : "",
+        multiple({js|🥓|js}, bacon),
+        multiple({js|🧅|js}, onions),
+        multiple({js|🧀|js}, cheese),
+      |]
+      |> Js.Array.filter(str => str != "")
+      |> Js.Array.joinWith(", "),
+    );
+  };
+
+  let toPrice = ({bacon, onions, cheese, _}) =>
+    15.
+    +. float_of_int(bacon)
+    *. 0.5
+    +. float_of_int(onions)
+    *. 0.2
+    +. float_of_int(cheese)
+    *. 0.1;
+};
+
+type t =
+  | Hotdog
+  | Sandwich(Sandwich.t)
+  | Burger(Burger.t);
+
+let toPrice =
+  fun
+  | Hotdog => 5.
+  | Sandwich(s) => Sandwich.toPrice(s)
+  | Burger(b) => Burger.toPrice(b);
+
+let toEmoji =
+  fun
+  | Hotdog => {js|🌭|js}
+  | Sandwich(s) => Sandwich.toEmoji(s)
+  | Burger(b) => Burger.toEmoji(b);
+
+[@react.component]
+let make = (~order: t) =>
+  <tr className="order">
+    <td className="emoji"> {order |> toEmoji |> React.string} </td>
+    <td className="price"> {order |> toPrice |> Format.currency} </td>
+  </tr>;