refactor: repl reload, examples

packages/docs/pages/examples/examples-menu.json

@@ -1,12 +1,35 @@
 [
   {
-    "id": "hello-world",
-    "title": "Hello World",
-    "description": "The simplest qwik app"
+    "id": "introduction",
+    "title": "Introduction",
+    "apps": [
+      {
+        "id": "hello-world",
+        "title": "Hello World",
+        "description": "The simplest Qwik app."
+      }
+    ]
   },
   {
-    "id": "counter",
-    "title": "Counter",
-    "description": "A simple standard counter example"
+    "id": "reactivity",
+    "title": "Reactivity",
+    "apps": [
+      {
+        "id": "counter",
+        "title": "Counter",
+        "description": "A simple standard counter example."
+      }
+    ]
+  },
+  {
+    "id": "visibility",
+    "title": "Visibility",
+    "apps": [
+      {
+        "id": "clock",
+        "title": "Below the fold Clock",
+        "description": "Component which requires lazy initialization when it comes into view."
+      }
+    ]
   }
 ]

packages/docs/pages/playground/hello-world/app.tsx → packages/docs/pages/examples/introduction/hello-world/app.tsx

@@ -1,5 +1,5 @@
 import { component$ } from '@builder.io/qwik';
 
 export const App = component$(() => {
-  return <div>Hello Qwik</div>;
+  return <p>Hello Qwik</p>;
 });

packages/docs/pages/examples/visibility/clock/app.tsx

@@ -0,0 +1,56 @@
+import { component$, useStore, useStyles$, useClientEffect$ } from '@builder.io/qwik';
+import styles from './clock.css';
+
+export const App = component$(() => {
+  const items = new Array(40).fill(null).map((_, index) => 'item ' + index);
+
+  return (
+    <div>
+      <p>This is an example of Lazy executing code on component when component becomes visible.</p>
+
+      <p>
+        ⬇️ <strong>Scroll down</strong> until the clock is in view.
+      </p>
+
+      <ul>
+        {items.map((i) => (
+          <li>{i}</li>
+        ))}
+      </ul>
+
+      <Clock />
+    </div>
+  );
+});
+
+export const Clock = component$(() => {
+  useStyles$(styles);
+
+  const store = useStore({
+    hour: 10,
+    minute: 20,
+    second: 30,
+  });
+
+  useClientEffect$(() => {
+    const tmrId = setInterval(() => {
+      const now = new Date();
+      store.second = (now.getSeconds() * 60) / 360;
+      store.minute = (now.getMinutes() * 60) / 360;
+      store.hour = (now.getHours() * 60) / 360;
+    }, 1000);
+    return () => clearInterval(tmrId);
+  });
+
+  return (
+    <div class="clock">
+      <div class="twelve"></div>
+      <div class="three"></div>
+      <div class="six"></div>
+      <div class="nine"></div>
+      <div class="hour" style={{ transform: `rotate(${store.hour}deg)` }}></div>
+      <div class="minute" style={{ transform: `rotate(${store.minute}deg)` }}></div>
+      <div class="second" style={{ transform: `rotate(${store.second}deg)` }}></div>
+    </div>
+  );
+});

packages/docs/pages/examples/visibility/clock/clock.css

@@ -0,0 +1,92 @@
+/* Clock inspired by: https://paulund.co.uk/create-a-clock-in-css */
+
+.clock {
+  background: #fff;
+  border: 10px solid #7a7a7a;
+  border-radius: 50%;
+  box-sizing: border-box;
+  height: 300px;
+  margin: 0 auto;
+  position: relative;
+  width: 300px;
+}
+
+.twelve,
+.three,
+.six,
+.nine {
+  background: #333;
+  position: absolute;
+}
+
+.twelve,
+.six {
+  height: 10px;
+  width: 4px;
+}
+
+.three,
+.nine {
+  height: 4px;
+  width: 10px;
+}
+
+.twelve {
+  left: 50%;
+  top: -1px;
+}
+
+.three {
+  right: -1px;
+  top: 50%;
+}
+
+.six {
+  left: 50%;
+  bottom: -1px;
+}
+
+.nine {
+  left: -1px;
+  top: 50%;
+}
+
+.hour {
+  height: 120px;
+  width: 4px;
+  background: #333;
+  position: absolute;
+  left: 50%;
+  top: 20px;
+  animation: tick 43200s infinite linear;
+  -webkit-animation: tick 43200s infinite linear;
+}
+
+.minute {
+  height: 100px;
+  width: 4px;
+  background: #777;
+  position: absolute;
+  left: 50%;
+  top: 40px;
+  animation: tick 3600s infinite linear;
+  -webkit-animation: tick 3600s infinite linear;
+}
+
+.second {
+  height: 60px;
+  width: 4px;
+  background: #fc0505;
+  position: absolute;
+  left: 50%;
+  top: 80px;
+  animation: tick 60s infinite linear;
+  -webkit-animation: tick 60s infinite linear;
+}
+
+.hour,
+.minute,
+.second {
+  transform-origin: 2px 100%;
+  -webkit-transform-origin: 2px 100%;
+}

packages/docs/pages/playground/counter/root.tsx → packages/docs/pages/examples/visibility/clock/root.tsx

@@ -4,7 +4,7 @@ export const Root = () => {
   return (
     <html>
       <head>
-        <title>Counter</title>
+        <title>Clockk</title>
       </head>
       <body>
         <App />

packages/docs/pages/tutorial/tutorial-menu.json

@@ -2,7 +2,7 @@
   {
     "id": "introduction",
     "title": "Introduction",
-    "tutorials": [
+    "apps": [
       {
         "id": "basics",
         "title": "Basics",
@@ -22,7 +22,7 @@
   {
     "id": "reactivity",
     "title": "Reactivity",
-    "tutorials": [
+    "apps": [
       {
         "id": "assignments",
         "title": "Assignments"

packages/docs/public/_headers

@@ -1,6 +1,6 @@
 /build/*
   Cache-Control: public, max-age=31536000, s-maxage=31536000, immutable
 
-/repl/
+/repl/repl-server
   Cross-Origin-Embedder-Policy: require-corp
   Cross-Origin-Resource-Policy: cross-origin