create-qwik 0.0.36 → 0.0.39-dev20220722190315

package/starters/apps/qwik-city/src/components/footer/footer.tsx

@@ -21,7 +21,9 @@ export default component$(
             <a href="/sign-in">Sign In</a>
           </li>
           <li>
-            <a href="/">Home</a>
+            <a class="footer-home" href="/">
+              Home
+            </a>
           </li>
         </ul>
       </Host>

package/starters/apps/qwik-city/src/components/header/header.css

@@ -1,8 +1,17 @@
 header {
+  background-color: #0093ee;
+}
+
+header .header-inner {
   display: grid;
   grid-template-columns: 1fr auto auto;
   padding: 10px;
-  background-color: #0093ee;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.full-screen header .header-inner {
+  max-width: 100%;
 }
 
 header a {

package/starters/apps/qwik-city/src/components/header/header.tsx

@@ -3,43 +3,35 @@ import { useLocation } from '@builder.io/qwik-city';
 import styles from './header.css?inline';
 
 export default component$(
-  (props: { fullWidth?: boolean }) => {
+  () => {
     useStyles$(styles);
 
     const pathname = useLocation().pathname;
 
     return (
-      <Host class={{ 'full-width': !!props.fullWidth }}>
-        <section>
-          <a href="/">Qwik City 🏙</a>
-        </section>
-        <nav>
-          <a href="/blog" class={{ active: pathname === '/blog' }}>
-            Blog
-          </a>
-          <a href="/docs" class={{ active: pathname === '/docs' }}>
-            Docs
-          </a>
-          <a href="/api" class={{ active: pathname === '/api' }}>
-            API
-          </a>
-          <a href="/about-us" class={{ active: pathname === '/about-us' }}>
-            About Us
-          </a>
-          <a href="/sign-in" class={{ active: pathname === '/sign-in' }}>
-            Sign In
-          </a>
-        </nav>
-        {/* <button
-          class="theme-toggle"
-          onClick$={() => {
-            if (themeCtx.theme === 'light') {
-              themeCtx.theme = 'dark';
-            } else {
-              themeCtx.theme = 'light';
-            }
-          }}
-        /> */}
+      <Host>
+        <div class="header-inner">
+          <section class="logo">
+            <a href="/">Qwik City 🏙</a>
+          </section>
+          <nav>
+            <a href="/blog" class={{ active: pathname.startsWith('/blog') }}>
+              Blog
+            </a>
+            <a href="/docs" class={{ active: pathname.startsWith('/docs') }}>
+              Docs
+            </a>
+            <a href="/api" class={{ active: pathname.startsWith('/api') }}>
+              API
+            </a>
+            <a href="/products/hat" class={{ active: pathname.startsWith('/products') }}>
+              Products
+            </a>
+            <a href="/about-us" class={{ active: pathname.startsWith('/about-us') }}>
+              About Us
+            </a>
+          </nav>
+        </div>
       </Host>
     );
   },

package/starters/apps/qwik-city/src/components/menu/menu.css

@@ -1,3 +1,13 @@
 .menu {
   background: #eee;
+  padding: 20px 10px;
+}
+
+.menu h5 {
+  margin: 0;
+}
+
+.menu ul {
+  padding-left: 20px;
+  margin: 5px 0 25px 0;
 }

package/starters/apps/qwik-city/src/components/menu/menu.tsx

@@ -1,12 +1,12 @@
 import { component$, Host, useScopedStyles$ } from '@builder.io/qwik';
-import { useContentMenu, useLocation } from '@builder.io/qwik-city';
+import { useContent, Link, useLocation } from '@builder.io/qwik-city';
 import styles from './menu.css?inline';
 
 export const Menu = component$(
   () => {
     useScopedStyles$(styles);
 
-    const menu = useContentMenu();
+    const { menu } = useContent();
     const loc = useLocation();
 
     return (
@@ -18,14 +18,14 @@ export const Menu = component$(
                 <ul>
                   {item.items?.map((item) => (
                     <li>
-                      <a
+                      <Link
                         href={item.href}
                         class={{
                           'is-active': loc.pathname === item.href,
                         }}
                       >
                         {item.text}
-                      </a>
+                      </Link>
                     </li>
                   ))}
                 </ul>

package/starters/apps/qwik-city/src/global.css

@@ -1,15 +1,24 @@
-html {
-  line-height: 1.5;
-  -webkit-text-size-adjust: 100%;
-  -moz-tab-size: 4;
-  -o-tab-size: 4;
-  tab-size: 4;
-  font-family: 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 {
+  margin: 0;
   padding: 0;
-  line-height: inherit;
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
+    sans-serif;
+}
+
+main {
+  padding: 10px 20px;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+.full-screen main {
+  max-width: 100%;
+}
+
+a {
+  color: #006eb3;
+}
+
+a:hover {
+  text-decoration: none;
 }

package/starters/apps/qwik-city/src/routes/about-us.tsx

@@ -12,8 +12,6 @@ export default component$(() => {
   );
 });
 
-export const head: DocumentHead = () => {
-  return {
-    title: 'About US',
-  };
+export const head: DocumentHead = {
+  title: 'About Us',
 };

package/starters/apps/qwik-city/src/routes/api/[org]/[user].json/index.ts

@@ -3,30 +3,19 @@ import os from 'os';
 
 export const onGet: EndpointHandler = ({ request, params }) => {
   return {
-    status: 200,
-    body: {
-      timestamp: Date.now(),
-      method: request.method,
-      url: request.url,
-      params,
-      os: os.platform(),
-      arch: os.arch(),
-      node: process.versions.node,
-    },
+    timestamp: Date.now(),
+    method: request.method,
+    url: request.url,
+    params,
+    os: os.platform(),
+    arch: os.arch(),
+    node: process.versions.node,
   };
 };
 
-export const onPost: EndpointHandler = async ({ request, params }) => {
-  return {
-    status: 200,
-    body: {
-      timestamp: Date.now(),
-      method: request.method,
-      url: request.url,
-      params,
-      os: os.platform(),
-      arch: os.arch(),
-      node: process.versions.node,
-    },
-  };
+export const onPost: EndpointHandler = async ({ request, response }) => {
+  response.headers.set('Content-Type', 'text/plain');
+  return `Platform: ${os.platform()}, Node: ${process.versions.node}, HTTP Method: ${
+    request.method
+  }`;
 };

package/starters/apps/qwik-city/src/routes/api/_layout-foo/index.tsx

@@ -1,38 +1,32 @@
 import { component$, Host, Slot, useScopedStyles$ } from '@builder.io/qwik';
 import type { DocumentHead } from '@builder.io/qwik-city';
-import Footer from '../../../components/footer/footer';
-import Header from '../../../components/header/header';
 import styles from './api.css?inline';
 
 export default component$(() => {
   useScopedStyles$(styles);
 
   return (
-    <Host>
-      <Header fullWidth={true} />
-      <main class="api">
-        <aside class="api-menu">
-          <h2>API</h2>
-          <ul>
-            <li>
-              <a href="/api/builder.io/oss.json">Org/User</a>
-            </li>
-            <li>
-              <a href="/api/data.json">Data</a>
-            </li>
-          </ul>
-        </aside>
-        <section class="api-content">
-          <Slot />
-        </section>
-      </main>
-      <Footer />
+    <Host class="api">
+      <aside class="api-menu">
+        <h2>API</h2>
+        <ul>
+          <li>
+            <a href="/api/builder.io/oss.json">Org/User</a>
+          </li>
+          <li>
+            <a href="/api/data.json">Data</a>
+          </li>
+        </ul>
+      </aside>
+      <section class="api-content">
+        <Slot />
+      </section>
     </Host>
   );
 });
 
 export const head: DocumentHead = ({ pathname }) => {
   return {
-    title: pathname,
+    title: `API: ${pathname}`,
   };
 };

package/starters/apps/qwik-city/src/routes/api/data.json.ts

@@ -3,14 +3,11 @@ import os from 'os';
 
 export const onGet: EndpointHandler = ({ request }) => {
   return {
-    status: 200,
-    body: {
-      timestamp: Date.now(),
-      method: request.method,
-      url: request.url,
-      os: os.platform(),
-      arch: os.arch(),
-      node: process.versions.node,
-    },
+    timestamp: Date.now(),
+    method: request.method,
+    url: request.url,
+    os: os.platform(),
+    arch: os.arch(),
+    node: process.versions.node,
   };
 };

package/starters/apps/qwik-city/src/routes/api/index@foo.tsx

@@ -1,7 +1,7 @@
 import { component$, Host, useClientEffect$, useStore } from '@builder.io/qwik';
 
 export default component$(() => {
-  const store = useStore({ timestamp: 0, os: '', arch: '', node: '' });
+  const store = useStore({ timestamp: '', os: '', arch: '', node: '' });
 
   useClientEffect$(async () => {
     const url = `/api/builder.io/oss.json`;
@@ -28,9 +28,12 @@ export default component$(() => {
       </ul>
 
       <p>Timestamp: {store.timestamp}</p>
-      <p>OS: {store.os}</p>
-      <p>Arch: {store.arch}</p>
-      <p>Node: {store.node}</p>
+      <p>
+        Node: <span>{store.node}</span>
+      </p>
+      <p>
+        OS: <span>{store.os}</span>
+      </p>
     </Host>
   );
 });

package/starters/apps/qwik-city/src/routes/blog/[...slug].tsx

@@ -1,13 +1,36 @@
-import { component$, Host } from '@builder.io/qwik';
-import { useLocation } from '@builder.io/qwik-city';
+import { component$, Host, Resource } from '@builder.io/qwik';
+import { useEndpoint, DocumentHead, EndpointHandler } from '@builder.io/qwik-city';
 
 export default component$(() => {
-  const { pathname, params } = useLocation();
+  const resource = useEndpoint<EndpointData>();
 
   return (
     <Host>
-      <h1>Blog {pathname}</h1>
-      <p>Slug: {params.slug}</p>
+      <Resource
+        resource={resource}
+        onResolved={(blog) => (
+          <>
+            <h1>{blog.blogTitle}</h1>
+            <p>{blog.blogContent}</p>
+          </>
+        )}
+      />
     </Host>
   );
 });
+
+export const onGet: EndpointHandler<EndpointData> = async ({ params, request }) => {
+  return {
+    blogTitle: `Blog: ${params.slug}`,
+    blogContent: `${params.slug}, ${request.url}`,
+  };
+};
+
+export const head: DocumentHead<EndpointData> = ({ data }) => {
+  return { title: data?.blogTitle };
+};
+
+export interface EndpointData {
+  blogTitle: string;
+  blogContent: string;
+}

package/starters/apps/qwik-city/src/routes/blog/_layout/index.tsx

@@ -9,10 +9,10 @@ export default component$(() => {
       <aside class="blog-menu">
         <ul>
           <li>
-            <a href="/blog/how-to-use-a-toaster">How to use a toaster</a>
+            <a href="/blog/what-is-resumability">What Is Resumability?</a>
           </li>
           <li>
-            <a href="/blog/how-to-crack-an-egg">How to crack an egg</a>
+            <a href="/blog/serializing-props">Serializing Props</a>
           </li>
         </ul>
       </aside>

package/starters/apps/qwik-city/src/routes/dashboard/index.tsx

@@ -1,9 +1,17 @@
 import { component$, Host } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
 
 export default component$(() => {
   return (
     <Host>
       <h1>Dashboard</h1>
+      <p>
+        <a href="/sign-out">Sign Out</a>
+      </p>
     </Host>
   );
 });
+
+export const head: DocumentHead = {
+  title: 'Dashboard',
+};

package/starters/apps/qwik-city/src/routes/docs/[category]/[id]/index.tsx

@@ -1,15 +1,23 @@
 import { component$, Host } from '@builder.io/qwik';
-import { useLocation } from '@builder.io/qwik-city';
+import { useLocation, DocumentHead } from '@builder.io/qwik-city';
 
 export default component$(() => {
-  const loc = useLocation();
+  const { pathname, params } = useLocation();
 
   return (
     <Host>
-      <h1>Docs</h1>
-      <p>pathname: {loc.pathname}</p>
-      <p>category: {loc.params.category}</p>
-      <p>id: {loc.params.id}</p>
+      <h1>
+        Docs: {params.category} {params.id}
+      </h1>
+      <p>pathname: {pathname}</p>
+      <p>category: {params.category}</p>
+      <p>id: {params.id}</p>
     </Host>
   );
 });
+
+export const head: DocumentHead = ({ params }) => {
+  return {
+    title: `${params.category} ${params.id}`,
+  };
+};

package/starters/apps/qwik-city/src/routes/docs/{_layout/docs.css → _layout!/index.css}

@@ -1,7 +1,8 @@
-.docs {
+.docs main {
   display: grid;
   grid-template-columns: 200px 1fr;
   padding: 0;
+  margin: 0;
 }
 
 .docs-content {

package/starters/apps/qwik-city/src/routes/docs/_layout!/index.tsx

@@ -0,0 +1,31 @@
+import { component$, Host, Slot, useStyles$ } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
+import { Breadcrumbs } from '../../../components/breadcrumbs/breadcrumbs';
+import Footer from '../../../components/footer/footer';
+import Header from '../../../components/header/header';
+import { Menu } from '../../../components/menu/menu';
+import styles from './index.css?inline';
+
+export default component$(() => {
+  useStyles$(styles);
+
+  return (
+    <Host class="docs full-screen">
+      <Header />
+      <main>
+        <Menu />
+        <section class="docs-content">
+          <Breadcrumbs />
+          <Slot />
+          <Footer />
+        </section>
+      </main>
+    </Host>
+  );
+});
+
+export const head: DocumentHead = ({ head }) => {
+  return {
+    title: `Docs: ${head.title}`,
+  };
+};

package/starters/apps/qwik-city/src/routes/docs/_menu.md

@@ -1,9 +1,11 @@
 # Docs
 
-## Getting Started
+## Introduction
 
-- [Introduction](introduction/index.md)
+- [Overview](overview/index.md)
+- [Getting Started](getting-started.md)
 
 ## Components
 
 - [Basics](/docs/components/basics)
+- [Listeners](/docs/components/listeners)

package/starters/apps/qwik-city/src/routes/docs/getting-started.md

@@ -0,0 +1,44 @@
+---
+title: Getting Started
+---
+
+# Getting Started
+
+## Creating an app using the CLI
+
+The first step is to create an application. Qwik comes with a CLI that allows you to create a basic working skeleton of an application. We will use the CLI to create a Todo sample app, and we will use that application to do a walk-through of Qwik so that you can familiarize yourself with it.
+
+## Running in development
+
+Once the application is download.
+
+1. Change into the directory created by the `npm create qwik@latest`.
+
+```shell
+cd qwik-todo
+```
+
+2. Install NPM modules:
+
+```shell
+npm install
+```
+
+3. Invoke the dev server
+
+```shell
+npm start
+```
+
+4. You should see a server running with your To-do application
+
+```shell
+  vite v2.8.6 dev server running at:
+
+  > Local: http://localhost:3000/
+  > Network: use `--host` to expose
+
+  ready in 157ms.
+```
+
+5. Visit http://localhost:3000/ to explore the To-do app.

package/starters/apps/qwik-city/src/routes/docs/index.tsx

@@ -9,8 +9,6 @@ export default component$(() => {
   );
 });
 
-export const head: DocumentHead = () => {
-  return {
-    title: 'Welcome!',
-  };
+export const head: DocumentHead = {
+  title: 'Welcome!',
 };

package/starters/apps/qwik-city/src/routes/docs/{introduction → overview}/index.md

@@ -1,7 +1,7 @@
 ---
-title: Introduction
+title: Overview
 ---
 
-# Introduction
+# Overview
 
 Qwik is a new kind of web framework that can deliver instant loading web applications at any size or complexity. Your sites and apps can boot with less than 1kb of JS (_including_ your code, regardless of complexity), and achieve unheard of performance at scale.

package/starters/apps/qwik-city/src/routes/index.tsx

@@ -1,11 +1,16 @@
 import { component$, Host } from '@builder.io/qwik';
+import type { DocumentHead } from '@builder.io/qwik-city';
 
 export default component$(() => {
   return (
     <Host>
-      <h1>Welcome to QwikCity</h1>
+      <h1 onClick$={() => console.warn('hola')}>Welcome to Qwik City</h1>
 
       <p>The meta-framework for Qwik.</p>
     </Host>
   );
 });
+
+export const head: DocumentHead = {
+  title: 'Welcome to Qwik City',
+};