various tests

src/_includes/webc/my-counter.webc

@@ -1,7 +1,8 @@
-<button class="test-button" type="button">Add</button>
+<is-land on:visible>
-<output @html="2"></output>
+  <button class="test-button" type="button">Add</button>
+  <output @html="2"></output>
 
-<style webc:scoped>
+  <style webc:scoped>
     :host > button {
       padding: var(--space-xs) var(--space-xl);
       cursor: pointer;
@@ -26,9 +27,9 @@
     :host > output {
       padding: var(--space-xs) var(--space-xl);
     }
-</style>
+  </style>
 
-<script>
+  <script>
     window.customElements.define(
       'my-counter',
       class extends HTMLElement {
@@ -46,4 +47,5 @@
         }
       }
     );
-</script>
+  </script>
+</is-land>

src/_includes/webc/speedlify-score.webc

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

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

@@ -1,9 +1,14 @@
-<lite-youtube
+<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"
     :playlabel="`Play${this.label ? `: ${this.label}` : ''}`"
     :style="`background-image:url('${this.poster || `https://i.ytimg.com/vi/${this.slug}/maxresdefault.jpg`}'); max-width: 100%`"
->
+  >
     <a
       :href="`https://youtube.com/watch?v=${this.slug}`"
       class="lty-playbtn"
@@ -13,9 +18,14 @@
         @html="`Play Video${this.label ? `: ${this.label}` : ''}`"
       ></span
     ></a>
-</lite-youtube>
+  </lite-youtube>
-
+  <template data-island>
-<!-- <template>
+    <style>
-  <link rel="stylesheet" :href="/assets/components/lite-yt-embed.css" />
+      /* Plugin bug: clicking the red youtube play icon in the center would navigate to youtube.com */
-  <script :src="/assets/components/lite-yt-embed.js"></script>
+      lite-youtube:defined .lty-playbtn {
-</template> -->
+        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="g2aTwnLgAc8" @label="{{ title }}"></youtube-lite-player>
-<youtube-lite-player @slug="DC5fP_8Q8uQ" @label="{{ title }}"></youtube-lite-player>
-{% endrenderTemplate %}
 
 <h2>Testing counter</h2>
 
 <p>counter inside island, activate on interaction</p>
 
-{% renderTemplate "webc" %}
+<speedlify-score></speedlify-score>
-<is-land on:interaction>
-  <my-counter></my-counter>
-</is-land>
-{% 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" %}
 <fancy-rule></fancy-rule>
-{% endrenderTemplate %}
 
 <p>
   Marzipan croissant halvah sweet wafer sesame snaps cheesecake. Jelly candy canes toffee