Skip to content

Commit 37e1d70

Browse files
author
Rich Harris
committed
svelte:head exercise
1 parent 94fcbe3 commit 37e1d70

File tree

15 files changed

+149
-13
lines changed

15 files changed

+149
-13
lines changed

‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/README.md

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,22 @@
22
title: <svelte:head>
33
---
44

5-
The `<svelte:head>` element allows you to insert elements inside the `<head>` of your document:
5+
The `<svelte:head>` element allows you to insert elements inside the `<head>` of your document. This is useful for things like `<title>` and `<meta>` tags, which are critical for good SEO.
6+
7+
Since those are quite hard to show in the context of this tutorial, we'll use it for a different purpose — loading stylesheets.
68

79
```svelte
810
/// file: App.svelte
9-
<svelte:head>
10-
<link rel="stylesheet" href="tutorial/dark-theme.css">
11-
</svelte:head>
11+
<script>
12+
const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
13+
let selected = themes[0];
14+
</script>
15+
16+
+++<svelte:head>
17+
<link rel="stylesheet" href="/stylesheets/{selected}.css" />
18+
</svelte:head>+++
19+
20+
<h1>Welcome to my site!</h1>
1221
```
1322

1423
> In server-side rendering (SSR) mode, contents of `<svelte:head>` are returned separately from the rest of your HTML.

‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/src/lib/App.svelte

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,14 @@
1-
<svelte:head>
2-
<!-- elements go here -->
3-
</svelte:head>
1+
<script>
2+
const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
3+
let selected = themes[0];
4+
</script>
45

5-
<h1>Hello world!</h1>
6+
<h1>Welcome to my site!</h1>
7+
8+
<select bind:value={selected}>
9+
<option disabled>choose a theme</option>
10+
11+
{#each themes as theme}
12+
<option>{theme}</option>
13+
{/each}
14+
</select>

‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/fonts/casablanca-antique.woff2

34.4 KB
Binary file not shown.

‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/fonts/edge-of-the-galaxy.woff2

3.9 KB
Binary file not shown.

‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/fonts/road-rage.woff2

165 KB
Binary file not shown.

‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/fonts/shlop.woff2

27.8 KB
Binary file not shown.

‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/halloween.css

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
@font-face {
2+
font-family: 'Schlop';
3+
src: url('./fonts/shlop.woff2') format('woff2');
4+
}
5+
6+
body {
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
justify-content: center;
11+
background: url(./halloween.webp) no-repeat 50% 50% fixed;
12+
background-size: cover;
13+
}
14+
15+
h1 {
16+
font-size: min(8vw, 4rem);
17+
filter: drop-shadow(2px 2px 10px black);
18+
font-family: 'Schlop';
19+
background: linear-gradient(
20+
to bottom,
21+
hsl(0, 100%, 77%) 0%,
22+
hsl(0, 60%, 50%) 100%
23+
);
24+
-webkit-background-clip: text;
25+
-webkit-text-fill-color: transparent;
26+
}

‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/halloween.webp

302 KB
Binary file not shown.

‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/margaritaville.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@font-face {
2+
font-family: 'Casablanca Antique';
3+
src: url('./fonts/casablanca-antique.woff2') format('woff2');
4+
}
5+
6+
body {
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
justify-content: center;
11+
background: url(./margaritaville.webp) no-repeat 50% 50% fixed;
12+
background-size: cover;
13+
}
14+
15+
h1 {
16+
font-size: min(8vw, 4rem);
17+
filter: drop-shadow(1px 1px 4px black) drop-shadow(1px 1px 20px black);
18+
font-family: 'Casablanca Antique';
19+
font-variant: small-caps;
20+
color: rgb(255, 226, 131);
21+
}

‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/margaritaville.webp

307 KB
Binary file not shown.

‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/retrowave.css

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
@font-face {
2+
font-family: 'Road Rage';
3+
src: url('./fonts/road-rage.woff2') format('woff2');
4+
}
5+
6+
body {
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
justify-content: center;
11+
/* https://www.wallpaperflare.com/music-stars-background-80s-neon-80-s-synth-retrowave-wallpaper-bdlfo */
12+
background: url(./retrowave.webp) no-repeat 50% 50% fixed;
13+
background-size: cover;
14+
}
15+
16+
h1 {
17+
font-size: min(8vw, 4rem);
18+
filter: drop-shadow(2px 2px 10px black);
19+
font-family: 'Road Rage';
20+
background: linear-gradient(
21+
to top,
22+
hsl(307, 74%, 63%) 1%, 0%,
23+
#0000 8%, 0%,
24+
hsl(317, 76%, 63%) 10%, 0%,
25+
#0000 16%, 0%,
26+
hsl(327, 78%, 63%) 19%, 0%,
27+
#0000 24%, 0%,
28+
hsl(337, 80%, 63%) 28%, 0%,
29+
#0000 32%, 0%,
30+
hsl(347, 82%, 63%) 37%, 0%,
31+
#0000 40%, 0%,
32+
hsl(357, 84%, 65%) 46%, 0%,
33+
#0000 48%, 0%,
34+
hsl(7, 86%, 65%) 55%, 0%,
35+
#0000 56%, 0%,
36+
hsl(17, 88%, 65%) 57%,
37+
hsl(40, 90%, 65%) 100%);
38+
-webkit-background-clip: text;
39+
-webkit-text-fill-color: transparent;
40+
}

‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/retrowave.webp

336 KB
Binary file not shown.

‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/spaaaaace.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
@font-face {
2+
font-family: 'Edge of the Galaxy';
3+
src: url('./fonts/edge-of-the-galaxy.woff2') format('woff2');
4+
}
5+
6+
body {
7+
display: flex;
8+
flex-direction: column;
9+
align-items: center;
10+
justify-content: center;
11+
/* https://www.wallpaperflare.com/outer-space-illustration-nebula-stars-green-galaxy-tylercreatesworlds-wallpaper-qws */
12+
background: url(./spaaaaace.webp) no-repeat 50% 50% fixed;
13+
background-size: cover;
14+
}
15+
16+
h1 {
17+
font-size: min(8vw, 4rem);
18+
filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.5)) drop-shadow(2px 2px 10px rgb(100, 170, 150)) drop-shadow(2px 2px 30px white);
19+
font-family: 'Edge of the Galaxy';
20+
color: hsl(165, 100%, 95%);
21+
}

‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-a/static/stylesheets/spaaaaace.webp

97.4 KB
Binary file not shown.

‎content/tutorial/02-advanced-svelte/09-special-elements/08-svelte-head/app-b/src/lib/App.svelte

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,18 @@
1+
<script>
2+
const themes = ['margaritaville', 'retrowave', 'spaaaaace', 'halloween'];
3+
let selected = themes[0];
4+
</script>
5+
16
<svelte:head>
2-
<link
3-
rel="stylesheet"
4-
href="tutorial/dark-theme.css"
5-
/>
7+
<link rel="stylesheet" href="/stylesheets/{selected}.css" />
68
</svelte:head>
79

8-
<h1>Hello world!</h1>
10+
<h1>Welcome to my site!</h1>
11+
12+
<select bind:value={selected}>
13+
<option disabled>choose a theme</option>
14+
15+
{#each themes as theme}
16+
<option>{theme}</option>
17+
{/each}
18+
</select>

0 commit comments

Comments
 (0)