Add fallbacks for the custom elements

_includes/default_head_tags.html

@@ -64,7 +64,7 @@ See: https://developers.google.com/search/docs/advanced/mobile/google-discover?h
 <link rel="authorization_endpoint" href="https://indieauth.com/auth">
 
 <link rel="stylesheet" href="/assets/css/styles.css">
-<script src="/assets/js/index.js"></script>
+<script src="/assets/js/index.js" async></script>
 
 {% if page.mathjax %}
 <script>

_projects/bike_lights.md

@@ -19,14 +19,18 @@ head: |
     {
         "imports": {
         "three": "https://unpkg.com/three@0.156.1/build/three.module.js",
-        "three/addons/": "https://unpkg.com/three@0.156.1/examples/jsm/"
+        "three/addons/": "https://unpkg.com/three@0.156.1/examples/jsm/",
+        "dat.gui": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js"
         }
     }
     </script>
     <script src="/assets/js/three/index.js" type="module"></script>
 ---
 
-<outline-model-viewer model = "/assets/projects/bike_lights/models/bigger.glb"></outline-model-viewer>
+<outline-model-viewer model = "/assets/projects/bike_lights/models/bigger.glb">
+    <img class="outline-model-poster no-wc" src = "/assets/projects/bike_lights/thumbnail.svg">
+    <p class="has-wc">Loading model...</p>
+</outline-model-viewer>
 
 <img src = "/assets/projects/bike_lights/bike_light.jpg">
 

_projects/helmet_lights.md

@@ -10,4 +10,24 @@ img:
     class: invertable
 
 social_image: /assets/projects/helmet_lights/thumbnail.png
----
+models: /assets/projects/helmet_lights/models
+
+head: |
+    <script async src="https://unpkg.com/es-module-shims@1.8.0/dist/es-module-shims.js"></script>
+
+    <script type="importmap">
+    {
+        "imports": {
+        "three": "https://unpkg.com/three@0.156.1/build/three.module.js",
+        "three/addons/": "https://unpkg.com/three@0.156.1/examples/jsm/",
+        "dat.gui": "https://unpkg.com/dat.gui@0.7.9/build/dat.gui.module.js"
+        }
+    }
+    </script>
+    <script src="/assets/js/three/index.js" type="module"></script>
+---
+
+<outline-model-viewer model = "{{page.models}}/model.glb">
+    <img class="outline-model-poster no-wc" src = "{{page.img.src}}">
+    <p class="has-wc">Loading model...</p>
+</outline-model-viewer>

_sass/main.scss

@@ -115,6 +115,27 @@ figure > img, figure > svg, figure > canvas {
     border-radius: 10px;
 }
 
+// For fallback images inside custom outline-model-viewer elements
+outline-model-viewer, .outline-model-poster {
+    width: 100%;
+    height: 300px;
+}
+
+outline-model-viewer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+// If the browser doesn't support web components, hide anything with has-wc class
+body.has-wc .no-wc {
+    display: none;
+}
+// If the browser does support web components, hide anything with no-wc class
+body:not(.has-wc) .has-wc {
+    display: none;
+}
+
 @media 
     only screen and (max-width: $horizontal_breakpoint),
     only screen and (max-height: $vertical_breakpoint)

assets/js/index.js

@@ -1,5 +1,3 @@
-
-
 function toggle_summary_by_class(element, topic) {
     details = document.querySelectorAll(`details.${topic}`);
 
@@ -10,6 +8,11 @@ function toggle_summary_by_class(element, topic) {
         element.textContent = "Expand all"
         details.forEach(e => e.open = false);
     }
-    
+       
-    
+}
+
+// This signals to css that we have support for web components
+// Allows us to set elements to act as fallbacks when js/web components are disabled.
+if (window.customElements) {
+    document.querySelector('body').classList.add('has-wc');
 }