add basic starter

packages/create-qwik/src/helpers/templateManager.ts

@@ -1,5 +1,4 @@
 import type { IntegrationData, IntegrationType } from 'packages/qwik/src/cli/types';
-
 import { loadIntegrations } from 'packages/qwik/src/cli/utils/integrations';
 
 let integrations: IntegrationData[] | undefined = undefined;

scripts/validate-cli.ts

@@ -45,9 +45,10 @@ async function validateCreateQwikCli() {
   const tmpDir = join(__dirname, '..', 'dist-dev');
 
   await Promise.all([
-    validateStarter(api, tmpDir, 'playground', true, `👻`, qwikVersion),
-    validateStarter(api, tmpDir, 'empty', true, `🫙`, qwikVersion),
-    validateStarter(api, tmpDir, 'library', false, `📚`, qwikVersion),
+    validateStarter(api, tmpDir, 'basic-starter', true, `👋`, qwikVersion),
+    validateStarter(api, tmpDir, 'playground-starter', true, `👻`, qwikVersion),
+    validateStarter(api, tmpDir, 'empty-starter', true, `🫙`, qwikVersion),
+    validateStarter(api, tmpDir, 'library-starter', false, `📚`, qwikVersion),
   ]).catch((e) => {
     console.error(e);
     panic(String(e));

starters/apps/basic-starter/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "qwik-basic-starter",
+  "description": "One page app ready to go",
+  "type": "module",
+  "__qwik__": {
+    "priority": 2,
+    "displayName": "Basic App (Qwik City + Qwik)",
+    "qwikCity": true,
+    "docs": [
+      "https://qwik.dev/docs/getting-started/"
+    ]
+  }
+}

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

@@ -0,0 +1,12 @@
+import { component$ } from "@builder.io/qwik";
+import styles from "./footer.module.css";
+
+export default component$(() => {
+  return (
+    <footer>
+      <div class="container">
+        <span class={styles.anchor}>Made with ♡ by the Qwik Team</span>
+      </div>
+    </footer>
+  );
+});

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

@@ -0,0 +1,82 @@
+import { component$ } from "@builder.io/qwik";
+import ImgThunder from "../../../media/thunder.png?jsx";
+import styles from "./hero.module.css";
+
+export default component$(() => {
+  return (
+    <div class={["container", styles.hero]}>
+      <ImgThunder class={styles["hero-image"]} alt="Image thunder" />
+      <h1>
+        So <span class="highlight">fantastic</span>
+        <br />
+        to have <span class="highlight">you</span> here
+      </h1>
+      <p>To see cooler demos generate the playground app 😉</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/[email protected]/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>
+        <a
+          href="https://qwik.dev/docs"
+          target="_blank"
+          class="button button-dark"
+        >
+          Explore the docs
+        </a>
+      </div>
+    </div>
+  );
+});

starters/apps/basic-starter/src/routes/index.tsx

@@ -0,0 +1,94 @@
+import { component$ } from "@builder.io/qwik";
+import type { DocumentHead } from "@builder.io/qwik-city";
+
+import Hero from "../components/starter/hero/hero";
+import Infobox from "../components/starter/infobox/infobox";
+
+/* To start fresh you can either:
+   1. Generate an "empty" starter app
+   2. Delete everything from <Hero> and below, delete all styles, the "components/starter" folder and fonts in "public".
+*/
+export default component$(() => {
+  return (
+    <>
+      <Hero />
+
+      <div role="presentation" class="ellipsis"></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-community">
+              Community
+            </div>
+            <ul>
+              <li>
+                <span>Questions or just want to say hi? </span>
+                <a href="https://qwik.dev/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/QwikDev/qwik" target="_blank">
+                  GitHub
+                </a>
+              </li>
+              <li>
+                <span>Watch </span>
+                <a href="https://qwik.dev/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",
+    },
+  ],
+};

starters/apps/basic-starter/src/routes/layout.tsx

@@ -0,0 +1,31 @@
+import { component$, Slot, useStyles$ } from "@builder.io/qwik";
+
+import Footer from "../components/starter/footer/footer";
+import Header from "../components/starter/header/header";
+
+import type { RequestHandler } from "@builder.io/qwik-city";
+import styles from "./styles.css?inline";
+
+export const onGet: RequestHandler = async ({ cacheControl }) => {
+  // Control caching for this request for best performance and to reduce hosting costs:
+  // https://qwik.dev/docs/caching/
+  cacheControl({
+    // Always serve a cached response by default, up to a week stale
+    staleWhileRevalidate: 60 * 60 * 24 * 7,
+    // Max once every 5 seconds, revalidate on the server to get a fresh version of this page
+    maxAge: 5,
+  });
+};
+
+export default component$(() => {
+  useStyles$(styles);
+  return (
+    <>
+      <Header />
+      <main>
+        <Slot />
+      </main>
+      <Footer />
+    </>
+  );
+});

starters/apps/playground/package.json → starters/apps/playground-starter/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "qwik-basic-starter",
+  "name": "qwik-playground-starter",
   "description": "Demo app with sample routes",
   "type": "module",
   "__qwik__": {

starters/apps/playground-starter/public/manifest.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://json.schemastore.org/web-manifest-combined.json",
+  "name": "qwik-project-name",
+  "short_name": "Welcome to Qwik",
+  "start_url": ".",
+  "display": "standalone",
+  "background_color": "#fff",
+  "description": "A Qwik project app."
+}

starters/apps/playground-starter/src/components/router-head/router-head.tsx

@@ -0,0 +1,49 @@
+import { useDocumentHead, useLocation } from "@builder.io/qwik-city";
+
+import { component$ } from "@builder.io/qwik";
+
+/**
+ * The RouterHead component is placed inside of the document `<head>` element.
+ */
+export const RouterHead = component$(() => {
+  const head = useDocumentHead();
+  const loc = useLocation();
+
+  return (
+    <>
+      <title>{head.title}</title>
+
+      <link rel="canonical" href={loc.url.href} />
+      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+      <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+      {head.meta.map((m) => (
+        <meta key={m.key} {...m} />
+      ))}
+
+      {head.links.map((l) => (
+        <link key={l.key} {...l} />
+      ))}
+
+      {head.styles.map((s) => (
+        <style
+          key={s.key}
+          {...s.props}
+          {...(s.props?.dangerouslySetInnerHTML
+            ? {}
+            : { dangerouslySetInnerHTML: s.style })}
+        />
+      ))}
+
+      {head.scripts.map((s) => (
+        <script
+          key={s.key}
+          {...s.props}
+          {...(s.props?.dangerouslySetInnerHTML
+            ? {}
+            : { dangerouslySetInnerHTML: s.script })}
+        />
+      ))}
+    </>
+  );
+});

starters/apps/playground-starter/src/components/starter/footer/footer.module.css

@@ -0,0 +1,23 @@
+.anchor {
+  color: white !important;
+  display: block;
+  font-size: 0.8rem;
+  text-align: center;
+  text-decoration: none;
+  line-height: 1.5;
+}
+
+.anchor span:not(.spacer) {
+  display: block;
+}
+
+.spacer {
+  display: none;
+  padding: 0 15px;
+}
+
+@media screen and (min-width: 768px) {
+  .anchor span {
+    display: inline !important;
+  }
+}

starters/apps/playground/src/components/starter/footer/footer.tsx → starters/apps/playground-starter/src/components/starter/footer/footer.tsx

@@ -8,11 +8,11 @@ export default component$(() => {
   return (
     <footer>
       <div class="container">
-        <a href="https://www.builder.io/" target="_blank" class={styles.anchor}>
-          <span>Made with ♡ by Builder.io</span>
+        <p class={styles.anchor}>
+          <span>Made with ♡ by the Qwik Team</span>
           <span class={styles.spacer}>|</span>
           <span>{serverTime.value.date}</span>
-        </a>
+        </p>
       </div>
     </footer>
   );