Feat/sat image snapshot

index.html

@@ -27,6 +27,7 @@
       }
 
       csis-audio-brief {
+        margin-top: 400px;
         margin-bottom: 20px;
       }
     </style>
@@ -40,6 +41,11 @@ <h1>Test page</h1>
         ends up on the page.
       </p>
       <div style="height: 100vh;"></div>
+    </main>
+    <csis-satellite-snapshot data-url="https://docs.google.com/spreadsheets/d/e/2PACX-1vTNtAJ__hKArVR80Srn10EePyynnMJN7eEAm-0uOjSzZp64rKJKte21h-tTGDsyOWxDZQ2YzJm77Sk0/pub?gid=0&single=true&output=csv">
+    </csis-satellite-snapshot>
+    <csis-audio-brief border-radius="60px"></csis-audio-brief>
+    <csis-triple-compare show-labels=true></csis-triple-compare>
 
       <csis-scroll-highlight highlight-style="half" highlight-color="#ffe44d"
         text-color="#24343a" active-text-color="#000" max-width="800"
@@ -66,5 +72,4 @@ <h1>Test page</h1>
     </main>
     <csis-hidden-reach-footer></csis-hidden-reach-footer>
   </body>
-
-</html>
+</html>

package.json

@@ -17,6 +17,8 @@
     "vite": "^7.1.11"
   },
   "dependencies": {
+    "d3-fetch": "^3.0.1",
+    "dompurify": "^3.4.0",
     "gsap": "^3.13.0"
   }
 }