various tests

src/_includes/webc/my-counter.webc

@@ -1,3 +1,4 @@
+<is-land on:visible>
   <button class="test-button" type="button">Add</button>
   <output @html="2"></output>
 
@@ -47,3 +48,4 @@
       }
     );
   </script>
+</is-land>

src/_includes/webc/speedlify-score.webc

@@ -1,3 +1,4 @@
+<is-land on:visible>
   <speedlify-score
     webc:raw
     :class="this.class"
@@ -8,7 +9,8 @@
     :requests="this.requests"
   ></speedlify-score>
 
-<template>
-  <link rel="stylesheet" :href="`/components/speedlify-score.css`" />
-  <script :src="`/components/speedlify-score.js`"></script>
+  <template data-island="once">
+    <link rel="stylesheet" :href="`/assets/components/speedlify-score.css`" />
+    <script :src="`/assets/components/speedlify-score.js`"></script>
   </template>
+</is-land>

src/_includes/webc/youtube-lite-player.webc

@@ -1,3 +1,8 @@
+<is-land
+  on:visible
+  :import="`/assets/components/lite-yt-embed.js`"
+  class="fluid-width-video-wrapper"
+>
   <lite-youtube
     :videoid="this.slug"
     :params="this.start ? `start=${this.start}` : false"
@@ -14,8 +19,13 @@
       ></span
     ></a>
   </lite-youtube>
-
-<!-- <template>
-  <link rel="stylesheet" :href="/assets/components/lite-yt-embed.css" />
-  <script :src="/assets/components/lite-yt-embed.js"></script>
-</template> -->
+  <template data-island>
+    <style>
+      /* Plugin bug: clicking the red youtube play icon in the center would navigate to youtube.com */
+      lite-youtube:defined .lty-playbtn {
+        pointer-events: none;
+      }
+    </style>
+    <link rel="stylesheet" :href="`/assets/components/lite-yt-embed.css`" />
+  </template>
+</is-land>

src/_layouts/base.njk

@@ -24,6 +24,10 @@
 
     <link rel="stylesheet" href="/assets/css/global.css?{{ assetHash }}" />
 
+    <!-- defer js  -->
+    <script type="module" src="/assets/app.js" defer></script>
+    <script type="module" src="/assets/components/is-land.js" defer></script>
+
     <!--  Add facility for pages to declare an array of stylesheet paths -->
     {% if pageStylesheets %} {% for item in pageStylesheets %}
     <link
@@ -59,9 +63,5 @@
     {% renderTemplate "webc" %}
     <script @html="this.getJS(this.page.url)"></script>
     {% endrenderTemplate %}
-
-    <!-- defer js  -->
-    <script type="module" src="/assets/app.js" defer></script>
-    <script type="module" src="/assets/components/is-land.js" defer></script>
   </body>
 </html>

src/pages/test.webc

@@ -5,41 +5,31 @@ description: This is just a testing environment
 layout: page
 ---
 
-Version number {{ meta.pkv }}
+Version number
 
 <!-- sdfg -->
 
-{% renderTemplate "webc" %}
 <my-marquee>dsfgdfg</my-marquee>
-{% endrenderTemplate %}
 
 <p>
   Icing jelly soufflé shortbread chocolate cake muffin gummies cotton candy lemon drops.
   Cake gummi bears dragée chocolate sweet croissant sweet croissant.
 </p>
 
-{% renderTemplate "webc" %}
-<youtube-lite-player @slug="DC5fP_8Q8uQ" @label="{{ title }}"></youtube-lite-player>
-{% endrenderTemplate %}
+<youtube-lite-player @slug="g2aTwnLgAc8" @label="{{ title }}"></youtube-lite-player>
 
 <h2>Testing counter</h2>
 
 <p>counter inside island, activate on interaction</p>
 
-{% renderTemplate "webc" %}
-<is-land on:interaction>
-  <my-counter></my-counter>
-</is-land>
-{% endrenderTemplate %}
+<speedlify-score></speedlify-score>
 
 <p>
   Icing jelly soufflé shortbread chocolate cake muffin gummies cotton candy lemon drops.
   Cake gummi bears dragée chocolate sweet croissant sweet croissant.
 </p>
 
-{% renderTemplate "webc" %}
 <fancy-rule></fancy-rule>
-{% endrenderTemplate %}
 
 <p>
   Marzipan croissant halvah sweet wafer sesame snaps cheesecake. Jelly candy canes toffee