blob: f2b0d2c8ac2b00f7612317568edc18ee6f16e057 (
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
|
---
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 />
<SolidCounter client:load />
<Link to="/foo" text="Go to Page 2" />
<Lorem />
<CalcAdd num={33} />
<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>
|
