diff options
Diffstat (limited to 'examples/integrations-playground/src/pages/index.astro')
-rw-r--r-- | examples/integrations-playground/src/pages/index.astro | 75 |
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> |