From f29b4c3bb05c7fe3885bf4af6a05ebc29e62d675 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Sun, 17 Oct 2021 22:17:52 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=A5=20Use=20Directus=20Storage=20Asset?=
 =?UTF-8?q?s=20Presets=20only=20for=20images?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Block the generation of other image sizes from the URL

TODO: Block the access to root asset url as it still displays the original file
---
 src/components/atoms/Image.svelte             | 34 +++++++------
 src/components/molecules/Location.svelte      | 14 ++++--
 src/components/molecules/PhotoCard.svelte     |  2 +
 src/components/molecules/PostCard.svelte      |  8 ++-
 src/components/organisms/Shop.svelte          | 10 +++-
 .../[country]/[location]/[photo].svelte       |  5 +-
 src/routes/[country]/[location]/index.svelte  | 50 +++++++++++--------
 src/routes/photos.svelte                      |  9 +++-
 src/routes/subscribe.svelte                   |  7 ++-
 src/utils/helpers.ts                          | 11 ++++
 10 files changed, 103 insertions(+), 47 deletions(-)

diff --git a/src/components/atoms/Image.svelte b/src/components/atoms/Image.svelte
index 78df214..999876c 100644
--- a/src/components/atoms/Image.svelte
+++ b/src/components/atoms/Image.svelte
@@ -1,14 +1,13 @@
 <script lang="ts">
-    import { getAssetUrl } from '$utils/helpers'
+    import { getAssetUrlKey } from '$utils/helpers'
 
     export let src: string = undefined
     export let id: string = undefined
+    export let sizeKey: string = undefined
     export let sizes: Sizes = undefined
     export let width: number = sizes && sizes.medium && sizes.medium.width
     export let height: number = sizes && sizes.medium && sizes.medium.height
     export let ratio: number = undefined
-    export let quality: number = 80
-    export let fit: string = 'inside'
     export let alt: string
     export let lazy: boolean = true
 
@@ -18,6 +17,17 @@
         large?: { width?: number, height?: number }
     }
 
+
+    /**
+     * Get asset url from size
+     * @description Adds the size and the format to the result
+     * @returns string `id?key={key}-{size}-{format}`
+     */
+    const getSizeUrl = (key: string, size: string, format: string) => {
+        return getAssetUrlKey(id, `${key}-${size}-${format}`)
+    }
+
+
     /**
      * Define height from origin ratio if not defined
      */
@@ -44,28 +54,20 @@
      */
     const imgWidth: number = sizes && sizes.small ? sizes.small.width : width
     const imgHeight: number = sizes && sizes.small ? sizes.small.height : height
-    const imgSrc = id ? getAssetUrl(id, imgWidth, imgHeight, quality, fit, 'jpg') : src ? src : null
+    const imgSrc = id ? getSizeUrl(sizeKey, 'small', 'jpg') : src ? src : null
 </script>
 
 <picture class={$$props.class ? $$props.class : ''}>
     <source
         type="image/webp"
-        srcset="
-            {getAssetUrl(id, imgWidth, imgHeight, quality, fit, 'webp')} 345w,
-            {sizes && sizes.medium ? `${getAssetUrl(id, sizes.medium.width, sizes.medium.height, quality, fit, 'webp')} 768w,` : ''}
-            {sizes && sizes.large ? `${getAssetUrl(id, sizes.large.width, sizes.large.height, quality, fit, 'webp')} 1280w,` : ''}
-        "
+        srcset="{getSizeUrl(sizeKey, 'small', 'webp')} 345w {sizes && sizes.medium ? `, ${getSizeUrl(sizeKey, 'medium', 'webp')} 768w,` : ''} {sizes && sizes.large ? `, ${getSizeUrl(sizeKey, 'large', 'webp')} 1280w` : ''}"
     >
     <img
         src={imgSrc}
         sizes="(min-width: 1200px) 864px, (min-width: 992px) 708px, (min-width: 768px) 540px, 100%"
-        srcset="
-            {getAssetUrl(id, imgWidth, imgHeight, quality, fit)} 300w,
-            {sizes && sizes.medium ? `${getAssetUrl(id, sizes.medium.width, sizes.medium.height, quality, fit)} 768w,` : ''}
-            {sizes && sizes.large ? `${getAssetUrl(id, sizes.large.width, sizes.large.height, quality, fit)} 1280w,` : ''}
-        "
-        width={width}
-        height={height}
+        srcset="{getSizeUrl(sizeKey, 'small', 'jpg')} 300w {sizes && sizes.medium ? `, ${getSizeUrl(sizeKey, 'medium', 'jpg')} 768w` : ''} {sizes && sizes.large ? `, ${getSizeUrl(sizeKey, 'large', 'jpg')} 1280w` : ''}"
+        width={imgWidth}
+        height={imgHeight}
         alt={alt}
         loading={lazy ? 'lazy' : undefined}
     />
diff --git a/src/components/molecules/Location.svelte b/src/components/molecules/Location.svelte
index fda8b23..e2d37f6 100644
--- a/src/components/molecules/Location.svelte
+++ b/src/components/molecules/Location.svelte
@@ -55,7 +55,13 @@
         on:mouseleave={handleMouseLeave}
         sveltekit-noscroll
     >
-        <Image class="location__flag" id={location.country.flag.id} alt="Flag of {location.country.name}" width={32} height={32} />
+        <Image
+            class="location__flag"
+            id={location.country.flag.id}
+            sizeKey="square"
+            width={32} height={32}
+            alt="Flag of {location.country.name}"
+        />
         <div class="text">
             <dl>
                 <dt class="location__name">
@@ -75,8 +81,10 @@
             {#each location.photos as { image }, index}
                 <Image
                     class={index === photoIndex ? 'is-visible' : null}
-                    id={image.id} alt={image.title}
-                    width={340} height={226} quality={70}
+                    id={image.id}
+                    sizeKey="photo-thumbnail"
+                    width={340} height={226}
+                    alt={image.title}
                 />
             {/each}
         </div>
diff --git a/src/components/molecules/PhotoCard.svelte b/src/components/molecules/PhotoCard.svelte
index 3156e11..6fe81d8 100644
--- a/src/components/molecules/PhotoCard.svelte
+++ b/src/components/molecules/PhotoCard.svelte
@@ -17,6 +17,7 @@
     <a href={url}>
         <Image
             id={id}
+            sizeKey="postcard"
             {sizes}
             ratio={1.5}
             alt={alt}
@@ -25,6 +26,7 @@
     {:else}
         <Image
             id={id}
+            sizeKey="postcard"
             {sizes}
             ratio={1.5}
             alt={alt}
diff --git a/src/components/molecules/PostCard.svelte b/src/components/molecules/PostCard.svelte
index ae5c672..55d06a8 100644
--- a/src/components/molecules/PostCard.svelte
+++ b/src/components/molecules/PostCard.svelte
@@ -20,7 +20,13 @@
             <div class="frame">
                 <img src="/images/icons/stamp.svg" width="32" height="42" alt="Stamp">
             </div>
-            <Image class="flag" id={flagId} width={32} height={32} alt="Flag of {country}" />
+            <Image
+                class="flag"
+                id={flagId}
+                sizeKey="square"
+                width={32} height={32}
+                alt="Flag of {country}"
+            />
         </div>
         <ul class="postcard__address">
             <li>{street}</li>
diff --git a/src/components/organisms/Shop.svelte b/src/components/organisms/Shop.svelte
index 6b1ce9b..046bba5 100644
--- a/src/components/organisms/Shop.svelte
+++ b/src/components/organisms/Shop.svelte
@@ -14,7 +14,15 @@
 <div class="shop shadow-box-dark">
     <div class="content">
         <div class="shop__image">
-            <Image id={shop.module_image.id} alt={shop.module_image.title} width={800} height={800} />
+            <Image
+                id={shop.module_image.id}
+                sizeKey="square"
+                sizes={{
+                    small: { width: 400, height: 400 },
+                    large: { width: 800, height: 800 },
+                }}
+                alt={shop.module_image.title}
+            />
         </div>
 
         <div class="shop__content">
diff --git a/src/routes/[country]/[location]/[photo].svelte b/src/routes/[country]/[location]/[photo].svelte
index a24214b..461d0e5 100644
--- a/src/routes/[country]/[location]/[photo].svelte
+++ b/src/routes/[country]/[location]/[photo].svelte
@@ -56,10 +56,11 @@
 <Image
     id={currentPhoto.image.id}
     alt={currentPhoto.title}
+    sizeKey="photo-list"
     sizes={{
         small: { width: 500 },
-        medium: { width: 900 },
-        large: { width: 1440 },
+        medium: { width: 850 },
+        large: { width: 1280 },
     }}
     ratio={1.5}
 />
diff --git a/src/routes/[country]/[location]/index.svelte b/src/routes/[country]/[location]/index.svelte
index d7fa058..94bf094 100644
--- a/src/routes/[country]/[location]/index.svelte
+++ b/src/routes/[country]/[location]/index.svelte
@@ -3,14 +3,14 @@
     import dayjs from 'dayjs'
     import advancedFormat from 'dayjs/plugin/advancedFormat.js'
     import relativeTime from 'dayjs/plugin/relativeTime.js'
-    import { getAssetUrl } from '$utils/helpers'
+    import { getAssetUrlKey } from '$utils/helpers'
     // Components
     import Button from '$components/atoms/Button.svelte'
     import IconEarth from '$components/atoms/IconEarth.svelte'
     import Image from '$components/atoms/Image.svelte'
     import Newsletter from '$components/organisms/Newsletter.svelte'
 
-    export let data: any
+    export let location: any
     export let photos: any[]
     export let lastUpdated: string
     export let totalPhotos: number
@@ -88,9 +88,9 @@
 <main class="location-page">
     <section class="location-page__intro grid"
         style="
-            --illus-desktop: url({getAssetUrl(data.illustration_desktop.id, 1600, 1466, 90)});
-            --illus-desktop-2x: url({getAssetUrl(data.illustration_desktop_2x.id, 3200, 2932, 90)});
-            --illus-mobile: url({getAssetUrl(data.illustration_mobile.id, 1125, 2317, 90)});
+            --illus-desktop: url({getAssetUrlKey(location.illustration_desktop.id, 'illustration-desktop-1x')});
+            --illus-desktop-2x: url({getAssetUrlKey(location.illustration_desktop_2x.id, 'illustration-desktop-2x')});
+            --illus-mobile: url({getAssetUrlKey(location.illustration_mobile.id, 'illustration-mobile')});
         "
     >
         <h1 class="title">
@@ -99,19 +99,19 @@
                 <span>of</span>
             </span>
             <strong class="city">
-                {data.name}
+                {location.name}
             </strong>
         </h1>
 
         <div class="location-page__description grid" bind:this={descriptionEl}>
             <div class="wrap">
                 <div class="text-medium">
-                    Houses of {data.name} {data.description}
+                    Houses of {location.name} {location.description}
                 </div>
                 <div class="info">
                     <p class="text-label">
                         Photos by
-                        {#each data.credits as { credit_id: { name, website }}}
+                        {#each location.credits as { credit_id: { name, website }}}
                             {#if website}
                                 <a href={website} target="_blank" rel="noopener external">
                                     {name}
@@ -159,18 +159,24 @@
                             </time>
                         </a>
                     </div>
-                    <a class="house__photo" href="/{params.country}/{params.location}/{slug}">
-                        <Image
-                            id={id}
-                            alt="{alt}"
-                            width={1280}
-                            height={853}
-                            class="shadow-photo"
-                        />
-                        <span class="house__index title-index">
-                            {(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}
-                        </span>
-                    </a>
+                    <div class="photo house__photo shadow-photo">
+                        <a href="/{params.country}/{params.location}/{slug}">
+                            <Image
+                                id={id}
+                                sizeKey="photo-list"
+                                sizes={{
+                                    small: { width: 500 },
+                                    medium: { width: 850 },
+                                    large: { width: 1280 },
+                                }}
+                                ratio={1.5}
+                                alt="{alt}"
+                            />
+                            <span class="house__index title-index">
+                                {(totalPhotos - index < 10) ? '0' : ''}{totalPhotos - index}
+                            </span>
+                        </a>
+                    </div>
                 </div>
             {/each}
         </section>
@@ -199,7 +205,7 @@
     {:else}
         <div class="location-page__message">
             <p>
-                No photos available for {data.name}.<br>
+                No photos available for {location.name}.<br>
                 Come back later!
             </p>
         </div>
@@ -268,7 +274,7 @@
 
         return {
             props: {
-                data: data.location[0],
+                location: data.location[0],
                 photos: data.photos,
                 totalPhotos: data.photos.length ? locationPhotosCount.count.id : 0,
                 lastUpdated: data.photos.length ? data.photos[0].date_created : undefined,
diff --git a/src/routes/photos.svelte b/src/routes/photos.svelte
index 040d8f0..d6338f7 100644
--- a/src/routes/photos.svelte
+++ b/src/routes/photos.svelte
@@ -202,7 +202,13 @@
                             value={filterCountry}
                         >
                             {#if countryFlagId}
-                                <Image id={countryFlagId} width={26} height={26} alt="{filterCountry} flag" class="icon" />
+                                <Image
+                                    class="icon"
+                                    id={countryFlagId}
+                                    sizeKey="square"
+                                    width={26} height={26}
+                                    alt="{filterCountry} flag"
+                                />
                             {:else}
                                 <IconEarth class="icon" />
                             {/if}
@@ -262,6 +268,7 @@
                             <a href="/{location.country.slug}/{location.slug}/{slug}">
                                 <Image
                                     id={image.id}
+                                    sizeKey="photo-grid"
                                     sizes={{
                                         small: { width: 500 },
                                         medium: { width: 900 },
diff --git a/src/routes/subscribe.svelte b/src/routes/subscribe.svelte
index 3f90340..46cd7ee 100644
--- a/src/routes/subscribe.svelte
+++ b/src/routes/subscribe.svelte
@@ -29,7 +29,12 @@
             {#each issues as { issue, title, date_sent, link, thumbnail: { id } }}
                 <li class="issue">
                     <a href={link} target="_blank" rel="external noreferrer noopener">
-                        <Image id={id} width={160} height={112} alt="Issue {issue} thumbnail" />
+                        <Image
+                            id={id}
+                            sizeKey="issue-thumbnail"
+                            width={160} height={112}
+                            alt="Issue {issue} thumbnail"
+                        />
                         <dl>
                             <dt>Issue #{issue}</dt>
                             <dd>
diff --git a/src/utils/helpers.ts b/src/utils/helpers.ts
index 54792d2..f7796dd 100644
--- a/src/utils/helpers.ts
+++ b/src/utils/helpers.ts
@@ -19,4 +19,15 @@ export const getAssetUrl = (
     if (format) args += `&format=${format}`
 
     return `${API_URL}/assets/${id}?width=${width}&height=${height}&fit=${fit}${args}`
+}
+
+
+/**
+ * Get a Directus asset URL from parameters
+ */
+export const getAssetUrlKey = (
+    id: string,
+    key: string
+) => {
+    return `${API_URL}/assets/${id}?key=${key}`
 }
\ No newline at end of file