From 32945ef13b81d615d9d8f8a2a3bf0cac44bdd61c Mon Sep 17 00:00:00 2001
From: madrilene <hola@lenesaile.com>
Date: Fri, 14 Oct 2022 15:19:46 +0200
Subject: [PATCH] various tests

---
 src/_includes/webc/my-counter.webc          | 96 +++++++++++----------
 src/_includes/webc/speedlify-score.webc     | 28 +++---
 src/_includes/webc/youtube-lite-player.webc | 50 ++++++-----
 src/_layouts/base.njk                       |  8 +-
 src/pages/{test.njk => test.webc}           | 16 +---
 5 files changed, 101 insertions(+), 97 deletions(-)
 rename src/pages/{test.njk => test.webc} (97%)

diff --git a/src/_includes/webc/my-counter.webc b/src/_includes/webc/my-counter.webc
index 5435a8b..6625632 100644
--- a/src/_includes/webc/my-counter.webc
+++ b/src/_includes/webc/my-counter.webc
@@ -1,49 +1,51 @@
-<button class="test-button" type="button">Add</button>
-<output @html="2"></output>
+<is-land on:visible>
+  <button class="test-button" type="button">Add</button>
+  <output @html="2"></output>
 
-<style webc:scoped>
-  :host > button {
-    padding: var(--space-xs) var(--space-xl);
-    cursor: pointer;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background: var(--color-primary);
-    border: none;
-    border-radius: 0.6818181818em;
-    box-shadow: 0.3181818182em 0.3181818182em 0 black;
-    color: var(--color-dark);
-    display: inline-block;
-    font-size: clamp(1.1rem, 1.8vw, 1.4rem);
-    font-weight: 600;
-    letter-spacing: 0;
-    padding: 0.45em 1.5em;
-    position: relative;
-    text-decoration: none;
-    text-transform: none;
-  }
-
-  :host > output {
-    padding: var(--space-xs) var(--space-xl);
-  }
-</style>
-
-<script>
-  window.customElements.define(
-    'my-counter',
-    class extends HTMLElement {
-      connectedCallback() {
-        console.log(this);
-        let btn = this.querySelector(':scope button');
-        let output = this.querySelector(':scope output');
-        let value = parseInt(output.innerText);
-
-        console.log(this, btn);
-
-        btn.addEventListener('click', () => {
-          output.innerText = ++value;
-        });
-      }
+  <style webc:scoped>
+    :host > button {
+      padding: var(--space-xs) var(--space-xl);
+      cursor: pointer;
+      -webkit-appearance: none;
+      -moz-appearance: none;
+      appearance: none;
+      background: var(--color-primary);
+      border: none;
+      border-radius: 0.6818181818em;
+      box-shadow: 0.3181818182em 0.3181818182em 0 black;
+      color: var(--color-dark);
+      display: inline-block;
+      font-size: clamp(1.1rem, 1.8vw, 1.4rem);
+      font-weight: 600;
+      letter-spacing: 0;
+      padding: 0.45em 1.5em;
+      position: relative;
+      text-decoration: none;
+      text-transform: none;
     }
-  );
-</script>
+
+    :host > output {
+      padding: var(--space-xs) var(--space-xl);
+    }
+  </style>
+
+  <script>
+    window.customElements.define(
+      'my-counter',
+      class extends HTMLElement {
+        connectedCallback() {
+          console.log(this);
+          let btn = this.querySelector(':scope button');
+          let output = this.querySelector(':scope output');
+          let value = parseInt(output.innerText);
+
+          console.log(this, btn);
+
+          btn.addEventListener('click', () => {
+            output.innerText = ++value;
+          });
+        }
+      }
+    );
+  </script>
+</is-land>
diff --git a/src/_includes/webc/speedlify-score.webc b/src/_includes/webc/speedlify-score.webc
index 2b8ec4d..776b13a 100644
--- a/src/_includes/webc/speedlify-score.webc
+++ b/src/_includes/webc/speedlify-score.webc
@@ -1,14 +1,16 @@
-<speedlify-score
-  webc:raw
-  :class="this.class"
-  :hash="this.hash"
-  speedlify-url="https://www.speedlify.dev"
-  :score="this.score"
-  :weight="this.weight"
-  :requests="this.requests"
-></speedlify-score>
+<is-land on:visible>
+  <speedlify-score
+    webc:raw
+    :class="this.class"
+    :hash="this.hash"
+    speedlify-url="https://www.speedlify.dev"
+    :score="this.score"
+    :weight="this.weight"
+    :requests="this.requests"
+  ></speedlify-score>
 
-<template>
-  <link rel="stylesheet" :href="`/components/speedlify-score.css`" />
-  <script :src="`/components/speedlify-score.js`"></script>
-</template>
+  <template data-island="once">
+    <link rel="stylesheet" :href="`/assets/components/speedlify-score.css`" />
+    <script :src="`/assets/components/speedlify-score.js`"></script>
+  </template>
+</is-land>
diff --git a/src/_includes/webc/youtube-lite-player.webc b/src/_includes/webc/youtube-lite-player.webc
index c049473..a5140ae 100644
--- a/src/_includes/webc/youtube-lite-player.webc
+++ b/src/_includes/webc/youtube-lite-player.webc
@@ -1,21 +1,31 @@
-<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%`"
+<is-land
+  on:visible
+  :import="`/assets/components/lite-yt-embed.js`"
+  class="fluid-width-video-wrapper"
 >
-  <a
-    :href="`https://youtube.com/watch?v=${this.slug}`"
-    class="lty-playbtn"
-    title="Play Video"
-    ><span
-      class="lyt-visually-hidden"
-      @html="`Play Video${this.label ? `: ${this.label}` : ''}`"
-    ></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> -->
+  <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"
+      title="Play Video"
+      ><span
+        class="lyt-visually-hidden"
+        @html="`Play Video${this.label ? `: ${this.label}` : ''}`"
+      ></span
+    ></a>
+  </lite-youtube>
+  <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>
diff --git a/src/_layouts/base.njk b/src/_layouts/base.njk
index 4ea2d36..d5e362e 100644
--- a/src/_layouts/base.njk
+++ b/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>
diff --git a/src/pages/test.njk b/src/pages/test.webc
similarity index 97%
rename from src/pages/test.njk
rename to src/pages/test.webc
index c290e3c..1033515 100644
--- a/src/pages/test.njk
+++ b/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