create-qwik 0.0.34 → 0.0.36-dev20220707204814

package/index.js

@@ -1,18 +1,18 @@
-/**
+"use strict";/**
  * @license
  * create-qwik
  * 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
  */
-var _=Object.defineProperty;var Q=Object.getOwnPropertyDescriptor;var L=Object.getOwnPropertyNames,x=Object.getOwnPropertySymbols;var v=Object.prototype.hasOwnProperty,U=Object.prototype.propertyIsEnumerable;var R=(e,t,r)=>t in e?_(e,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[t]=r,k=(e,t)=>{for(var r in t||(t={}))v.call(t,r)&&R(e,r,t[r]);if(x)for(var r of x(t))U.call(t,r)&&R(e,r,t[r]);return e};var B=(e,t)=>{for(var r in t)_(e,r,{get:t[r],enumerable:!0})},A=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of L(t))!v.call(e,o)&&o!==r&&_(e,o,{get:()=>t[o],enumerable:!(n=Q(t,o))||n.enumerable});return e};var K=e=>A(_({},"__esModule",{value:!0}),e);var X={};B(X,{generateStarter:()=>q,getStarters:()=>O});module.exports=K(X);var y=require("fs"),V=require("path");var p=require("fs"),D=require("path");function g(e,t,r){let n=(0,p.readdirSync)(e);for(let o of n){let s=o==="gitignore"?".gitignore":o,i=(0,D.join)(e,o),d=(0,D.join)(t,s),l=(0,p.statSync)(i);if(l.isDirectory())(0,p.mkdirSync)(d,{recursive:!0}),g(i,d,r);else if(l.isFile())if(r.length>0&&[".json",".toml",".md",".html","vite.config.ts"].some(f=>i.endsWith(f))){let f=(0,p.readFileSync)(i,"utf8");for(let m of r)f=f.replace(m[0],m[1]);(0,p.writeFileSync)(d,f)}else(0,p.copyFileSync)(i,d)}}function u(e){let t=(0,D.join)(e,"package.json");return JSON.parse((0,p.readFileSync)(t,"utf-8"))}function T(e,t){let r=(0,D.join)(e,"package.json");(0,p.writeFileSync)(r,JSON.stringify(t,null,2)+`
-`)}function C(e){return e.toLocaleLowerCase().split("-").map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(" ")}function b(e){return e.toLocaleLowerCase().replace(/ /g,"-")}function I(e,t){["scripts","dependencies","devDependencies"].forEach(n=>{W(e,t,n)})}function W(e,t,r){if(t[r]){e[r]?Object.assign(e[r],k({},t[r])):e[r]=k({},t[r]);let n={},o=Object.keys(e[r]).sort();for(let s of o)n[s]=e[r][s];e[r]=n}}async function q(e){if(!j(e.projectName))throw new Error("Missing project name");if(!j(e.appId))throw new Error("Missing starter id");if(!j(e.outDir))throw new Error("Missing outDir");(0,y.existsSync)(e.outDir)||(0,y.mkdirSync)(e.outDir,{recursive:!0});let t={projectName:e.projectName,appId:e.appId,serverId:e.serverId,outDir:e.outDir},r=await O(),n=r.apps.find(i=>i.id===e.appId),o=r.servers.find(i=>i.id===e.serverId),s=r.features.filter(i=>e.featureIds.includes(i.id));if(n)$(r,t,n,o,s);else throw new Error(`Invalid starter id "${e.appId}".`);return t}function $(e,t,r,n,o){var P;let s=[[/\bqwik-project-name\b/g,t.projectName]],i=e.apps.find(a=>a.id==="base");if(!i)throw new Error("Unable to find base app.");if(n){let c=(P=u(n.dir).__qwik__)==null?void 0:P.vite;s.push([/\/\* VITE_IMPORTS \*\//g,(c==null?void 0:c.VITE_IMPORTS)??""]),s.push([/\/\* VITE_CONFIG \*\//g,(c==null?void 0:c.VITE_CONFIG)??""]),s.push([/\/\* VITE_QWIK \*\//g,(c==null?void 0:c.VITE_QWIK)??""]),s.push([/\/\* VITE_PLUGINS \*\//g,(c==null?void 0:c.VITE_PLUGINS)??""])}g(i.dir,t.outDir,s),g(r.dir,t.outDir,s);let d=u(i.dir),l=u(r.dir);I(d,l);let w=["version","private","main","module","qwik","types","exports","files"];for(let a of w)l[a]!==void 0&&(d[a]=l[a]);let f=i.readme.trim()+`
+var I=Object.defineProperty;var q=Object.getOwnPropertyDescriptor;var G=Object.getOwnPropertyNames;var F=Object.prototype.hasOwnProperty;var M=(e,t)=>{for(var r in t)I(e,r,{get:t[r],enumerable:!0})},Q=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of G(t))!F.call(e,o)&&o!==r&&I(e,o,{get:()=>t[o],enumerable:!(n=q(t,o))||n.enumerable});return e};var L=e=>Q(I({},"__esModule",{value:!0}),e);var W={};M(W,{generateStarter:()=>T,getStarters:()=>_});module.exports=L(W);var y=require("fs"),v=require("path");var p=require("fs"),k=require("path");function g(e,t,r){let n=(0,p.readdirSync)(e);for(let o of n){let s=o==="gitignore"?".gitignore":o,i=(0,k.join)(e,o),d=(0,k.join)(t,s),l=(0,p.statSync)(i);if(l.isDirectory())(0,p.mkdirSync)(d,{recursive:!0}),g(i,d,r);else if(l.isFile())if(r.length>0&&[".json",".toml",".md",".html","vite.config.ts"].some(f=>i.endsWith(f))){let f=(0,p.readFileSync)(i,"utf8");for(let m of r)f=f.replace(m[0],m[1]);(0,p.writeFileSync)(d,f)}else(0,p.copyFileSync)(i,d)}}function u(e){let t=(0,k.join)(e,"package.json");return JSON.parse((0,p.readFileSync)(t,"utf-8"))}function P(e,t){let r=(0,k.join)(e,"package.json");(0,p.writeFileSync)(r,JSON.stringify(t,null,2)+`
+`)}function x(e){return e.toLocaleLowerCase().split("-").map(t=>t.charAt(0).toUpperCase()+t.slice(1)).join(" ")}function R(e){return e.toLocaleLowerCase().replace(/ /g,"-")}function D(e,t){["scripts","dependencies","devDependencies"].forEach(n=>{U(e,t,n)})}function U(e,t,r){if(t[r]){e[r]?Object.assign(e[r],{...t[r]}):e[r]={...t[r]};let n={},o=Object.keys(e[r]).sort();for(let s of o)n[s]=e[r][s];e[r]=n}}async function T(e){if(!O(e.projectName))throw new Error("Missing project name");if(!O(e.appId))throw new Error("Missing starter id");if(!O(e.outDir))throw new Error("Missing outDir");(0,y.existsSync)(e.outDir)||(0,y.mkdirSync)(e.outDir,{recursive:!0});let t={projectName:e.projectName,appId:e.appId,serverId:e.serverId,outDir:e.outDir},r=await _(),n=r.apps.find(i=>i.id===e.appId),o=r.servers.find(i=>i.id===e.serverId),s=r.features.filter(i=>e.featureIds.includes(i.id));if(n)B(r,t,n,o,s);else throw new Error(`Invalid starter id "${e.appId}".`);return t}function B(e,t,r,n,o){var J;let s=[[/\bqwik-project-name\b/g,t.projectName]],i=e.apps.find(a=>a.id==="base");if(!i)throw new Error("Unable to find base app.");if(n){let c=(J=u(n.dir).__qwik__)==null?void 0:J.vite;s.push([/\/\* VITE_IMPORTS \*\//g,(c==null?void 0:c.VITE_IMPORTS)??""]),s.push([/\/\* VITE_CONFIG \*\//g,(c==null?void 0:c.VITE_CONFIG)??""]),s.push([/\/\* VITE_QWIK \*\//g,(c==null?void 0:c.VITE_QWIK)??""]),s.push([/\/\* VITE_PLUGINS \*\//g,(c==null?void 0:c.VITE_PLUGINS)??""])}g(i.dir,t.outDir,s),g(r.dir,t.outDir,s);let d=u(i.dir),l=u(r.dir);D(d,l);let w=["version","private","main","module","qwik","types","exports","files"];for(let a of w)l[a]!==void 0&&(d[a]=l[a]);let f=i.readme.trim()+`
 
-`,m=[r.description,"Vite.js tooling."];if(n){g(n.dir,t.outDir,s);let a=u(n.dir);I(d,a),a.description&&m.push(a.description),n.readme&&(f+=n.readme.trim()+`
+`,m=[r.description,"Vite.js tooling."];if(n){g(n.dir,t.outDir,s);let a=u(n.dir);D(d,a),a.description&&m.push(a.description),n.readme&&(f+=n.readme.trim()+`
 
-`)}for(let a of o){g(a.dir,t.outDir,s);let c=u(a.dir);I(d,c),c.description&&m.push(c.description),a.readme&&(f+=a.readme.trim()+`
+`)}for(let a of o){g(a.dir,t.outDir,s);let c=u(a.dir);D(d,c),c.description&&m.push(c.description),a.readme&&(f+=a.readme.trim()+`
 
-`)}d.name=b(t.projectName),d.description=m.join(" ").trim();let J=(0,V.join)(t.outDir,"README.md"),G=m.map(a=>`- ${a}`).join(`
-`).trim(),F=[`# Qwik ${t.projectName} \u26A1\uFE0F`,"",G,"",f.trim(),"","--------------------","","## Related","","- [Qwik Docs](https://qwik.builder.io/)","- [Qwik Github](https://github.com/BuilderIO/qwik)","- [@QwikDev](https://twitter.com/QwikDev)","- [Discord](https://qwik.builder.io/chat)","- [Vite](https://vitejs.dev/)","- [Partytown](https://partytown.builder.io/)","- [Mitosis](https://github.com/BuilderIO/mitosis)","- [Builder.io](https://www.builder.io/)"].join(`
-`);(0,y.writeFileSync)(J,F.trim()+`
-`);let M=z(d);T(t.outDir,M)}function z(e){e=k({},e);let t={name:e.name,version:e.version,description:e.description,scripts:e.scripts,dependencies:e.dependencies,devDependencies:e.devDependencies};Object.keys(t).forEach(n=>{delete e[n]}),delete e.__qwik__;let r=Object.keys(e).sort();for(let n of r)t[n]=e[n];return t}function j(e){return typeof e=="string"&&e.trim().length>0}var S=require("fs"),h=require("path");var N=null;async function O(){return N==null&&(N=H((0,h.join)(__dirname,"starters"))),N}function H(e){return{apps:E(e,"apps"),servers:E(e,"servers"),features:E(e,"features")}}function E(e,t){let r=(0,h.join)(e,t);return(0,S.readdirSync)(r).filter(o=>(0,S.statSync)((0,h.join)(r,o)).isDirectory()).map(o=>{var w,f,m;let s=(0,h.join)(r,o),i=u(s),d=null;try{d=(0,S.readFileSync)((0,h.join)(s,"README.md"),"utf-8")}catch{}return{id:o,name:C(o),description:i.description??"",readme:d,dir:s,selectServer:((w=i==null?void 0:i.__qwik__)==null?void 0:w.selectServer)??!0,priority:((f=i==null?void 0:i.__qwik__)==null?void 0:f.priority)??0,featureOptions:((m=i==null?void 0:i.__qwik__)==null?void 0:m.featureOptions)??[]}}).sort((o,s)=>o.priority>s.priority?-1:o.priority<s.priority?1:o.name<s.name?-1:o.name>s.name?1:0)}0&&(module.exports={generateStarter,getStarters});
+`)}d.name=R(t.projectName),d.description=m.join(" ").trim();let E=(0,v.join)(t.outDir,"README.md"),C=m.map(a=>`- ${a}`).join(`
+`).trim(),b=[`# Qwik ${t.projectName} \u26A1\uFE0F`,"",C,"",f.trim(),"","--------------------","","## Related","","- [Qwik Docs](https://qwik.builder.io/)","- [Qwik Github](https://github.com/BuilderIO/qwik)","- [@QwikDev](https://twitter.com/QwikDev)","- [Discord](https://qwik.builder.io/chat)","- [Vite](https://vitejs.dev/)","- [Partytown](https://partytown.builder.io/)","- [Mitosis](https://github.com/BuilderIO/mitosis)","- [Builder.io](https://www.builder.io/)"].join(`
+`);(0,y.writeFileSync)(E,b.trim()+`
+`);let V=A(d);P(t.outDir,V)}function A(e){e={...e};let t={name:e.name,version:e.version,description:e.description,scripts:e.scripts,dependencies:e.dependencies,devDependencies:e.devDependencies};Object.keys(t).forEach(n=>{delete e[n]}),delete e.__qwik__;let r=Object.keys(e).sort();for(let n of r)t[n]=e[n];return t}function O(e){return typeof e=="string"&&e.trim().length>0}var S=require("fs"),h=require("path");var j=null;async function _(){return j==null&&(j=K((0,h.join)(__dirname,"starters"))),j}function K(e){return{apps:N(e,"apps"),servers:N(e,"servers"),features:N(e,"features")}}function N(e,t){let r=(0,h.join)(e,t);return(0,S.readdirSync)(r).filter(o=>(0,S.statSync)((0,h.join)(r,o)).isDirectory()).map(o=>{var w,f,m;let s=(0,h.join)(r,o),i=u(s),d=null;try{d=(0,S.readFileSync)((0,h.join)(s,"README.md"),"utf-8")}catch{}return{id:o,name:x(o),description:i.description??"",readme:d,dir:s,selectServer:((w=i==null?void 0:i.__qwik__)==null?void 0:w.selectServer)??!1,priority:((f=i==null?void 0:i.__qwik__)==null?void 0:f.priority)??0,featureOptions:((m=i==null?void 0:i.__qwik__)==null?void 0:m.featureOptions)??[]}}).sort((o,s)=>o.priority>s.priority?-1:o.priority<s.priority?1:o.name<s.name?-1:o.name>s.name?1:0)}0&&(module.exports={generateStarter,getStarters});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.0.34",
+  "version": "0.0.36-dev20220707204814",
   "description": "Interactive CLI and API for generating Qwik projects.",
   "bin": "create-qwik",
   "main": "index.js",
@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@types/prompts": "2.0.14",
-    "kleur": "4.1.4",
+    "kleur": "4.1.5",
     "prompts": "2.4.2"
   },
   "engines": {

package/starters/apps/base/package.json

@@ -11,19 +11,19 @@
     "dev.debug": "node --inspect-brk node_modules/vite/bin/vite.js --mode ssr",
     "start": "npm run dev",
     "lint": "eslint \"src/**/*.ts*\"",
-    "typecheck": "tsc --noEmit"
+    "typecheck": "tsc --incremental --noEmit"
   },
   "devDependencies": {
-    "@builder.io/qwik": "0.0.34",
-    "@types/eslint": "8.4.2",
+    "@builder.io/qwik": "0.0.36-dev20220707204814",
+    "@types/eslint": "8.4.5",
     "@types/node": "latest",
-    "@typescript-eslint/eslint-plugin": "5.27.0",
-    "@typescript-eslint/parser": "5.27.0",
-    "eslint-plugin-qwik": "0.0.34",
-    "eslint": "8.16.0",
+    "@typescript-eslint/eslint-plugin": "5.30.0",
+    "@typescript-eslint/parser": "5.30.0",
+    "eslint-plugin-qwik": "0.0.36-dev20220707204814",
+    "eslint": "8.18.0",
     "node-fetch": "2.6.7",
-    "typescript": "4.7.2",
-    "vite": "2.9.9"
+    "typescript": "4.7.4",
+    "vite": "2.9.13"
   },
   "homepage": "https://qwik.builder.io/",
   "private": true,

package/starters/apps/base/src/entry.dev.tsx

@@ -1,5 +1,5 @@
 import { render } from '@builder.io/qwik';
-import { Root } from './root';
+import Root from './root';
 
 /**
  * Development entry point using only client-side modules:

package/starters/apps/{library → base}/src/entry.ssr.tsx

@@ -1,6 +1,6 @@
 import { renderToString, RenderOptions } from '@builder.io/qwik/server';
 import { manifest } from '@qwik-client-manifest';
-import { Root } from './root';
+import Root from './root';
 
 /**
  * Server-Side Render method to be called by a server.

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

@@ -1,6 +1,6 @@
 import './global.css';
 
-export const Root = () => {
+export default () => {
   return (
     <html>
       <head>

package/starters/apps/blank/package.json

@@ -0,0 +1,18 @@
+{
+  "description": "Blank Qwik starter app.",
+  "scripts": {
+    "build.ssr": "vite build --ssr src/entry.express.tsx",
+    "serve": "node server/entry.express.js"
+  },
+  "devDependencies": {
+    "@types/express": "4.17.13",
+    "express": "4.17.3"
+  },
+  "__qwik__": {
+    "priority": 0,
+    "featureOptions": [
+      "prettier",
+      "tailwindcss"
+    ]
+  }
+}

package/starters/apps/blank/src/entry.express.tsx

@@ -0,0 +1,52 @@
+import express from 'express';
+import { join } from 'path';
+import { render } from './entry.ssr';
+
+/**
+ * Create an express server
+ * https://expressjs.com/
+ */
+const app = express();
+
+/**
+ * Serve static client build files,
+ * hashed filenames, immutable cache-control
+ */
+app.use(
+  '/build',
+  express.static(join(__dirname, '..', 'dist', 'build'), {
+    immutable: true,
+    maxAge: '1y',
+  })
+);
+
+/**
+ * Serve static public files at the root
+ */
+app.use(express.static(join(__dirname, '..', 'dist'), { index: false }));
+
+/**
+ * Server-Side Render Qwik application
+ */
+app.get('/*', async (req, res, next) => {
+  try {
+    // Render the Root component to a string
+    const result = await render({
+      url: req.url,
+    });
+
+    // respond with SSR'd HTML
+    res.send(result.html);
+  } catch (e) {
+    // Error while server-side rendering
+    next(e);
+  }
+});
+
+/**
+ * Start the express server
+ */
+app.listen(8080, () => {
+  /* eslint-disable */
+  console.log(`http://localhost:8080/`);
+});

package/starters/apps/{todo → blank}/src/entry.ssr.tsx

@@ -1,6 +1,6 @@
 import { renderToString, RenderOptions } from '@builder.io/qwik/server';
 import { manifest } from '@qwik-client-manifest';
-import { Root } from './root';
+import Root from './root';
 
 /**
  * Server-Side Render method to be called by a server.

package/starters/apps/{starter → blank}/src/root.tsx

@@ -2,7 +2,7 @@ import { App } from './components/app/app';
 
 import './global.css';
 
-export const Root = () => {
+export default () => {
   return (
     <html>
       <head>

package/starters/apps/library/package.json

@@ -26,7 +26,6 @@
   },
   "__qwik__": {
     "priority": -1,
-    "selectServer": false,
     "featureOptions": [
       "prettier"
     ]

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

@@ -1,7 +1,7 @@
 import { Counter } from './components/counter/counter';
 import { Logo } from './components/logo/logo';
 
-export const Root = () => {
+export default () => {
   return (
     <html>
       <head>

package/starters/apps/qwik-city/package.json

@@ -1,13 +1,15 @@
 {
-  "description": "Starter with built-in routing, powered by Qwik City",
+  "description": "File based routing and MDX support",
   "__qwik__": {
     "priority": 1,
+    "selectServer": true,
     "featureOptions": [
       "prettier",
       "tailwindcss"
     ]
   },
   "devDependencies": {
-    "@builder.io/qwik-city": "0.0.13"
+    "@builder.io/qwik-city": "0.0.16",
+    "vite-tsconfig-paths": "3.5.0"
   }
 }

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

@@ -1,5 +1,22 @@
-.docs footer nav a {
-  @apply text-slate-600;
-  @apply no-underline;
-  @apply hover:underline;
+footer {
+  border-top: 1px solid #949494;
+  margin-top: 40px;
+  padding: 20px;
+}
+
+footer a {
+  color: #949494;
+  font-size: 12px;
+}
+
+footer ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  text-align: center;
+}
+
+footer li {
+  display: inline-block;
+  padding: 4px 12px;
 }

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

@@ -1,19 +1,33 @@
-import { component$, Host, useScopedStyles$ } from '@builder.io/qwik';
+import { component$, Host, useStyles$ } from '@builder.io/qwik';
 import styles from './footer.css?inline';
 
-export const Footer = component$(
+export default component$(
   () => {
-    useScopedStyles$(styles);
+    useStyles$(styles);
 
     return (
       <Host>
-        <div>
-          <span>Made with ♡ by the </span>
-          <a href="https://www.builder.io/">Builder.io</a>
-          <span> team</span>
-        </div>
+        <ul>
+          <li>
+            <a href="/blog">Blog</a>
+          </li>
+          <li>
+            <a href="/docs">Docs</a>
+          </li>
+          <li>
+            <a href="/about-us">About Us</a>
+          </li>
+          <li>
+            <a href="/sign-in">Sign In</a>
+          </li>
+          <li>
+            <a href="/">Home</a>
+          </li>
+        </ul>
       </Host>
     );
   },
-  { tagName: 'footer' }
+  {
+    tagName: 'footer',
+  }
 );

package/starters/apps/qwik-city/src/components/head/analytics.tsx

@@ -0,0 +1,13 @@
+import type { RouteLocation } from '@builder.io/qwik-city';
+
+interface AnalyticsProps {
+  loc: RouteLocation;
+}
+
+export const Analytics = ({ loc }: AnalyticsProps) => {
+  return (
+    <>
+      <script dangerouslySetInnerHTML={`console.log("🧨 Analytics! ${loc.pathname}");`} />
+    </>
+  );
+};

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

@@ -0,0 +1,37 @@
+import { component$ } from '@builder.io/qwik';
+import { useDocumentHead, useLocation } from '@builder.io/qwik-city';
+import { Analytics } from './analytics';
+import { Social } from './social';
+
+export const Head = component$(
+  () => {
+    const head = useDocumentHead();
+    const loc = useLocation();
+
+    return (
+      <>
+        <meta charSet="utf-8" />
+
+        <title>{head.title ? `${head.title} - Qwik` : `Qwik`}</title>
+
+        <link rel="canonical" href={loc.href} />
+
+        {head.meta.map((m) => (
+          <meta {...m} />
+        ))}
+
+        {head.links.map((l) => (
+          <link {...l} />
+        ))}
+
+        {head.styles.map((s) => (
+          <style {...s.props} dangerouslySetInnerHTML={s.style} />
+        ))}
+
+        <Social />
+        <Analytics loc={loc} />
+      </>
+    );
+  },
+  { tagName: 'head' }
+);

package/starters/apps/qwik-city/src/components/head/social.tsx

@@ -0,0 +1,10 @@
+export const Social = () => {
+  return (
+    <>
+      <meta property="og:site_name" content="Qwik" />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:site" content="@QwikDev" />
+      <meta name="twitter:title" content="Qwik" />
+    </>
+  );
+};

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

@@ -1,5 +1,37 @@
 header {
-  background: #1474ff;
-  padding: 30px;
+  display: grid;
+  grid-template-columns: 1fr auto auto;
+  padding: 10px;
+  background-color: #0093ee;
+}
+
+header a {
   color: white;
+  text-decoration: none;
+  padding: 4px 8px;
+  margin-right: 5px;
+  border-radius: 4px;
+}
+
+header a:hover {
+  background-color: #ffffff50;
+}
+
+header .active {
+  background-color: #ffffff30;
+}
+
+.theme-toggle {
+  background: transparent;
+  width: 30px;
+  border: none;
+  cursor: pointer;
+}
+
+.theme-light .theme-toggle::before {
+  content: '☽';
+}
+
+.theme-dark .theme-toggle::before {
+  content: '☀';
 }

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

@@ -1,21 +1,49 @@
-import { component$, Host, useScopedStyles$ } from '@builder.io/qwik';
+import { component$, Host, useStyles$ } from '@builder.io/qwik';
+import { useLocation } from '@builder.io/qwik-city';
 import styles from './header.css?inline';
 
-export const Header = component$(
-  () => {
-    useScopedStyles$(styles);
+export default component$(
+  (props: { fullWidth?: boolean }) => {
+    useStyles$(styles);
+
+    const pathname = useLocation().pathname;
 
     return (
-      <Host>
-        <div class="header-inner">
-          <div className="header-logo">
-            <a href="/">
-              <h1>Your Qwikcity site</h1>
-            </a>
-          </div>
-        </div>
+      <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>
     );
   },
-  { tagName: 'header' }
+  {
+    tagName: 'header',
+  }
 );

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

@@ -0,0 +1,3 @@
+.menu {
+  background: #eee;
+}

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

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

package/starters/apps/qwik-city/src/root.tsx

@@ -1,30 +1,16 @@
-import { App } from './components/app/app';
+import { Content, Html } from '@builder.io/qwik-city';
+import cityPlan from '@qwik-city-plan';
+import { Head } from './components/head/head';
 
 import './global.css';
 
-export const Root = () => {
+export default () => {
   return (
-    <html lang="en">
-      <head>
-        <Head />
-      </head>
+    <Html lang="en" cityPlan={cityPlan}>
+      <Head />
       <body>
-        <App />
+        <Content />
       </body>
-    </html>
+    </Html>
   );
 };
-
-const Head = () => (
-  <>
-    <meta charSet="utf-8" />
-
-    <title>QwikCity Example</title>
-    <meta name="viewport" content="width=device-width" />
-
-    <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png" />
-    <link rel="icon" href="/favicons/favicon.svg" type="image/svg+xml" />
-
-    <meta property="og:locale" content="en_US" />
-  </>
-);

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

@@ -0,0 +1,17 @@
+import { component$, Host, Slot } from '@builder.io/qwik';
+
+export default component$(() => {
+  return (
+    <Host>
+      <section>
+        <Slot />
+      </section>
+      <aside>
+        <p>Account Help</p>
+        <ul>
+          <li>Forgot password</li>
+        </ul>
+      </aside>
+    </Host>
+  );
+});

package/starters/apps/qwik-city/src/routes/__auth/sign-in.tsx

@@ -0,0 +1,29 @@
+import { component$, Host } from '@builder.io/qwik';
+import type { HeadComponent } from '@builder.io/qwik-city';
+
+export default component$(() => {
+  return (
+    <Host>
+      <h1>Sign In</h1>
+      <form>
+        <label>
+          <span>Username</span>
+          <input type="text" />
+        </label>
+        <label>
+          <span>Password</span>
+          <input type="password" />
+        </label>
+        <button>Log In</button>
+      </form>
+    </Host>
+  );
+});
+
+export const head: HeadComponent = () => {
+  return (
+    <>
+      <title>Sign In</title>
+    </>
+  );
+};