create-qwik 0.103.0-dev20230421164933 → 0.103.0-dev20230425141617

package/starters/apps/basic/src/components/starter/gauge/index.tsx

@@ -0,0 +1,32 @@
+import { component$ } from '@builder.io/qwik';
+import styles from './gauge.module.css';
+
+export default component$(({ value = 50 }: { value?: number }) => {
+  const safeValue = value < 0 || value > 100 ? 50 : value;
+
+  return (
+    <div class={styles.wrapper}>
+      <svg viewBox="0 0 120 120" class={styles.gauge}>
+        <defs>
+          <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+            <stop offset="0%" stop-color="#18B6F6" />
+            <stop offset="1000%" stop-color="#AC7FF4" />
+          </linearGradient>
+        </defs>
+
+        <circle r="56" cx="60" cy="60" stroke-width="8" style="fill: #000; stroke: #0000"></circle>
+
+        <circle
+          r="56"
+          cx="60"
+          cy="60"
+          stroke-width="8"
+          style={`transform: rotate(-87.9537deg); stroke-dasharray: ${
+            safeValue * 3.51
+          }, 351.858; fill:none; transform-origin:50% 50%; stroke-linecap:round; stroke:url(#gradient)`}
+        ></circle>
+      </svg>
+      <span class={styles.value}>{safeValue}</span>
+    </div>
+  );
+});

package/starters/apps/basic/src/components/starter/header/header.module.css

@@ -1,35 +1,40 @@
-.header {
+.wrapper {
   display: flex;
   align-items: center;
-  padding: 20px 10px 0;
+  justify-content: space-between;
 }
 
-.header .logo a {
+.logo {
   display: inline-block;
 }
+.logo a {
+  display: block;
+}
 
 .header ul {
   margin: 0;
+  padding: 0;
   list-style: none;
-  flex: 1;
-  text-align: right;
+  display: flex;
+  gap: 30px;
 }
 
 .header li {
   display: none;
   margin: 0;
   padding: 0;
+  font-size: 0.7rem;
 }
 
 .header li a {
   color: white;
   display: inline-block;
-  padding: 0 1em;
+  padding: 0;
   text-decoration: none;
 }
 
 .header li a:hover {
-  color: var(--qwik-dark-purple);
+  color: var(--qwik-light-blue);
 }
 
 @media (min-width: 450px) {
@@ -37,9 +42,3 @@
     display: inline-block;
   }
 }
-
-@media (min-width: 768px) {
-  .header {
-    padding: 20px 70px 0;
-  }
-}

package/starters/apps/basic/src/components/starter/header/header.tsx

@@ -5,28 +5,30 @@ import styles from './header.module.css';
 export default component$(() => {
   return (
     <header class={styles.header}>
-      <div class={styles.logo}>
-        <a href="/" title="qwik">
-          <QwikLogo />
-        </a>
-      </div>
-      <ul>
-        <li>
-          <a href="https://qwik.builder.io/docs/components/overview/" target="_blank">
-            Docs
-          </a>
-        </li>
-        <li>
-          <a href="https://qwik.builder.io/examples/introduction/hello-world/" target="_blank">
-            Examples
+      <div class={['container', styles.wrapper]}>
+        <div class={styles.logo}>
+          <a href="/" title="qwik">
+            <QwikLogo height={50} width={143} />
           </a>
-        </li>
-        <li>
-          <a href="https://qwik.builder.io/tutorial/welcome/overview/" target="_blank">
-            Tutorials
-          </a>
-        </li>
-      </ul>
+        </div>
+        <ul>
+          <li>
+            <a href="https://qwik.builder.io/docs/components/overview/" target="_blank">
+              Docs
+            </a>
+          </li>
+          <li>
+            <a href="https://qwik.builder.io/examples/introduction/hello-world/" target="_blank">
+              Examples
+            </a>
+          </li>
+          <li>
+            <a href="https://qwik.builder.io/tutorial/welcome/overview/" target="_blank">
+              Tutorials
+            </a>
+          </li>
+        </ul>
+      </div>
     </header>
   );
 });

package/starters/apps/basic/src/components/starter/hero/hero.module.css

@@ -1,21 +1,33 @@
 .hero {
-  color: white;
   display: flex;
   vertical-align: middle;
   flex-direction: column;
   flex-wrap: nowrap;
   align-items: center;
-  height: 200px;
+  height: 450px;
   justify-content: center;
-  gap: 30px;
+  gap: 40px;
 }
 
-.hero button {
-  padding: 10px 40px;
+.hero p {
+  color: white;
+  margin: 0;
+  font-size: 1rem;
 }
 
-@media screen (min-width: 768px) {
+.button-group {
+  display: flex;
+  flex-direction: row;
+  gap: 24px;
+}
+
+@media screen and (min-width: 768px) {
   .hero {
-    height: 300px;
+    gap: 60px;
+    height: 500px;
+  }
+
+  .hero p {
+    font-size: 1.3rem;
   }
 }

package/starters/apps/basic/src/components/starter/hero/hero.tsx

@@ -3,63 +3,73 @@ import styles from './hero.module.css';
 
 export default component$(() => {
   return (
-    <div class={styles.hero}>
-      <h1>Welcome to qwik</h1>
-      <button
-        onClick$={async () => {
-          const defaults = {
-            spread: 360,
-            ticks: 70,
-            gravity: 0,
-            decay: 0.95,
-            startVelocity: 30,
-            colors: ['006ce9', 'ac7ff4', '18b6f6', '713fc2', 'ffffff'],
-            origin: {
-              x: 0.5,
-              y: 0.245,
-            },
-          };
+    <div class={['container', styles.hero]}>
+      <h1>
+        So <span class="highlight">fantastic</span>
+        <br />
+        to have <span class="highlight">you</span> here
+      </h1>
+      <p>Have fun building your App with Qwik.</p>
+      <div class={styles['button-group']}>
+        <button
+          onClick$={async () => {
+            const defaults = {
+              spread: 360,
+              ticks: 70,
+              gravity: 0,
+              decay: 0.95,
+              startVelocity: 30,
+              colors: ['006ce9', 'ac7ff4', '18b6f6', '713fc2', 'ffffff'],
+              origin: {
+                x: 0.5,
+                y: 0.35,
+              },
+            };
 
-          function loadConfetti() {
-            return new Promise<(opts: any) => void>((resolve, reject) => {
-              if ((globalThis as any).confetti) {
-                return resolve((globalThis as any).confetti as any);
-              }
-              const script = document.createElement('script');
-              script.src =
-                'https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js';
-              script.onload = () => resolve((globalThis as any).confetti as any);
-              script.onerror = reject;
-              document.head.appendChild(script);
-              script.remove();
-            });
-          }
+            function loadConfetti() {
+              return new Promise<(opts: any) => void>((resolve, reject) => {
+                if ((globalThis as any).confetti) {
+                  return resolve((globalThis as any).confetti as any);
+                }
+                const script = document.createElement('script');
+                script.src =
+                  'https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js';
+                script.onload = () => resolve((globalThis as any).confetti as any);
+                script.onerror = reject;
+                document.head.appendChild(script);
+                script.remove();
+              });
+            }
 
-          const confetti = await loadConfetti();
+            const confetti = await loadConfetti();
 
-          function shoot() {
-            confetti({
-              ...defaults,
-              particleCount: 80,
-              scalar: 1.2,
-            });
+            function shoot() {
+              confetti({
+                ...defaults,
+                particleCount: 80,
+                scalar: 1.2,
+              });
 
-            confetti({
-              ...defaults,
-              particleCount: 60,
-              scalar: 0.75,
-            });
-          }
+              confetti({
+                ...defaults,
+                particleCount: 60,
+                scalar: 0.75,
+              });
+            }
 
-          setTimeout(shoot, 0);
-          setTimeout(shoot, 100);
-          setTimeout(shoot, 200);
-          setTimeout(shoot, 300);
-          setTimeout(shoot, 400);
-        }}
-      >
-        Time to celebrate 🎉
-      </button>
+            setTimeout(shoot, 0);
+            setTimeout(shoot, 100);
+            setTimeout(shoot, 200);
+            setTimeout(shoot, 300);
+            setTimeout(shoot, 400);
+          }}
+        >
+          Time to celebrate
+        </button>
+        <a href="https://qwik.builder.io/docs" target="_blank" class="button button-dark">
+          Explore the docs
+        </a>
+      </div>
     </div>
   );
 });

package/starters/apps/basic/src/components/starter/icons/qwik.tsx

@@ -1,5 +1,11 @@
-export const QwikLogo = () => (
-  <svg width="100" height="35" viewBox="0 0 167 53" fill="none" xmlns="http://www.w3.org/2000/svg">
+export const QwikLogo = ({ width = 100, height = 35 }: { width?: number; height?: number }) => (
+  <svg
+    width={width}
+    height={height}
+    viewBox="0 0 167 53"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
     <path
       d="M81.9545 46.5859H75.5513V35.4045C73.4363 36.8579 71.0496 37.5749 68.4884 37.5749C65.0151 37.5749 62.4344 36.6253 60.8239 34.6487C59.2134 32.6915 58.3984 29.2034 58.3984 24.2231C58.3984 19.1266 59.3492 15.5997 61.2702 13.5456C63.23 11.4721 66.3734 10.4644 70.7004 10.4644C74.7946 10.4644 78.5201 11.0264 81.9545 12.131V46.5859ZM75.5513 16.278C74.096 15.8323 72.4661 15.6191 70.7004 15.6191C68.5272 15.6191 66.9749 16.1811 66.1017 17.3244C65.2479 18.4871 64.7823 20.6962 64.7823 23.9712C64.7823 27.0524 65.1897 29.1065 66.0435 30.2304C66.8973 31.335 68.3719 31.897 70.5452 31.897C73.3781 31.897 75.5513 30.7343 75.5513 29.2809V16.278Z"
       fill="white"

package/starters/apps/basic/src/components/starter/infobox/infobox.module.css

@@ -1,17 +1,21 @@
 .infobox {
+  color: white;
   font-size: 0.8rem;
   line-height: 2;
   margin: 0 0 40px;
 }
 
 .infobox h3 {
-  color: #333;
   font-size: 1rem;
   font-weight: 400;
   margin: 0 0 15px;
   padding: 0;
 }
 
+.infobox li {
+  line-height: 2.5;
+}
+
 @media screen and (min-width: 600px) {
   .infobox {
     margin: 0;

package/starters/apps/basic/src/components/starter/next-steps/next-steps.module.css

@@ -1,19 +1,36 @@
 .gettingstarted {
   display: flex;
+  color: white;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  height: 160px;
+  height: 280px;
   line-height: 1.5;
+  gap: 10px;
+  max-width: 600px;
+  margin: 0 auto;
 }
 
+.gettingstarted .intro {
+  font-size: 1rem;
+  width: 100%;
+  word-break: break-word;
+}
 .gettingstarted .hint {
-  margin-top: 10px;
   font-size: 0.8rem;
 }
+.gettingstarted .hint a {
+  color: var(--qwik-dark-purple);
+}
 
 @media screen and (min-width: 768px) {
   .gettingstarted {
-    height: 120px;
+    height: 180px;
+  }
+  .gettingstarted .intro {
+    font-size: 1.2rem;
+  }
+  .gettingstarted .hint {
+    font-size: 1rem;
   }
 }

package/starters/apps/basic/src/components/starter/next-steps/next-steps.tsx

@@ -3,7 +3,7 @@ import styles from './next-steps.module.css';
 
 export const GETTING_STARTED_STEPS = [
   {
-    message: '<b>Ready</b> to make some changes?<br />Press and hold the <b>ALT</b> key',
+    message: "Press and hold the <b>ALT</b> key to active 'Click-to-Source' mode",
   },
   {
     message: 'Select the title of this page while keeping the <b>ALT</b> key pressed',
@@ -11,12 +11,12 @@ export const GETTING_STARTED_STEPS = [
   },
   {
     message:
-      '<b>Update</b> now the <code>routeLoader$</code> defined in the <code>src/routes/layout.tsx</code> file',
+      '<b>Update</b> now the <code>routeLoader$</code> defined in the <code>src/routes/(starter)/layout.tsx</code> file',
     hint: 'Instead of returning the current date, you could return any possible string.<br />The output is displayed in the footer.',
   },
   {
     message: 'Create a <b>new Route</b> called <code>/me</code>',
-    hint: 'Create a new directory called <code>me</code> in <code>src/routes</code>. Within this directory create a <code>index.tsx</code> file or copy the <code>src/routes/index.tsx</code> file. Your new route is now accessible <a href="/me" target="_blank">here</a> ✨',
+    hint: 'Create a new directory called <code>me</code> in <code>src/routes</code>. Within this directory create a <code>index.tsx</code> file or copy the <code>src/routes/(starter)/index.tsx</code> file. Your new route is now accessible <a href="/me" target="_blank">here</a> ✨',
   },
   {
     message: 'Time to have a look at <b>Forms</b>',
@@ -41,23 +41,31 @@ export default component$(() => {
   );
 
   return (
-    <>
+    <div class="container container-purple container-center">
+      <h2>
+        Time for a quick
+        <br />
+        <span class="highlight">qwik intro</span>?
+      </h2>
       <div class={styles.gettingstarted}>
-        <div dangerouslySetInnerHTML={GETTING_STARTED_STEPS[gettingStartedStep.value].message} />
+        <div
+          class={styles.intro}
+          dangerouslySetInnerHTML={GETTING_STARTED_STEPS[gettingStartedStep.value].message}
+        />
         <span
           class={styles.hint}
           dangerouslySetInnerHTML={GETTING_STARTED_STEPS[gettingStartedStep.value].hint}
         />
       </div>
       {gettingStartedStep.value + 1 < GETTING_STARTED_STEPS.length ? (
-        <button class="gray small" onClick$={() => gettingStartedStep.value++}>
+        <button class="button-dark" onClick$={() => gettingStartedStep.value++}>
           Continue with Step {gettingStartedStep.value + 2} of {GETTING_STARTED_STEPS.length}
         </button>
       ) : (
-        <button class="gray small" onClick$={() => (gettingStartedStep.value = 0)}>
+        <button class="button-dark" onClick$={() => (gettingStartedStep.value = 0)}>
           Re-Start
         </button>
       )}
-    </>
+    </div>
   );
 });

package/starters/apps/basic/src/global.css

@@ -11,173 +11,23 @@
   --qwik-light-blue: #18b6f6;
   --qwik-light-purple: #ac7ff4;
   --qwik-dark-purple: #713fc2;
+  --qwik-dirty-black: #1d2033;
+  --qwik-dark-background: #151934;
 }
 
-body {
-  background: linear-gradient(90deg, rgba(24, 182, 246, 0.3) 0%, rgba(172, 127, 244, 0.3) 100%);
-  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-  font-weight: 200;
-  padding: 10px 0px;
-}
-
-::selection {
-  background: rgb(8, 2, 61);
-  color: white;
-}
-
-h1,
-h2,
-h3 {
-  font-weight: 100;
-}
-
-h1 b,
-h2 b,
-h3 b {
-  font-weight: 300;
+html {
+  line-height: 1;
+  -webkit-text-size-adjust: 100%;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
+    'Segoe UI Symbol', 'Noto Color Emoji';
 }
 
-h1 {
-  color: white;
-  font-size: 2rem;
+body {
   padding: 0;
   margin: 0;
-}
-
-h1.hero {
-  margin: 60px 0;
-}
-
-h2 {
-  color: var(--qwik-dark-purple);
-}
-
-input[type='text'],
-button {
-  background-color: transparent;
-  color: white;
-  border: 1px solid white;
-  border-radius: 12px;
-  font-size: 1rem;
-  padding: 10px 20px;
-}
-
-button {
-  cursor: pointer;
-}
-
-button:hover {
-  background-color: white;
-  color: var(--qwik-dark-purple);
-}
-
-button.small {
-  border-radius: 6px;
-  font-size: 0.8rem;
-  padding: 5px 10px;
-}
-
-button.gray {
-  border-color: #aaa;
-  color: #aaa;
-}
-
-a,
-a:active,
-a:visited,
-a:hover {
-  color: black;
-  font-weight: 400;
-  text-decoration: none;
-}
-
-.section.bright {
-  background: white;
-}
-
-.section.dark {
-  background: rgba(50, 50, 50, 0.5);
-}
-
-code {
-  background: rgba(230, 230, 230, 0.3);
-  border-radius: 4px;
-  padding: 2px 6px;
-}
-
-ul {
-  margin: 0;
-  padding-left: 20px;
-}
-
-.page {
-  width: 90vw;
-  max-width: 1200px;
-  margin: 0 auto;
-  background: linear-gradient(90deg, rgba(24, 182, 246, 0.6) 0%, rgba(172, 127, 244, 0.6) 100%);
-  overflow: hidden;
-  border-radius: 6px;
-}
-
-.container {
-  padding: 20px 10px;
-}
-
-.container.center {
-  text-align: center;
-}
-
-.container.mh-300 {
-  min-height: 300px;
-}
-
-.topics {
-  display: grid;
-  grid-template-columns: 1fr;
-}
-
-/* used icon pack: https://www.svgrepo.com/collection/phosphor-thin-icons */
-.icon:before {
-  width: 18px;
-  height: 18px;
-  content: '';
-  display: inline-block;
-  margin-right: 5px;
-  position: relative;
-  top: 2px;
-}
-
-.icon-cli:before {
-  background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' width='20px' height='20px' viewBox='0 0 256 256' id='Flat' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M122.499 124.87646a4.00053 4.00053 0 0 1 0 6.24708l-40 32a4.0002 4.0002 0 0 1-4.998-6.24708L113.59668 128 77.501 99.12354a4.0002 4.0002 0 0 1 4.998-6.24708ZM175.99414 156h-40a4 4 0 0 0 0 8h40a4 4 0 1 0 0-8ZM228 56.48535v143.0293A12.49909 12.49909 0 0 1 215.51465 212H40.48535A12.49909 12.49909 0 0 1 28 199.51465V56.48535A12.49909 12.49909 0 0 1 40.48535 44h175.0293A12.49909 12.49909 0 0 1 228 56.48535Zm-8 0A4.49023 4.49023 0 0 0 215.51465 52H40.48535A4.49023 4.49023 0 0 0 36 56.48535v143.0293A4.49023 4.49023 0 0 0 40.48535 204h175.0293A4.49023 4.49023 0 0 0 220 199.51465Z'/%3E%3C/svg%3E");
-}
-
-.icon-apps:before {
-  background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' width='20px' height='20px' viewBox='0 0 256 256' id='Flat' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M216 44.00586H40a12.01375 12.01375 0 0 0-12 12v144a12.01375 12.01375 0 0 0 12 12H216a12.01375 12.01375 0 0 0 12-12v-144A12.01375 12.01375 0 0 0 216 44.00586Zm4 156a4.00458 4.00458 0 0 1-4 4H40a4.00458 4.00458 0 0 1-4-4v-144a4.00458 4.00458 0 0 1 4-4H216a4.00458 4.00458 0 0 1 4 4Zm-144-116a8 8 0 1 1-8-8A7.99977 7.99977 0 0 1 76 84.00586Zm40 0a8 8 0 1 1-8-8A7.99977 7.99977 0 0 1 116 84.00586Z'/%3E%3C/svg%3E");
-}
-
-.icon-community:before {
-  background-image: url("data:image/svg+xml,%3Csvg fill='%23000000' width='20px' height='20px' viewBox='0 0 256 256' id='Flat' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M246.40381 143.19434a4.00061 4.00061 0 0 1-5.60108-.7959A55.57857 55.57857 0 0 0 196 120a4 4 0 0 1 0-8 28 28 0 1 0-27.50732-33.26074 4.00013 4.00013 0 0 1-7.85987-1.49219 36.00191 36.00191 0 1 1 54.06494 37.50513 63.58068 63.58068 0 0 1 32.50147 22.84155A3.99993 3.99993 0 0 1 246.40381 143.19434Zm-57.24268 71.05273a3.9998 3.9998 0 1 1-7.1914 3.50391 60.02582 60.02582 0 0 0-107.93946 0 3.9998 3.9998 0 1 1-7.1914-3.50391 67.56008 67.56008 0 0 1 40.90625-35.20581 44 44 0 1 1 40.50976 0A67.56139 67.56139 0 0 1 189.16113 214.24707ZM128 176a36 36 0 1 0-36-36A36.04061 36.04061 0 0 0 128 176ZM60 112A28 28 0 1 1 87.50732 78.73828a3.99989 3.99989 0 1 0 7.85938-1.49219A36.00177 36.00177 0 1 0 41.30225 114.7522 63.5829 63.5829 0 0 0 8.79883 137.5957a4 4 0 1 0 6.39648 4.80469A55.58072 55.58072 0 0 1 60 120a4 4 0 0 0 0-8Z'/%3E%3C/svg%3E");
-}
-
-@media screen and (min-width: 768px) {
-  body {
-    padding: 60px 0px;
-  }
-
-  h1 {
-    font-size: 3rem;
-  }
-
-  .page {
-    width: 70vw;
-  }
-
-  .container {
-    padding: 30px 70px;
-  }
-
-  .topics {
-    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-    gap: 20px;
-  }
+  line-height: inherit;
 }

package/starters/apps/basic/src/routes/{demo → (starter)/demo}/flower/flower.css

@@ -17,8 +17,12 @@
   contain: strict;
 }
 
+h1 {
+  margin-bottom: 60px;
+}
+
 .input {
-  width: 100%;
+  width: 60%;
 }
 
 .square {