tests with gsap and webc

package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "clean": "rimraf dist",
     "dev:postcss": "postcss src/_assets/css/global.css --o dist/_assets/css/global.css --watch --verbose",
-    "dev:scripts": "esbuild src/_assets/scripts/app.js src/_assets/scripts/is-land.js --watch --outdir=dist/_assets",
+    "dev:scripts": "esbuild src/_assets/scripts/app.js src/_assets/scripts/is-land.js --bundle --watch --outdir=dist/_assets",
     "dev:11ty": "eleventy --serve --watch",
     "build:postcss": "NODE_ENV=production postcss src/_assets/css/global.css -o dist/_assets/css/global.css",
     "build:11ty": "cross-env ELEVENTY_ENV=production eleventy",
@@ -31,9 +31,8 @@
     "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
     "@11ty/eleventy-plugin-webc": "^0.4.0",
     "@11ty/is-land": "^2.0.3",
-    "install": "^0.13.0",
+    "gsap": "^3.11.3",
     "markdown-it-footnote": "^3.0.3",
-    "npm": "^8.19.2",
     "tailwindcss": "^3.0.23"
   },
   "devDependencies": {

src/_assets/css/blocks/island.css

@@ -1,18 +1,3 @@
-details {
-  padding: 1em;
-  background-color: #eee;
-  border-radius: 0.5em;
-}
-details:not(:last-child) {
-  margin-bottom: 0.5em;
-}
-p:first-child {
-  margin-top: 0;
-}
-body {
-  padding-bottom: 20vh;
-}
-
 /* Demo styles */
 is-land,
 .demo-component {

src/_assets/css/blocks/test.css

@@ -0,0 +1,28 @@
+.playground {
+  --grid-placement: auto-fit;
+  --green: rgb(28, 113, 19);
+  --purple: #c569bc;
+  --orange: #ff8b59;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1em;
+}
+
+.box {
+  width: 100px;
+  height: 100px;
+  border-radius: var(--border-radius);
+}
+
+.green {
+  background-color: var(--green);
+}
+
+.purple {
+  background-color: var(--purple);
+}
+
+.orange {
+  background-color: var(--orange);
+}

src/_assets/css/global/variables.css

@@ -2,6 +2,7 @@
 :root {
   --gutter: var(--space-s-m);
   --border-radius: var(--size-step-1);
+  --border-radius-sm: var(--size-step-0);
   --transition-base: 250ms ease;
   --transition-movement: 200ms linear;
   --transition-fade: 200ms ease;

src/_assets/scripts/app.js

@@ -1,4 +1,4 @@
-'use strict';
+import {testGSAP} from './components/gsap';
 
 // ------------------- cards redundant click, accessible whole card clickable solution by Heydon Pickering
 
@@ -62,3 +62,7 @@ document.querySelectorAll('img').forEach(img => {
   }
   img.addEventListener('load', () => img.removeAttribute('data-is-loading'));
 });
+
+// GSAP
+
+// testGSAP();

src/_assets/scripts/components/gsap.js

@@ -0,0 +1,9 @@
+import {gsap} from 'gsap';
+
+export const testGSAP = () => {
+  let tl = gsap.timeline({repeat: -1, repeatDelay: 1, yoyo: true});
+
+  tl.to('.green', {rotation: 360});
+  tl.to('.purple', {rotation: 360});
+  tl.to('.orange', {rotation: 360});
+};

src/_includes/partials/menu.njk

@@ -20,6 +20,8 @@
   </ul>
 </nav>
 
+<!--  template element holding a button that needs to be injected when JavaScript is finally available. Source: https://web.dev/website-navigation/ -->
+
 <template id="burger-template">
   <button
     type="button"

src/_includes/webc/gsap.webc

@@ -0,0 +1,41 @@
+<div class="playground">
+  <div class="box green"></div>
+  <div class="box purple"></div>
+  <div class="box orange"></div>
+</div>
+
+<style webc:scoped>
+  .playground {
+    --grid-placement: auto-fit;
+    --green: rgb(28, 113, 19);
+    --purple: #c569bc;
+    --orange: #ff8b59;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 1em;
+  }
+
+  .box {
+    width: 100px;
+    height: 100px;
+    border-radius: var(--border-radius);
+  }
+
+  .green {
+    background-color: var(--green);
+  }
+
+  .purple {
+    background-color: var(--purple);
+  }
+
+  .orange {
+    background-color: var(--orange);
+  }
+</style>
+
+<script>
+  import {testGSAP} from '../../_assets/scripts/components/gsap.js';
+  gsap();
+</script>

src/_includes/webc/my-counter.webc

@@ -1,8 +1,6 @@
 <button class="test-button" type="button">Add</button>
 <output @html="2"></output>
 
-<template @html="'Template HTML'"></template>
-
 <style webc:scoped>
   :host > button {
     padding: var(--space-xs) var(--space-xl);
@@ -35,16 +33,15 @@
     'my-counter',
     class extends HTMLElement {
       connectedCallback() {
-        let btn2 = this.querySelector('button');
+        console.log(this);
         let btn = this.querySelector(':scope button');
-        let output = this.querySelector(':scope template');
-        // let value = parseInt(output.innerHTML);
+        let output = this.querySelector(':scope output');
+        let value = parseInt(output.innerText);
 
-        console.log(btn2, btn, output, this);
+        console.log(this, btn);
 
         btn.addEventListener('click', () => {
-          output.innerText = '++value';
-          console.log(btn);
+          output.innerText = ++value;
         });
       }
     }

src/_layouts/base.njk

@@ -20,7 +20,6 @@
     <!-- activating webc scoped styles und scripts -->
     {% renderTemplate "webc" %}
     <style @html="this.getCSS(this.page.url)"></style>
-    <script @html="this.getJS(this.page.url)"></script>
     {% endrenderTemplate %}
 
     <link rel="stylesheet" href="/_assets/css/global.css?{{ assetHash }}" />
@@ -35,12 +34,6 @@
     />
     {% endfor %} {% endif %}
 
-    <!-- defer js  -->
-    <script type="module" src="/_assets/app.js" defer></script>
-    <script type="module" src="/_assets/is-land.js" defer></script>
-
-    <!-- <script type="module" src="/is-land.js"></script> -->
-
     <!-- plausible for gdpr-compliant stats
         <script
         defer
@@ -61,5 +54,14 @@
 
     <!-- footer -->
     {% include "partials/footer.njk" %}
+
+    <!-- activating webc scoped styles und scripts -->
+    {% 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/is-land.js" defer></script>
   </body>
 </html>

src/pages/test.njk

@@ -10,6 +10,21 @@ layout: page
   Cake gummi bears dragée chocolate sweet croissant sweet croissant.
 </p>
 
+<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 %}
+
+<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 %}
@@ -21,14 +36,6 @@ layout: page
   apple pie marshmallow. Powder apple pie tart carrot cake pudding dessert.
 </p>
 
-<h2>JS not working like that?</h2>
-
-<p>
-  {% renderTemplate "webc" %}
-  <my-counter></my-counter>
-  {% endrenderTemplate %}
-</p>
-
 <h2>Let's try with is-land</h2>
 
 <p>