aboutsummaryrefslogtreecommitdiff
path: root/examples/integrations-playground/src/pages/index.astro
diff options
context:
space:
mode:
Diffstat (limited to 'examples/integrations-playground/src/pages/index.astro')
-rw-r--r--examples/integrations-playground/src/pages/index.astro75
1 files changed, 38 insertions, 37 deletions
diff --git a/examples/integrations-playground/src/pages/index.astro b/examples/integrations-playground/src/pages/index.astro
index 66475f3e7..f2b0d2c8a 100644
--- a/examples/integrations-playground/src/pages/index.astro
+++ b/examples/integrations-playground/src/pages/index.astro
@@ -1,9 +1,9 @@
---
-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';
+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>
@@ -15,39 +15,40 @@ import { MyCounter } from '../components/my-counter.js';
<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" />
+ <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}></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>
+ <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>
+ <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>