create-qwik 0.22.0-dev20230316094845 → 0.22.0-dev20230316161536

package/index.cjs

@@ -1,6 +1,6 @@
 /**
  * @license
- * create-qwik 0.22.0-dev20230316094845
+ * create-qwik 0.22.0-dev20230316161536
  * Copyright Builder.io, Inc. All Rights Reserved.
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE
@@ -88,4 +88,4 @@ ${N("\u251C"+"\u2500".repeat(r+2)+"\u256F")}
 `).trim()+`
 `,type:"modify"})}catch{D.files.push({path:t,content:r,type:"create"})}}async function Hu(D,e){let r=(await V()).find(n=>n.id===e.integration);if(!r)throw new Error(`Unable to find integration "${e.integration}"`);let s={files:[],installedDeps:{}};e.installDeps&&(s.installedDeps={...r.pkgJson.dependencies,...r.pkgJson.devDependencies}),await Ku(s,e,r.dir,e.rootDir);let i=async n=>{let c=Object.keys(s.installedDeps).length>0,a=ou();n&&a.start(`Updating app${c?" and installing dependencies":""}...`);let p=!0;try{let l=new Set(s.files.map(C=>(0,Me.dirname)(C.path)));for(let C of Array.from(l))try{Yu.default.mkdirSync(C,{recursive:!0})}catch{}let F=Promise.all(s.files.map(async C=>{await Yu.default.promises.writeFile(C.path,C.content)}));if(e.installDeps&&Object.keys(s.installedDeps).length>0){let{install:C}=Uu(D,e.rootDir);p=await C}if(await F,n&&a.stop("App updated"),!p){let C=`${uu(` ${D} install failed `)}
  You might need to run "${b(`${D} install`)}" manually inside the root of the project.`;j.error(C)}}catch(l){n&&a.stop("App updated"),L(String(l))}};return{rootDir:e.rootDir,integration:r,updates:s,commit:i}}async function Zu(D,e){rr()?e=process.cwd():(e=Xu(e),Z.default.existsSync(e)&&L(`Directory "${e}" already exists. Please either remove this directory, or choose another location.`));let t=M(),s=await Q({starterId:D,outDir:e});return Qu(t,s,!1),s}function Qu(D,e,t){let r=process.cwd()===e.outDir,s=(0,_.relative)(process.cwd(),e.outDir),i=[];r?i.push(`\u{1F984} ${Du(" Success! ")}`):i.push(`\u{1F984} ${Du(" Success! ")} ${b("Project created in")} ${aD(A(s))} ${b("directory")}`),i.push(""),i.push(`\u{1F430} ${b("Next steps:")}`),r||i.push(`   cd ${s}`),t||i.push(`   ${D} install`),i.push(`   ${D} start`),i.push("");let u=D!=="npm"?`${D} qwik add`:"npm run qwik add";return i.push(`\u{1F90D} ${b("Integrations? Add Netlify, Cloudflare, Tailwind...")}`),i.push(`   ${u}`),i.push(""),i.push(GD(e.docs)),i.push(`\u{1F440} ${b("Presentations, Podcasts and Videos:")}`),i.push("   https://qwik.builder.io/media/"),i.push(""),i.join(`
-`)}async function Q(D){let e=M();if(!Ne(D.starterId))throw new Error("Missing starter id");if(!Ne(D.outDir))throw new Error("Missing outDir");if(!(0,_.isAbsolute)(D.outDir))throw new Error("outDir must be an absolute path");Z.default.existsSync(D.outDir)||Z.default.mkdirSync(D.outDir,{recursive:!0});let t={starterId:D.starterId,outDir:D.outDir,docs:[]},r=(await V()).filter(i=>i.type==="app");if(D.starterId==="library"){let i=r.find(u=>u.id==="library");if(!i)throw new Error("Unable to find base app");await Re(e,t,i)}else{let i=r.find(n=>n.id==="base");if(!i)throw new Error("Unable to find base app");let u=r.find(n=>n.id===D.starterId);if(!u)throw new Error(`Invalid starter id "${D.starterId}". It can only be one of${r.map(n=>` "${n.id}"`)}.`);await Re(e,t,i,u)}return t}async function Re(D,e,t,r){e.docs.push(...t.docs);let s=r??t,i=WD({...t.pkgJson,name:`my-${s.pkgJson.name}`,description:s.pkgJson.description,scripts:void 0,dependencies:void 0,devDependencies:void 0});await ND(e.outDir,i);let u=(0,_.join)(e.outDir,"README.md");await Z.default.promises.writeFile(u,""),await(await Hu(D,{rootDir:e.outDir,integration:t.id,installDeps:!1})).commit(!1),r&&(e.docs.push(...r.docs),await(await Hu(D,{rootDir:e.outDir,integration:r.id,installDeps:!1})).commit(!1))}function Ne(D){return typeof D=="string"&&D.trim().length>0}function Xu(D){return(0,_.resolve)(process.cwd(),D)}function rr(){return sr()}function sr(){try{return process.cwd().startsWith("/home/projects/")}catch{}return!1}var uD=$(require("fs")),qe=require("path");async function DD(){OD(`Let's create a ${CD(" Qwik App ")} \u2728 (v0.22.0-dev20230316094845)`),await qD(500);let D="./qwik-app",e=await jD({message:"Where would you like to create your new project?",placeholder:D,validate(y){if(y.trim()==="."||y.trim()==="./")return"Please don't use '.' or './' and let qwik create the directory for you."}})||D;P(e)&&(H("Operation cancelled."),process.exit(0));let t=M(),s=(await V()).filter(y=>y.type==="app"),i=s.find(y=>y.id==="base"),u=s.filter(y=>y.id!==i.id),n=Pe(t,i),c=Xu(e.trim()),a=null;if(uD.default.existsSync(c)){let y=await ju({message:`Directory "./${(0,qe.relative)(process.cwd(),c)}" already exists. What would you like to do?`,options:[{value:"exit",label:"Do not overwrite this directory and exit"},{value:"replace",label:"Overwrite and replace this directory"}]});(P(y)||y==="exit")&&(H("Operation cancelled."),process.exit(0)),y==="replace"&&(a=uD.default.promises.rm(c,{recursive:!0}))}let p=await ju({message:"Select a starter",options:u.map(y=>{var eD;return{label:y.name,value:y.id,hint:(eD=y.pkgJson)==null?void 0:eD.description}})});P(p)&&(H("Operation cancelled."),process.exit(0));let l=p,F=await ID({message:`Would you like to install ${t} dependencies?`,initialValue:!0});P(F)&&(H("Operation cancelled."),process.exit(0)),a&&await a;let C=F,B={starterId:l,outDir:c},I=ou();I.start("Creating App");let U=await Q(B);I.stop("Created App \u{1F430}");let pu=!1;return C&&(I.start("Installing dependencies"),pu=await n.complete(C,U.outDir),I.stop(`${pu?"Installed":"Failed to install"} dependencies \u{1F4CB}`)),JD(Qu(t,U,pu),"Result"),Iu("Happy coding! \u{1F407}"),U}async function ir(){console.clear(),VD(),nr();try{let D=process.argv.slice(2);D.length>=2?await Zu(D[0],D[1]):await DD()}catch(D){L(D.message||D)}}function nr(){let D=process.version,[e,t]=D.replace("v","").split(".");Number(e)<16?(console.error(T(`Qwik requires Node.js 16.8 or higher. You are currently running Node.js ${D}.`)),process.exit(1)):Number(e)===16?Number(t)<8&&console.warn(lD(`Node.js 16.8 or higher is recommended. You are currently running Node.js ${D}.`)):Number(e)===18&&Number(t)<11&&console.error(T(`Node.js 18.11 or higher is REQUIRED. From Node 18.0.0 to 18.11.0, there is a bug preventing correct behaviour of Qwik. You are currently running Node.js ${D}. https://github.com/BuilderIO/qwik/issues/3035`))}0&&(module.exports={createApp,runCli,runCreateCli,runCreateInteractiveCli});
+`)}async function Q(D){let e=M();if(!Ne(D.starterId))throw new Error("Missing starter id");if(!Ne(D.outDir))throw new Error("Missing outDir");if(!(0,_.isAbsolute)(D.outDir))throw new Error("outDir must be an absolute path");Z.default.existsSync(D.outDir)||Z.default.mkdirSync(D.outDir,{recursive:!0});let t={starterId:D.starterId,outDir:D.outDir,docs:[]},r=(await V()).filter(i=>i.type==="app");if(D.starterId==="library"){let i=r.find(u=>u.id==="library");if(!i)throw new Error("Unable to find base app");await Re(e,t,i)}else{let i=r.find(n=>n.id==="base");if(!i)throw new Error("Unable to find base app");let u=r.find(n=>n.id===D.starterId);if(!u)throw new Error(`Invalid starter id "${D.starterId}". It can only be one of${r.map(n=>` "${n.id}"`)}.`);await Re(e,t,i,u)}return t}async function Re(D,e,t,r){e.docs.push(...t.docs);let s=r??t,i=WD({...t.pkgJson,name:`my-${s.pkgJson.name}`,description:s.pkgJson.description,scripts:void 0,dependencies:void 0,devDependencies:void 0});await ND(e.outDir,i);let u=(0,_.join)(e.outDir,"README.md");await Z.default.promises.writeFile(u,""),await(await Hu(D,{rootDir:e.outDir,integration:t.id,installDeps:!1})).commit(!1),r&&(e.docs.push(...r.docs),await(await Hu(D,{rootDir:e.outDir,integration:r.id,installDeps:!1})).commit(!1))}function Ne(D){return typeof D=="string"&&D.trim().length>0}function Xu(D){return(0,_.resolve)(process.cwd(),D)}function rr(){return sr()}function sr(){try{return process.cwd().startsWith("/home/projects/")}catch{}return!1}var uD=$(require("fs")),qe=require("path");async function DD(){OD(`Let's create a ${CD(" Qwik App ")} \u2728 (v0.22.0-dev20230316161536)`),await qD(500);let D="./qwik-app",e=await jD({message:"Where would you like to create your new project?",placeholder:D,validate(y){if(y.trim()==="."||y.trim()==="./")return"Please don't use '.' or './' and let qwik create the directory for you."}})||D;P(e)&&(H("Operation cancelled."),process.exit(0));let t=M(),s=(await V()).filter(y=>y.type==="app"),i=s.find(y=>y.id==="base"),u=s.filter(y=>y.id!==i.id),n=Pe(t,i),c=Xu(e.trim()),a=null;if(uD.default.existsSync(c)){let y=await ju({message:`Directory "./${(0,qe.relative)(process.cwd(),c)}" already exists. What would you like to do?`,options:[{value:"exit",label:"Do not overwrite this directory and exit"},{value:"replace",label:"Overwrite and replace this directory"}]});(P(y)||y==="exit")&&(H("Operation cancelled."),process.exit(0)),y==="replace"&&(a=uD.default.promises.rm(c,{recursive:!0}))}let p=await ju({message:"Select a starter",options:u.map(y=>{var eD;return{label:y.name,value:y.id,hint:(eD=y.pkgJson)==null?void 0:eD.description}})});P(p)&&(H("Operation cancelled."),process.exit(0));let l=p,F=await ID({message:`Would you like to install ${t} dependencies?`,initialValue:!0});P(F)&&(H("Operation cancelled."),process.exit(0)),a&&await a;let C=F,B={starterId:l,outDir:c},I=ou();I.start("Creating App");let U=await Q(B);I.stop("Created App \u{1F430}");let pu=!1;return C&&(I.start("Installing dependencies"),pu=await n.complete(C,U.outDir),I.stop(`${pu?"Installed":"Failed to install"} dependencies \u{1F4CB}`)),JD(Qu(t,U,pu),"Result"),Iu("Happy coding! \u{1F407}"),U}async function ir(){console.clear(),VD(),nr();try{let D=process.argv.slice(2);D.length>=2?await Zu(D[0],D[1]):await DD()}catch(D){L(D.message||D)}}function nr(){let D=process.version,[e,t]=D.replace("v","").split(".");Number(e)<16?(console.error(T(`Qwik requires Node.js 16.8 or higher. You are currently running Node.js ${D}.`)),process.exit(1)):Number(e)===16?Number(t)<8&&console.warn(lD(`Node.js 16.8 or higher is recommended. You are currently running Node.js ${D}.`)):Number(e)===18&&Number(t)<11&&console.error(T(`Node.js 18.11 or higher is REQUIRED. From Node 18.0.0 to 18.11.0, there is a bug preventing correct behaviour of Qwik. You are currently running Node.js ${D}. https://github.com/BuilderIO/qwik/issues/3035`))}0&&(module.exports={createApp,runCli,runCreateCli,runCreateInteractiveCli});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.22.0-dev20230316094845",
+  "version": "0.22.0-dev20230316161536",
   "description": "Interactive CLI for create Qwik projects and adding features.",
   "bin": "./create-qwik.cjs",
   "main": "./index.cjs",

package/starters/apps/base/package.json

@@ -16,14 +16,14 @@
     "qwik": "qwik"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.22.0-dev20230316094845",
+    "@builder.io/qwik": "0.22.0-dev20230316161536",
     "@builder.io/qwik-city": "0.6.1",
     "@types/eslint": "8.21.2",
     "@types/node": "^18.15.3",
     "@types/node-fetch": "latest",
     "@typescript-eslint/eslint-plugin": "5.55.0",
     "@typescript-eslint/parser": "5.55.0",
-    "eslint-plugin-qwik": "0.22.0-dev20230316094845",
+    "eslint-plugin-qwik": "0.22.0-dev20230316161536",
     "eslint": "8.36.0",
     "node-fetch": "3.3.0",
     "undici": "5.21.0",

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

@@ -17,15 +17,15 @@ export const RouterHead = component$(() => {
       <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 
       {head.meta.map((m) => (
-        <meta {...m} />
+        <meta key={m.key} {...m} />
       ))}
 
       {head.links.map((l) => (
-        <link {...l} />
+        <link key={l.key} {...l} />
       ))}
 
       {head.styles.map((s) => (
-        <style {...s.props} dangerouslySetInnerHTML={s.style} />
+        <style key={s.key} {...s.props} dangerouslySetInnerHTML={s.style} />
       ))}
     </>
   );

package/starters/apps/basic/src/components/{footer/footer.css → starter/footer/footer.module.css}

@@ -1,11 +1,11 @@
-footer a {
-  color: white;
+.anchor {
+  color: white !important;
   display: block;
   font-size: 0.8rem;
   text-align: center;
   text-decoration: none;
 }
 
-footer .spacer {
+.spacer {
   padding: 0 15px;
 }

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

@@ -0,0 +1,17 @@
+import { component$ } from '@builder.io/qwik';
+import { useServerTimeLoader } from '~/routes/layout';
+import styles from './footer.module.css';
+
+export default component$(() => {
+  const serverTime = useServerTimeLoader();
+
+  return (
+    <footer>
+      <a href="https://www.builder.io/" target="_blank" class={styles.anchor}>
+        Made with ♡ by Builder.io
+        <span class={styles.spacer}>|</span>
+        <span>{serverTime.value.date}</span>
+      </a>
+    </footer>
+  );
+});

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

@@ -1,33 +1,33 @@
-header {
+.header {
   display: flex;
   align-items: center;
   padding: 20px 70px 0;
 }
 
-header .logo a {
+.header .logo a {
   display: inline-block;
 }
 
-header ul {
+.header ul {
   margin: 0;
   list-style: none;
   flex: 1;
   text-align: right;
 }
 
-header li {
+.header li {
   display: inline-block;
   margin: 0;
   padding: 0;
 }
 
-header li a {
+.header li a {
   color: white;
   display: inline-block;
   padding: 0 1em;
   text-decoration: none;
 }
 
-header li a:hover {
+.header li a:hover {
   color: var(--qwik-dark-purple);
 }

package/starters/apps/basic/src/components/{header → starter/header}/header.tsx

@@ -1,13 +1,11 @@
-import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 import { QwikLogo } from '../icons/qwik';
-import styles from './header.css?inline';
+import styles from './header.module.css';
 
 export default component$(() => {
-  useStylesScoped$(styles);
-
   return (
-    <header>
-      <div class="logo">
+    <header class={styles.header}>
+      <div class={styles.logo}>
         <a href="/" title="qwik">
           <QwikLogo />
         </a>

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

@@ -0,0 +1,65 @@
+import { component$ } from '@builder.io/qwik';
+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,
+            },
+          };
+
+          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();
+
+          function shoot() {
+            confetti({
+              ...defaults,
+              particleCount: 80,
+              scalar: 1.2,
+            });
+
+            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>
+    </div>
+  );
+});

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

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

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

@@ -1,4 +1,4 @@
-.getting-started {
+.gettingstarted {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -7,7 +7,7 @@
   line-height: 1.5;
 }
 
-.getting-started .hint {
+.gettingstarted .hint {
   margin-top: 10px;
   font-size: 0.8rem;
 }

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

@@ -1,14 +1,5 @@
-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';
+import { component$, $, useOnWindow, useSignal } from '@builder.io/qwik';
+import styles from './next-steps.module.css';
 
 export const GETTING_STARTED_STEPS = [
   {
@@ -29,7 +20,7 @@ export const GETTING_STARTED_STEPS = [
   },
   {
     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 🐰',
+    hint: 'Open <a href="/demo/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! 🎉',
@@ -38,28 +29,7 @@ export const GETTING_STARTED_STEPS = [
 ];
 
 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);
-    }
-  });
+  const gettingStartedStep = useSignal(0);
 
   useOnWindow(
     'keydown',
@@ -72,10 +42,10 @@ export default component$(() => {
 
   return (
     <>
-      <div class="getting-started">
+      <div class={styles.gettingstarted}>
         <div dangerouslySetInnerHTML={GETTING_STARTED_STEPS[gettingStartedStep.value].message} />
         <span
-          class="hint"
+          class={styles.hint}
           dangerouslySetInnerHTML={GETTING_STARTED_STEPS[gettingStartedStep.value].hint}
         />
       </div>

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

@@ -21,6 +21,11 @@ body {
   padding: 60px 0px;
 }
 
+::selection {
+  background: rgb(8, 2, 61);
+  color: white;
+}
+
 h1,
 h2,
 h3 {

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

@@ -17,8 +17,6 @@ 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 → demo/flower}/flower.css

@@ -17,7 +17,7 @@
   contain: strict;
 }
 
-input {
+.input {
   width: 100%;
 }
 

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

@@ -1,13 +1,13 @@
-import { component$, useStylesScoped$ } from '@builder.io/qwik';
+import { component$ } from '@builder.io/qwik';
 import {
   type DocumentHead,
   routeLoader$,
-  globalAction$,
+  routeAction$,
   zod$,
   z,
   Form,
 } from '@builder.io/qwik-city';
-import style from './todolist.css?inline';
+import styles from './todolist.module.css';
 
 interface ListItem {
   text: string;
@@ -19,7 +19,7 @@ export const useListLoader = routeLoader$(() => {
   return list;
 });
 
-export const useAddToListAction = globalAction$(
+export const useAddToListAction = routeAction$(
   (item) => {
     list.push(item);
     return {
@@ -32,7 +32,6 @@ export const useAddToListAction = globalAction$(
 );
 
 export default component$(() => {
-  useStylesScoped$(style);
   const list = useListLoader();
   const action = useAddToListAction();
 
@@ -47,7 +46,7 @@ export default component$(() => {
       <div class="section bright">
         <div class="container center mh-300">
           {(list.value.length && (
-            <ul class="list">
+            <ul class={styles.list}>
               {list.value.map((item, index) => (
                 <li key={`items-${index}`}>{item.text}</li>
               ))}
@@ -62,7 +61,7 @@ export default component$(() => {
             <input type="text" name="text" required /> <button type="submit">Add item</button>
           </Form>
 
-          <p class="hint">PS: This little app works even when JavaScript is disabled.</p>
+          <p class={styles.hint}>PS: This little app works even when JavaScript is disabled.</p>
         </div>
       </div>
     </>

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

@@ -1,9 +1,10 @@
 import { component$ } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
-import Counter from '~/components/counter/counter';
-import Hero from '~/components/hero/hero';
-import Infobox from '~/components/infobox/infobox';
-import Starter from '~/components/starter/starter';
+
+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 (
@@ -61,8 +62,8 @@ export default component$(() => {
                 Example Apps
               </div>
               <p>
-                Have a look at the <a href="/flower">React Flower App</a> or the{' '}
-                <a href="/todolist">Todo App</a>.
+                Have a look at the <a href="/demo/flower">Flower App</a> or the{' '}
+                <a href="/demo/todolist">Todo App</a>.
               </p>
             </Infobox>
 

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

@@ -1,8 +1,8 @@
 import { component$, Slot } from '@builder.io/qwik';
 import { routeLoader$ } from '@builder.io/qwik-city';
 
-import Header from '../components/header/header';
-import Footer from '~/components/footer/footer';
+import Header from '~/components/starter/header/header';
+import Footer from '~/components/starter/footer/footer';
 
 export const useServerTimeLoader = routeLoader$(() => {
   return {
@@ -11,7 +11,6 @@ export const useServerTimeLoader = routeLoader$(() => {
 });
 
 export default component$(() => {
-  const serverTime = useServerTimeLoader();
   return (
     <div class="page">
       <main>
@@ -20,7 +19,7 @@ export default component$(() => {
       </main>
       <div class="section dark">
         <div class="container">
-          <Footer serverTime={serverTime} />
+          <Footer />
         </div>
       </div>
     </div>

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

@@ -1,16 +0,0 @@
-import { type Signal, component$, useStylesScoped$ } from '@builder.io/qwik';
-import styles from './footer.css?inline';
-
-export default component$(({ serverTime }: { serverTime: Signal<{ date: string }> }) => {
-  useStylesScoped$(styles);
-
-  return (
-    <footer>
-      <a href="https://www.builder.io/" target="_blank">
-        Made with ♡ by Builder.io
-        <span class="spacer">|</span>
-        <span>{serverTime.value.date}</span>
-      </a>
-    </footer>
-  );
-});

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

@@ -1,55 +0,0 @@
-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/infobox/infobox.tsx

@@ -1,14 +0,0 @@
-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>
-  );
-});