fix: update qwik

package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "qwik-monorepo",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "scripts": {
     "build": "tsm scripts/index.ts --tsc --build --qwikcity --api --platform-binding-wasm-copy",
     "build.full": "tsm scripts/index.ts --tsc --build --api --eslint --qwikcity --qwikreact --platform-binding --wasm",
@@ -47,7 +47,7 @@
   "devDependencies": {
     "@builder.io/partytown": "0.6.2",
     "@builder.io/qwik-dom": "2.1.18",
-    "@microsoft/api-extractor": "7.28.4",
+    "@microsoft/api-extractor": "7.28.5",
     "@napi-rs/cli": "2.6.2",
     "@napi-rs/triples": "1.1.0",
     "@node-rs/helper": "1.3.3",
@@ -62,13 +62,13 @@
     "@types/node-fetch": "2.6.2",
     "@types/path-browserify": "1.0.0",
     "@types/semver": "7.3.10",
-    "@typescript-eslint/eslint-plugin": "5.30.6",
-    "@typescript-eslint/parser": "5.30.6",
-    "@typescript-eslint/utils": "5.30.6",
+    "@typescript-eslint/eslint-plugin": "5.30.7",
+    "@typescript-eslint/parser": "5.30.7",
+    "@typescript-eslint/utils": "5.30.7",
     "all-contributors-cli": "^6.20.0",
     "brotli": "1.3.3",
     "commitizen": "4.2.5",
-    "concurrently": "7.2.2",
+    "concurrently": "7.3.0",
     "cross-spawn": "7.0.3",
     "cz-conventional-changelog": "3.3.0",
     "esbuild": "0.14.49",
@@ -77,7 +77,7 @@
     "execa": "6.1.0",
     "express": "4.18.1",
     "mri": "1.2.0",
-    "node-fetch": "3.2.8",
+    "node-fetch": "3.2.9",
     "path-browserify": "1.0.1",
     "prettier": "2.7.1",
     "rollup": "2.76.0",
@@ -87,10 +87,10 @@
     "terser": "5.14.2",
     "todomvc-app-css": "2.4.2",
     "todomvc-common": "1.0.5",
-    "tsm": "^2.2.1",
+    "tsm": "2.2.2",
     "typescript": "4.7.4",
     "uvu": "^0.5.6",
-    "vite": "3.0.1",
+    "vite": "3.0.2",
     "vite-tsconfig-paths": "3.5.0",
     "wasm-pack": "0.10.3"
   },

packages/create-qwik/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-qwik",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "description": "Interactive CLI and API for generating Qwik projects.",
   "bin": "create-qwik",
   "main": "index.js",

packages/docs/package.json

@@ -24,7 +24,7 @@
     "@cloudflare/kv-asset-handler": "0.2.0",
     "autoprefixer": "10.4.7",
     "fflate": "^0.7.3",
-    "node-fetch": "3.2.8",
+    "node-fetch": "3.2.9",
     "postcss": "8.4.14",
     "prism-themes": "1.9.0",
     "prismjs": "^1.28.0",

packages/eslint-plugin-qwik/package.json

@@ -1,6 +1,6 @@
 {
   "name": "eslint-plugin-qwik",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.",
   "main": "index.js",
   "author": "Builder Team",

packages/qwik-city/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/qwik-city",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "description": "Static Site Generator for Qwik",
   "main": "./lib/index.qwik.cjs",
   "module": "./lib/index.qwik.mjs",
@@ -49,11 +49,11 @@
     "vfile": "5.3.4"
   },
   "peerDependencies": {
-    "@builder.io/qwik": ">=0.0.35"
+    "@builder.io/qwik": ">=0.0.38"
   },
   "devDependencies": {
     "@builder.io/qwik": "workspace:*",
-    "@microsoft/api-extractor": "7.28.4",
+    "@microsoft/api-extractor": "7.28.5",
     "@types/github-slugger": "1.3.0",
     "@types/marked": "4.0.3",
     "@types/node": "latest",
@@ -67,12 +67,12 @@
     "rehype-autolink-headings": "6.1.1",
     "remark-frontmatter": "4.0.1",
     "remark-gfm": "3.0.1",
-    "tsm": "2.2.1",
+    "tsm": "2.2.2",
     "typescript": "4.7.4",
     "unified": "10.1.2",
     "unist-util-visit": "4.1.0",
     "uvu": "0.5.6",
-    "vite": "3.0.1"
+    "vite": "3.0.2"
   },
   "license": "MIT",
   "homepage": "https://qwik.builder.io/",

packages/qwik-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/qwik-react",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "QwikReact allows to apply inject React component into existing Qwik application",
   "scripts": {
     "build": "npm run build.lib",
@@ -28,10 +28,10 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "typescript": "4.7.4",
-    "vite": "3.0.1"
+    "vite": "3.0.2"
   },
   "peerDependencies": {
-    "@builder.io/qwik": ">=0.0.35",
+    "@builder.io/qwik": ">=0.0.38",
     "@emotion/react": ">=11.9.0",
     "@emotion/server": ">=11.4.0",
     "@emotion/styled": ">=11.9.3",

packages/qwik/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/qwik",
-  "version": "0.0.38",
+  "version": "0.0.39",
   "description": "An Open-Source sub-framework designed with a focus on server-side-rendering, lazy-loading, and styling/animation.",
   "main": "./dist/core.cjs",
   "types": "./dist/core.d.ts",

starters/apps/qwik-city/package.json

@@ -14,7 +14,7 @@
   },
   "type": "module",
   "devDependencies": {
-    "@builder.io/qwik-city": "0.0.23",
+    "@builder.io/qwik-city": "0.0.24",
     "vite-tsconfig-paths": "3.5.0"
   }
 }

starters/apps/qwik-city/src/components/breadcrumbs/breadcrumbs.css

@@ -0,0 +1,25 @@
+nav.breadcrumbs {
+  padding: 5px;
+  border-bottom: 1px solid #ddd;
+}
+
+nav.breadcrumbs > span {
+  display: inline-block;
+  padding: 5px 0;
+  font-size: 12px;
+}
+
+nav.breadcrumbs > span a {
+  text-decoration: none;
+  color: inherit;
+}
+
+nav.breadcrumbs > span::after {
+  content: '>';
+  padding: 0 5px;
+  opacity: 0.4;
+}
+
+nav.breadcrumbs > span:last-child::after {
+  display: none;
+}

starters/apps/qwik-city/src/components/breadcrumbs/breadcrumbs.tsx

@@ -0,0 +1,77 @@
+import { component$, Host, useScopedStyles$ } from '@builder.io/qwik';
+import { useContent, useLocation, ContentMenu } from '@builder.io/qwik-city';
+import styles from './breadcrumbs.css?inline';
+
+export const Breadcrumbs = component$(
+  () => {
+    useScopedStyles$(styles);
+
+    const { menu } = useContent();
+    const loc = useLocation();
+
+    const breadcrumbs = createBreadcrumbs(menu, loc.pathname);
+    if (breadcrumbs.length === 0) {
+      return null;
+    }
+
+    return (
+      <Host class="breadcrumbs">
+        {breadcrumbs.map((b, i) => (
+          <span>{b.href ? <a href={b.href}>{b.text}</a> : b.text}</span>
+        ))}
+      </Host>
+    );
+  },
+  { tagName: 'nav' }
+);
+
+export function createBreadcrumbs(menu: ContentMenu | undefined, pathname: string) {
+  if (menu?.items) {
+    for (const indexA of menu.items) {
+      const breadcrumbA: ContentBreadcrumb = {
+        text: indexA.text,
+      };
+      if (typeof indexA.href === 'string') {
+        breadcrumbA.href = indexA.href;
+      }
+      if (indexA.href === pathname) {
+        return [breadcrumbA];
+      }
+
+      if (indexA.items) {
+        for (const indexB of indexA.items) {
+          const breadcrumbB: ContentBreadcrumb = {
+            text: indexB.text,
+          };
+          if (typeof indexB.href === 'string') {
+            breadcrumbB.href = indexB.href;
+          }
+          if (indexB.href === pathname) {
+            return [breadcrumbA, breadcrumbB];
+          }
+
+          if (indexB.items) {
+            for (const indexC of indexB.items) {
+              const breadcrumbC: ContentBreadcrumb = {
+                text: indexC.text,
+              };
+              if (typeof indexC.href === 'string') {
+                breadcrumbC.href = indexC.href;
+              }
+              if (indexC.href === pathname) {
+                return [breadcrumbA, breadcrumbB, breadcrumbC];
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  return [];
+}
+
+interface ContentBreadcrumb {
+  text: string;
+  href?: string;
+}

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

@@ -1,5 +1,5 @@
 footer {
-  border-top: 1px solid #949494;
+  border-top: 1px solid #ddd;
   margin-top: 40px;
   padding: 20px;
 }

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>

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 {

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

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