{
{React.string("Write in ReScript")}
- {HighlightJs.renderHLJS(~darkmode=true, ~code=example.res, ~lang="res", ())}
+
@@ -63,12 +31,15 @@ let make = () => {
{React.string("Compile to JavaScript")}
- {HighlightJs.renderHLJS(~darkmode=true, ~code=example.js, ~lang="js", ())}
+
{React.string("Edit this example in Playground")}
diff --git a/apps/docs/src/components/LandingPagePlayground.resi b/apps/docs/src/components/LandingPagePlayground.resi
index 1ca44ce26..fa01d2021 100644
--- a/apps/docs/src/components/LandingPagePlayground.resi
+++ b/apps/docs/src/components/LandingPagePlayground.resi
@@ -1,2 +1,9 @@
+type playgroundData = {
+ rescriptHtml: string,
+ javascriptHtml: string,
+ playgroundHref: string,
+}
+
+/** Render only trusted highlighted markup produced by the homepage loader. */
@react.component
-let make: unit => React.element
+let make: (~playgroundData: playgroundData) => React.element
diff --git a/apps/docs/src/data/LandingPagePlaygroundLoader.res b/apps/docs/src/data/LandingPagePlaygroundLoader.res
new file mode 100644
index 000000000..c8f946591
--- /dev/null
+++ b/apps/docs/src/data/LandingPagePlaygroundLoader.res
@@ -0,0 +1,57 @@
+type example = {
+ res: string,
+ js: string,
+}
+
+let example = {
+ res: `module Button = {
+ @react.component
+ let make = (~count) => {
+ let times = switch count {
+ | 1 => "once"
+ | 2 => "twice"
+ | n => n->Int.toString ++ " times"
+ }
+ let text = \`Click me $\{times\}\`
+
+
+ }
+}`,
+ js: `import * as JsxRuntime from "react/jsx-runtime";
+
+function Playground$Button(props) {
+ let count = props.count;
+ let times = count !== 1 ? (
+ count !== 2 ? count.toString() + " times" : "twice"
+ ) : "once";
+ let text = "Click me " + times;
+ return JsxRuntime.jsx("button", {
+ children: text
+ });
+}
+
+let Button = {
+ make: Playground$Button
+};
+
+export {
+ Button,
+}`,
+}
+
+let build = (): LandingPagePlayground.playgroundData => {
+ // Keep prerendering independent of global language registration and other routes.
+ let highlighter = HighlightJsBindings.make()
+ highlighter->HighlightJsBindings.registerLanguage("rescript", HighlightJsBindings.rescript)
+ highlighter->HighlightJsBindings.registerLanguage("javascript", HighlightJsBindings.javascript)
+
+ {
+ rescriptHtml: (
+ highlighter->HighlightJsBindings.highlight(example.res, {language: "rescript"})
+ ).value,
+ javascriptHtml: (
+ highlighter->HighlightJsBindings.highlight(example.js, {language: "javascript"})
+ ).value,
+ playgroundHref: `/try?code=${LzString.lzString.compressToEncodedURIComponent(example.res)}`,
+ }
+}
diff --git a/apps/docs/src/data/LandingPagePlaygroundLoader.resi b/apps/docs/src/data/LandingPagePlaygroundLoader.resi
new file mode 100644
index 000000000..407a5e468
--- /dev/null
+++ b/apps/docs/src/data/LandingPagePlaygroundLoader.resi
@@ -0,0 +1,2 @@
+/** Build trusted highlighted markup and the share URL for the fixed homepage example. */
+let build: unit => LandingPagePlayground.playgroundData
diff --git a/apps/docs/test-utils/LandingPageFixture.res b/apps/docs/test-utils/LandingPageFixture.res
new file mode 100644
index 000000000..b2a5ce3e4
--- /dev/null
+++ b/apps/docs/test-utils/LandingPageFixture.res
@@ -0,0 +1,36 @@
+let expectedExample = `module Button = {
+ @react.component
+ let make = (~count) => {
+ let times = switch count {
+ | 1 => "once"
+ | 2 => "twice"
+ | n => n->Int.toString ++ " times"
+ }
+ let text = \`Click me $\{times\}\`
+
+
+ }
+}`
+
+let expectedJavascript = `import * as JsxRuntime from "react/jsx-runtime";
+
+function Playground$Button(props) {
+ let count = props.count;
+ let times = count !== 1 ? (
+ count !== 2 ? count.toString() + " times" : "twice"
+ ) : "once";
+ let text = "Click me " + times;
+ return JsxRuntime.jsx("button", {
+ children: text
+ });
+}
+
+let Button = {
+ make: Playground$Button
+};
+
+export {
+ Button,
+}`
+
+let playgroundData = LandingPagePlaygroundLoader.build()