Migrated static assets to CDN

src/lib/components/NavigationFooter.svelte

@@ -4,6 +4,7 @@
     import Link from "$lib/components/Link.svelte";
 
     import { navigation } from "$lib/navigation";
+    import { assets } from "$app/paths";
 </script>
 
 <div class="navigation-footer">
@@ -18,28 +19,28 @@
             <div class="navigation-footer-buttons-icon">
                 <img
                     class="navigation-footer-social-icon"
-                    src="facebook.svg"
+                    src="{assets}/facebook.svg"
                     alt="Grey Facebook icon"
                 />
             </div>
             <div class="navigation-footer-buttons-icon">
                 <img
                     class="navigation-footer-social-icon"
-                    src="linkedin.svg"
+                    src="{assets}/linkedin.svg"
                     alt="Grey LinkedIn icon"
                 />
             </div>
             <div class="navigation-footer-buttons-icon">
                 <img
                     class="navigation-footer-social-icon"
-                    src="youtube.svg"
+                    src="{assets}/youtube.svg"
                     alt="Grey YouTube icon"
                 />
             </div>
             <div class="navigation-footer-buttons-icon">
                 <img
                     class="navigation-footer-social-icon"
-                    src="instagram.svg"
+                    src="{assets}/instagram.svg"
                     alt="Grey Instagram icon"
                 />
             </div>

src/routes/+page.svelte

@@ -7,6 +7,8 @@
     import "./LandingPage.scss";
     import "./NavigationHeader.scss";
 
+    import { assets } from "$app/paths";
+
     let use_video = true;
     function handleVideoError() {
         use_video = false;
@@ -19,18 +21,18 @@
             <video
                 class="background"
                 preload="auto"
-                poster="landing.webp"
+                poster="{assets}/landing.webp"
                 autoplay
                 muted
                 playsinline
                 on:error={handleVideoError}
             >
-                <source src="landing.webm" type="video/webm" />
+                <source src="{assets}/landing.webm" type="video/webm" />
             </video>
         {:else}
             <img
                 class="background"
-                src="landing.webp"
+                src="{assets}/landing.webp"
                 alt="Landing background of L-PBF print in progress"
             />
         {/if}

src/routes/InfoScroll.svelte

@@ -1,5 +1,7 @@
 <script>
     import "./InfoScroll.scss";
+
+    import { assets } from "$app/paths";
 </script>
 
 <div class="infscr">
@@ -7,7 +9,7 @@
         <div class="infscr-image-div">
             <img
                 class="infscr-image"
-                src="buildplate.webp"
+                src="{assets}/buildplate.webp"
                 alt="An L-PBF buildplate after a successful print"
             />
         </div>
@@ -43,7 +45,7 @@
         <div class="infscr-image-div">
             <img
                 class="infscr-image"
-                src="data.webp"
+                src="{assets}/data.webp"
                 alt="A dashboard featuring L-PBF thermographic analyses"
             />
         </div>
@@ -82,7 +84,7 @@
         <div class="infscr-image-div">
             <img
                 class="infscr-image"
-                src="openscience.webp"
+                src="{assets}/openscience.webp"
                 alt="A render of the open science logo with a modified color palette"
             />
         </div>

src/routes/contact/+page.svelte

@@ -3,6 +3,8 @@
     import NavigationHeader from "$lib/components/NavigationHeader.svelte";
     import NavigationFooter from "$lib/components/NavigationFooter.svelte";
     import ContactForm from "$lib/components/ContactForm.svelte";
+
+    import { assets } from "$app/paths";
 </script>
 
 <div class="contact-page">
@@ -23,7 +25,7 @@
         <div class="contact-image-column">
             <img
                 class="contact-image"
-                src="contact.webp"
+                src="{assets}/contact.webp"
                 alt="A photograph of our lovely colleague who is eager to hear from you"
             />
         </div>

svelte.config.js

@@ -7,6 +7,9 @@ const config = {
         postcss: true,
     }),
     kit: {
+        paths: {
+            assets: 'https://dxx34o0ozp8j.cloudfront.net'
+        },
         adapter: adapter({
             out: 'build',
             precompress: true, // Pre-compresses files