From 852eb1ace539d60bde92c1f6a8fa2cafc34fe60b Mon Sep 17 00:00:00 2001
From: Cian Hughes <chughes000@gmail.com>
Date: Fri, 17 Jan 2025 23:30:46 +0000
Subject: [PATCH] Migrated static assets to CDN

---
 src/lib/components/NavigationFooter.svelte | 9 +++++----
 src/routes/+page.svelte                    | 8 +++++---
 src/routes/InfoScroll.svelte               | 8 +++++---
 src/routes/contact/+page.svelte            | 4 +++-
 svelte.config.js                           | 3 +++
 5 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/lib/components/NavigationFooter.svelte b/src/lib/components/NavigationFooter.svelte
index b318277..6d905bf 100644
--- a/src/lib/components/NavigationFooter.svelte
+++ b/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>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 45235a3..26d063f 100644
--- a/src/routes/+page.svelte
+++ b/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}
diff --git a/src/routes/InfoScroll.svelte b/src/routes/InfoScroll.svelte
index 4cd384c..684cfba 100644
--- a/src/routes/InfoScroll.svelte
+++ b/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>
diff --git a/src/routes/contact/+page.svelte b/src/routes/contact/+page.svelte
index 62619a4..7177cdb 100644
--- a/src/routes/contact/+page.svelte
+++ b/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>
diff --git a/svelte.config.js b/svelte.config.js
index 42d8916..f65762c 100644
--- a/svelte.config.js
+++ b/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