create-qwik 0.0.42 → 0.0.100-dev20220820024200
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/create-qwik +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/starters/apps/base/.vscode/qwik.code-snippets +4 -4
- package/starters/apps/base/package.json +2 -2
- package/starters/apps/base/src/root.tsx +1 -0
- package/starters/apps/blank/src/components/app/app.tsx +4 -4
- package/starters/apps/blank/src/components/logo/logo.tsx +3 -3
- package/starters/apps/blank/src/root.tsx +1 -0
- package/starters/apps/library/src/components/logo/logo.tsx +3 -3
- package/starters/apps/qwik-city/package.json +1 -2
- package/starters/apps/qwik-city/src/components/breadcrumbs/breadcrumbs.tsx +17 -20
- package/starters/apps/qwik-city/src/components/footer/footer.tsx +24 -29
- package/starters/apps/qwik-city/src/components/head/head.tsx +29 -32
- package/starters/apps/qwik-city/src/components/header/header.tsx +31 -36
- package/starters/apps/qwik-city/src/components/menu/menu.tsx +31 -34
- package/starters/apps/qwik-city/src/root.tsx +9 -7
- package/starters/apps/qwik-city/src/routes/about-us/index.tsx +3 -3
- package/starters/apps/qwik-city/src/routes/api/index@api.tsx +3 -3
- package/starters/apps/qwik-city/src/routes/api/layout-api.tsx +3 -3
- package/starters/apps/qwik-city/src/routes/blog/[...slug]/index.tsx +3 -3
- package/starters/apps/qwik-city/src/routes/blog/layout.tsx +3 -3
- package/starters/apps/qwik-city/src/routes/dashboard/index.tsx +3 -3
- package/starters/apps/qwik-city/src/routes/dashboard/layout!.tsx +3 -3
- package/starters/apps/qwik-city/src/routes/dashboard/profile/index.tsx +3 -3
- package/starters/apps/qwik-city/src/routes/dashboard/settings/index.tsx +3 -3
- package/starters/apps/qwik-city/src/routes/docs/[category]/[id]/index.tsx +3 -3
- package/starters/apps/qwik-city/src/routes/docs/index.tsx +3 -3
- package/starters/apps/qwik-city/src/routes/docs/layout!.tsx +3 -3
- package/starters/apps/qwik-city/src/routes/index.tsx +3 -3
- package/starters/apps/qwik-city/src/routes/layout.tsx +3 -3
- package/starters/apps/qwik-city/src/routes/products/[id]/index.tsx +3 -3
- package/starters/servers/cloudflare-pages/functions/[[path]].ts +1 -1
- package/starters/servers/express/src/entry.express.tsx +4 -4
- package/starters/servers/netlify-edge/README.md +6 -3
- package/starters/servers/netlify-edge/netlify.toml +7 -0
- package/starters/servers/netlify-edge/package.json +1 -1
- package/starters/apps/qwik-city/src/components/body/body.tsx +0 -15
package/create-qwik
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
#!/usr/bin/env node
|
|
2
2
|
"use strict";/**
|
|
3
3
|
* @license
|
|
4
|
-
* create-qwik 0.0.
|
|
4
|
+
* create-qwik 0.0.100-dev20220820024308
|
|
5
5
|
* Copyright Builder.io, Inc. All Rights Reserved.
|
|
6
6
|
* Use of this source code is governed by an MIT-style license that can be
|
|
7
7
|
* found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE
|
package/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
"use strict";/**
|
|
2
2
|
* @license
|
|
3
|
-
* create-qwik 0.0.
|
|
3
|
+
* create-qwik 0.0.100-dev20220820024308
|
|
4
4
|
* Copyright Builder.io, Inc. All Rights Reserved.
|
|
5
5
|
* Use of this source code is governed by an MIT-style license that can be
|
|
6
6
|
* found in the LICENSE file at https://github.com/BuilderIO/qwik/blob/main/LICENSE
|
package/package.json
CHANGED
|
@@ -14,11 +14,11 @@
|
|
|
14
14
|
" });",
|
|
15
15
|
" $0",
|
|
16
16
|
" return (",
|
|
17
|
-
" <
|
|
17
|
+
" <div>",
|
|
18
18
|
" <button onClick$={() => state.count += props.step}>",
|
|
19
19
|
" {state.count}",
|
|
20
20
|
" </button>",
|
|
21
|
-
" </
|
|
21
|
+
" </div>",
|
|
22
22
|
" );",
|
|
23
23
|
"});"
|
|
24
24
|
]
|
|
@@ -30,11 +30,11 @@
|
|
|
30
30
|
"body": [
|
|
31
31
|
"export const ${1:MyCmp} = component$(() => {",
|
|
32
32
|
" return (",
|
|
33
|
-
" <
|
|
33
|
+
" <div>",
|
|
34
34
|
" <div>",
|
|
35
35
|
" ${1:MyCmp}",
|
|
36
36
|
" </div>",
|
|
37
|
-
" </
|
|
37
|
+
" </div>",
|
|
38
38
|
" );",
|
|
39
39
|
"});"
|
|
40
40
|
]
|
|
@@ -15,12 +15,12 @@
|
|
|
15
15
|
"typecheck": "tsc --incremental --noEmit"
|
|
16
16
|
},
|
|
17
17
|
"devDependencies": {
|
|
18
|
-
"@builder.io/qwik": "0.0.
|
|
18
|
+
"@builder.io/qwik": "0.0.100-dev20220820024200",
|
|
19
19
|
"@types/eslint": "8.4.5",
|
|
20
20
|
"@types/node": "latest",
|
|
21
21
|
"@typescript-eslint/eslint-plugin": "5.30.7",
|
|
22
22
|
"@typescript-eslint/parser": "5.30.7",
|
|
23
|
-
"eslint-plugin-qwik": "0.0.
|
|
23
|
+
"eslint-plugin-qwik": "0.0.100-dev20220820024200",
|
|
24
24
|
"eslint": "8.20.0",
|
|
25
25
|
"node-fetch": "3.2.9",
|
|
26
26
|
"typescript": "4.7.4",
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { useStore, component
|
|
1
|
+
import { useStore, component$ } from '@builder.io/qwik';
|
|
2
2
|
import { Logo } from '../logo/logo';
|
|
3
3
|
|
|
4
4
|
export const App = component$(() => {
|
|
5
5
|
const state = useStore({ name: 'World' });
|
|
6
6
|
return (
|
|
7
|
-
<
|
|
8
|
-
<Logo
|
|
7
|
+
<div class="my-app p-20">
|
|
8
|
+
<Logo />
|
|
9
9
|
|
|
10
10
|
<h1 class="text-3xl mb-2">Congratulations Qwik is working!</h1>
|
|
11
11
|
|
|
@@ -49,6 +49,6 @@ export const App = component$(() => {
|
|
|
49
49
|
Builder.io
|
|
50
50
|
</a>
|
|
51
51
|
</p>
|
|
52
|
-
</
|
|
52
|
+
</div>
|
|
53
53
|
);
|
|
54
54
|
});
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { component
|
|
1
|
+
import { component$ } from '@builder.io/qwik';
|
|
2
2
|
|
|
3
3
|
export const Logo = component$(() => {
|
|
4
4
|
return (
|
|
5
|
-
<
|
|
5
|
+
<div style={{ 'text-align': 'center' }}>
|
|
6
6
|
<a href="https://qwik.builder.io/">
|
|
7
7
|
<img
|
|
8
8
|
alt="Qwik Logo"
|
|
@@ -11,6 +11,6 @@ export const Logo = component$(() => {
|
|
|
11
11
|
src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F667ab6c2283d4c4d878fb9083aacc10f"
|
|
12
12
|
/>
|
|
13
13
|
</a>
|
|
14
|
-
</
|
|
14
|
+
</div>
|
|
15
15
|
);
|
|
16
16
|
});
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { component
|
|
1
|
+
import { component$ } from '@builder.io/qwik';
|
|
2
2
|
|
|
3
3
|
export const Logo = component$(() => {
|
|
4
4
|
return (
|
|
5
|
-
<
|
|
5
|
+
<logo style={{ 'text-align': 'center' }}>
|
|
6
6
|
<a href="https://qwik.builder.io/">
|
|
7
7
|
<img
|
|
8
8
|
alt="Qwik Logo"
|
|
@@ -11,6 +11,6 @@ export const Logo = component$(() => {
|
|
|
11
11
|
src="https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F667ab6c2283d4c4d878fb9083aacc10f"
|
|
12
12
|
/>
|
|
13
13
|
</a>
|
|
14
|
-
</
|
|
14
|
+
</logo>
|
|
15
15
|
);
|
|
16
16
|
});
|
|
@@ -5,7 +5,6 @@
|
|
|
5
5
|
"selectServer": true,
|
|
6
6
|
"featureOptions": [
|
|
7
7
|
"prettier",
|
|
8
|
-
"react",
|
|
9
8
|
"tailwindcss"
|
|
10
9
|
],
|
|
11
10
|
"featureEnabled": [
|
|
@@ -14,7 +13,7 @@
|
|
|
14
13
|
},
|
|
15
14
|
"type": "module",
|
|
16
15
|
"devDependencies": {
|
|
17
|
-
"@builder.io/qwik-city": "0.0.
|
|
16
|
+
"@builder.io/qwik-city": "0.0.101",
|
|
18
17
|
"vite-tsconfig-paths": "3.5.0"
|
|
19
18
|
}
|
|
20
19
|
}
|
|
@@ -1,29 +1,26 @@
|
|
|
1
|
-
import { component$,
|
|
1
|
+
import { component$, useStyles$ } from '@builder.io/qwik';
|
|
2
2
|
import { useContent, useLocation, ContentMenu } from '@builder.io/qwik-city';
|
|
3
3
|
import styles from './breadcrumbs.css?inline';
|
|
4
4
|
|
|
5
|
-
export const Breadcrumbs = component$(
|
|
6
|
-
()
|
|
7
|
-
useStyles$(styles);
|
|
5
|
+
export const Breadcrumbs = component$(() => {
|
|
6
|
+
useStyles$(styles);
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
const { menu } = useContent();
|
|
9
|
+
const loc = useLocation();
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
11
|
+
const breadcrumbs = createBreadcrumbs(menu, loc.pathname);
|
|
12
|
+
if (breadcrumbs.length === 0) {
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
16
15
|
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
{ tagName: 'nav' }
|
|
26
|
-
);
|
|
16
|
+
return (
|
|
17
|
+
<nav class="breadcrumbs">
|
|
18
|
+
{breadcrumbs.map((b) => (
|
|
19
|
+
<span>{b.href ? <a href={b.href}>{b.text}</a> : b.text}</span>
|
|
20
|
+
))}
|
|
21
|
+
</nav>
|
|
22
|
+
);
|
|
23
|
+
});
|
|
27
24
|
|
|
28
25
|
export function createBreadcrumbs(menu: ContentMenu | undefined, pathname: string) {
|
|
29
26
|
if (menu?.items) {
|
|
@@ -1,32 +1,27 @@
|
|
|
1
|
-
import { component$,
|
|
1
|
+
import { component$, useStyles$ } from '@builder.io/qwik';
|
|
2
2
|
import styles from './footer.css?inline';
|
|
3
3
|
|
|
4
|
-
export default component$(
|
|
5
|
-
()
|
|
6
|
-
useStyles$(styles);
|
|
4
|
+
export default component$(() => {
|
|
5
|
+
useStyles$(styles);
|
|
7
6
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
{
|
|
30
|
-
tagName: 'footer',
|
|
31
|
-
}
|
|
32
|
-
);
|
|
7
|
+
return (
|
|
8
|
+
<footer>
|
|
9
|
+
<ul>
|
|
10
|
+
<li>
|
|
11
|
+
<a href="/blog">Blog</a>
|
|
12
|
+
</li>
|
|
13
|
+
<li>
|
|
14
|
+
<a href="/docs">Docs</a>
|
|
15
|
+
</li>
|
|
16
|
+
<li>
|
|
17
|
+
<a href="/about-us">About Us</a>
|
|
18
|
+
</li>
|
|
19
|
+
<li>
|
|
20
|
+
<a class="footer-home" href="/">
|
|
21
|
+
Home
|
|
22
|
+
</a>
|
|
23
|
+
</li>
|
|
24
|
+
</ul>
|
|
25
|
+
</footer>
|
|
26
|
+
);
|
|
27
|
+
});
|
|
@@ -3,35 +3,32 @@ import { useDocumentHead, useLocation } from '@builder.io/qwik-city';
|
|
|
3
3
|
import { Analytics } from './analytics';
|
|
4
4
|
import { Social } from './social';
|
|
5
5
|
|
|
6
|
-
export const Head = component$(
|
|
7
|
-
()
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
{
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
{
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
{
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
},
|
|
36
|
-
{ tagName: 'head' }
|
|
37
|
-
);
|
|
6
|
+
export const Head = component$(() => {
|
|
7
|
+
const head = useDocumentHead();
|
|
8
|
+
const loc = useLocation();
|
|
9
|
+
|
|
10
|
+
return (
|
|
11
|
+
<head>
|
|
12
|
+
<meta charSet="utf-8" />
|
|
13
|
+
|
|
14
|
+
<title>{head.title ? `${head.title} - Qwik` : `Qwik`}</title>
|
|
15
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
16
|
+
<link rel="canonical" href={loc.href} />
|
|
17
|
+
|
|
18
|
+
{head.meta.map((m) => (
|
|
19
|
+
<meta {...m} />
|
|
20
|
+
))}
|
|
21
|
+
|
|
22
|
+
{head.links.map((l) => (
|
|
23
|
+
<link {...l} />
|
|
24
|
+
))}
|
|
25
|
+
|
|
26
|
+
{head.styles.map((s) => (
|
|
27
|
+
<style {...s.props} dangerouslySetInnerHTML={s.style} />
|
|
28
|
+
))}
|
|
29
|
+
|
|
30
|
+
<Social />
|
|
31
|
+
<Analytics loc={loc} />
|
|
32
|
+
</head>
|
|
33
|
+
);
|
|
34
|
+
});
|
|
@@ -1,41 +1,36 @@
|
|
|
1
|
-
import { component$,
|
|
1
|
+
import { component$, useStyles$ } from '@builder.io/qwik';
|
|
2
2
|
import { useLocation } from '@builder.io/qwik-city';
|
|
3
3
|
import styles from './header.css?inline';
|
|
4
4
|
|
|
5
|
-
export default component$(
|
|
6
|
-
()
|
|
7
|
-
useStyles$(styles);
|
|
5
|
+
export default component$(() => {
|
|
6
|
+
useStyles$(styles);
|
|
8
7
|
|
|
9
|
-
|
|
8
|
+
const pathname = useLocation().pathname;
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
{
|
|
39
|
-
tagName: 'header',
|
|
40
|
-
}
|
|
41
|
-
);
|
|
10
|
+
return (
|
|
11
|
+
<header>
|
|
12
|
+
<div class="header-inner">
|
|
13
|
+
<section class="logo">
|
|
14
|
+
<a href="/">Qwik City 🏙</a>
|
|
15
|
+
</section>
|
|
16
|
+
<nav>
|
|
17
|
+
<a href="/blog" class={{ active: pathname.startsWith('/blog') }}>
|
|
18
|
+
Blog
|
|
19
|
+
</a>
|
|
20
|
+
<a href="/docs" class={{ active: pathname.startsWith('/docs') }}>
|
|
21
|
+
Docs
|
|
22
|
+
</a>
|
|
23
|
+
<a href="/api" class={{ active: pathname.startsWith('/api') }}>
|
|
24
|
+
API
|
|
25
|
+
</a>
|
|
26
|
+
<a href="/products/hat" class={{ active: pathname.startsWith('/products') }}>
|
|
27
|
+
Products
|
|
28
|
+
</a>
|
|
29
|
+
<a href="/about-us" class={{ active: pathname.startsWith('/about-us') }}>
|
|
30
|
+
About Us
|
|
31
|
+
</a>
|
|
32
|
+
</nav>
|
|
33
|
+
</div>
|
|
34
|
+
</header>
|
|
35
|
+
);
|
|
36
|
+
});
|
|
@@ -1,39 +1,36 @@
|
|
|
1
|
-
import { component$,
|
|
1
|
+
import { component$, useStyles$ } from '@builder.io/qwik';
|
|
2
2
|
import { useContent, Link, useLocation } from '@builder.io/qwik-city';
|
|
3
3
|
import styles from './menu.css?inline';
|
|
4
4
|
|
|
5
|
-
export const Menu = component$(
|
|
6
|
-
()
|
|
7
|
-
useStyles$(styles);
|
|
5
|
+
export const Menu = component$(() => {
|
|
6
|
+
useStyles$(styles);
|
|
8
7
|
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
const { menu } = useContent();
|
|
9
|
+
const loc = useLocation();
|
|
11
10
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
{ tagName: 'aside' }
|
|
39
|
-
);
|
|
11
|
+
return (
|
|
12
|
+
<aside class="menu">
|
|
13
|
+
{menu
|
|
14
|
+
? menu.items?.map((item) => (
|
|
15
|
+
<>
|
|
16
|
+
<h5>{item.text}</h5>
|
|
17
|
+
<ul>
|
|
18
|
+
{item.items?.map((item) => (
|
|
19
|
+
<li>
|
|
20
|
+
<Link
|
|
21
|
+
href={item.href}
|
|
22
|
+
class={{
|
|
23
|
+
'is-active': loc.pathname === item.href,
|
|
24
|
+
}}
|
|
25
|
+
>
|
|
26
|
+
{item.text}
|
|
27
|
+
</Link>
|
|
28
|
+
</li>
|
|
29
|
+
))}
|
|
30
|
+
</ul>
|
|
31
|
+
</>
|
|
32
|
+
))
|
|
33
|
+
: null}
|
|
34
|
+
</aside>
|
|
35
|
+
);
|
|
36
|
+
});
|
|
@@ -1,14 +1,16 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { component$ } from '@builder.io/qwik';
|
|
2
|
+
import { QwikCity, RouterOutlet } from '@builder.io/qwik-city';
|
|
2
3
|
import { Head } from './components/head/head';
|
|
3
|
-
import { Body } from './components/body/body';
|
|
4
4
|
|
|
5
5
|
import './global.css';
|
|
6
6
|
|
|
7
|
-
export default () => {
|
|
7
|
+
export default component$(() => {
|
|
8
8
|
return (
|
|
9
|
-
<
|
|
9
|
+
<QwikCity>
|
|
10
10
|
<Head />
|
|
11
|
-
<
|
|
12
|
-
|
|
11
|
+
<body lang="en">
|
|
12
|
+
<RouterOutlet />
|
|
13
|
+
</body>
|
|
14
|
+
</QwikCity>
|
|
13
15
|
);
|
|
14
|
-
};
|
|
16
|
+
});
|
|
@@ -1,14 +1,14 @@
|
|
|
1
|
-
import { component
|
|
1
|
+
import { component$ } from '@builder.io/qwik';
|
|
2
2
|
import type { DocumentHead } from '@builder.io/qwik-city';
|
|
3
3
|
|
|
4
4
|
export default component$(() => {
|
|
5
5
|
return (
|
|
6
|
-
<
|
|
6
|
+
<div>
|
|
7
7
|
<h1>About Us</h1>
|
|
8
8
|
<p>
|
|
9
9
|
<a href="/">Home</a>
|
|
10
10
|
</p>
|
|
11
|
-
</
|
|
11
|
+
</div>
|
|
12
12
|
);
|
|
13
13
|
});
|
|
14
14
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { component$,
|
|
1
|
+
import { component$, useClientEffect$, useStore } from '@builder.io/qwik';
|
|
2
2
|
|
|
3
3
|
/**
|
|
4
4
|
* Uses named layout `foo`
|
|
@@ -16,7 +16,7 @@ export default component$(() => {
|
|
|
16
16
|
});
|
|
17
17
|
|
|
18
18
|
return (
|
|
19
|
-
<
|
|
19
|
+
<div>
|
|
20
20
|
<h1>Qwik City Test API!</h1>
|
|
21
21
|
|
|
22
22
|
<ul>
|
|
@@ -29,6 +29,6 @@ export default component$(() => {
|
|
|
29
29
|
</ul>
|
|
30
30
|
|
|
31
31
|
<p>Timestamp: {store.timestamp}</p>
|
|
32
|
-
</
|
|
32
|
+
</div>
|
|
33
33
|
);
|
|
34
34
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { component$,
|
|
1
|
+
import { component$, Slot, useStyles$ } from '@builder.io/qwik';
|
|
2
2
|
import type { DocumentHead } from '@builder.io/qwik-city';
|
|
3
3
|
import styles from './api.css?inline';
|
|
4
4
|
|
|
@@ -11,7 +11,7 @@ export default component$(() => {
|
|
|
11
11
|
useStyles$(styles);
|
|
12
12
|
|
|
13
13
|
return (
|
|
14
|
-
<
|
|
14
|
+
<div class="api">
|
|
15
15
|
<aside class="api-menu">
|
|
16
16
|
<h2>API</h2>
|
|
17
17
|
<ul>
|
|
@@ -26,7 +26,7 @@ export default component$(() => {
|
|
|
26
26
|
<section class="api-content">
|
|
27
27
|
<Slot />
|
|
28
28
|
</section>
|
|
29
|
-
</
|
|
29
|
+
</div>
|
|
30
30
|
);
|
|
31
31
|
});
|
|
32
32
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { component$,
|
|
1
|
+
import { component$, Resource } from '@builder.io/qwik';
|
|
2
2
|
import { useEndpoint, DocumentHead, RequestHandler } from '@builder.io/qwik-city';
|
|
3
3
|
|
|
4
4
|
export default component$(() => {
|
|
5
5
|
const resource = useEndpoint<typeof onGet>();
|
|
6
6
|
|
|
7
7
|
return (
|
|
8
|
-
<
|
|
8
|
+
<div>
|
|
9
9
|
<Resource
|
|
10
10
|
resource={resource}
|
|
11
11
|
onResolved={(blog) => (
|
|
@@ -15,7 +15,7 @@ export default component$(() => {
|
|
|
15
15
|
</>
|
|
16
16
|
)}
|
|
17
17
|
/>
|
|
18
|
-
</
|
|
18
|
+
</div>
|
|
19
19
|
);
|
|
20
20
|
});
|
|
21
21
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { component$,
|
|
1
|
+
import { component$, Slot } from '@builder.io/qwik';
|
|
2
2
|
|
|
3
3
|
export default component$(() => {
|
|
4
4
|
return (
|
|
5
|
-
<
|
|
5
|
+
<div>
|
|
6
6
|
<section class="blog-content">
|
|
7
7
|
<Slot />
|
|
8
8
|
</section>
|
|
@@ -16,6 +16,6 @@ export default component$(() => {
|
|
|
16
16
|
</li>
|
|
17
17
|
</ul>
|
|
18
18
|
</aside>
|
|
19
|
-
</
|
|
19
|
+
</div>
|
|
20
20
|
);
|
|
21
21
|
});
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { component
|
|
1
|
+
import { component$ } from '@builder.io/qwik';
|
|
2
2
|
import type { DocumentHead } from '@builder.io/qwik-city';
|
|
3
3
|
|
|
4
4
|
export default component$(() => {
|
|
5
5
|
return (
|
|
6
|
-
<
|
|
6
|
+
<div>
|
|
7
7
|
<h1>Dashboard</h1>
|
|
8
8
|
<p>Welcome to the dashboard.</p>
|
|
9
|
-
</
|
|
9
|
+
</div>
|
|
10
10
|
);
|
|
11
11
|
});
|
|
12
12
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { component$,
|
|
1
|
+
import { component$, Slot, useStyles$ } from '@builder.io/qwik';
|
|
2
2
|
import type { DocumentHead } from '@builder.io/qwik-city';
|
|
3
3
|
import Footer from '../../components/footer/footer';
|
|
4
4
|
import Header from '../../components/header/header';
|
|
@@ -14,7 +14,7 @@ export default component$(() => {
|
|
|
14
14
|
useStyles$(styles);
|
|
15
15
|
|
|
16
16
|
return (
|
|
17
|
-
<
|
|
17
|
+
<div>
|
|
18
18
|
<Header />
|
|
19
19
|
<main class="dashboard">
|
|
20
20
|
<aside class="dashboard-menu">
|
|
@@ -33,7 +33,7 @@ export default component$(() => {
|
|
|
33
33
|
</section>
|
|
34
34
|
</main>
|
|
35
35
|
<Footer />
|
|
36
|
-
</
|
|
36
|
+
</div>
|
|
37
37
|
);
|
|
38
38
|
});
|
|
39
39
|
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { component
|
|
1
|
+
import { component$ } from '@builder.io/qwik';
|
|
2
2
|
import type { DocumentHead } from '@builder.io/qwik-city';
|
|
3
3
|
|
|
4
4
|
export default component$(() => {
|
|
5
5
|
return (
|
|
6
|
-
<
|
|
6
|
+
<div>
|
|
7
7
|
<h1>Profile</h1>
|
|
8
8
|
<p>My Profile</p>
|
|
9
|
-
</
|
|
9
|
+
</div>
|
|
10
10
|
);
|
|
11
11
|
});
|
|
12
12
|
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { component
|
|
1
|
+
import { component$ } from '@builder.io/qwik';
|
|
2
2
|
import type { DocumentHead } from '@builder.io/qwik-city';
|
|
3
3
|
|
|
4
4
|
export default component$(() => {
|
|
5
5
|
return (
|
|
6
|
-
<
|
|
6
|
+
<div>
|
|
7
7
|
<h1>Settings</h1>
|
|
8
8
|
<p>My Settings</p>
|
|
9
|
-
</
|
|
9
|
+
</div>
|
|
10
10
|
);
|
|
11
11
|
});
|
|
12
12
|
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { component
|
|
1
|
+
import { component$ } from '@builder.io/qwik';
|
|
2
2
|
import { useLocation, DocumentHead } from '@builder.io/qwik-city';
|
|
3
3
|
|
|
4
4
|
export default component$(() => {
|
|
5
5
|
const { pathname, params } = useLocation();
|
|
6
6
|
|
|
7
7
|
return (
|
|
8
|
-
<
|
|
8
|
+
<div>
|
|
9
9
|
<h1>
|
|
10
10
|
Docs: {params.category} {params.id}
|
|
11
11
|
</h1>
|
|
12
12
|
<p>pathname: {pathname}</p>
|
|
13
13
|
<p>category: {params.category}</p>
|
|
14
14
|
<p>id: {params.id}</p>
|
|
15
|
-
</
|
|
15
|
+
</div>
|
|
16
16
|
);
|
|
17
17
|
});
|
|
18
18
|
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import { component
|
|
1
|
+
import { component$ } from '@builder.io/qwik';
|
|
2
2
|
import type { DocumentHead } from '@builder.io/qwik-city';
|
|
3
3
|
|
|
4
4
|
export default component$(() => {
|
|
5
5
|
return (
|
|
6
|
-
<
|
|
6
|
+
<div>
|
|
7
7
|
<h1>Welcome to the Docs!</h1>
|
|
8
|
-
</
|
|
8
|
+
</div>
|
|
9
9
|
);
|
|
10
10
|
});
|
|
11
11
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { component$,
|
|
1
|
+
import { component$, Slot, useStyles$ } from '@builder.io/qwik';
|
|
2
2
|
import type { DocumentHead } from '@builder.io/qwik-city';
|
|
3
3
|
import { Breadcrumbs } from '../../components/breadcrumbs/breadcrumbs';
|
|
4
4
|
import Footer from '../../components/footer/footer';
|
|
@@ -10,7 +10,7 @@ export default component$(() => {
|
|
|
10
10
|
useStyles$(styles);
|
|
11
11
|
|
|
12
12
|
return (
|
|
13
|
-
<
|
|
13
|
+
<div class="docs full-screen">
|
|
14
14
|
<Header />
|
|
15
15
|
<main>
|
|
16
16
|
<Menu />
|
|
@@ -20,7 +20,7 @@ export default component$(() => {
|
|
|
20
20
|
<Footer />
|
|
21
21
|
</section>
|
|
22
22
|
</main>
|
|
23
|
-
</
|
|
23
|
+
</div>
|
|
24
24
|
);
|
|
25
25
|
});
|
|
26
26
|
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
import { component
|
|
1
|
+
import { component$ } from '@builder.io/qwik';
|
|
2
2
|
import type { DocumentHead } from '@builder.io/qwik-city';
|
|
3
3
|
|
|
4
4
|
export default component$(() => {
|
|
5
5
|
return (
|
|
6
|
-
<
|
|
6
|
+
<div>
|
|
7
7
|
<h1>Welcome to Qwik City</h1>
|
|
8
8
|
|
|
9
9
|
<p>The meta-framework for Qwik.</p>
|
|
10
|
-
</
|
|
10
|
+
</div>
|
|
11
11
|
);
|
|
12
12
|
});
|
|
13
13
|
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { component$,
|
|
1
|
+
import { component$, Slot } from '@builder.io/qwik';
|
|
2
2
|
import Footer from '../components/footer/footer';
|
|
3
3
|
import Header from '../components/header/header';
|
|
4
4
|
|
|
5
5
|
export default component$(() => {
|
|
6
6
|
return (
|
|
7
|
-
<
|
|
7
|
+
<div>
|
|
8
8
|
<Header />
|
|
9
9
|
<main>
|
|
10
10
|
<Slot />
|
|
11
11
|
</main>
|
|
12
12
|
<Footer />
|
|
13
|
-
</
|
|
13
|
+
</div>
|
|
14
14
|
);
|
|
15
15
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { Resource, component
|
|
1
|
+
import { Resource, component$ } from '@builder.io/qwik';
|
|
2
2
|
import { useEndpoint, useLocation, RequestHandler, DocumentHead } from '@builder.io/qwik-city';
|
|
3
3
|
|
|
4
4
|
export default component$(() => {
|
|
@@ -7,7 +7,7 @@ export default component$(() => {
|
|
|
7
7
|
const resource = useEndpoint<typeof onGet>();
|
|
8
8
|
|
|
9
9
|
return (
|
|
10
|
-
|
|
10
|
+
<>
|
|
11
11
|
<Resource
|
|
12
12
|
resource={resource}
|
|
13
13
|
onPending={() => <p>Loading</p>}
|
|
@@ -44,7 +44,7 @@ export default component$(() => {
|
|
|
44
44
|
<a href="/products/hoodie">Hoodie (404 Not Found)</a>
|
|
45
45
|
</li>
|
|
46
46
|
</ul>
|
|
47
|
-
|
|
47
|
+
</>
|
|
48
48
|
);
|
|
49
49
|
});
|
|
50
50
|
|
|
@@ -14,13 +14,13 @@ const { router, notFound } = qwikCity(render);
|
|
|
14
14
|
// create the express server
|
|
15
15
|
const app = express();
|
|
16
16
|
|
|
17
|
+
// static asset handlers
|
|
18
|
+
app.use(`/build`, express.static(buildDir, { immutable: true, maxAge: '1y' }));
|
|
19
|
+
app.use(express.static(distDir));
|
|
20
|
+
|
|
17
21
|
// use Qwik City's page and endpoint handler
|
|
18
22
|
app.use(router);
|
|
19
23
|
|
|
20
|
-
// static asset handlers
|
|
21
|
-
app.use(`/build`, express.static(buildDir, { immutable: true, maxAge: '1y', index: false }));
|
|
22
|
-
app.use(express.static(distDir, { index: false }));
|
|
23
|
-
|
|
24
24
|
// use Qwik City's 404 handler
|
|
25
25
|
app.use(notFound);
|
|
26
26
|
|
|
@@ -6,10 +6,11 @@ This starter site is configured to deploy to [Netlify Edge Functions](https://ww
|
|
|
6
6
|
|
|
7
7
|
The [Netlify CLI](https://docs.netlify.com/cli/get-started/) can be used to preview a production build locally. To do so: First build your site, then to start a local server, run:
|
|
8
8
|
|
|
9
|
-
1.
|
|
10
|
-
2.
|
|
9
|
+
1. install Netlify CLI globally `npm i -g netlify-cli`
|
|
10
|
+
2. Build your site both ssr and client `npm run build`.
|
|
11
|
+
3. Start a local server with `npm run serve`.
|
|
11
12
|
In this project, `npm run serve` uses the `netlify dev` command to spin up a server that can handle Netlify's Edge Functions locally.
|
|
12
|
-
|
|
13
|
+
4. Visit [http://localhost:8888/](http://localhost:8888/) to check out your site.
|
|
13
14
|
|
|
14
15
|
### Deployments
|
|
15
16
|
|
|
@@ -34,3 +35,5 @@ netlify deploy --build
|
|
|
34
35
|
```
|
|
35
36
|
|
|
36
37
|
You must use the `--build` flag whenever you deploy. This ensures that the Edge Functions that this starter site relies on are generated and available when you deploy your site.
|
|
38
|
+
|
|
39
|
+
Add `--prod` flag to deploy to production.
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"vite": {
|
|
13
13
|
"VITE_IMPORTS": "import netlifyEdge from '@netlify/vite-plugin-netlify-edge';",
|
|
14
14
|
"VITE_CONFIG": "",
|
|
15
|
-
"VITE_QWIK": "{ ssr: { outDir: '
|
|
15
|
+
"VITE_QWIK": "{ ssr: { outDir: 'netlify/edge-functions/entry.netlify' } }",
|
|
16
16
|
"VITE_PLUGINS": "netlifyEdge({ functionName: 'entry.netlify' }),"
|
|
17
17
|
}
|
|
18
18
|
}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { component$, Host } from '@builder.io/qwik';
|
|
2
|
-
import { RouterOutlet } from '@builder.io/qwik-city';
|
|
3
|
-
|
|
4
|
-
export const Body = component$(
|
|
5
|
-
() => {
|
|
6
|
-
return (
|
|
7
|
-
<Host>
|
|
8
|
-
<RouterOutlet />
|
|
9
|
-
</Host>
|
|
10
|
-
);
|
|
11
|
-
},
|
|
12
|
-
{
|
|
13
|
-
tagName: 'body',
|
|
14
|
-
}
|
|
15
|
-
);
|