made model viewer dynamic

Author: wassfila

src/components/icon.astro

@@ -9,5 +9,14 @@ export interface Props {
 const { filename } = Astro.props as Props;
 
 ---
-{(filename == "github") &&<img src={githubImg.src} height="32px"/>}
-{(filename == "search") &&<img src={search.src} height="32px"/>}
+{(filename == "github") && <img class="icon-img" src={githubImg.src} alt="GitHub" />}
+{(filename == "search") && <img class="icon-img" src={search.src} alt="Search" />}
+
+<style>
+  .icon-img {
+    height: 32px !important;
+    width: 32px !important;
+    object-fit: contain !important;
+    display: inline-block;
+  }
+</style>

src/components/markdown/model/ModelViewer.astro

@@ -26,7 +26,12 @@ const { src, title} = Astro.props as Props;
 </model-viewer>
 
 <script>
-  import '@google/model-viewer';
+  // Load the heavy model-viewer library only when a <model-viewer> tag exists on the page
+  if (typeof window !== 'undefined' && !customElements.get('model-viewer')) {
+    if (document.querySelector('model-viewer')) {
+      import('@google/model-viewer');
+    }
+  }
 </script>
 
 <style>

src/components/markdown/model/ModelViewerCode.astro

@@ -70,7 +70,12 @@ if(Object.hasOwn(data,"environment-image")){
 }
 
 <script>
-  import '@google/model-viewer';
+  // Load the heavy model-viewer library only when a <model-viewer> tag exists on the page
+  if (typeof window !== 'undefined' && !customElements.get('model-viewer')) {
+    if (document.querySelector('model-viewer')) {
+      import('@google/model-viewer');
+    }
+  }
 </script>
 
 <style>