Optimize template images + disable image optim docker

Author: JhumanJ

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

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_DISABLE_IMAGE_OPTIMIZATION=true
 NUXT_API_SECRET=

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

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 : '')),
+  }
+}

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: {

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>
 

client/pages/templates/index.vue

@@ -23,7 +23,7 @@
 import {loadAllTemplates} from "~/stores/templates.js";
 
 defineRouteRules({
-  swr: 3600
+  // swr: 3600
 })
 
 useOpnSeoMeta({

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,

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