create-qwik 1.1.3 → 1.1.5

package/starters/apps/site-with-visual-cms/src/routes/service-worker.ts

@@ -0,0 +1,18 @@
+/*
+ * WHAT IS THIS FILE?
+ *
+ * The service-worker.ts file is used to have state of the art prefetching.
+ * https://qwik.builder.io/qwikcity/prefetching/overview/
+ *
+ * Qwik uses a service worker to speed up your site and reduce latency, ie, not used in the traditional way of offline.
+ * You can also use this file to add more functionality that runs in the service worker.
+ */
+import { setupServiceWorker } from '@builder.io/qwik-city/service-worker';
+
+setupServiceWorker();
+
+addEventListener('install', () => self.skipWaiting());
+
+addEventListener('activate', () => self.clients.claim());
+
+declare const self: ServiceWorkerGlobalScope;

package/starters/apps/site-with-visual-cms/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import { qwikVite } from '@builder.io/qwik/optimizer';
+import { qwikCity } from '@builder.io/qwik-city/vite';
+import { builderDevTools } from '@builder.io/dev-tools/vite';
+
+export default defineConfig(() => {
+  return {
+    plugins: [builderDevTools(), qwikCity(), qwikVite()],
+  };
+});

package/starters/apps/documentation-site/package.json

@@ -1,13 +0,0 @@
-{
-  "name": "qwik-docs-starter",
-  "description": "Basic start point to build a docs site with Qwik",
-  "type": "module",
-  "__qwik__": {
-    "priority": 0,
-    "displayName": "Documentation site (QwikCity)",
-    "qwikCity": true,
-    "docs": [
-      "https://qwik.builder.io/docs/getting-started/"
-    ]
-  }
-}

package/starters/apps/documentation-site/src/components/breadcrumbs/breadcrumbs.css

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

package/starters/apps/documentation-site/src/components/breadcrumbs/breadcrumbs.tsx

@@ -1,74 +0,0 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import { useContent, useLocation, ContentMenu } from '@builder.io/qwik-city';
-import styles from './breadcrumbs.css?inline';
-
-export const Breadcrumbs = component$(() => {
-  useStyles$(styles);
-
-  const { menu } = useContent();
-  const loc = useLocation();
-
-  const breadcrumbs = createBreadcrumbs(menu, loc.url.pathname);
-  if (breadcrumbs.length === 0) {
-    return null;
-  }
-
-  return (
-    <nav class="breadcrumbs">
-      {breadcrumbs.map((b) => (
-        <span>{b.href ? <a href={b.href}>{b.text}</a> : b.text}</span>
-      ))}
-    </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;
-}

package/starters/apps/documentation-site/src/components/footer/footer.css

@@ -1,22 +0,0 @@
-footer {
-  border-top: 0.5px solid #ddd;
-  margin-top: 40px;
-  padding: 20px;
-  text-align: center;
-}
-
-footer a {
-  color: #9e9e9e;
-  font-size: 12px;
-}
-
-footer ul {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-footer li {
-  display: inline-block;
-  padding: 6px 12px;
-}

package/starters/apps/documentation-site/src/components/footer/footer.tsx

@@ -1,36 +0,0 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import styles from './footer.css?inline';
-
-export default component$(() => {
-  useStyles$(styles);
-
-  return (
-    <footer>
-      <ul>
-        <li>
-          <a href="/docs">Docs</a>
-        </li>
-        <li>
-          <a href="/about-us">About Us</a>
-        </li>
-        <li>
-          <a href="https://qwik.builder.io/">Qwik</a>
-        </li>
-        <li>
-          <a href="https://twitter.com/QwikDev">Twitter</a>
-        </li>
-        <li>
-          <a href="https://github.com/BuilderIO/qwik">GitHub</a>
-        </li>
-        <li>
-          <a href="https://qwik.builder.io/chat">Chat</a>
-        </li>
-      </ul>
-      <div>
-        <a href="https://www.builder.io/" target="_blank" class="builder">
-          Made with ♡ by Builder.io
-        </a>
-      </div>
-    </footer>
-  );
-});

package/starters/apps/documentation-site/src/components/header/header.css

@@ -1,34 +0,0 @@
-header {
-  position: sticky;
-  top: 0;
-  z-index: 11;
-  display: grid;
-  grid-template-columns: minmax(130px, auto) 1fr;
-  gap: 30px;
-  height: 80px;
-  width: 100%;
-  padding: 10px;
-  background-color: white;
-  overflow: hidden;
-}
-
-header a.logo {
-  display: block;
-}
-
-header a {
-  text-decoration: none;
-}
-
-header nav {
-  text-align: right;
-}
-
-header nav a {
-  display: inline-block;
-  padding: 5px 15px;
-}
-
-header nav a:hover {
-  text-decoration: underline;
-}

package/starters/apps/documentation-site/src/components/header/header.tsx

@@ -1,26 +0,0 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import { useLocation } from '@builder.io/qwik-city';
-import { QwikLogo } from '../icons/qwik';
-import styles from './header.css?inline';
-
-export default component$(() => {
-  useStyles$(styles);
-
-  const { url } = useLocation();
-
-  return (
-    <header>
-      <a class="logo" href="/">
-        <QwikLogo />
-      </a>
-      <nav>
-        <a href="/docs" class={{ active: url.pathname.startsWith('/docs') }}>
-          Docs
-        </a>
-        <a href="/about-us" class={{ active: url.pathname.startsWith('/about-us') }}>
-          About Us
-        </a>
-      </nav>
-    </header>
-  );
-});

package/starters/apps/documentation-site/src/components/icons/qwik.tsx

@@ -1,20 +0,0 @@
-export const QwikLogo = () => (
-  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 167 53">
-    <path
-      fill="#000"
-      d="M81.95 46.59h-6.4V35.4a12.25 12.25 0 0 1-7.06 2.17c-3.47 0-6.06-.94-7.67-2.92-1.6-1.96-2.42-5.45-2.42-10.43 0-5.1.95-8.62 2.87-10.67 1.96-2.08 5.1-3.09 9.43-3.09 4.1 0 7.82.57 11.25 1.67V46.6Zm-6.4-30.31a16.6 16.6 0 0 0-4.85-.66c-2.17 0-3.73.56-4.6 1.7-.85 1.17-1.32 3.38-1.32 6.65 0 3.08.41 5.14 1.26 6.26.86 1.1 2.33 1.67 4.5 1.67 2.84 0 5.01-1.17 5.01-2.62v-13Zm15.58-5.14c2.27 6.3 4.2 12.6 5.86 18.95 2.22-6.5 4.1-12.8 5.55-18.95h5.61a187.5 187.5 0 0 1 5.3 18.95c2.52-6.9 4.5-13.21 5.95-18.95h6.31a285.68 285.68 0 0 1-8.92 25.76h-7.53c-.86-4.6-2.22-10.14-4.04-16.75a151.51 151.51 0 0 1-4.89 16.75H92.8a287.88 287.88 0 0 0-8.17-25.76h6.5Zm41.7-3.58c-2.83 0-3.63-.7-3.63-3.59 0-2.57.82-3.18 3.63-3.18 2.83 0 3.63.6 3.63 3.18 0 2.89-.8 3.59-3.63 3.59Zm-3.18 3.58h6.4V36.9h-6.4V11.14Zm36.65 0c-4.54 6.46-7.72 10.39-9.49 11.8 1.46.95 5.36 5.95 10.2 13.98h-7.38c-6.02-9.13-8.89-13.07-10.3-13.67v13.67h-6.4V0h6.4v23.23c1.45-1.06 4.63-5.1 9.54-12.09h7.43Z"
-    />
-    <path
-      fill="#18B6F6"
-      d="M40.97 52.54 32.1 43.7l-.14.02v-.1l-18.9-18.66 4.66-4.5-2.74-15.7L2 20.87a7.14 7.14 0 0 0-1.03 8.52l8.11 13.45a6.81 6.81 0 0 0 5.92 3.3l4.02-.05 21.96 6.46Z"
-    />
-    <path
-      fill="#AC7EF4"
-      d="m45.82 20.54-1.78-3.3-.93-1.68-.37-.66-.04.04-4.9-8.47a6.85 6.85 0 0 0-5.99-3.43l-4.28.12-12.8.04a6.85 6.85 0 0 0-5.85 3.37L1.1 21.99 15 4.73l18.24 20.04L30 28.04l1.94 15.68.02-.04v.04h-.04l.04.04 1.51 1.47 7.36 7.19c.3.29.81-.06.6-.43l-4.54-8.93 7.91-14.63.26-.3a6.73 6.73 0 0 0 .76-7.6Z"
-    />
-    <path
-      fill="#fff"
-      d="M33.3 24.69 15.02 4.75l2.6 15.62-4.66 4.51L31.91 43.7l-1.7-15.62 3.1-3.4Z"
-    />
-  </svg>
-);

package/starters/apps/documentation-site/src/components/menu/menu.css

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

package/starters/apps/documentation-site/src/components/menu/menu.tsx

@@ -1,36 +0,0 @@
-import { component$, useStyles$ } from '@builder.io/qwik';
-import { useContent, Link, useLocation } from '@builder.io/qwik-city';
-import styles from './menu.css?inline';
-
-export default component$(() => {
-  useStyles$(styles);
-
-  const { menu } = useContent();
-  const loc = useLocation();
-
-  return (
-    <aside class="menu">
-      {menu
-        ? menu.items?.map((item) => (
-            <>
-              <h5>{item.text}</h5>
-              <ul>
-                {item.items?.map((item) => (
-                  <li>
-                    <Link
-                      href={item.href}
-                      class={{
-                        'is-active': loc.url.pathname === item.href,
-                      }}
-                    >
-                      {item.text}
-                    </Link>
-                  </li>
-                ))}
-              </ul>
-            </>
-          ))
-        : null}
-    </aside>
-  );
-});

package/starters/apps/documentation-site/src/components/on-this-page/on-this-page.css

@@ -1,33 +0,0 @@
-.on-this-page {
-  padding-bottom: 20px;
-  font-size: 0.9em;
-}
-
-.on-this-page h6 {
-  margin: 10px 0;
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-.on-this-page ul {
-  margin: 0;
-  padding: 0 0 20px 0;
-  list-style: none;
-}
-
-.on-this-page a {
-  position: relative;
-  display: block;
-  border: 0 solid #ddd;
-  border-left-width: 2px;
-  padding: 4px 2px 4px 8px;
-  text-decoration: none;
-}
-
-.on-this-page a.indent {
-  padding-left: 30px;
-}
-
-.on-this-page a:hover {
-  border-color: var(--theme-accent);
-}

package/starters/apps/documentation-site/src/components/on-this-page/on-this-page.tsx

@@ -1,62 +0,0 @@
-import { useContent, useLocation } from '@builder.io/qwik-city';
-import { component$, useStyles$ } from '@builder.io/qwik';
-import styles from './on-this-page.css?inline';
-
-export default component$(() => {
-  useStyles$(styles);
-
-  const { headings } = useContent();
-  const contentHeadings = headings?.filter((h) => h.level === 2 || h.level === 3) || [];
-
-  const { url } = useLocation();
-  const editUrl = `#update-your-edit-url-for-${url.pathname}`;
-
-  return (
-    <aside class="on-this-page">
-      {contentHeadings.length > 0 ? (
-        <>
-          <h6>On This Page</h6>
-          <ul>
-            {contentHeadings.map((h) => (
-              <li>
-                <a
-                  href={`#${h.id}`}
-                  class={{
-                    block: true,
-                    indent: h.level > 2,
-                  }}
-                >
-                  {h.text}
-                </a>
-              </li>
-            ))}
-          </ul>
-        </>
-      ) : null}
-
-      <h6>More</h6>
-      <ul>
-        <li>
-          <a href={editUrl} target="_blank">
-            Edit this page
-          </a>
-        </li>
-        <li>
-          <a href="https://qwik.builder.io/chat" target="_blank">
-            Join our community
-          </a>
-        </li>
-        <li>
-          <a href="https://github.com/BuilderIO/qwik" target="_blank">
-            GitHub
-          </a>
-        </li>
-        <li>
-          <a href="https://twitter.com/QwikDev" target="_blank">
-            @QwikDev
-          </a>
-        </li>
-      </ul>
-    </aside>
-  );
-});

package/starters/apps/documentation-site/src/global.css

@@ -1,66 +0,0 @@
-* {
-  box-sizing: border-box;
-}
-
-:root {
-  --user-font-scale: 1rem - 16px;
-  --max-width: calc(100% - 1rem);
-
-  --font-body: system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
-    Apple Color Emoji, Segoe UI Emoji;
-  --font-mono: 'IBM Plex Mono', Consolas, 'Andale Mono WT', 'Andale Mono', 'Lucida Console',
-    'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono',
-    'Nimbus Mono L', Monaco, 'Courier New', Courier, monospace;
-
-  color-scheme: light;
-  --theme-accent: #006ce9;
-  --theme-text: #181818;
-}
-
-@media (min-width: 50em) {
-  :root {
-    --max-width: 46em;
-  }
-}
-
-body {
-  display: flex;
-  flex-direction: column;
-  min-height: 100vh;
-  font-family: var(--font-body);
-  font-size: 1rem;
-  font-size: clamp(0.9rem, 0.75rem + 0.375vw + var(--user-font-scale), 1rem);
-  line-height: 1.5;
-  max-width: 100vw;
-  background: var(--theme-bg);
-  color: var(--theme-text);
-}
-
-main {
-  padding: 10px 20px;
-  max-width: 960px;
-  margin: 0 auto;
-}
-
-a {
-  color: var(--theme-accent);
-}
-
-a:hover {
-  text-decoration: none;
-}
-
-code,
-kbd,
-samp,
-pre {
-  font-family: var(--font-mono);
-}
-
-code {
-  background-color: rgb(224, 224, 224);
-  padding: 2px 4px;
-  border-radius: 3px;
-  font-size: 0.9em;
-  border-bottom: 2px solid #bfbfbf;
-}

package/starters/apps/documentation-site/src/routes/about-us/index.md

@@ -1,15 +0,0 @@
----
-title: About Qwik
----
-
-# About Qwik
-
-This page is at the root level, so it only uses the `/src/routes/layout.tsx` layout to wrap the page content.
-
-## More info:
-
-- [Layouts](https://qwik.builder.io/qwikcity/layout/overview/)
-- [Routing](https://qwik.builder.io/qwikcity/routing/overview/)
-- [Authoring Content](https://qwik.builder.io/qwikcity/content/component/)
-- [Deployment](https://qwik.builder.io/deployments/overview/)
-- [Static Site Generation (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/overview/)

package/starters/apps/documentation-site/src/routes/docs/advanced/index.md

@@ -1,11 +0,0 @@
----
-title: Advanced
----
-
-# Advanced
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-## Ferrari
-
-[Ferrari](https://en.wikipedia.org/wiki/Ferrari) (/fəˈrɑːri/; Italian: [ferˈraːri]) is an Italian luxury sports car manufacturer based in Maranello, Italy. Founded by Enzo Ferrari (1898–1988) in 1939 from the Alfa Romeo racing division as Auto Avio Costruzioni, the company built its first car in 1940, and produced its first Ferrari-badged car in 1947.

package/starters/apps/documentation-site/src/routes/docs/docs.css

@@ -1,22 +0,0 @@
-.docs {
-  display: grid;
-  grid-template-columns: 210px auto 190px;
-  grid-template-areas: 'menu article on-this-page';
-  gap: 40px;
-}
-
-.docs h1 {
-  margin-top: 0;
-}
-
-.docs .menu {
-  grid-area: menu;
-}
-
-.docs article {
-  grid-area: article;
-}
-
-.docs .on-this-page {
-  grid-area: on-this-page;
-}

package/starters/apps/documentation-site/src/routes/docs/getting-started/index.md

@@ -1,13 +0,0 @@
----
-title: Getting Started
----
-
-# Getting Started
-
-```
-npm create qwik@latest
-```
-
-## Ford GT40
-
-The [Ford GT40](https://en.wikipedia.org/wiki/Ford_GT40) is a high-performance endurance racing car commissioned by the Ford Motor Company. It grew out of the "Ford GT" (for Grand Touring) project, an effort to compete in European long-distance sports car races, against Ferrari, which won the prestigious 24 Hours of Le Mans race from 1960 to 1965. Ford succeeded with the GT40, winning the 1966 through 1969 races.

package/starters/apps/documentation-site/src/routes/docs/index.md

@@ -1,22 +0,0 @@
----
-title: Overview
----
-
-# Docs Site Overview
-
-This page is wrapped by two layouts because this source file `src/routes/docs/index.md` is nested. The applied layouts are:
-
-- `src/routes/docs/layout.tsx`
-- `src/routes/layout.tsx`
-
-## Left Menu
-
-The left menu ordering is created with the `src/routes/docs/menu.md` markdown file.
-
-## More info:
-
-- [Layouts](https://qwik.builder.io/qwikcity/layout/overview/)
-- [Routing](https://qwik.builder.io/qwikcity/routing/overview/)
-- [Authoring Content](https://qwik.builder.io/qwikcity/content/component/)
-- [Deployment](https://qwik.builder.io/deployments/overview/)
-- [Static Site Generation (SSG)](https://qwik.builder.io/qwikcity/static-site-generation/overview/)

package/starters/apps/documentation-site/src/routes/docs/layout.tsx

@@ -1,25 +0,0 @@
-import { component$, Slot, useStyles$ } from '@builder.io/qwik';
-import type { DocumentHead } from '@builder.io/qwik-city';
-import Menu from '~/components/menu/menu';
-import OnThisPage from '~/components/on-this-page/on-this-page';
-import styles from './docs.css?inline';
-
-export default component$(() => {
-  useStyles$(styles);
-
-  return (
-    <div class="docs">
-      <Menu />
-      <article>
-        <Slot />
-      </article>
-      <OnThisPage />
-    </div>
-  );
-});
-
-export const head: DocumentHead = ({ head }) => {
-  return {
-    title: `${head.title} - Documentation`,
-  };
-};

package/starters/apps/documentation-site/src/routes/docs/menu.md

@@ -1,21 +0,0 @@
-# Guide
-
-## Guides
-
-- [Getting Started](getting-started/index.md)
-
-## Advanced
-
-- [Overview](advanced/index.md)
-
-## Examples
-
-- [Hello World](https://qwik.builder.io/examples/introduction/hello-world/)
-- [Tutorials](https://qwik.builder.io/tutorial/welcome/overview/)
-- [Playground](https://qwik.builder.io/playground/)
-
-## Community
-
-- [@QwikDev](https://twitter.com/QwikDev)
-- [Discord](https://qwik.builder.io/chat)
-- [GitHub](https://github.com/BuilderIO/qwik)