blob: 2ee717d6a9c4d3e70042329424644db1c2c71f38 (
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 '../components/Test.js';
import '../components/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>
<my-counter client:load></my-counter>
<Link to="/foo" text="Go to Page 2" />
<Lorem />
<calc-add num={33}></calc-add>
<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>
|
