From 5504e0f892df72e40a984094f914bb9468e17503 Mon Sep 17 00:00:00 2001
From: Rusty Key <iam@stfoo.ru>
Date: Wed, 4 Sep 2024 18:20:19 +0200
Subject: [PATCH 1/3] add support for multiple entries to esbuild

---
 commands/reshowcase       |  68 ++++++++++----
 example/Buttons/Huge.re   |  29 ++++++
 example/Buttons/Normal.re |  29 ++++++
 example/Demo.re           | 180 --------------------------------------
 example/dune              |  12 +++
 src/ReshowcaseUi.re       |  16 ++--
 6 files changed, 128 insertions(+), 206 deletions(-)
 create mode 100644 example/Buttons/Huge.re
 create mode 100644 example/Buttons/Normal.re
 delete mode 100644 example/Demo.re

diff --git a/commands/reshowcase b/commands/reshowcase
index 331af47..50f6295 100755
--- a/commands/reshowcase
+++ b/commands/reshowcase
@@ -107,10 +107,32 @@ const watchPlugin = {
 };
 
 // entryPoint passed to htmlPlugin must be relative to the current working directory
-const entryPathRelativeToCwd = path.relative(process.cwd(), entryPath);
+const demoEntry = path.relative(process.cwd(), "/Users/rusty/code/tools/reshowcase/_build/default/example/example/example/Demo.js");
+
+function readJSFilesRecursively(dir, fileList = []) {
+    const files = fs.readdirSync(dir);
+
+    files.forEach(file => {
+        const filePath = path.join(dir, file);
+        const fileName = path.basename(filePath);
+        const stat = fs.statSync(filePath);
+
+        if (stat.isDirectory() && !fileName.startsWith(".")) {
+            readJSFilesRecursively(filePath, fileList);
+        } else if (filePath.endsWith('.js') && path.normalize(demoEntry) != path.normalize(filePath)) {
+            fileList.push(filePath);
+        }
+    });
+
+    return fileList;
+};
+
+const startingDir = path.dirname(demoEntry);
+
+const storiesEntries = readJSFilesRecursively(startingDir);
 
 const defaultConfig = {
-  entryPoints: [entryPath],
+  entryPoints: [demoEntry, ...storiesEntries],
   entryNames: "[name]-[hash]",
   assetNames: "[name]-[hash]",
   chunkNames: "[name]-[hash]",
@@ -148,25 +170,35 @@ const defaultConfig = {
       files: [
         {
           filename: "index.html",
-          entryPoints: [entryPathRelativeToCwd],
+          entryPoints: [demoEntry],
           htmlTemplate: path.join(__dirname, "./ui-template.html"),
           scriptLoading: "module",
         },
-        {
-          filename: "./demo/index.html",
-          entryPoints: [entryPathRelativeToCwd],
-          htmlTemplate: process.argv.find((item) =>
-            item.startsWith("--template=")
-          )
-            ? path.join(
-                process.cwd(),
-                process.argv
-                  .find((item) => item.startsWith("--template="))
-                  .replace(/--template=/, "")
-              )
-            : path.join(__dirname, "./demo-template.html"),
-          scriptLoading: "module",
-        },
+        ...(storiesEntries.map(storyEntry => {
+          const relativePath = path.relative(path.dirname(demoEntry), storyEntry).replace(/\.js$/, "");
+          console.log(relativePath);
+          return {
+            filename: `${relativePath}/index.html`,
+            entryPoints: [storyEntry],
+            htmlTemplate: path.join(__dirname, "./ui-template.html"),
+            scriptLoading: "module",
+          }
+      }))
+        // {
+        //   filename: "./demo/index.html",
+        //   entryPoints: [entryPathRelativeToCwd],
+        //   htmlTemplate: process.argv.find((item) =>
+        //     item.startsWith("--template=")
+        //   )
+        //     ? path.join(
+        //         process.cwd(),
+        //         process.argv
+        //           .find((item) => item.startsWith("--template="))
+        //           .replace(/--template=/, "")
+        //       )
+        //     : path.join(__dirname, "./demo-template.html"),
+        //   scriptLoading: "module",
+        // },
       ],
     }),
     ...(isBuild ? [] : [watchPlugin]),
diff --git a/example/Buttons/Huge.re b/example/Buttons/Huge.re
new file mode 100644
index 0000000..fbc0d92
--- /dev/null
+++ b/example/Buttons/Huge.re
@@ -0,0 +1,29 @@
+module Component = {
+  [@react.component]
+  let make = () => {
+    <button
+      style={ReactDOM.Style.make(
+        ~color="#000",
+        ~border="none",
+        ~padding="20px",
+        ~borderRadius="10px",
+        ~fontFamily="inherit",
+        ~fontSize="inherit",
+        (),
+      )}>
+      "Hello"->React.string
+    </button>;
+  };
+};
+
+switch (ReactDOM.querySelector("body")) {
+| Some(node) =>
+  let root = ReactDOM.Client.createRoot(node);
+  ReactDOM.Client.render(root, <Component />);
+| None =>
+  Js.Console.error(
+    "RR.renderToElementWithId : no element of id '"
+    ++ "body"
+    ++ "' found in the HTML.",
+  )
+};
diff --git a/example/Buttons/Normal.re b/example/Buttons/Normal.re
new file mode 100644
index 0000000..06a143e
--- /dev/null
+++ b/example/Buttons/Normal.re
@@ -0,0 +1,29 @@
+module Component = {
+  [@react.component]
+  let make = () => {
+    <button
+      style={ReactDOM.Style.make(
+        ~color="#000",
+        ~border="none",
+        ~padding="10px",
+        ~borderRadius="10px",
+        ~fontFamily="inherit",
+        ~fontSize="inherit",
+        (),
+      )}>
+      "Hello"->React.string
+    </button>;
+  };
+};
+
+switch (ReactDOM.querySelector("body")) {
+| Some(node) =>
+  let root = ReactDOM.Client.createRoot(node);
+  ReactDOM.Client.render(root, <Component />);
+| None =>
+  Js.Console.error(
+    "RR.renderToElementWithId : no element of id '"
+    ++ "body"
+    ++ "' found in the HTML.",
+  )
+};
diff --git a/example/Demo.re b/example/Demo.re
deleted file mode 100644
index 877d3da..0000000
--- a/example/Demo.re
+++ /dev/null
@@ -1,180 +0,0 @@
-open Reshowcase.Entry;
-
-module Cn = {
-  let ifTrue = (cn, x) => x ? cn : "";
-};
-
-let spaceConcat = (x1, x2) =>
-  switch (x1, x2) {
-  | ("", x)
-  | (x, "") => x
-  | (x1, x2) => x1 ++ " " ++ x2
-  };
-
-let (+++) = spaceConcat;
-
-module Css = {
-  let button = [%cx
-    {|
-    color: #fff;
-    border: none;
-    padding: 10px;
-    border-radius: 10px;
-    font-family: inherit;
-    font-size: inherit;
-  |}
-  ];
-
-  let buttonHuge = [%cx {|
-    padding: 20px;
-    font-size: 30px;
-  |}];
-
-  let buttonDisabled = [%cx {|
-    cursor: default;
-    opacity: 0.5;
-  |}];
-
-  let buttonColor = color => {
-    let color = `hex(color);
-    [%cx {|
-      background-color: $(color);
-    |}];
-  };
-
-  let h1Size = size => {
-    let fontSize = `px(size);
-    [%cx {|
-      font-size: $(fontSize);
-    |}];
-  };
-
-  let code = [%cx
-    {|
-    white-space: pre;
-    padding: 0;
-    background-color: #f5f6f6;
-  |}
-  ];
-};
-
-demo(({addDemo: _, addCategory}) =>
-  addCategory("Buttons", ({addDemo, addCategory: _}) => {
-    addDemo("Normal", ({string, bool, _}) => {
-      let disabled = bool("Disabled", false);
-      let color =
-        string(
-          "Color",
-          ~options=[|
-            ("Red", "E02020"),
-            ("Green", "6DD400"),
-            ("Blue", "0091FF"),
-          |],
-          "0091FF",
-        );
-      <button
-        disabled
-        className={
-          Css.button
-          +++ Css.buttonDisabled->Cn.ifTrue(disabled)
-          +++ Css.buttonColor(color)
-        }>
-        {string("Text", "hello")->React.string}
-      </button>;
-    });
-    addDemo("Huge", ({string, bool, _}) => {
-      let disabled = bool("Disabled", false);
-      let color =
-        string(
-          "Color",
-          ~options=[|
-            ("Red", "E02020"),
-            ("Green", "6DD400"),
-            ("Blue", "0091FF"),
-          |],
-          "0091FF",
-        );
-      <button
-        disabled
-        className={
-          Css.button
-          +++ Css.buttonHuge
-          +++ Css.buttonDisabled->Cn.ifTrue(disabled)
-          +++ Css.buttonColor(color)
-        }>
-        {string("Text", "Hello")->React.string}
-      </button>;
-    });
-  })
-);
-
-demo(({addDemo: _, addCategory}) =>
-  addCategory("Typography", ({addDemo: _, addCategory}) => {
-    addCategory("Headings", ({addDemo, addCategory: _}) => {
-      addDemo("H1", ({string, int, _}) => {
-        let size =
-          int("Font size", {min: 0, max: 100, initial: 30, step: 1});
-
-        <h1 className={Css.h1Size(size)}>
-          {string("Text", "hello")->React.string}
-        </h1>;
-      });
-      addDemo("H2", ({string, _}) =>
-        <h2> {string("Text", "hello")->React.string} </h2>
-      );
-    });
-    addCategory("Text", ({addDemo, addCategory: _}) => {
-      addDemo("Paragraph", ({string, _}) =>
-        <p> {string("Text", "hello")->React.string} </p>
-      );
-      addDemo("Italic", ({string, _}) =>
-        <i> {string("Text", "hello")->React.string} </i>
-      );
-    });
-  })
-);
-
-demo(({addDemo, addCategory: _}) =>
-  addDemo("Code example", _propsApi =>
-    <code className=Css.code>
-      {js|open Reshowcase.Entry;
-
-demo(({addDemo: _, addCategory}) =>
-  addCategory("Typography", ({addDemo: _, addCategory}) => {
-    addCategory("Headings", ({addDemo, addCategory: _}) => {
-      addDemo("H1", ({string, int, _}) => {
-        let size =
-          int("Font size", {min: 0, max: 100, initial: 30, step: 1});
-
-        <h1 className={Css.h1Size(size)}>
-          {string("Text", "hello")->React.string}
-        </h1>;
-      });
-      addDemo("H2", ({string, _}) =>
-        <h2> {string("Text", "hello")->React.string} </h2>
-      );
-    });
-    addCategory("Text", ({addDemo, addCategory: _}) => {
-      addDemo("Paragraph", ({string, _}) =>
-        <p> {string("Text", "hello")->React.string} </p>
-      );
-      addDemo("Italic", ({string, _}) =>
-        <i> {string("Text", "hello")->React.string} </i>
-      );
-    });
-  })
-);|js}
-      ->React.string
-    </code>
-  )
-);
-
-demo(({addDemo: _, addCategory}) =>
-  addCategory("Test search", ({addDemo, addCategory: _}) => {
-    addDemo("OneTwoThreeFour", _ => React.null);
-    addDemo("OneTwoThreeFive", _ => React.null);
-    addDemo("OneTwoFourSeven", _ => React.null);
-  })
-);
-
-start();
diff --git a/example/dune b/example/dune
index a2c3fa7..8ecf26d 100644
--- a/example/dune
+++ b/example/dune
@@ -1,3 +1,10 @@
+(include_subdirs unqualified)
+
+(env
+ (_
+  (flags
+   (-w +a-27))))
+
 (melange.emit
  (target example)
  (alias example)
@@ -5,3 +12,8 @@
  (module_systems es6)
  (preprocess
   (pps melange.ppx reason-react-ppx styled-ppx)))
+
+(rule
+ (targets Demo.re)
+ (action
+  (run reshowcase generate)))
diff --git a/src/ReshowcaseUi.re b/src/ReshowcaseUi.re
index f4fb10d..2fadfb6 100644
--- a/src/ReshowcaseUi.re
+++ b/src/ReshowcaseUi.re
@@ -924,20 +924,20 @@ module DemoUnitFrame = {
   ];
 
   [@react.component]
-  let make =
-      (~queryString: string, ~responsiveMode, ~onLoad: Js.t('a) => unit) => {
-    let iframePath = if (useFullframeUrl) {"demo/index.html"} else {"demo"};
+  let make = (~demoName: string, ~responsiveMode, ~onLoad: Js.t('a) => unit) => {
+    let _iframePath = if (useFullframeUrl) {"demo/index.html"} else {"demo"};
     <div
       name="DemoUnitFrame"
       className={Css.container +++ Css.containerBackground(responsiveMode)}>
       <iframe
         className={Css.iframe(responsiveMode)}
-        src={(iframePath ++ {js|?iframe=true&|js}) ++ queryString}
+        src={"/" ++ demoName}
         onLoad={event => {
           let iframe = event->React.Event.Synthetic.target;
           let window = iframe##contentWindow;
           onLoad(window);
         }}
+        // src={(iframePath ++ {js|?iframe=true&|js}) ++ queryString}
       />
     </div>;
   };
@@ -1011,7 +1011,7 @@ module App = {
 
   type route =
     | Unit(URLSearchParams.t, string)
-    | Demo(string)
+    | Demo(URLSearchParams.t, string)
     | Home;
 
   [@react.component]
@@ -1024,7 +1024,7 @@ module App = {
         urlSearchParams->URLSearchParams.get("demo"),
       ) {
       | (Some("true"), Some(demoName)) => Unit(urlSearchParams, demoName)
-      | (_, Some(_)) => Demo(url.search)
+      | (_, Some(demoName)) => Demo(urlSearchParams, demoName)
       | _ => Home
       };
 
@@ -1090,7 +1090,7 @@ module App = {
             ->Option.map(demoUnit => <DemoUnit demoUnit />)
             ->Option.getWithDefault("Demo not found"->React.string)}
          </div>;
-       | Demo(queryString) =>
+       | Demo(urlSearchParams, demoName) =>
          <>
            <DemoListSidebar
              demos
@@ -1117,7 +1117,7 @@ module App = {
                <div className=Css.demoContents>
                  <DemoUnitFrame
                    key={"DemoUnitFrame" ++ iframeKey}
-                   queryString
+                   demoName
                    responsiveMode
                    onLoad={iframeWindow =>
                      setLoadedIframeWindow(_ => Some(iframeWindow))

From bc608720dd9274b6384ded7b1d1836c6757d5bc3 Mon Sep 17 00:00:00 2001
From: Rusty Key <iam@stfoo.ru>
Date: Wed, 4 Sep 2024 18:50:13 +0200
Subject: [PATCH 2/3] generate Demo.re

---
 commands/reshowcase | 32 +++++++++++++++++++++++++++++++-
 example/dune        | 14 +++++++-------
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/commands/reshowcase b/commands/reshowcase
index 50f6295..f788ea2 100755
--- a/commands/reshowcase
+++ b/commands/reshowcase
@@ -33,13 +33,43 @@ const getRequiredPathValue = (name) => {
 
 const task = process.argv[2];
 
-if (task !== "build" && task !== "start") {
+if (task !== "build" && task !== "start" && task !== "generate-demo") {
   console.error(
     "You need to pass 'start' or 'build' command and path to the entry point.\nFor example: reshowcase start --entry=./example/Demo.bs.js"
   );
   process.exit(1);
 }
 
+if (task == "generate-demo") {
+  console.log(`
+open Reshowcase.Entry;
+
+// - we compile every file as separate bundle
+// - reshowcase looks at folder structure
+// - picks up each file and creates category-demo
+
+demo(({addDemo: _, addCategory}) =>
+  addCategory("Buttons", ({addDemo, addCategory: _}) => {
+    addDemo("Buttons/Normal", _ => React.null);
+    addDemo("Buttons/Huge", _ => React.null);
+  })
+);
+
+demo(({addDemo: _, addCategory}) =>
+  addCategory("----------- 111", ({addDemo: _, addCategory}) => {
+    addCategory("Headings", ({addDemo, addCategory: _}) => {
+      addDemo("H1", _ => React.null);
+      addDemo("H2", _ => React.null);
+    })
+  })
+);
+
+start();
+`)
+
+  process.exit(0);
+}
+
 // Servers can handle paths to HTML files differently.
 // Allow using full path to HTML template in "src" attribute of iframe in case of possible issues.
 const useFullframeUrl = (() => {
diff --git a/example/dune b/example/dune
index 8ecf26d..49608eb 100644
--- a/example/dune
+++ b/example/dune
@@ -1,12 +1,8 @@
 (include_subdirs unqualified)
 
-(env
- (_
-  (flags
-   (-w +a-27))))
-
 (melange.emit
  (target example)
+ (compile_flags -w -27)
  (alias example)
  (libraries reshowcase reason-react styled-ppx.melange)
  (module_systems es6)
@@ -14,6 +10,10 @@
   (pps melange.ppx reason-react-ppx styled-ppx)))
 
 (rule
- (targets Demo.re)
+ (target Demo__.re)
+ (deps
+  (glob_files_rec *[!D][!e][!m][!o][!_][!_].re))
  (action
-  (run reshowcase generate)))
+  (with-stdout-to
+   %{target}
+   (run /Users/rusty/code/tools/reshowcase/commands/reshowcase generate-demo))))

From 355bde3faa20983fdd3b99f633cc25e4ae256763 Mon Sep 17 00:00:00 2001
From: Rusty Key <iam@stfoo.ru>
Date: Wed, 4 Sep 2024 19:39:52 +0200
Subject: [PATCH 3/3] generate paths to stories in a hacky way

---
 commands/reshowcase      | 53 ++++++++++++++++++++++------------------
 example/Typography/H1.re | 29 ++++++++++++++++++++++
 example/dune             |  5 +++-
 src/ReshowcaseUi.re      | 42 +++++++++++++++++++++++++++----
 4 files changed, 99 insertions(+), 30 deletions(-)
 create mode 100644 example/Typography/H1.re

diff --git a/commands/reshowcase b/commands/reshowcase
index f788ea2..22f9e10 100755
--- a/commands/reshowcase
+++ b/commands/reshowcase
@@ -41,31 +41,36 @@ if (task !== "build" && task !== "start" && task !== "generate-demo") {
 }
 
 if (task == "generate-demo") {
-  console.log(`
-open Reshowcase.Entry;
+  const prefix = "--examples-path=";
+  const examplesPathValue = process.argv.find((item) => item.startsWith(prefix))?.replace(prefix, "");
+  const examplesPath = toAbsolutePath(examplesPathValue);
 
-// - we compile every file as separate bundle
-// - reshowcase looks at folder structure
-// - picks up each file and creates category-demo
-
-demo(({addDemo: _, addCategory}) =>
-  addCategory("Buttons", ({addDemo, addCategory: _}) => {
-    addDemo("Buttons/Normal", _ => React.null);
-    addDemo("Buttons/Huge", _ => React.null);
-  })
-);
-
-demo(({addDemo: _, addCategory}) =>
-  addCategory("----------- 111", ({addDemo: _, addCategory}) => {
-    addCategory("Headings", ({addDemo, addCategory: _}) => {
-      addDemo("H1", _ => React.null);
-      addDemo("H2", _ => React.null);
-    })
-  })
-);
+  function readJSFilesRecursively(dir, code = "", level) {
+    const files = fs.readdirSync(dir);
+
+    return files.map(file => {
+      const filePath = path.join(dir, file);
+      const fileName = path.basename(filePath);
+      const stat = fs.statSync(filePath);
+
+      if (stat.isDirectory() && !fileName.startsWith(".")) {
+        const categoryString = `addCategory("${fileName}", ({addDemo, addCategory: _}) => {
+          ${readJSFilesRecursively(filePath, code, level + 1)}
+        })`;
+        return level === 0 ? `demo(({addDemo: _, addCategory}) => ${categoryString} );` : categoryString;
+      } else if (filePath.endsWith('.re')) {
+        return `addDemo("${fileName.replace(/\.re$/, "")}", _ => React.null);`
+      }
+    }).join("\n")
+  };
+
+  const code = readJSFilesRecursively(examplesPath, "", 0)
 
-start();
-`)
+
+  console.log(`// generated from ${examplesPath}
+open Reshowcase.Entry;
+${code}
+start();`)
 
   process.exit(0);
 }
@@ -137,7 +142,7 @@ const watchPlugin = {
 };
 
 // entryPoint passed to htmlPlugin must be relative to the current working directory
-const demoEntry = path.relative(process.cwd(), "/Users/rusty/code/tools/reshowcase/_build/default/example/example/example/Demo.js");
+const demoEntry = path.relative(process.cwd(), "/Users/rusty/code/tools/reshowcase/_build/default/example/example/example/Demo__.js");
 
 function readJSFilesRecursively(dir, fileList = []) {
     const files = fs.readdirSync(dir);
diff --git a/example/Typography/H1.re b/example/Typography/H1.re
new file mode 100644
index 0000000..ee71660
--- /dev/null
+++ b/example/Typography/H1.re
@@ -0,0 +1,29 @@
+module Component = {
+  [@react.component]
+  let make = () => {
+    <h1
+      style={ReactDOM.Style.make(
+        ~color="#000",
+        ~border="none",
+        ~padding="10px",
+        ~borderRadius="10px",
+        ~fontFamily="inherit",
+        ~fontSize="inherit",
+        (),
+      )}>
+      "Hello"->React.string
+    </h1>;
+  };
+};
+
+switch (ReactDOM.querySelector("body")) {
+| Some(node) =>
+  let root = ReactDOM.Client.createRoot(node);
+  ReactDOM.Client.render(root, <Component />);
+| None =>
+  Js.Console.error(
+    "RR.renderToElementWithId : no element of id '"
+    ++ "body"
+    ++ "' found in the HTML.",
+  )
+};
diff --git a/example/dune b/example/dune
index 49608eb..77fdb13 100644
--- a/example/dune
+++ b/example/dune
@@ -16,4 +16,7 @@
  (action
   (with-stdout-to
    %{target}
-   (run /Users/rusty/code/tools/reshowcase/commands/reshowcase generate-demo))))
+   (run
+    /Users/rusty/code/tools/reshowcase/commands/reshowcase
+    generate-demo
+    --examples-path=/Users/rusty/code/tools/reshowcase/example))))
diff --git a/src/ReshowcaseUi.re b/src/ReshowcaseUi.re
index 2fadfb6..1e57f08 100644
--- a/src/ReshowcaseUi.re
+++ b/src/ReshowcaseUi.re
@@ -924,14 +924,22 @@ module DemoUnitFrame = {
   ];
 
   [@react.component]
-  let make = (~demoName: string, ~responsiveMode, ~onLoad: Js.t('a) => unit) => {
+  let make =
+      (
+        ~demoName: string,
+        ~categories,
+        ~responsiveMode,
+        ~onLoad: Js.t('a) => unit,
+      ) => {
     let _iframePath = if (useFullframeUrl) {"demo/index.html"} else {"demo"};
+    let iframePath =
+      "/" ++ (categories |> String.concat("/")) ++ "/" ++ demoName;
     <div
       name="DemoUnitFrame"
       className={Css.container +++ Css.containerBackground(responsiveMode)}>
       <iframe
         className={Css.iframe(responsiveMode)}
-        src={"/" ++ demoName}
+        src=iframePath
         onLoad={event => {
           let iframe = event->React.Event.Synthetic.target;
           let window = iframe##contentWindow;
@@ -1011,20 +1019,43 @@ module App = {
 
   type route =
     | Unit(URLSearchParams.t, string)
-    | Demo(URLSearchParams.t, string)
+    | Demo(URLSearchParams.t, string, list(string))
     | Home;
 
   [@react.component]
   let make = (~demos: Demos.t) => {
     let url = ReasonReactRouter.useUrl();
     let urlSearchParams = url.search->URLSearchParams.make;
+
+    let hackyCategories =
+      urlSearchParams
+      ->URLSearchParams.toArray()
+      ->Belt.Array.keepMap(((k, v)) =>
+          switch (k->Js.String.startsWith(~prefix="category")) {
+          | false => None
+          | true =>
+            switch (
+              k
+              ->Js.String.replace(~search="category", ~replacement="")
+              ->Int.fromString
+            ) {
+            | None => None
+            | Some(catLevel) => Some((catLevel, v))
+            }
+          }
+        )
+      ->Belt.List.fromArray
+      ->Belt.List.sort(((cl1, _), (cl2, _)) => cl2 - cl1)
+      ->Belt.List.map(((_c, v)) => v);
+
     let route =
       switch (
         urlSearchParams->URLSearchParams.get("iframe"),
         urlSearchParams->URLSearchParams.get("demo"),
       ) {
       | (Some("true"), Some(demoName)) => Unit(urlSearchParams, demoName)
-      | (_, Some(demoName)) => Demo(urlSearchParams, demoName)
+      | (_, Some(demoName)) =>
+        Demo(urlSearchParams, demoName, hackyCategories)
       | _ => Home
       };
 
@@ -1090,7 +1121,7 @@ module App = {
             ->Option.map(demoUnit => <DemoUnit demoUnit />)
             ->Option.getWithDefault("Demo not found"->React.string)}
          </div>;
-       | Demo(urlSearchParams, demoName) =>
+       | Demo(urlSearchParams, demoName, categories) =>
          <>
            <DemoListSidebar
              demos
@@ -1118,6 +1149,7 @@ module App = {
                  <DemoUnitFrame
                    key={"DemoUnitFrame" ++ iframeKey}
                    demoName
+                   categories
                    responsiveMode
                    onLoad={iframeWindow =>
                      setLoadedIframeWindow(_ => Some(iframeWindow))