Skip to content

Commit 5f0f0b6

Browse files
gioboagioboa
committed
add icons & manifest
1 parent 8e4e96a commit 5f0f0b6

12 files changed

+74
-43
lines changed

‎public/favicon.ico

1.12 KB
Binary file not shown.

‎public/favicon.svg

-1
This file was deleted.

‎public/icons/apple-touch-icon-180x180.png

2.7 KB
Loading

‎public/icons/icon-192x192.maskable.png

4.31 KB
Loading

‎public/icons/icon-192x192.png

3.26 KB
Loading

‎public/icons/icon-512x512.maskable.png

18.7 KB
Loading

‎public/icons/icon-512x512.png

12.9 KB
Loading

‎public/icons/icon-96x96.png

1.72 KB
Loading

‎public/manifest.json

+41-7
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,43 @@
11
{
2-
"$schema": "https://json.schemastore.org/web-manifest-combined.json",
3-
"name": "qwik-project-name",
4-
"short_name": "Welcome to Qwik",
5-
"start_url": ".",
6-
"display": "standalone",
7-
"background_color": "#fff",
8-
"description": "A Qwik project app."
2+
"theme_color": "#02C652",
3+
"background_color": "#fff",
4+
"display": "standalone",
5+
"start_url": "/",
6+
"name": "Vue Storefront Boilerplate for Qwik",
7+
"short_name": "VSFxQwik",
8+
"description": "Vue Storefront Boilerplate for Qwik",
9+
"icons": [
10+
{
11+
"src": "/icons/apple-touch-icon-180x180.png",
12+
"sizes": "180x180",
13+
"type": "image/png"
14+
},
15+
{
16+
"src": "/icons/icon-96x96.png",
17+
"sizes": "96x96",
18+
"type": "image/png"
19+
},
20+
{
21+
"src": "/icons/icon-192x192.maskable.png",
22+
"sizes": "192x192",
23+
"type": "image/png",
24+
"purpose": "maskable"
25+
},
26+
{
27+
"src": "/icons/icon-192x192.png",
28+
"sizes": "192x192",
29+
"type": "image/png"
30+
},
31+
{
32+
"src": "/icons/icon-512x512.png",
33+
"sizes": "512x512",
34+
"type": "image/png"
35+
},
36+
{
37+
"src": "/icons/icon-512x512.maskable.png",
38+
"sizes": "512x512",
39+
"type": "image/png",
40+
"purpose": "maskable"
41+
}
42+
]
943
}

‎src/components/RouterHead/RouterHead.tsx

+27-21
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,38 @@
1-
import { component$ } from "@builder.io/qwik";
2-
import { useDocumentHead, useLocation } from "@builder.io/qwik-city";
1+
import { component$ } from '@builder.io/qwik';
2+
import { useDocumentHead, useLocation } from '@builder.io/qwik-city';
33

44
/**
55
* The RouterHead component is placed inside of the document `<head>` element.
66
*/
77
export const RouterHead = component$(() => {
8-
const head = useDocumentHead();
9-
const loc = useLocation();
8+
const head = useDocumentHead();
9+
const loc = useLocation();
1010

11-
return (
12-
<>
13-
<title>{head.title}</title>
11+
return (
12+
<>
13+
<title>{head.title}</title>
1414

15-
<link rel="canonical" href={loc.url.href} />
16-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
17-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
15+
<link rel='canonical' href={loc.url.href} />
16+
<link rel='icon' type='image/svg+xml' href='/favicon.ico' />
17+
<meta name='theme-color' content='#02C652' />
18+
<link rel='apple-touch-icon' href='/icons/apple-touch-icon-180x180.png' />
19+
<link rel='manifest' href='/manifest.json' />
20+
<meta
21+
name='viewport'
22+
content='minimum-scale=1, initial-scale=1, width=device-width'
23+
/>
1824

19-
{head.meta.map((m) => (
20-
<meta key={m.key} {...m} />
21-
))}
25+
{head.meta.map((m) => (
26+
<meta key={m.key} {...m} />
27+
))}
2228

23-
{head.links.map((l) => (
24-
<link key={l.key} {...l} />
25-
))}
29+
{head.links.map((l) => (
30+
<link key={l.key} {...l} />
31+
))}
2632

27-
{head.styles.map((s) => (
28-
<style key={s.key} {...s.props} dangerouslySetInnerHTML={s.style} />
29-
))}
30-
</>
31-
);
33+
{head.styles.map((s) => (
34+
<style key={s.key} {...s.props} dangerouslySetInnerHTML={s.style} />
35+
))}
36+
</>
37+
);
3238
});

‎src/routes/index.tsx

-10
Original file line numberDiff line numberDiff line change
@@ -231,13 +231,3 @@ export default component$(() => {
231231
</div>
232232
);
233233
});
234-
235-
export const head: DocumentHead = {
236-
title: 'Welcome to Qwik',
237-
meta: [
238-
{
239-
name: 'description',
240-
content: 'Qwik site description',
241-
},
242-
],
243-
};

‎src/routes/layout.tsx

+6-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { $, component$, Slot } from '@builder.io/qwik';
2+
import type { DocumentHead } from '@builder.io/qwik-city';
23
import { routeAction$, type RequestHandler } from '@builder.io/qwik-city';
34
import type { ImageTransformerProps } from 'qwik-image';
45
import { useImageProvider } from 'qwik-image';
@@ -8,12 +9,8 @@ import { NavbarTop } from '~/components/NavbarTop/NavbarTop';
89
import { sleep } from '~/shared/utils';
910

1011
export const onGet: RequestHandler = async ({ cacheControl }) => {
11-
// Control caching for this request for best performance and to reduce hosting costs:
12-
// https://qwik.builder.io/docs/caching/
1312
cacheControl({
14-
// Always serve a cached response by default, up to a week stale
1513
staleWhileRevalidate: 60 * 60 * 24 * 7,
16-
// Max once every 5 seconds, revalidate on the server to get a fresh version of this page
1714
maxAge: 5,
1815
});
1916
};
@@ -49,3 +46,8 @@ export default component$(() => {
4946
</>
5047
);
5148
});
49+
50+
export const head: DocumentHead = {
51+
title: 'Vue Storefront with Qwik',
52+
meta: [{ name: 'description', content: 'Vue Storefront with Qwik' }],
53+
};

0 commit comments

Comments
 (0)