create-qwik 0.103.0 → 0.104.0-dev20230426103638

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

@@ -20,36 +20,40 @@ export default component$(() => {
   });
 
   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 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>
   );

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

@@ -37,32 +37,33 @@ export default component$(() => {
 
   return (
     <>
-      <div class="section">
-        <div class="container center">
-          <h1 class="hero">TODO List</h1>
-        </div>
+      <div class="container container-center">
+        <h1>
+          <span class="highlight">TODO</span> List
+        </h1>
       </div>
 
-      <div class="section bright">
-        <div class="container center mh-300">
-          {(list.value.length && (
-            <ul class={styles.list}>
-              {list.value.map((item, index) => (
-                <li key={`items-${index}`}>{item.text}</li>
-              ))}
-            </ul>
-          )) || <span class="no-content">No items found</span>}
-        </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="section">
-        <div class="container center">
-          <Form action={action} spaReset>
-            <input type="text" name="text" required /> <button type="submit">Add item</button>
-          </Form>
+      <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>
+        <p class={styles.hint}>PS: This little app works even when JavaScript is disabled.</p>
       </div>
     </>
   );

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

@@ -2,12 +2,43 @@
   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/index.tsx

@@ -10,96 +10,91 @@ export default component$(() => {
   return (
     <>
       <Hero />
+      <Starter />
 
-      <div class="section bright">
-        <div class="container center">
-          <Starter />
-        </div>
-      </div>
+      <div role="presentation" class="ellipsis"></div>
+      <div role="presentation" class="ellipsis ellipsis-purple"></div>
 
-      <div class="section">
-        <div class="container center">
-          <h3>
-            You can <b>count</b> on me
-          </h3>
-          <Counter />
-        </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="section">
-        <div class="container topics">
+      <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-cli">
-              CLI Commands
+            <div q:slot="title" class="icon icon-apps">
+              Example Apps
             </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>
-            </>
+            <p>
+              Have a look at the <a href="/demo/flower">Flower App</a> or the{' '}
+              <a href="/demo/todolist">Todo App</a>.
+            </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>
+          <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>
     </>

package/starters/apps/basic/src/routes/layout.tsx

@@ -1,9 +1,11 @@
-import { component$, Slot } from '@builder.io/qwik';
+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(),
@@ -11,17 +13,14 @@ export const useServerTimeLoader = routeLoader$(() => {
 });
 
 export default component$(() => {
+  useStyles$(styles);
   return (
-    <div class="page">
+    <>
+      <Header />
       <main>
-        <Header />
         <Slot />
       </main>
-      <div class="section dark">
-        <div class="container">
-          <Footer />
-        </div>
-      </div>
-    </div>
+      <Footer />
+    </>
   );
 });

package/starters/apps/basic/src/routes/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/library/package.json

@@ -32,18 +32,18 @@
     "release": "np"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.103.0",
+    "@builder.io/qwik": "0.104.0",
     "@types/eslint": "8.37.0",
-    "@types/node": "^18.15.9",
-    "@typescript-eslint/eslint-plugin": "5.59.0",
-    "@typescript-eslint/parser": "5.59.0",
+    "@types/node": "^18.16.0",
+    "@typescript-eslint/eslint-plugin": "5.59.1",
+    "@typescript-eslint/parser": "5.59.1",
     "eslint-plugin-qwik": "latest",
-    "eslint": "8.38.0",
-    "undici": "5.21.2",
+    "eslint": "8.39.0",
+    "undici": "5.22.0",
     "np": "7.6.1",
-    "prettier": "2.8.7",
+    "prettier": "2.8.8",
     "typescript": "5.0.4",
-    "vite": "4.2.2"
+    "vite": "4.3.2"
   },
   "__qwik__": {
     "displayName": "Component library",

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);
-}