From 1bdc0d32c17cf7951b2dcd7ea035b69bf08647d6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hu=C3=A1ng=20J=C3=B9nli=C3=A0ng?= <jlhwung@gmail.com>
Date: Fri, 3 Mar 2023 16:24:54 -0500
Subject: [PATCH] update landing page examples

---
 js/minirepl.js             | 31 +++++++++++++++++++++++--------
 website/src/pages/index.js |  7 +------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/js/minirepl.js b/js/minirepl.js
index 80af8520d2..c803ecce18 100644
--- a/js/minirepl.js
+++ b/js/minirepl.js
@@ -3,11 +3,19 @@
 import debounce from "lodash.debounce";
 
 const miniReplExamples = [
-  "element.index ?? -1;",
-  "const styles = {\n" + "  ...defaults,\n" + '  color: "#f5da55",\n' + "};",
-  "const city = address?.city",
-  'var name = "Guy Fieri";\nvar place = "Flavortown";\n\n`Hello ${name}, ready for ${place}?`;',
-  'let yourTurn = "Type some code in here!";',
+  `@define("my-element")
+class MyElement {}`,
+  `element
+|> jQuery.parseHTML(match[1], %, true)
+|> jQuery.merge(%);`,
+  `const name = #["Guy Fieri"][0];
+const place = #["Flavortown"][0];
+#{ "Hello": name, "ready for": place }?
+"yes" : "no"`,
+  `let result = do {
+  next(yourTurn);
+  emit("Type some code in here!")
+}`,
 ];
 
 let inEditor;
@@ -43,7 +51,7 @@ function setupEditor(id, readOnly) {
     tabSize: 2,
     useSoftTabs: true,
     useWorker: false,
-    wrap: false,
+    wrap: true,
   });
 
   editor.renderer.setPadding(24);
@@ -110,10 +118,17 @@ function compileCode(sourceEditor, targetEditor) {
     transformed = Babel.transform(sourceEditor.getValue(), {
       presets: [
         "react",
+        "typescript",
         ["env", { targets: "defaults, not ie 11, not ie_mob 11", loose: true }],
       ],
-      plugins: [["external-helpers", { helperVersion: "7.100.0" }]],
-      filename: "repl",
+      plugins: [
+        ["external-helpers", { helperVersion: "7.100.0" }],
+        ["proposal-decorators", { version: "2023-01" }],
+        ["proposal-pipeline-operator", { proposal: "hack", topicToken: "%" }],
+        ["proposal-record-and-tuple"],
+        ["proposal-do-expressions"],
+      ],
+      filename: "repl.tsx",
       babelrc: false,
     });
   } catch (e) {
diff --git a/website/src/pages/index.js b/website/src/pages/index.js
index c0e0e5baaf..b932e333cc 100755
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.js
@@ -1,7 +1,6 @@
 import React, { useEffect } from "react";
 import "../../static/css/index.css";
 import "../../static/css/minirepl.css";
-import "../../../js/minirepl.js";
 import Link from "@docusaurus/Link";
 import BABEL_MINI_REPL from "../../../js/minirepl.js";
 import Translate from "@docusaurus/Translate";
@@ -152,9 +151,6 @@ const ocButton = {
 };
 
 const OpenCollectiveSponsors = ({ language }) => {
-  const { siteConfig } = useDocusaurusContext();
-  const { customFields } = siteConfig;
-
   return (
     <div className="container paddingBottom">
       <div className="wrapper productShowcaseSection">
@@ -236,9 +232,8 @@ const Hero = ({ language }) => (
 
 const Index = ({ language }) => {
   const { siteConfig } = useDocusaurusContext();
-  const { customFields } = siteConfig;
   return (
-    <Layout title={siteConfig?.title} description={siteConfig?.tagline}>
+    <Layout title={siteConfig.title} description={siteConfig.tagline}>
       <div>
         <Hero language={language} />