Fix quarkiverse#729: Simplify and fix Vite Code Start

melloware · Jul 23, 2024 · c914eec · c914eec
1 parent 7f1d49f
commit c914eec
Show file tree

Hide file tree

Showing 10 changed files with 872 additions and 941 deletions.
diff --git a/runtime/src/main/codestarts/quarkus/quinoa-codestart/base/src/main/webui/counter.js b/runtime/src/main/codestarts/quarkus/quinoa-codestart/base/src/main/webui/counter.js
@@ -0,0 +1,9 @@
+export function setupCounter(element) {
+  let counter = 0
+  const setCounter = (count) => {
+    counter = count
+    element.innerHTML = `count is ${counter}`
+  }
+  element.addEventListener('click', () => setCounter(counter + 1))
+  setCounter(0)
+}
diff --git a/runtime/src/main/codestarts/quarkus/quinoa-codestart/base/src/main/webui/index.html b/runtime/src/main/codestarts/quarkus/quinoa-codestart/base/src/main/webui/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Quinoa App</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/main.js"></script>
+  </body>
+</html>
diff --git a/runtime/src/main/codestarts/quarkus/quinoa-codestart/base/src/main/webui/main.js b/runtime/src/main/codestarts/quarkus/quinoa-codestart/base/src/main/webui/main.js
@@ -1,22 +1,24 @@
-import theaterJS from 'theaterjs';
+import './style.css'
+import javascriptLogo from '/javascript.svg'
+import viteLogo from '/vite.svg'
+import { setupCounter } from './counter.js'
 
-const theater = theaterJS();
+document.querySelector('#app').innerHTML = `
+  <div>
+    <a href="https://vitejs.dev" target="_blank">
+      <img src="${viteLogo}" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript" target="_blank">
+      <img src="${javascriptLogo}" class="logo vanilla" alt="JavaScript logo" />
+    </a>
+    <h1>Hello Quinoa!</h1>
+    <div class="card">
+      <button id="counter" type="button"></button>
+    </div>
+    <p class="read-the-docs">
+      Click on the Vite logo to learn more
+    </p>
+  </div>
+`
 
-theater
-    .on('type:start, erase:start', function() { theater.getCurrentActor().$element.classList.add('actor-content--typing');})
-    .on('type:end, erase:end', function() {theater.getCurrentActor().$element.classList.remove('actor-content--typing');});
-
-theater
-    .addActor('Quarkus', { speed: 1, accuracy: 0.7 })
-    .addActor('Me', { speed: 0.9, accuracy: 0.8 })
-    .addScene('Quarkus:Toc toc.', 1000)
-    .addScene('Me:What?', 500)
-    .addScene('Quarkus:You will eat Quinoa today!', 200)
-    .addScene('Me:Nooo...', -3, '!!! ', 150, 'No! ', 150)
-    .addScene('Me:Yuk! That\'s impossible!', 100)
-    .addScene('Quarkus:It is time!', 100)
-    .addScene('Quarkus:With your training and this power,', 100)
-    .addScene('Quarkus:You will create awesome web apps.', 100)
-    .addScene('Quarkus:It is your destiny!', 200)
-    .addScene('Quarkus:Meet Quarkus UI with NO hAssle!', 200)
-    .addScene('Me:Neat!', 200)
+setupCounter(document.querySelector('#counter'))