blob: 0b7e7ff219fc1d788eac11b2ec919cbd94d690d9 (
plain) (
blame)
1
2
3
4
5
6
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
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
|
---
import imgUrl from '../images/penguin.jpg';
import grayscaleUrl from '../images/random.jpg?grayscale=true';
import Greeting from '../components/Greeting.vue';
import Counter from '../components/Counter.vue';
import { Code } from 'astro/components';
import InlineHoisted from '../components/InlineHoisted.astro';
import ExternalHoisted from '../components/ExternalHoisted.astro';
---
<html>
<head>
<title>Demo app</title>
<style>
h1 {
color: salmon;
}
</style>
<style lang="scss">
@import "../styles/_global.scss";
h2 {
color: $color;
}
</style>
<style define:vars={{ color: 'blue' }}>
.define-vars h1 {
color: var(--color);
}
</style>
</head>
<body>
<section>
<h1>Images</h1>
<h2>Imported in JS</h2>
<img src={imgUrl} />
</section>
<section>
<h1>Component CSS</h1>
<Greeting />
</section>
<section>
<h1>ImageTools</h1>
<img src={grayscaleUrl} />
</section>
<section>
<h1>Astro components</h1>
<Code lang="css" code={`body {
color: salmon;
}`} />
</section>
<section>
<h1>Hydrated component</h1>
<Counter client:idle />
</section>
<section>
<h1>Hoisted scripts</h1>
<InlineHoisted />
<ExternalHoisted />
</section>
<section class="define-vars">
<h1>define:vars</h1>
<h2></h2>
<script define:vars={{ color: 'blue' }}>
document.querySelector('.define-vars h2').textContent = `Color: ${color}`;
</script>
</section>
</body>
</html>
|
