create-qwik 0.21.0 → 0.22.0-dev20230314171944

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

@@ -0,0 +1,15 @@
+.hero {
+  color: white;
+  display: flex;
+  vertical-align: middle;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  align-items: center;
+  height: 300px;
+  justify-content: center;
+  gap: 30px;
+}
+
+.hero button {
+  padding: 10px 40px;
+}

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

@@ -0,0 +1,55 @@
+import { component$, $, useStylesScoped$ } from '@builder.io/qwik';
+import styles from './hero.css?inline';
+
+export default component$(() => {
+  useStylesScoped$(styles);
+  return (
+    <div class="hero">
+      <h1>Welcome to qwik</h1>
+      <button
+        onClick$={() => {
+          party();
+        }}
+      >
+        Time to celebrate 🎉
+      </button>
+    </div>
+  );
+});
+
+export const party = $(() => {
+  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,
+    },
+  };
+
+  function shoot() {
+    // @ts-ignore
+    confetti({
+      ...defaults,
+      particleCount: 80,
+      scalar: 1.2,
+    });
+
+    // @ts-ignore
+    confetti({
+      ...defaults,
+      particleCount: 60,
+      scalar: 0.75,
+    });
+  }
+
+  setTimeout(shoot, 0);
+  setTimeout(shoot, 100);
+  setTimeout(shoot, 200);
+  setTimeout(shoot, 300);
+  setTimeout(shoot, 400);
+});

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

@@ -2,19 +2,19 @@ export const QwikLogo = () => (
   <svg width="100" height="35" 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="black"
+      fill="white"
     />
     <path
       d="M91.133 11.1426C93.4033 17.4406 95.3242 23.7386 96.993 30.0948C99.205 23.5836 101.087 17.2856 102.542 11.1426H108.15C110.265 17.4406 112.031 23.7386 113.447 30.0948C115.97 23.196 117.949 16.8787 119.404 11.1426H125.71C123.033 20.173 120.064 28.777 116.785 36.8966H109.256C108.402 32.3039 107.044 26.7617 105.22 20.1536C104.056 25.2889 102.445 30.8893 100.33 36.8966H92.8018C90.2793 27.5174 87.5434 18.9522 84.6328 11.1426H91.133Z"
-      fill="black"
+      fill="white"
     />
     <path
       d="M132.832 7.55758C129.999 7.55758 129.203 6.85996 129.203 3.97257C129.203 1.39523 130.018 0.794495 132.832 0.794495C135.665 0.794495 136.46 1.39523 136.46 3.97257C136.46 6.85996 135.665 7.55758 132.832 7.55758ZM129.649 11.1426H136.053V36.8966H129.649V11.1426Z"
-      fill="black"
+      fill="white"
     />
     <path
       d="M166.303 11.1426C161.763 17.5956 158.581 21.5295 156.815 22.9441C158.27 23.8937 162.17 28.8933 167.002 36.916H159.628C153.613 27.7887 150.742 23.8549 149.325 23.2542V36.916H142.922V0H149.325V23.2348C150.78 22.169 153.963 18.1382 158.872 11.1426H166.303Z"
-      fill="black"
+      fill="white"
     />
     <path
       d="M40.973 52.5351L32.0861 43.6985L31.9503 43.7179V43.621L13.0511 24.9595L17.708 20.4637L14.9721 4.76715L1.99103 20.8513C-0.220992 23.0798 -0.628467 26.7036 0.962635 29.3778L9.07337 42.8265C10.3152 44.9 12.566 46.1402 14.9915 46.1208L19.0081 46.082L40.973 52.5351Z"

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

@@ -0,0 +1,12 @@
+.infobox {
+  font-size: 0.8rem;
+  line-height: 2;
+}
+
+.infobox h3 {
+  color: #333;
+  font-size: 1rem;
+  font-weight: 400;
+  margin: 0 0 15px;
+  padding: 0;
+}

package/starters/apps/basic/src/components/infobox/infobox.tsx

@@ -0,0 +1,14 @@
+import { Slot, component$, useStylesScoped$ } from '@builder.io/qwik';
+import styles from './infobox.css?inline';
+
+export default component$(() => {
+  useStylesScoped$(styles);
+  return (
+    <div class="infobox">
+      <h3>
+        <Slot name="title" />
+      </h3>
+      <Slot />
+    </div>
+  );
+});

package/starters/apps/basic/src/components/router-head/router-head.tsx

@@ -12,7 +12,7 @@ export const RouterHead = component$(() => {
     <>
       <title>{head.title}</title>
 
-      <link rel="canonical" href={loc.url.href} />
+      <link rel="canonical" href={loc.href} />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 

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

@@ -0,0 +1,13 @@
+.getting-started {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 120px;
+  line-height: 1.5;
+}
+
+.getting-started .hint {
+  margin-top: 10px;
+  font-size: 0.8rem;
+}

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

@@ -0,0 +1,93 @@
+import {
+  component$,
+  $,
+  useOnWindow,
+  useSignal,
+  useStylesScoped$,
+  useTask$,
+} from '@builder.io/qwik';
+import { isBrowser } from '@builder.io/qwik/build';
+import styles from './starter.css?inline';
+import { useLocation } from '@builder.io/qwik-city';
+
+export const GETTING_STARTED_STEPS = [
+  {
+    message: '<b>Ready</b> to make some changes?<br />Press and hold the <b>ALT</b> key',
+  },
+  {
+    message: 'Select the title of this page while keeping the <b>ALT</b> key pressed',
+    hint: 'Edit the title and save the changes. If your editor does not open, have a look at <a href="https://github.com/yyx990803/launch-editor#supported-editors" target="_blank">this page</a> to set the correct <code>LAUNCH_EDITOR</code> value.',
+  },
+  {
+    message:
+      '<b>Update</b> now the <code>routeLoader$</code> defined in the <code>src/routes/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> ✨',
+  },
+  {
+    message: 'Time to have a look at <b>Forms</b>',
+    hint: 'Open <a href="/todolist" target="_blank">the TODO list App</a> and add some items to the list. Try the same with disabled JavaScript 🐰',
+  },
+  {
+    message: '<b>Congratulations!</b> You are now familiar with the basics! 🎉',
+    hint: "If you need further info on how to use qwik, have a look at <a href='https://qwik.builder.io' target='_blank'>qwik.builder.io</a> or join the <a href='https://qwik.builder.io/chat' target='_blank'>Discord channel</a>.",
+  },
+];
+
+export default component$(() => {
+  useStylesScoped$(styles);
+
+  const loc = useLocation();
+  let stepParam = loc.url.searchParams.has('step')
+    ? parseInt(loc.url.searchParams.get('step') || '0') - 1
+    : 0;
+
+  if (stepParam < 0 || stepParam >= GETTING_STARTED_STEPS.length) {
+    stepParam = 0;
+  }
+
+  const gettingStartedStep = useSignal(stepParam);
+
+  useTask$(({ track }) => {
+    track(() => gettingStartedStep.value);
+    if (isBrowser) {
+      // pushState to update the URL
+      const url = new URL(window.location.href);
+      url.searchParams.set('step', gettingStartedStep.value + 1 + '');
+      window.history.pushState({}, '', url);
+    }
+  });
+
+  useOnWindow(
+    'keydown',
+    $((e) => {
+      if ((e as KeyboardEvent).key === 'Alt') {
+        gettingStartedStep.value = 1;
+      }
+    })
+  );
+
+  return (
+    <>
+      <div class="getting-started">
+        <div dangerouslySetInnerHTML={GETTING_STARTED_STEPS[gettingStartedStep.value].message} />
+        <span
+          class="hint"
+          dangerouslySetInnerHTML={GETTING_STARTED_STEPS[gettingStartedStep.value].hint}
+        />
+      </div>
+      {gettingStartedStep.value + 1 < GETTING_STARTED_STEPS.length ? (
+        <button class="gray small" onClick$={() => gettingStartedStep.value++}>
+          Continue with Step {gettingStartedStep.value + 2} of {GETTING_STARTED_STEPS.length}
+        </button>
+      ) : (
+        <button class="gray small" onClick$={() => (gettingStartedStep.value = 0)}>
+          Re-Start
+        </button>
+      )}
+    </>
+  );
+});

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

@@ -14,113 +14,144 @@
 }
 
 body {
-  background-color: #fafafa;
+  background: linear-gradient(90deg, rgba(24, 182, 246, 0.3) 0%, rgba(172, 127, 244, 0.3) 100%);
+  /* background-color: #e1e1e1; */
   font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
-  padding: 20px 20px 40px 20px;
+  font-weight: 200;
+  padding: 60px 0px;
 }
 
-main {
-  max-width: 760px;
-  margin: 0 auto;
-  background-color: white;
-  border-radius: 5px;
-  box-shadow: 0px 0px 130px -50px var(--qwik-light-purple);
-  overflow: hidden;
+h1,
+h2,
+h3 {
+  font-weight: 100;
 }
 
-h1,
-h2 {
-  margin: 0 0 5px 0;
+h1 b,
+h2 b,
+h3 b {
+  font-weight: 300;
 }
 
-.lightning {
-  filter: hue-rotate(180deg);
+h1 {
+  color: white;
+  font-size: 3rem;
+  padding: 0;
+  margin: 0;
 }
 
-section {
-  padding: 20px;
-  border-bottom: 10px solid var(--qwik-dark-blue);
+h1.hero {
+  margin: 60px 0;
 }
 
-ul {
-  list-style-type: square;
-  margin: 5px 0 30px 0;
-  padding-left: 25px;
+h2 {
+  color: var(--qwik-dark-purple);
 }
 
-li {
-  padding: 8px 0;
+input[type='text'],
+button {
+  background-color: transparent;
+  color: white;
+  border: 1px solid white;
+  border-radius: 12px;
+  font-size: 1rem;
+  padding: 10px 20px;
 }
 
-li::marker {
-  color: var(--qwik-light-blue);
+button {
+  cursor: pointer;
 }
 
-a,
-a:visited {
-  color: var(--qwik-dark-blue);
+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;
 }
 
-table.commands {
-  margin: 0 0 30px 0;
+.section.bright {
+  background: white;
 }
 
-.commands td {
-  padding: 5px;
+.section.dark {
+  background: rgba(50, 50, 50, 0.5);
 }
 
-.commands td:first-child {
-  white-space: nowrap;
-  padding-right: 20px;
+code {
+  background: rgba(230, 230, 230, 0.3);
+  border-radius: 4px;
+  padding: 2px 6px;
 }
 
-code {
-  font-family: Menlo, Monaco, Courier New, monospace;
-  font-size: 0.9em;
-  background-color: rgb(224, 224, 224);
-  padding: 2px 4px;
-  border-radius: 3px;
-  border-bottom: 2px solid #bfbfbf;
+ul {
+  margin: 0;
+  padding-left: 20px;
 }
 
-footer {
-  padding: 15px;
+.page {
+  width: 70vw;
+  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: 30px 70px;
+}
+
+.container.center {
   text-align: center;
-  font-size: 0.8em;
 }
 
-footer a {
-  text-decoration: none;
+.container.mh-300 {
+  min-height: 300px;
 }
 
-footer a:hover {
-  text-decoration: underline;
+.topics {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 20px;
 }
 
-a.mindblow,
-a.todolist {
-  margin: 10px auto;
-  display: block;
-  background: var(--qwik-dark-purple);
-  padding: 10px 20px 14px;
-  border-radius: 10px;
-  border: 0;
-  color: white;
-  text-decoration: none;
-  font-size: 20px;
-  width: fit-content;
-  box-shadow: inset 0px -4px 0px black;
-  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:24px;'><text y='50%'>🤯</text></svg>")
-      16 0,
-    auto; /*!emojicursor.app*/
-}
-
-a.mindblow:hover,
-a.todolist:hover {
-  box-shadow: inset 0px 4px 0px white;
-  padding: 14px 20px 10px;
+/* 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");
 }

package/starters/apps/basic/src/root.tsx

@@ -17,6 +17,8 @@ export default component$(() => {
       <head>
         <meta charSet="utf-8" />
         <link rel="manifest" href="/manifest.json" />
+        {/* REMOVE  THIS LINE BELOW IF YOUR APP DOES NOT LIKE CONFETTI 🤓 */}
+        <script src="https://cdn.jsdelivr.net/npm/canvas-confetti@1.5.1/dist/confetti.browser.min.js"></script>
         <RouterHead />
       </head>
       <body lang="en">

package/starters/apps/basic/src/routes/flower/index.tsx

@@ -20,36 +20,38 @@ export default component$(() => {
   });
 
   return (
-    <>
-      <input
-        type="range"
-        value={state.number}
-        max={50}
-        onInput$={(ev) => {
-          state.number = (ev.target as HTMLInputElement).valueAsNumber;
-        }}
-      />
-      <div
-        style={{
-          '--state': `${state.count * 0.1}`,
-        }}
-        class={{
-          host: true,
-          pride: loc.url.searchParams.get('pride') === 'true',
-        }}
-      >
-        {Array.from({ length: state.number }, (_, i) => (
-          <div
-            key={i}
-            class={{
-              square: true,
-              odd: i % 2 === 0,
-            }}
-            style={{ '--index': `${i + 1}` }}
-          />
-        )).reverse()}
+    <div class="section">
+      <div class="container center">
+        <input
+          type="range"
+          value={state.number}
+          max={50}
+          onInput$={(ev) => {
+            state.number = (ev.target as HTMLInputElement).valueAsNumber;
+          }}
+        />
+        <div
+          style={{
+            '--state': `${state.count * 0.1}`,
+          }}
+          class={{
+            host: true,
+            pride: loc.query.get('pride') === 'true',
+          }}
+        >
+          {Array.from({ length: state.number }, (_, i) => (
+            <div
+              key={i}
+              class={{
+                square: true,
+                odd: i % 2 === 0,
+              }}
+              style={{ '--index': `${i + 1}` }}
+            />
+          )).reverse()}
+        </div>
       </div>
-    </>
+    </div>
   );
 });