Apply styling correctly and better CI handling

Author: m-mohr

.github/workflows/actions.yml

@@ -12,10 +12,13 @@ jobs:
           node-version: 'lts/*'
       - uses: actions/checkout@v4
       - run: npm install
-      - run: cp -r node_modules/@openeo/vue-components/assets ./
+      - run: |-
+          mkdir dist
+          cp -r node_modules/@openeo/vue-components/assets ./dist
+          cp index.html ./dist
       - uses: peaceiris/actions-gh-pages@v4
         with:
           github_token: ${{ secrets.GITHUB_TOKEN }}
-          publish_dir: ./
+          publish_dir: dist
           user_name: 'moreGeo CI'
           user_email: ci@moregeo.it

.gitignore

@@ -1 +1,2 @@
 /node_modules/
+/assets/

index.html

@@ -33,8 +33,12 @@
     const stacUrl = url.hash.substring(1);
     const component = document.getElementById('stac');
     component.setAttribute('url', stacUrl);
-    const css = document.getElementById("styles").cloneNode(true);
-    component.shadowRoot.appendChild(css);
+    const intervalId = window.setInterval(() => {
+      if (!component.shadowRoot) return;
+      const css = document.getElementById("styles").cloneNode(true);
+      component.shadowRoot.appendChild(css);
+      window.clearInterval(intervalId);
+    }, 100);
   </script>
 </body>
 </html>