blob: 66475f3e7100867dce37399427bf155d0d408f7c (
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
|
---
import Lorem from '../components/Lorem.astro';
import Link from '../components/Link.jsx';
import SolidCounter from '../components/SolidCounter.jsx';
import { CalcAdd } from '../components/calc-add.js';
import { MyCounter } from '../components/my-counter.js';
---
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
<title>Demo</title>
</head>
<body>
<h1 class="px-4 py-4">Test app</h1>
<h2 class="partytown-status">
<strong>Party Mode!</strong>
Colors changing = partytown is enabled
</h2>
<MyCounter client:load></MyCounter>
<SolidCounter client:load></SolidCounter>
<Link to="/foo" text="Go to Page 2" />
<Lorem />
<CalcAdd num={33}></CalcAdd>
<script type="text/partytown">
// Remove `type="text/partytown"` to see this block the page
// and cause the page to become unresponsive
console.log('start partytown blocking script')
const now = Date.now()
let count = 1;
while (Date.now() - now < 10000) {
if (Date.now() - now > count * 1000) {
console.log('blocking', count);
count += 1;
}
}
console.log('end partytown blocking script')
</script>
<script is:inline>
setInterval(() => {
const randomColor = Math.floor(Math.random()*16777215).toString(16);
document.querySelector('.partytown-status').style.color = "#" + randomColor;
}, 100);
</script>
<style>
h1, h2 {
color: blue;
}
</style>
</body>
</html>
|
