create-qwik 0.103.0-dev20230421164933 → 0.103.0-dev20230425141617

package/starters/apps/basic/src/routes/(starter)/demo/flower/index.tsx

@@ -0,0 +1,64 @@
+import { component$, useVisibleTask$, useStore, useStylesScoped$ } from '@builder.io/qwik';
+import { type DocumentHead, useLocation } from '@builder.io/qwik-city';
+import styles from './flower.css?inline';
+
+export default component$(() => {
+  useStylesScoped$(styles);
+  const loc = useLocation();
+
+  const state = useStore({
+    count: 0,
+    number: 20,
+  });
+
+  useVisibleTask$(({ cleanup }) => {
+    const timeout = setTimeout(() => (state.count = 1), 500);
+    cleanup(() => clearTimeout(timeout));
+
+    const internal = setInterval(() => state.count++, 7000);
+    cleanup(() => clearInterval(internal));
+  });
+
+  return (
+    <div class="container container-center">
+      <div role="presentation" class="ellipsis"></div>
+      <h1>
+        <span class="highlight">Generate</span> Flowers
+      </h1>
+
+      <input
+        class="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>
+    </div>
+  );
+});
+
+export const head: DocumentHead = {
+  title: 'Qwik Flower',
+};

package/starters/apps/basic/src/routes/(starter)/demo/todolist/index.tsx

@@ -0,0 +1,74 @@
+import { component$ } from '@builder.io/qwik';
+import {
+  type DocumentHead,
+  routeLoader$,
+  routeAction$,
+  zod$,
+  z,
+  Form,
+} from '@builder.io/qwik-city';
+import styles from './todolist.module.css';
+
+interface ListItem {
+  text: string;
+}
+
+export const list: ListItem[] = [];
+
+export const useListLoader = routeLoader$(() => {
+  return list;
+});
+
+export const useAddToListAction = routeAction$(
+  (item) => {
+    list.push(item);
+    return {
+      success: true,
+    };
+  },
+  zod$({
+    text: z.string().trim().min(1),
+  })
+);
+
+export default component$(() => {
+  const list = useListLoader();
+  const action = useAddToListAction();
+
+  return (
+    <>
+      <div class="container container-center">
+        <h1>
+          <span class="highlight">TODO</span> List
+        </h1>
+      </div>
+
+      <div role="presentation" class="ellipsis"></div>
+
+      <div class="container container-center">
+        {(list.value.length && (
+          <ul class={styles.list}>
+            {list.value.map((item, index) => (
+              <li key={`items-${index}`}>{item.text}</li>
+            ))}
+          </ul>
+        )) || <span class={styles.empty}>No items found</span>}
+      </div>
+
+      <div class="container container-center">
+        <Form action={action} spaReset>
+          <input type="text" name="text" required class={styles.input} />{' '}
+          <button type="submit" class="button-dark">
+            Add item
+          </button>
+        </Form>
+
+        <p class={styles.hint}>PS: This little app works even when JavaScript is disabled.</p>
+      </div>
+    </>
+  );
+});
+
+export const head: DocumentHead = {
+  title: 'Qwik Todo List',
+};

package/starters/apps/basic/src/routes/(starter)/demo/todolist/todolist.module.css

@@ -0,0 +1,44 @@
+.list {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  color: white;
+}
+
+.list,
+.empty {
+  min-height: 250px;
+}
+
+.list li {
+  list-style: none;
+}
+
+.empty {
+  color: white;
+  display: block;
+}
+
+.input {
+  background: white;
+  color: var(--qwik-light-blue);
+  border: none;
+  border-radius: 8px;
+  padding: 15px 20px;
+  margin-right: 10px;
+  font-size: 0.8rem;
+}
+
+.hint {
+  font-size: 0.8rem;
+  color: white;
+  margin-top: 30px;
+}
+
+@media screen and (min-width: 768px) {
+  .input {
+    padding: 23px 35px;
+    margin-right: 20px;
+    font-size: 1rem;
+  }
+}

package/starters/apps/basic/src/routes/(starter)/index.tsx

@@ -0,0 +1,112 @@
+import { component$ } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
+
+import Counter from '~/components/starter/counter/counter';
+import Hero from '~/components/starter/hero/hero';
+import Infobox from '~/components/starter/infobox/infobox';
+import Starter from '~/components/starter/next-steps/next-steps';
+
+export default component$(() => {
+  return (
+    <>
+      <Hero />
+      <Starter />
+
+      <div role="presentation" class="ellipsis"></div>
+      <div role="presentation" class="ellipsis ellipsis-purple"></div>
+
+      <div class="container container-center container-spacing-xl">
+        <h3>
+          You can <span class="highlight">count</span>
+          <br /> on me
+        </h3>
+        <Counter />
+      </div>
+
+      <div class="container container-flex">
+        <Infobox>
+          <div q:slot="title" class="icon icon-cli">
+            CLI Commands
+          </div>
+          <>
+            <p>
+              <code>npm run dev</code>
+              <br />
+              Starts the development server and watches for changes
+            </p>
+            <p>
+              <code>npm run preview</code>
+              <br />
+              Creates production build and starts a server to preview it
+            </p>
+            <p>
+              <code>npm run build</code>
+              <br />
+              Creates production build
+            </p>
+            <p>
+              <code>npm run qwik add</code>
+              <br />
+              Runs the qwik CLI to add integrations
+            </p>
+          </>
+        </Infobox>
+
+        <div>
+          <Infobox>
+            <div q:slot="title" class="icon icon-apps">
+              Example Apps
+            </div>
+            <p>
+              Have a look at the <a href="/demo/flower">Flower App</a> or the{' '}
+              <a href="/demo/todolist">Todo App</a>.
+            </p>
+          </Infobox>
+
+          <Infobox>
+            <div q:slot="title" class="icon icon-community">
+              Community
+            </div>
+            <ul>
+              <li>
+                <span>Questions or just want to say hi? </span>
+                <a href="https://qwik.builder.io/chat" target="_blank">
+                  Chat on discord!
+                </a>
+              </li>
+              <li>
+                <span>Follow </span>
+                <a href="https://twitter.com/QwikDev" target="_blank">
+                  @QwikDev
+                </a>
+                <span> on Twitter</span>
+              </li>
+              <li>
+                <span>Open issues and contribute on </span>
+                <a href="https://github.com/BuilderIO/qwik" target="_blank">
+                  GitHub
+                </a>
+              </li>
+              <li>
+                <span>Watch </span>
+                <a href="https://qwik.builder.io/media/" target="_blank">
+                  Presentations, Podcasts, Videos, etc.
+                </a>
+              </li>
+            </ul>
+          </Infobox>
+        </div>
+      </div>
+    </>
+  );
+});
+
+export const head: DocumentHead = {
+  title: 'Welcome to Qwik',
+  meta: [
+    {
+      name: 'description',
+      content: 'Qwik site description',
+    },
+  ],
+};

package/starters/apps/basic/src/routes/(starter)/layout.tsx

@@ -0,0 +1,26 @@
+import { component$, Slot, useStyles$ } from '@builder.io/qwik';
+import { routeLoader$ } from '@builder.io/qwik-city';
+
+import Header from '~/components/starter/header/header';
+import Footer from '~/components/starter/footer/footer';
+
+import styles from './styles.css?inline';
+
+export const useServerTimeLoader = routeLoader$(() => {
+  return {
+    date: new Date().toISOString(),
+  };
+});
+
+export default component$(() => {
+  useStyles$(styles);
+  return (
+    <>
+      <Header />
+      <main>
+        <Slot />
+      </main>
+      <Footer />
+    </>
+  );
+});

package/starters/apps/basic/src/routes/(starter)/styles.css

@@ -0,0 +1,232 @@
+/* THIS FILE IS JUST FOR EXAMPLES, DELETE IT IF YOU DON'T NEED IT */
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(/fonts/poppins-400.woff2?v=1) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(/fonts/poppins-500.woff2?v=1) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(/fonts/poppins-700.woff2?v=1) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F,
+    U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+/* SHELL ---------------------------------------- */
+html {
+  font-family: Poppins, 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';
+}
+
+body {
+  background: var(--qwik-dark-background);
+  overflow-x: hidden;
+}
+
+/* HEADINGS ------------------------------------- */
+h1,
+h2,
+h3 {
+  color: white;
+  margin: 0;
+}
+
+h1 {
+  font-size: 3.2rem;
+  text-align: center;
+}
+h1 .highlight,
+h3 .highlight {
+  color: var(--qwik-light-blue);
+}
+
+h2 {
+  font-weight: 400;
+  font-size: 2.4rem;
+}
+h2 .highlight {
+  font-weight: 700;
+}
+
+h3 {
+  font-size: 2rem;
+}
+
+@media screen and (min-width: 768px) {
+  h1 {
+    font-size: 5rem;
+  }
+  h2 {
+    font-size: 3.4rem;
+  }
+  h3 {
+    font-size: 3rem;
+  }
+}
+
+/* TAGS ----------------------------------------- */
+a {
+  text-decoration: none;
+  color: var(--qwik-light-blue);
+}
+
+code {
+  background: rgba(230, 230, 230, 0.3);
+  border-radius: 4px;
+  padding: 2px 6px;
+}
+
+ul {
+  margin: 0;
+  padding-left: 20px;
+}
+
+/* CONTAINER ------------------------------------ */
+.container {
+  margin: 0 auto;
+  padding: 30px 40px;
+}
+.container.container-purple {
+  background: var(--qwik-light-purple);
+}
+.container.container-dark {
+  background: var(--qwik-dark-background);
+}
+.container.container-center {
+  text-align: center;
+}
+.container.container-flex {
+  /* does nothing on mobile */
+}
+.container.container-spacing-xl {
+  padding: 50px 40px;
+}
+
+@media screen and (min-width: 768px) {
+  .container {
+    padding: 50px 80px;
+  }
+  .container.container-spacing-xl {
+    padding: 100px 60px;
+  }
+  .container.container-flex {
+    display: flex;
+    justify-content: center;
+    gap: 60px;
+  }
+}
+
+/* BUTTONS -------------------------------------- */
+a.button,
+button {
+  background: var(--qwik-light-blue);
+  border: none;
+  border-radius: 8px;
+  color: white;
+  cursor: pointer;
+  font-size: 0.8rem;
+  padding: 15px 20px;
+  text-align: center;
+}
+
+a.button.button-dark,
+button.button-dark {
+  background: var(--qwik-dirty-black);
+}
+
+a.button.button-small,
+button.button-small {
+  padding: 15px 25px;
+}
+
+@media screen and (min-width: 768px) {
+  a.button,
+  button {
+    font-size: 1rem;
+    padding: 23px 35px;
+  }
+}
+
+/* DESIGN --------------------------------------- */
+.ellipsis {
+  position: absolute;
+  top: 100px;
+  left: -100px;
+  width: 400px;
+  height: 400px;
+  background: radial-gradient(
+    57.58% 57.58% at 48.79% 42.42%,
+    rgba(24, 180, 244, 0.5) 0%,
+    rgba(46, 55, 114, 0) 63.22%
+  );
+  transform: rotate(5deg);
+  opacity: 0.5;
+  z-index: -1;
+}
+.ellipsis.ellipsis-purple {
+  top: 1350px;
+  left: -100px;
+  background: radial-gradient(
+    50% 50% at 50% 50%,
+    rgba(172, 127, 244, 0.5) 0%,
+    rgba(21, 25, 52, 0) 100%
+  );
+  transform: rotate(-5deg);
+}
+
+@media screen and (min-width: 768px) {
+  .ellipsis {
+    top: -100px;
+    left: 350px;
+    width: 1400px;
+    height: 800px;
+  }
+  .ellipsis.ellipsis-purple {
+    top: 1300px;
+    left: -200px;
+  }
+}
+
+/* used icon pack: https://www.svgrepo.com/collection/phosphor-thin-icons */
+.icon:before {
+  width: 18px;
+  height: 18px;
+  content: '';
+  display: inline-block;
+  margin-right: 20px;
+  position: relative;
+  top: 2px;
+}
+
+.icon-cli:before {
+  background-image: url("data:image/svg+xml,%3Csvg fill='%23ffffff' 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='%23ffffff' 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='%23ffffff' 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/routes/layout.tsx

@@ -1,27 +1,10 @@
 import { component$, Slot } from '@builder.io/qwik';
-import { routeLoader$ } from '@builder.io/qwik-city';
 
-import Header from '~/components/starter/header/header';
-import Footer from '~/components/starter/footer/footer';
-
-export const useServerTimeLoader = routeLoader$(() => {
-  return {
-    date: new Date().toISOString(),
-  };
-});
+/**
+ * create a new `index.tsx` file in the `src/routes` folder
+ * to start building your own app 🚀
+ */
 
 export default component$(() => {
-  return (
-    <div class="page">
-      <main>
-        <Header />
-        <Slot />
-      </main>
-      <div class="section dark">
-        <div class="container">
-          <Footer />
-        </div>
-      </div>
-    </div>
-  );
+  return <Slot />;
 });

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

@@ -1,19 +0,0 @@
-.counter-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 15px;
-}
-
-.counter-value {
-  background: white;
-  border-radius: 12px;
-  color: var(--qwik-light-purple);
-  font-weight: 400;
-  font-size: 2rem;
-  width: 120px;
-}
-
-.counter-value.odd {
-  color: var(--qwik-light-blue);
-}

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

@@ -1,60 +0,0 @@
-import { component$, useVisibleTask$, useStore, useStylesScoped$ } from '@builder.io/qwik';
-import { type DocumentHead, useLocation } from '@builder.io/qwik-city';
-import styles from './flower.css?inline';
-
-export default component$(() => {
-  useStylesScoped$(styles);
-  const loc = useLocation();
-
-  const state = useStore({
-    count: 0,
-    number: 20,
-  });
-
-  useVisibleTask$(({ cleanup }) => {
-    const timeout = setTimeout(() => (state.count = 1), 500);
-    cleanup(() => clearTimeout(timeout));
-
-    const internal = setInterval(() => state.count++, 7000);
-    cleanup(() => clearInterval(internal));
-  });
-
-  return (
-    <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.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>
-      </div>
-    </div>
-  );
-});
-
-export const head: DocumentHead = {
-  title: 'Qwik Flower',
-};