ensure that assets are loaded from config

this does not yet work in dev env as described by Rich Harris here: sveltejs/kit#1154
thibaudpriou · Sep 5, 2021 · 96ad2e3 · 96ad2e3
1 parent 0889afc
commit 96ad2e3
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 112 deletions.
diff --git a/src/app.html b/src/app.html
@@ -6,71 +6,8 @@
       name="viewport"
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
-    <meta
-      name="keywords"
-      content="Réalisation, Court-métrage, Pub, Clip, Fiction"
-    />
-    <meta
-      name="google-site-verification"
-      content="nUD7H3E87xDUaik5mFLa1QF7-XY1ZQyJC6cRxCWm4gY"
-    />
-
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:site" content="http://paul-mathias-realisation.com/" />
-    <meta name="twitter:title" content="Paul & Mathias" />
-    <meta
-      name="twitter:description"
-      content="Réalisateurs français de fictions, de clips et de films publicitaires. Notre vocation : créer de l’émotion."
-    />
-    <meta name="twitter:creator" content="Paul & Mathias" />
-    <meta
-      name="twitter:image"
-      content="http://paul-mathias-realisation.com/imgs/vignette-fb.png"
-    />
-    <!-- TODO vignette-fb.png -->
-    <meta property="og:title" content="Paul & Mathias" />
-    <meta property="og:type" content="website" />
-    <meta property="og:url" content="http://paul-mathias-realisation.com/" />
-    <meta
-      property="og:image"
-      content="http://paul-mathias-realisation.com/imgs/vignette-fb.png"
-    />
-    <!-- TODO vignette-fb.png -->
-    <meta
-      property="og:description"
-      content="Réalisateurs français de fictions, de clips et de films publicitaires. Notre vocation : créer de l’émotion."
-    />
-    <meta property="og:site_name" content="Paul & Mathias" />
-    <meta property="fb:admins" content="100000548772365,1552087045" />
-
-    <link rel="stylesheet" href="/app.css" rel="preload" />
 
-    <!-- Favicons -->
-    <link
-      rel="apple-touch-icon"
-      sizes="180x180"
-      href="/favicon/apple-touch-icon.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="32x32"
-      href="/favicon/favicon-32x32.png"
-    />
-    <link
-      rel="icon"
-      type="image/png"
-      sizes="16x16"
-      href="/favicon/favicon-16x16.png"
-    />
-    <link rel="manifest" href="/favicon/site.webmanifest" />
-    <link
-      rel="mask-icon"
-      href="/favicon/safari-pinned-tab.svg"
-      color="#000000"
-    />
-    <meta name="msapplication-TileColor" content="#f3f3f3" />
-    <meta name="theme-color" content="#ffffff" />
+    <link rel="stylesheet" href="app.css" />
 
     %svelte.head%
   </head>

diff --git a/src/components/Carousel.svelte b/src/components/Carousel.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { assets } from '$app/paths';
   import { fade } from "svelte/transition";
   import CarouselControl from "./CarouselControl.svelte";
   import CarouselIndicator from "./CarouselIndicator.svelte";
@@ -33,8 +34,8 @@
     sample: IRealisation["samples"][0]
   ): ImgAttributes {
     return {
-      src: sample.defaultImagePath,
-      srcset: sample.images.map((i) => `${i.path} ${i.breakpoint}`).join(","),
+      src: `${assets}/${sample.defaultImagePath}`,
+      srcset: sample.images.map((i) => `${assets}/${i.path} ${i.breakpoint}`).join(","),
     };
   }
 

diff --git a/src/components/Showreel.svelte b/src/components/Showreel.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { assets } from '$app/paths';
   let container: HTMLElement;
 
   function scrollPastShowreel() {
@@ -11,6 +12,7 @@
   <script
     defer
     rel="preload"
+    as="script"
     src="https://cdn.dashjs.org/latest/dash.all.min.js"></script>
 </svelte:head>
 
@@ -28,13 +30,13 @@
   >
     <!-- Fallback: Dash video not supported -->
     <!-- WEBM file is 50.8MB -->
-    <source src="/video/demo_v4.webm" type="video/webm" />
+    <source src={`${assets}/video/demo_v4.webm`} type="video/webm" />
     <!-- MOV file is 95.9MB -->
-    <source src="/video/demo_v4.mov" type="video/quicktime" />
+    <source src={`${assets}/video/demo_v4.mov`} type="video/quicktime" />
     <!-- MP4 file is 99.0MB -->
-    <source src="/video/demo_v4.mp4" type="video/mp4" />
+    <source src={`${assets}/video/demo_v4.mp4`} type="video/mp4" />
     <!-- OGV file is 39.7MB but it doesn't loop nicely: some black frame can be seen -->
-    <source src="/video/demo_v4.ogv" type="video/ogg" />
+    <source src={`${assets}/video/demo_v4.ogv`} type="video/ogg" />
     Votre navigateur ne supporte pas la lecture vidéo HTML5.
     <!-- tl;dr: your browser is utter shit -->
   </video>

diff --git a/src/components/social/InstagramLogo.svelte b/src/components/social/InstagramLogo.svelte
@@ -4,9 +4,9 @@
   export let background: boolean = false;
 
   const href = "https://www.instagram.com/paulmathias.realisation/";
-  const imgSrc = "/imgs/logo.instagram.png";
+  const imgSrc = "imgs/logo.instagram.png";
   const imgAlt = "Logo Instagram";
-  const bgSrc = "/imgs/logo-bg.instagram.png";
+  const bgSrc = "imgs/logo-bg.instagram.png";
   const bgAlt = "Fond pour logo Instagram";
 </script>
 

diff --git a/src/components/social/Logo.svelte b/src/components/social/Logo.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import { assets } from '$app/paths';
     export let background: boolean = false;
     export let href: string;
     export let imgSrc: string;
@@ -15,12 +16,12 @@
       rel="noopener noreferrer"
       class="social-link"
     >
-      <img class="social-logo" src={imgSrc} alt={imgAlt} />
+      <img class="social-logo" src={`${assets}/${imgSrc}`} alt={imgAlt} />
     </a>
     {#if background}
       <img
         class="social-logo-bg"
-        src={bgSrc}
+        src={`${assets}/${bgSrc}`}
         alt={bgAlt}
       />
     {/if}

diff --git a/src/components/social/VimeoLogo.svelte b/src/components/social/VimeoLogo.svelte
@@ -4,9 +4,9 @@
   export let background: boolean = false;
 
   const href = "https://vimeo.com/user72935796";
-  const imgSrc = "/imgs/logo.vimeo.png";
+  const imgSrc = "imgs/logo.vimeo.png";
   const imgAlt = "Logo Vimeo";
-  const bgSrc = "/imgs/logo-bg.vimeo.png";
+  const bgSrc = "imgs/logo-bg.vimeo.png";
   const bgAlt = "Fond pour logo Vimeo";
 </script>
 

diff --git a/src/config.ts b/src/config.ts
@@ -16,19 +16,19 @@ const categories: ICategory[] = [
           {
             alt: "Échantillon publicité Château Garreau Armagnac 1",
             defaultImagePath:
-              "/imgs/realisations/chateau-garreau-armagnac-1.jpeg",
+              "imgs/realisations/chateau-garreau-armagnac-1.jpeg",
             images: [],
             rank: 1,
           },
           {
             alt: "Échantillon publicité Château Garreau Armagnac 2",
-            defaultImagePath: "/imgs/realisations/chateau-garreau-armagnac-2.jpeg",
+            defaultImagePath: "imgs/realisations/chateau-garreau-armagnac-2.jpeg",
             images: [],
             rank: 2,
           },
           {
             alt: "Échantillon publicité Château Garreau Armagnac 3",
-            defaultImagePath: "/imgs/realisations/chateau-garreau-armagnac-3.jpeg",
+            defaultImagePath: "imgs/realisations/chateau-garreau-armagnac-3.jpeg",
             images: [],
             rank: 3,
           },
@@ -44,19 +44,19 @@ const categories: ICategory[] = [
         samples: [
           {
             alt: "Échantillon publicité Skydrone 1",
-            defaultImagePath: "/imgs/realisations/skydrone-1.jpeg",
+            defaultImagePath: "imgs/realisations/skydrone-1.jpeg",
             images: [],
             rank: 1,
           },
           {
             alt: "Échantillon publicité Skydrone 2",
-            defaultImagePath: "/imgs/realisations/skydrone-2.jpeg",
+            defaultImagePath: "imgs/realisations/skydrone-2.jpeg",
             images: [],
             rank: 2,
           },
           {
             alt: "Échantillon publicité Skydrone 3",
-            defaultImagePath: "/imgs/realisations/skydrone-3.jpeg",
+            defaultImagePath: "imgs/realisations/skydrone-3.jpeg",
             images: [],
             rank: 3,
           },
@@ -71,19 +71,19 @@ const categories: ICategory[] = [
         samples: [
           {
             alt: "Échantillon publicité Mini Streampunk 1",
-            defaultImagePath: "/imgs/realisations/mini-steampunk-1.jpeg",
+            defaultImagePath: "imgs/realisations/mini-steampunk-1.jpeg",
             images: [],
             rank: 1,
           },
           {
             alt: "Échantillon publicité Mini Streampunk 2",
-            defaultImagePath: "/imgs/realisations/mini-steampunk-2.jpeg",
+            defaultImagePath: "imgs/realisations/mini-steampunk-2.jpeg",
             images: [],
             rank: 2,
           },
           {
             alt: "Échantillon publicité Mini Streampunk 3",
-            defaultImagePath: "/imgs/realisations/mini-steampunk-3.jpeg",
+            defaultImagePath: "imgs/realisations/mini-steampunk-3.jpeg",
             images: [],
             rank: 3,
           },
@@ -105,19 +105,19 @@ const categories: ICategory[] = [
         samples: [
           {
             alt: "Échantillon de C'était le Monde 1",
-            defaultImagePath: "/imgs/realisations/c-etait-le-monde-1.jpeg",
+            defaultImagePath: "imgs/realisations/c-etait-le-monde-1.jpeg",
             images: [],
             rank: 1,
           },
           {
             alt: "Échantillon de C'était le Monde 2",
-            defaultImagePath: "/imgs/realisations/c-etait-le-monde-2.jpeg",
+            defaultImagePath: "imgs/realisations/c-etait-le-monde-2.jpeg",
             images: [],
             rank: 2,
           },
           {
             alt: "Échantillon de C'était le Monde 3",
-            defaultImagePath: "/imgs/realisations/c-etait-le-monde-3.jpeg",
+            defaultImagePath: "imgs/realisations/c-etait-le-monde-3.jpeg",
             images: [],
             rank: 3,
           },
@@ -132,20 +132,20 @@ const categories: ICategory[] = [
         samples: [
           {
             alt: "Échantillon de Et le bourgeon devint Étincelle 1",
-            defaultImagePath: "/imgs/realisations/et-le-bourgeon-devint-etincelle-1.jpeg",
+            defaultImagePath: "imgs/realisations/et-le-bourgeon-devint-etincelle-1.jpeg",
             images: [],
             rank: 1,
           },
           {
             alt: "Échantillon de Et le bourgeon devint Étincelle 2",
-            defaultImagePath: "/imgs/realisations/et-le-bourgeon-devint-etincelle-2.jpeg",
+            defaultImagePath: "imgs/realisations/et-le-bourgeon-devint-etincelle-2.jpeg",
             images: [],
             rank: 2,
           },
           {
             alt: "Échantillon de Et le bourgeon devint Étincelle 3",
             images: [],
-            defaultImagePath: "/imgs/realisations/et-le-bourgeon-devint-etincelle-3.jpeg",
+            defaultImagePath: "imgs/realisations/et-le-bourgeon-devint-etincelle-3.jpeg",
             rank: 3,
           },
         ],
@@ -161,21 +161,21 @@ const categories: ICategory[] = [
           {
             alt: "Échantillon de L'Horloger 1",
             images: [],
-            defaultImagePath: "/imgs/realisations/l-horloger-1.jpeg",
+            defaultImagePath: "imgs/realisations/l-horloger-1.jpeg",
 
             rank: 1,
           },
           {
             alt: "Échantillon de L'Horloger 2",
             images: [],
-            defaultImagePath: "/imgs/realisations/l-horloger-2.jpeg",
+            defaultImagePath: "imgs/realisations/l-horloger-2.jpeg",
 
             rank: 2,
           },
           {
             alt: "Échantillon de L'Horloger 3",
             images: [],
-            defaultImagePath: "/imgs/realisations/l-horloger-3.jpeg",
+            defaultImagePath: "imgs/realisations/l-horloger-3.jpeg",
 
             rank: 3,
           },
@@ -191,14 +191,14 @@ const categories: ICategory[] = [
           {
             alt: "Échantillon de Rage 1",
             images: [],
-            defaultImagePath: "/imgs/realisations/rage-1.jpeg",
+            defaultImagePath: "imgs/realisations/rage-1.jpeg",
 
             rank: 1,
           },
           {
             alt: "Échantillon de Rage 2",
             images: [],
-            defaultImagePath: "/imgs/realisations/rage-2.jpeg",
+            defaultImagePath: "imgs/realisations/rage-2.jpeg",
 
             rank: 2,
           },
@@ -222,21 +222,21 @@ const categories: ICategory[] = [
           {
             alt: "Échantillon du clip La tête Pleine 1",
             images: [],
-            defaultImagePath: "/imgs/realisations/la-tete-pleine-1.jpeg",
+            defaultImagePath: "imgs/realisations/la-tete-pleine-1.jpeg",
 
             rank: 1,
           },
           {
             alt: "Échantillon du clip La tête Pleine 2",
             images: [],
-            defaultImagePath: "/imgs/realisations/la-tete-pleine-2.jpeg",
+            defaultImagePath: "imgs/realisations/la-tete-pleine-2.jpeg",
 
             rank: 2,
           },
           {
             alt: "Échantillon du clip La tête Pleine 3",
             images: [],
-            defaultImagePath: "/imgs/realisations/la-tete-pleine-3.jpeg",
+            defaultImagePath: "imgs/realisations/la-tete-pleine-3.jpeg",
 
             rank: 3,
           },
@@ -265,21 +265,21 @@ const categories: ICategory[] = [
           {
             alt: "Échantillon du clip Dans ma tchop 1",
             images: [],
-            defaultImagePath: "/imgs/realisations/dans-ma-tchop-1.jpeg",
+            defaultImagePath: "imgs/realisations/dans-ma-tchop-1.jpeg",
 
             rank: 1,
           },
           {
             alt: "Échantillon du clip Dans ma tchop 2",
             images: [],
-            defaultImagePath: "/imgs/realisations/dans-ma-tchop-2.jpeg",
+            defaultImagePath: "imgs/realisations/dans-ma-tchop-2.jpeg",
 
             rank: 2,
           },
           {
             alt: "Échantillon du clip Dans ma tchop 3",
             images: [],
-            defaultImagePath: "/imgs/realisations/dans-ma-tchop-3.jpeg",
+            defaultImagePath: "imgs/realisations/dans-ma-tchop-3.jpeg",
 
             rank: 3,
           },
@@ -307,21 +307,21 @@ const categories: ICategory[] = [
           {
             alt: "Échantillon du clip Et si j'intéresse encore 1",
             images: [],
-            defaultImagePath: "/imgs/realisations/et-si-j-interesse-encore-1.jpeg",
+            defaultImagePath: "imgs/realisations/et-si-j-interesse-encore-1.jpeg",
 
             rank: 1,
           },
           {
             alt: "Échantillon du clip Et si j'intéresse encore 2",
             images: [],
-            defaultImagePath: "/imgs/realisations/et-si-j-interesse-encore-2.jpeg",
+            defaultImagePath: "imgs/realisations/et-si-j-interesse-encore-2.jpeg",
 
             rank: 2,
           },
           {
             alt: "Échantillon du clip Et si j'intéresse encore 3",
             images: [],
-            defaultImagePath: "/imgs/realisations/et-si-j-interesse-encore-3.jpeg",
+            defaultImagePath: "imgs/realisations/et-si-j-interesse-encore-3.jpeg",
 
             rank: 3,
           },