From 13d6b3682d1fa2b74ef317635f5d02bbb5b5ed80 Mon Sep 17 00:00:00 2001
From: Valentin <valentin@figureslibres.io>
Date: Sat, 6 Apr 2024 00:46:44 +0200
Subject: [PATCH] middleware proxy api et optimisation ssg

---
 app.vue                 |  58 ++++++++++++-----------
 components/Projects.vue |  24 ++++------
 error.vue               |  37 +++++++--------
 nuxt.config.ts          |  41 +++++++++++++++-
 package-lock.json       |  23 +++++++++
 package.json            |   1 +
 pages/contact.vue       |  12 ++---
 pages/galerie.vue       |  11 +++--
 pages/index.vue         | 100 ++++++++++++++++++++++------------------
 pages/magasin.vue       |  14 ++++--
 server/api/[...].ts     |  18 ++++++++
 11 files changed, 211 insertions(+), 128 deletions(-)
 create mode 100644 server/api/[...].ts

diff --git a/app.vue b/app.vue
index 77b178a..aa7dfef 100644
--- a/app.vue
+++ b/app.vue
@@ -5,34 +5,40 @@
   </main>
 </template>
 
-<script setup>
-  const { getItems } = useDirectusItems();
-  const global = ref([]);
-  onMounted(async () => {
-    const items = await getItems({ collection: "global" });
-    global.value = items;
-  });
+<script>
+export default {
+  setup() {
+    const global = ref([]);
+    
+    const { data, error } = useFetch('/api/items/global', {
+      server: true,
+      onResponse({ request, response, options }) {
+        global.value = response._data.data;
+      },
+    });
+    
+    provide('globalData', global);
 
-  provide('globalData', global);
+    useSeoMeta({
+      ogImage: '/card.jpg',
+      ogImageAlt: global.value.contact_image_titre,
+      twitterImage: '/card.jpg',
+    });
 
-  useSeoMeta({
-    ogImage: '/card.jpg',
-    ogImageAlt: global.value.contact_image_titre,
-    twitterImage: '/card.jpg',
-  });
-
-  useHead({
-    htmlAttrs: {
-      lang: 'fr'
-    },
-    link: [
-      {
-        rel: 'icon',
-        type: 'image/png',
-        href: 'favicon.png'
-      }
-    ]
-  });
+    useHead({
+      htmlAttrs: {
+        lang: 'fr'
+      },
+      link: [
+        {
+          rel: 'icon',
+          type: 'image/png',
+          href: 'favicon.png'
+        }
+      ]
+    });
+  }
+}
 </script>
 
 <style lang="scss">
diff --git a/components/Projects.vue b/components/Projects.vue
index 5655a6f..6aacf26 100644
--- a/components/Projects.vue
+++ b/components/Projects.vue
@@ -2,14 +2,11 @@
     <main>
         <article v-for="content in contents" :key="content.id">
             <div>
-                <NuxtImg 
-                    :src="img((content.image ? content.image : content.shop_image))"
+                <img
+                    :src="`/api/assets/${content.image ? content.image : content.shop_image}.webp`"
                     :alt="content.titre"
-                    format="webp"
-                    placeholder
-                    lazy
-                    sizes="sm:40vw lg:30vw"
-                    @click="displaySlider(content.id)" />
+                    @click="displaySlider(content.id)" 
+                />
             </div>
             <div>
                 <p v-if="content.titre">{{ content.titre }}</p>
@@ -30,12 +27,10 @@
         >
             <swiper-slide v-for="content in contents" :key="content.id">
                 <div class="swiper-zoom-container">
-                    <NuxtImg 
-                        :src="img((content.image ? content.image : content.shop_image))"
+                    <img
+                        :src="`/api/assets/${content.image ? content.image : content.shop_image}.webp`"
                         :alt="content.titre"
-                        format="webp"
-                        placeholder
-                        lazy />
+                    />
                 </div>
             </swiper-slide>
             <div class="swiper-button-close" @click="closeSlider()"></div>
@@ -51,8 +46,6 @@ import 'swiper/css/zoom';
 
 export default {
     setup() {
-        const { getThumbnail : img } = useDirectusFiles();
-
         const swiperInstance = ref(null);
         const onSwiper = (swiper) => {
             swiperInstance.value = swiper;
@@ -73,11 +66,11 @@ export default {
 
         const closeSlider = () => {
             const body = document.querySelector('body');
-            body.style.overflowY = 'auto';
             const swiperEl = document.querySelector('.swiper');
             swiperEl.style.opacity = 0;
             setTimeout(() => {
                 swiperEl.style.display = "none";
+                body.style.overflowY = 'auto';
             }, 300);
         }
 
@@ -87,7 +80,6 @@ export default {
             modules: [Navigation, A11y, Zoom],
             displaySlider,
             closeSlider,
-            img
         };
     },
     components: {
diff --git a/error.vue b/error.vue
index 4996d29..f228966 100644
--- a/error.vue
+++ b/error.vue
@@ -3,35 +3,30 @@
     <div class="error-page">
       <h1 v-if="error.statusCode === 404">Erreur 404</h1>
       <p v-if="error.statusCode === 404">La page {{ error.url }} n'existe pas</p>
-      <NuxtImg 
+      <img 
             v-if="global.error_img"
-            :src="img(global.error_img)" 
-            :alt="global.error_img_title"
-            format="webp"
-            placeholder
-            lazy
-            sizes="sm:100vw" />
+            :src="`/api/assets/${globalData.error_img}.webp`"
+            :alt="global.error_img_title" />
     </div>
 </template>
   
 <script>
   export default {
     setup() {
-        const { getItems } = useDirectusItems();
-        const { getThumbnail : img } = useDirectusFiles();
+      const global = ref([]);
+      
+      const { data, error } = useFetch('/api/items/global', {
+        server: true,
+        onResponse({ request, response, options }) {
+          global.value = response._data.data;
+        },
+      });
+      
+      provide('globalData', global);
 
-        const global = ref([]);
-        onMounted(async () => {
-            const items = await getItems({ collection: "global" });
-            global.value = items;
-        });
-
-        provide('globalData', global);
-
-        return {
-            global,
-            img
-        }
+      return {
+        globalData
+      }
 
     },
     props: {
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 8b20892..d8261c5 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -1,3 +1,8 @@
+// nitro hook to get Directus files working on ssg
+// https://github.com/codepie-io/nuxt3-dynamic-routes/blob/main/nuxt.config.ts
+
+import { createDirectus, staticToken, rest, readFiles } from '@directus/sdk';
+
 export default defineNuxtConfig({
   devtools: { enabled: true },
   modules: [
@@ -5,6 +10,38 @@ export default defineNuxtConfig({
     '@nuxt/image',
     '@nuxtjs/seo'
   ],
+  runtimeConfig: {
+    apiURL: process.env.DIRECTUS_URL,
+    apiToken: process.env.DIRECTUS_API_TOKEN
+  },
+  nitro: {
+    hooks: {
+      async 'prerender:routes'(routes) {
+        const client = createDirectus(process.env.DIRECTUS_URL)
+          .with(staticToken(process.env.DIRECTUS_API_TOKEN))
+          .with(rest());
+
+        const directusFiles = await client.request(
+          readFiles({
+            query: {
+              filter: {
+                type: {
+                  _eq: 'image',
+                },
+              },
+            },
+          })
+        );
+
+        for (let image of directusFiles) {
+          // @TODO: vérifier si le fichier existe pas déjà
+          //        avant de l'ajouter aux routes à prerender
+          routes.add(`/api/assets/${image.id}.webp`);
+        }
+    
+      }
+    }
+  },
   app: {
     pageTransition: { name: 'page', mode: 'out-in' }
   },
@@ -19,7 +56,7 @@ export default defineNuxtConfig({
     token: process.env.DIRECTUS_API_TOKEN
   },
   image: {
-    domains: [ `${process.env.DIRECTUS_URL}` ],
-    format: ['webp'],
+    provider: 'ipx',
+    // domains: [ `${process.env.URL}/api/assets/` ]
   }
 })
diff --git a/package-lock.json b/package-lock.json
index abf9c93..3de362e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
       "name": "nuxt-app",
       "hasInstallScript": true,
       "dependencies": {
+        "@directus/sdk": "^15.1.0",
         "@nuxt/image": "^1.3.0",
         "nuxt": "^3.10.1",
         "nuxt-directus": "^5.6.0",
@@ -1035,6 +1036,28 @@
         "node": ">= 10"
       }
     },
+    "node_modules/@directus/sdk": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/@directus/sdk/-/sdk-15.1.0.tgz",
+      "integrity": "sha512-M2+Z1WmU8Q5KlR22K5ugmBHq10a6tcGl3QuvGKnN+jNwDnRyN5brJxt7FvgtWrY3Q1ToGLxmL37GHAH9s12dlQ==",
+      "dependencies": {
+        "@directus/system-data": "1.0.2"
+      },
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/directus/directus?sponsor=1"
+      }
+    },
+    "node_modules/@directus/system-data": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@directus/system-data/-/system-data-1.0.2.tgz",
+      "integrity": "sha512-PweDAwTz4zImEGJnhoaX8apOCvcAfE0aGQrCSk+3cf1sLso0ShNlcDvUymtVfrqOXy0qT9sLa833bpJVaXF5ng==",
+      "funding": {
+        "url": "https://github.com/directus/directus?sponsor=1"
+      }
+    },
     "node_modules/@emnapi/runtime": {
       "version": "0.45.0",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-0.45.0.tgz",
diff --git a/package.json b/package.json
index a5d181b..e4b174a 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
+    "@directus/sdk": "^15.1.0",
     "@nuxt/image": "^1.3.0",
     "nuxt": "^3.10.1",
     "nuxt-directus": "^5.6.0",
diff --git a/pages/contact.vue b/pages/contact.vue
index 0132983..884c2e2 100644
--- a/pages/contact.vue
+++ b/pages/contact.vue
@@ -1,13 +1,10 @@
 <template>
     <main id="contact">
-        <div v-if="globalData.contact_image">
-            <NuxtImg 
-                :src="img(globalData.contact_image)" 
+        <div>
+            <img 
+                :src="`/api/assets/${globalData.contact_image}.webp`"
                 :alt="globalData.contact_image_titre"
-                format="webp"
-                placeholder
-                lazy
-                sizes="sm:40vw" />
+            />
         </div>
         <div>
             <p>{{ globalData.contact_texte }}</p>
@@ -18,7 +15,6 @@
 
 <script setup>
     const globalData = inject('globalData');
-    const { getThumbnail : img } = useDirectusFiles();
 </script>
 
 <style lang="scss">
diff --git a/pages/galerie.vue b/pages/galerie.vue
index 4d86e56..5b8b6da 100644
--- a/pages/galerie.vue
+++ b/pages/galerie.vue
@@ -7,15 +7,18 @@ import Projects from '@/components/Projects.vue';
 
 export default {
     setup() {
-        const { getItems } = useDirectusItems();
         const galerie = ref([]);
+
+        const { data: itemsData, error: itemsError } = useFetch('/api/items/galerie', { server: true });
         onMounted(async () => {
-            const items = await getItems({ collection: "galerie" });
-            galerie.value = items;
+            if (!itemsError.value && itemsData.value) {
+                galerie.value = itemsData.value.data;
+            }
         });
 
         return {
-            galerie
+            galerie,
+            itemsError
         };
     },
     components: {
diff --git a/pages/index.vue b/pages/index.vue
index a85300a..c5a6b50 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -1,67 +1,75 @@
 <template>
     <main>
         <div class="indexImg" v-for="image in itemsAccueil" :key="image.id">
-            <NuxtImg
-                :src="img(image.image_accueil)"
+            <img
+                :src="`/api/assets/${image.image_accueil}.webp`"
                 :alt="image.titre"
-                format="webp"
-                placeholder
-                lazy
-                sizes="sm:150vw" />
+            />
        </div>
     </main>
 </template>
 
-<script setup>
-    const { getItems } = useDirectusItems();
+<script>
+export default {
+    setup() {
+        const itemsAccueil = ref([]);
 
-    const itemsAccueil = await getItems({
-        collection: "images_accueil"
-    });
-
-    const { getThumbnail : img } = useDirectusFiles();
-
-    onMounted(() => {
-        const imgs = document.querySelectorAll('.indexImg img');
+        const { data: itemsData, error: itemsError } = useFetch('/api/items/images_accueil', { server: true });
         
-        const showingTime = 5000, transitionTime = 2000;
+        onMounted(async () => {
+            if (!itemsError.value && itemsData.value) {
+                itemsAccueil.value = itemsData.value.data;
+            }
+        });
 
-        for (let img of imgs) {
-            img.addEventListener('click', function() {
-                nextSlide();
-                resetTimer();
-            });
-            img.style.transition = `opacity ${transitionTime / 1000}s ease-out`;
-        }
+        return {
+            itemsAccueil,
+            itemsError
+        };
 
-        imgs[0].style.opacity = 1;
 
-        let diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
+        function startSlider() {
+            const imgs = document.querySelectorAll('.indexImg img');
+            
+            const showingTime = 5000, transitionTime = 2000;
 
-        let index = 1;
-
-        function nextSlide() {
-            if (index === 0) {
-                imgs[imgs.length - 1].style.opacity = 0;
-                imgs[index].style.opacity = 1;
-            } else {
-                imgs[index - 1].style.opacity = 0;
-                imgs[index].style.opacity = 1;
+            for (let img of imgs) {
+                img.addEventListener('click', function() {
+                    nextSlide();
+                    resetTimer();
+                });
+                img.style.transition = `opacity ${transitionTime / 1000}s ease-out`;
             }
 
-            if (index === imgs.length - 1) {
-                index = 0;
-            } else {
-                index ++;
+            imgs[0].style.opacity = 1;
+
+            let diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
+
+            let index = 1;
+
+            function nextSlide() {
+                if (index === 0) {
+                    imgs[imgs.length - 1].style.opacity = 0;
+                    imgs[index].style.opacity = 1;
+                } else {
+                    imgs[index - 1].style.opacity = 0;
+                    imgs[index].style.opacity = 1;
+                }
+
+                if (index === imgs.length - 1) {
+                    index = 0;
+                } else {
+                    index ++;
+                }
+            }
+
+            function resetTimer() {
+                clearInterval(diapoTimer);
+                diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
             }
         }
-
-        function resetTimer() {
-            clearInterval(diapoTimer);
-            diapoTimer = setInterval(nextSlide, showingTime + transitionTime);
-        }
-    });
-
+    }
+};
 </script>
 
 <style lang="scss">
diff --git a/pages/magasin.vue b/pages/magasin.vue
index 9ba9a85..d94e2b7 100644
--- a/pages/magasin.vue
+++ b/pages/magasin.vue
@@ -10,18 +10,22 @@ import Projects from '@/components/Projects.vue';
 
 export default {
     setup() {
-        const { getItems } = useDirectusItems();
         const magasin = ref([]);
-        onMounted(async () => {
-            const items = await getItems({ collection: "magasin" });
-            magasin.value = items;
+
+        const { data: itemsData, error: itemsError } = useFetch('/api/items/magasin', { server: true });
+
+        onBeforeMount(async () => {
+            if (!itemsError.value && itemsData.value) {
+                magasin.value = itemsData.value.data;
+            }
         });
 
         const globalData = inject('globalData');
 
         return {
             globalData,
-            magasin
+            magasin,
+            itemsError
         };
     },
     components: {
diff --git a/server/api/[...].ts b/server/api/[...].ts
new file mode 100644
index 0000000..8ec395e
--- /dev/null
+++ b/server/api/[...].ts
@@ -0,0 +1,18 @@
+// The BEST way to proxy your API in Nuxt
+// by Alexander Lichter
+// https://www.youtube.com/watch?v=J4E5uYz5AY8
+// to run as static `npm run generate --prerender`
+
+import { joinURL } from 'ufo'
+
+export default defineEventHandler(async (event) => {
+    const proxyUrl = useRuntimeConfig().apiURL    
+    
+    if (event.path.startsWith('/api')) {
+        const path = event.path.replace(/^\/api\//, '')
+
+        const target = joinURL(proxyUrl, path)
+
+        return proxyRequest(event, target, { headers: { Authorization: `Bearer ${useRuntimeConfig().apiToken}`}})
+    }
+})
\ No newline at end of file