From cf32ba22f7cb9dcc61b6ef4a1a403b8ee74cfa8b Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Tue, 6 Feb 2024 19:56:14 +0100
Subject: [PATCH] Optimize template images + disable image optim docker (#313)

* Optimize template images + disable image optim docker

* Fix new name default docker env variable name

* Re-establish template page cache
---
 Dockerfile                                    |  1 +
 client/.env.docker                            |  1 +
 .../pages/templates/SingleTemplate.vue        |  4 ++--
 client/lib/images/dummy-image-provider.js     | 21 +++++++++++++++++++
 client/nuxt.config.ts                         | 11 +++++++++-
 client/pages/templates/[slug].vue             |  6 +++---
 client/runtimeConfig.js                       |  1 +
 docker/nuxt-wrapper.sh                        |  5 ++---
 8 files changed, 41 insertions(+), 9 deletions(-)
 create mode 100644 client/lib/images/dummy-image-provider.js

diff --git a/Dockerfile b/Dockerfile
index 60856bd05..2a0ce691b 100644
--- a/Dockerfile
+++ b/Dockerfile
@@ -14,6 +14,7 @@ ADD client/package.json client/package-lock.json ./
 RUN npm install
 
 ADD client /app/
+RUN cp .env.docker .env
 RUN npm run build
 
 # syntax=docker/dockerfile:1.3-labs
diff --git a/client/.env.docker b/client/.env.docker
index 55fad1255..fe76e57e3 100644
--- a/client/.env.docker
+++ b/client/.env.docker
@@ -10,4 +10,5 @@ NUXT_PUBLIC_GOOGLE_ANALYTICS_CODE=
 NUXT_PUBLIC_H_CAPTCHA_SITE_KEY=
 NUXT_PUBLIC_PAID_PLANS_ENABLED=false
 NUXT_PUBLIC_S3_ENABLED=false
+NUXT_PUBLIC_IMAGE_OPTIMIZATION_DISABLED=true
 NUXT_API_SECRET=
diff --git a/client/components/pages/templates/SingleTemplate.vue b/client/components/pages/templates/SingleTemplate.vue
index 8b403da2f..422586cdc 100644
--- a/client/components/pages/templates/SingleTemplate.vue
+++ b/client/components/pages/templates/SingleTemplate.vue
@@ -17,8 +17,8 @@
     </div>
 
     <div class="aspect-[4/3] rounded-lg shadow-sm overflow-hidden">
-      <img class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full"
-           :src="template.image_url" alt=""
+      <NuxtImg class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full" v-if="template.image_url"
+           :src="template.image_url" alt="" width="450px"
       />
     </div>
     <p
diff --git a/client/lib/images/dummy-image-provider.js b/client/lib/images/dummy-image-provider.js
new file mode 100644
index 000000000..86d5dd569
--- /dev/null
+++ b/client/lib/images/dummy-image-provider.js
@@ -0,0 +1,21 @@
+import { joinURL } from 'ufo'
+import { createOperationsGenerator } from '#image'
+
+const operationsGenerator = createOperationsGenerator()
+
+export const getImage = (
+  src,
+  { modifiers = {}, baseURL } = {}
+) => {
+
+  if (!baseURL) {
+    // also support runtime config
+    baseURL = useRuntimeConfig().public.siteUrl
+  }
+
+  const operations = operationsGenerator(modifiers)
+
+  return {
+    url: joinURL(baseURL, src + (operations ? '?' + operations : '')),
+  }
+}
diff --git a/client/nuxt.config.ts b/client/nuxt.config.ts
index 1c1ec526e..d048dbec6 100644
--- a/client/nuxt.config.ts
+++ b/client/nuxt.config.ts
@@ -64,8 +64,17 @@ export default defineNuxtConfig({
             }
         }
     },
-    image: {
+    image: runtimeConfig.public.useDummyImageProvider ? {
+        provider: 'dummy',
+        providers: {
+            dummy: {
+                provider: '~/lib/dummy-image-provider.js',
+            }
+        }
+    } :{
         quality: 95,
+        format: 'webp',
+        domains: ['images.unsplash.com']
     },
     sourcemap: true,
     vite: {
diff --git a/client/pages/templates/[slug].vue b/client/pages/templates/[slug].vue
index 37e85d968..b44d590d9 100644
--- a/client/pages/templates/[slug].vue
+++ b/client/pages/templates/[slug].vue
@@ -32,9 +32,9 @@
       <section class="pt-12 bg-gray-50 sm:pt-16 border-b pb-[250px] relative">
         <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
           <div class="flex flex-col items-center justify-center max-w-4xl gap-8 mx-auto md:gap-12 md:flex-row">
-            <div class="aspect-[4/3] shrink-0 rounded-lg shadow-sm overflow-hidden group max-w-xs">
-              <img class="object-cover w-full h-full transition-all duration-200 group-hover:scale-110"
-                   :src="template.image_url" alt="Template cover image"
+            <div class="aspect-[4/3] shrink-0 rounded-lg shadow-sm overflow-hidden group max-w-sm">
+              <NuxtImg class="object-cover w-full transition-all duration-200 group-hover:scale-110 h-[240px]"
+                   :src="template.image_url" alt="Template cover image" width="500px" height="380px"
               />
             </div>
 
diff --git a/client/runtimeConfig.js b/client/runtimeConfig.js
index fcf808e27..8c91c58bd 100644
--- a/client/runtimeConfig.js
+++ b/client/runtimeConfig.js
@@ -12,6 +12,7 @@ export default {
     s3Enabled: process.env.NUXT_PUBLIC_S3_ENABLED || false,
     paidPlansEnabled: process.env.NUXT_PUBLIC_PAID_PLANS_ENABLED || false,
     customDomainsEnabled: process.env.NUXT_PUBLIC_CUSTOM_DOMAINS_ENABLED || false,
+    useDummyImageProvider: process.env.NUXT_PUBLIC_IMAGE_OPTIMIZATION_DISABLED || false,
 
     // Config within public will be also exposed to the client
     SENTRY_DSN_PUBLIC: process.env.SENTRY_DSN_PUBLIC,
diff --git a/docker/nuxt-wrapper.sh b/docker/nuxt-wrapper.sh
index 9ed0b1d84..e205ac6dc 100644
--- a/docker/nuxt-wrapper.sh
+++ b/docker/nuxt-wrapper.sh
@@ -7,10 +7,9 @@ nvm use 20
 cd /app/nuxt/server/
 
 . /app/client/.env
-[ "x$NUXT_API_SECRET" != "x" ] || generate-api-secret.sh
 
-sed 's/^/export /' < /app/.nuxt.env > env.sh
+[ "x$NUXT_API_SECRET" != "x" ] || generate-api-secret.sh
 
-. env.sh
+eval $(sed 's/^/export /' < /app/client/.env)
 
 node index.mjs