From 9761351a2651a799103e59c1893f4942c91c84c3 Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Tue, 19 Mar 2024 17:59:10 +0100
Subject: [PATCH] remove nuxtimg (#347)

* remove nuxtimg

* fix: remove dummyImageProvider

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 client/.env.docker                            |  1 -
 client/components/forms/ImageInput.vue        |  2 +-
 client/components/global/Navbar.vue           |  2 +-
 .../open/forms/components/FormStats.vue       |  2 +-
 .../pages/templates/SingleTemplate.vue        |  2 +-
 client/components/pages/welcome/AiFeature.vue |  2 +-
 client/components/pages/welcome/Features.vue  |  2 +-
 .../vendor/appsumo/AppSumoBilling.vue         |  4 +--
 .../vendor/appsumo/AppSumoRegister.vue        |  8 ++---
 client/error.vue                              |  2 +-
 client/lib/images/dummy-image-provider.js     | 21 ------------
 client/nuxt.config.ts                         | 12 -------
 client/pages/ai-form-builder.vue              | 32 +++++++++----------
 client/pages/home.vue                         |  2 +-
 client/pages/index.vue                        |  2 +-
 client/pages/templates/[slug].vue             |  2 +-
 client/runtimeConfig.js                       |  1 -
 17 files changed, 32 insertions(+), 67 deletions(-)
 delete mode 100644 client/lib/images/dummy-image-provider.js

diff --git a/client/.env.docker b/client/.env.docker
index 65a5ff9a..3b55165b 100644
--- a/client/.env.docker
+++ b/client/.env.docker
@@ -10,5 +10,4 @@ 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/forms/ImageInput.vue b/client/components/forms/ImageInput.vue
index 26bbe076..63bbc57f 100644
--- a/client/components/forms/ImageInput.vue
+++ b/client/components/forms/ImageInput.vue
@@ -22,7 +22,7 @@
         </div>
         <div v-else class="h-6 text-gray-600 dark:text-gray-400 flex">
           <div class="flex-grow">
-            <NuxtImg :src="currentUrl" class="h-6 rounded shadow-md"/>
+            <img :src="currentUrl" class="h-6 rounded shadow-md"/>
           </div>
           <a href="#" class="hover:text-nt-blue flex" @click.prevent="clearUrl">
             <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24"
diff --git a/client/components/global/Navbar.vue b/client/components/global/Navbar.vue
index 56e1086f..21d11c98 100644
--- a/client/components/global/Navbar.vue
+++ b/client/components/global/Navbar.vue
@@ -5,7 +5,7 @@
         <div class="flex items-center">
           <NuxtLink :to="{ name: user ? 'home' : 'index' }"
                     class="flex-shrink-0 font-semibold hover:no-underline flex items-center">
-            <NuxtImg src="/img/logo.svg" alt="notion tools logo" class="w-8 h-8"/>
+            <img src="/img/logo.svg" alt="notion tools logo" class="w-8 h-8"/>
             <span class="ml-2 text-md hidden sm:inline text-black dark:text-white">OpnForm</span>
           </NuxtLink>
           <workspace-dropdown class="ml-6"/>
diff --git a/client/components/open/forms/components/FormStats.vue b/client/components/open/forms/components/FormStats.vue
index a1372759..f8064cf7 100644
--- a/client/components/open/forms/components/FormStats.vue
+++ b/client/components/open/forms/components/FormStats.vue
@@ -13,7 +13,7 @@
           </p>
         </div>
       </div>
-      <NuxtImg src="/img/pages/forms/blurred_graph.png"
+      <img src="/img/pages/forms/blurred_graph.png"
            alt="Sample Graph"
            class="mx-auto filter blur-md z-0"
       />
diff --git a/client/components/pages/templates/SingleTemplate.vue b/client/components/pages/templates/SingleTemplate.vue
index 422586cd..9b2fcab4 100644
--- a/client/components/pages/templates/SingleTemplate.vue
+++ b/client/components/pages/templates/SingleTemplate.vue
@@ -17,7 +17,7 @@
     </div>
 
     <div class="aspect-[4/3] rounded-lg shadow-sm overflow-hidden">
-      <NuxtImg class="group-hover:scale-110 transition-all duration-200 h-full object-cover w-full" v-if="template.image_url"
+      <img 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>
diff --git a/client/components/pages/welcome/AiFeature.vue b/client/components/pages/welcome/AiFeature.vue
index aacf4fd9..b793bcca 100644
--- a/client/components/pages/welcome/AiFeature.vue
+++ b/client/components/pages/welcome/AiFeature.vue
@@ -5,7 +5,7 @@
           <div
             class="relative px-4 py-8 overflow-hidden bg-blue-100 ring-blue-100 ring-1 sm:shadow-lg isolate sm:rounded-2xl sm:px-16 md:pt-20 lg:flex lg:gap-x-20 lg:px-16 lg:py-0 sm:shadow-gray-600/10">
             <div class="absolute inset-0">
-              <NuxtImg class="object-cover object-top w-full h-full" src="/img/pages/ai_form_builder/background-pattern-ai.svg" alt=""/>
+              <img class="object-cover object-top w-full h-full" src="/img/pages/ai_form_builder/background-pattern-ai.svg" alt=""/>
             </div>
 
             <div class="relative max-w-md mx-auto text-center xl:max-w-lg lg:mx-0 lg:flex-auto lg:py-16 lg:text-left">
diff --git a/client/components/pages/welcome/Features.vue b/client/components/pages/welcome/Features.vue
index 0e246017..10dc7135 100644
--- a/client/components/pages/welcome/Features.vue
+++ b/client/components/pages/welcome/Features.vue
@@ -84,7 +84,7 @@
       </div>
       <div class="w-full md:w-1/2 lg:w-7/12 flex items-center justify-center relative w-full"
            :class="{'md:pr-8':index%2==1, 'md:pl-8':index%2==0}">
-        <NuxtImg loading="lazy" class="block rounded-2xl w-full"
+        <img loading="lazy" class="block rounded-2xl w-full"
                  sizes="320px sm:530px"
                  :src="step.img" alt="product-feature-image"/>
       </div>
diff --git a/client/components/vendor/appsumo/AppSumoBilling.vue b/client/components/vendor/appsumo/AppSumoBilling.vue
index de34d66d..d98ed28a 100644
--- a/client/components/vendor/appsumo/AppSumoBilling.vue
+++ b/client/components/vendor/appsumo/AppSumoBilling.vue
@@ -1,9 +1,9 @@
 <template>
   <div v-if="user.active_license" class="border p-5 shadow-md rounded-md">
     <div class="w-auto flex flex-col items-center">
-      <NuxtImg src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px]" alt="AppSumo"/>
+      <img src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px]" alt="AppSumo"/>
 
-      <NuxtImg src="/img/appsumo/as-Select-dark.png" class="max-w-[150px]" alt="AppSumo"/>
+      <img src="/img/appsumo/as-Select-dark.png" class="max-w-[150px]" alt="AppSumo"/>
 
     </div>
     <p class="mt-6">
diff --git a/client/components/vendor/appsumo/AppSumoRegister.vue b/client/components/vendor/appsumo/AppSumoRegister.vue
index 10da03c6..082d5905 100644
--- a/client/components/vendor/appsumo/AppSumoRegister.vue
+++ b/client/components/vendor/appsumo/AppSumoRegister.vue
@@ -1,8 +1,8 @@
 <template>
   <div v-if="hasValidLicense" class="p-6 bg-white border shadow-md rounded-md">
-    <NuxtImg src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px] mx-auto" alt="AppSumo"/>
+    <img src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px] mx-auto" alt="AppSumo"/>
 
-    <NuxtImg src="/img/appsumo/as-Select-dark.png" class="max-w-[300px] mx-auto" alt="AppSumo"/>
+    <img src="/img/appsumo/as-Select-dark.png" class="max-w-[300px] mx-auto" alt="AppSumo"/>
 
     <p class="mt-6">
       <span class="text-green-500">We found your AppSumo Lifetime deal license!</span> Just complete the registration form to finalize the activation of
@@ -10,9 +10,9 @@
     </p>
   </div>
   <div v-else-if="hasLicenseError" class="p-6 bg-white border border-red-500 shadow-md rounded-md">
-    <NuxtImg src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px] mx-auto" alt="AppSumo"/>
+    <img src="/img/appsumo/as-taco-white-bg.png" class="max-w-[60px] mx-auto" alt="AppSumo"/>
 
-    <NuxtImg src="/img/appsumo/as-Select-dark.png" class="max-w-[300px] mx-auto" alt="AppSumo"/>
+    <img src="/img/appsumo/as-Select-dark.png" class="max-w-[300px] mx-auto" alt="AppSumo"/>
 
     <p class="mt-6">
       <span class="text-red-600">Invalid AppSumo license</span>. The license was probably already attached to an OpnForm account. Please contact support.
diff --git a/client/error.vue b/client/error.vue
index e77a9549..18d33b5f 100644
--- a/client/error.vue
+++ b/client/error.vue
@@ -3,7 +3,7 @@
     <NuxtLayout>
       <div class="flex mt-6">
         <div class="w-full md:w-2/3 md:mx-auto md:max-w-md">
-          <NuxtImg alt="Nice plant as we have nothing else to show!" src="/img/icons/plant.png" class="w-56 mb-5"/>
+          <img alt="Nice plant as we have nothing else to show!" src="/img/icons/plant.png" class="w-56 mb-5"/>
 
           <h1 class="mb-4 font-semibold text-3xl text-gray-900">
             Page Not Found
diff --git a/client/lib/images/dummy-image-provider.js b/client/lib/images/dummy-image-provider.js
deleted file mode 100644
index 86d5dd56..00000000
--- a/client/lib/images/dummy-image-provider.js
+++ /dev/null
@@ -1,21 +0,0 @@
-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 19ed8a90..53062d90 100644
--- a/client/nuxt.config.ts
+++ b/client/nuxt.config.ts
@@ -64,18 +64,6 @@ export default defineNuxtConfig({
             }
         }
     },
-    image: runtimeConfig.public.useDummyImageProvider ? {
-        provider: 'dummy',
-        providers: {
-            dummy: {
-                provider: '~/lib/images/dummy-image-provider.js',
-            }
-        }
-    } :{
-        quality: 95,
-        format: 'webp',
-        domains: ['images.unsplash.com']
-    },
     sourcemap: true,
     vite: {
         plugins: [
diff --git a/client/pages/ai-form-builder.vue b/client/pages/ai-form-builder.vue
index 9a0affbf..1ed634c6 100644
--- a/client/pages/ai-form-builder.vue
+++ b/client/pages/ai-form-builder.vue
@@ -42,7 +42,7 @@
           <div
             class="grid lg:grid-cols-3 grid-cols-1 sm:max-w-lg lg:max-w-5xl sm:mx-auto gap-8 sm:gap-10 mt-12 sm:mt-16">
             <div class="flex items-start gap-4">
-              <NuxtImg class="w-12 h-12 shrink-0" src="/img/pages/ai_form_builder/icon-fast.svg" alt=""/>
+              <img class="w-12 h-12 shrink-0" src="/img/pages/ai_form_builder/icon-fast.svg" alt=""/>
 
               <div>
                 <p class="text-md font-semibold text-gray-900">
@@ -55,7 +55,7 @@
             </div>
 
             <div class="flex items-start gap-4">
-              <NuxtImg class="w-12 h-12 shrink-0" src="/img/pages/ai_form_builder/icon-customization.svg" alt=""/>
+              <img class="w-12 h-12 shrink-0" src="/img/pages/ai_form_builder/icon-customization.svg" alt=""/>
 
               <div>
                 <p class="text-md font-semibold text-gray-900">
@@ -68,7 +68,7 @@
             </div>
 
             <div class="flex items-start gap-4">
-              <NuxtImg class="w-12 h-12 shrink-0" src="/img/pages/ai_form_builder/icon-browser.svg" alt=""/>
+              <img class="w-12 h-12 shrink-0" src="/img/pages/ai_form_builder/icon-browser.svg" alt=""/>
 
               <div>
                 <p class="text-md font-semibold text-gray-900">
@@ -103,7 +103,7 @@
           <div
             class="space-y-16 text-center lg:text-left sm:max-w-md sm:mx-auto lg:max-w-none lg:space-y-20 xl:space-y-24 mt-8 sm:mt-12 lg:mt-16">
             <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12">
-              <NuxtImg class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
+              <img class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
               src="/img/pages/ai_form_builder/step-1.svg" alt=""/>
 
 
@@ -113,7 +113,7 @@
               </div>
 
               <div class="lg:flex-1 lg:shrink-0">
-                <NuxtImg class="w-auto h-16 hidden lg:block" src="/img/pages/ai_form_builder/icon-create.svg" alt=""/>
+                <img class="w-auto h-16 hidden lg:block" src="/img/pages/ai_form_builder/icon-create.svg" alt=""/>
 
                 <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 lg:mt-8">
                   Building forms made easy
@@ -129,7 +129,7 @@
             </div>
 
             <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12">
-              <NuxtImg
+              <img
                 class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm lg:order-3"
                 src="/img/pages/ai_form_builder/step-2.svg" alt=""/>
               <div
@@ -138,7 +138,7 @@
               </div>
 
               <div class="lg:flex-1 lg:shrink-0 lg:order-1">
-                <NuxtImg class="w-auto h-16 hidden lg:block" src="/img/pages/ai_form_builder/icon-customization.svg" alt=""/>
+                <img class="w-auto h-16 hidden lg:block" src="/img/pages/ai_form_builder/icon-customization.svg" alt=""/>
 
                 <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 lg:mt-8">
                   Customized forms work wonders
@@ -152,7 +152,7 @@
             </div>
 
             <div class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-8 lg:gap-12">
-              <NuxtImg class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
+              <img class="w-full lg:flex-1 bg-gray-300 lg:shrink-0 rounded-2xl ring-1 ring-gray-200 shadow-sm"
               src="/img/pages/ai_form_builder/step-3.svg" alt=""/>
               <div
                 class="w-16 h-16 rounded-full bg-blue-50 border-2 border-blue-200 hidden xl:inline-flex items-center justify-center text-blue-600 text-2xl font-semibold leading-none">
@@ -160,7 +160,7 @@
               </div>
 
               <div class="lg:flex-1 lg:shrink-0">
-                <NuxtImg class="w-auto h-16 hidden lg:block" src="/img/pages/ai_form_builder/icon-share.svg" alt=""/>
+                <img class="w-auto h-16 hidden lg:block" src="/img/pages/ai_form_builder/icon-share.svg" alt=""/>
 
                 <h3 class="text-2xl sm:text-3xl lg:text-4xl font-semibold text-gray-900 lg:mt-8">
                   Share your forms anywhere
@@ -200,7 +200,7 @@
 <!--          <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 mt-8 sm:mt-12 lg:mt-16">-->
 <!--            <div-->
 <!--              class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
-<!--              <NuxtImg class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
+<!--              <img class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
 -->
 <!--              <div class="px-4 py-5 sm:p-6">-->
 <!--                <h3 class="text-lg font-semibold text-gray-900">-->
@@ -214,7 +214,7 @@
 
 <!--            <div-->
 <!--              class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
-<!--              <NuxtImg class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
+<!--              <img class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
 -->
 <!--              <div class="px-4 py-5 sm:p-6">-->
 <!--                <h3 class="text-lg font-semibold text-gray-900">-->
@@ -228,7 +228,7 @@
 
 <!--            <div-->
 <!--              class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
-<!--              <NuxtImg class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
+<!--              <img class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
 -->
 <!--              <div class="px-4 py-5 sm:p-6">-->
 <!--                <h3 class="text-lg font-semibold text-gray-900">-->
@@ -242,7 +242,7 @@
 
 <!--            <div-->
 <!--              class="bg-white overflow-hidden rounded-2xl ring-1 ring-gray-200 shadow-sm hover:shadow-lg hover:-translate-y-2 transition-all duration-150">-->
-<!--              <NuxtImg class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
+<!--              <img class="w-full" src="/img/pages/ai_form_builder/examples-placeholder.png" alt=""/>
 -->
 <!--              <div class="px-4 py-5 sm:p-6">-->
 <!--                <h3 class="text-lg font-semibold text-gray-900">-->
@@ -422,11 +422,11 @@
     <section class="bg-gradient-to-b from-gray-100 to-white py-12 sm:py-16 lg:pt-20 xl:pt-24">
       <div class="px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
         <div class="flex items-center justify-center gap-8">
-          <NuxtImg class="w-auto h-12" src="/img/pages/ai_form_builder/icon-email-input.svg" alt=""/>
+          <img class="w-auto h-12" src="/img/pages/ai_form_builder/icon-email-input.svg" alt=""/>
 
-          <NuxtImg class="w-auto h-12" src="/img/pages/ai_form_builder/icon-radio-buttons.svg" alt=""/>
+          <img class="w-auto h-12" src="/img/pages/ai_form_builder/icon-radio-buttons.svg" alt=""/>
 
-          <NuxtImg class="w-auto h-12" src="/img/pages/ai_form_builder/icon-textarea.svg" alt=""/>
+          <img class="w-auto h-12" src="/img/pages/ai_form_builder/icon-textarea.svg" alt=""/>
 
         </div>
 
diff --git a/client/pages/home.vue b/client/pages/home.vue
index c4c57b9e..da4f3f25 100644
--- a/client/pages/home.vue
+++ b/client/pages/home.vue
@@ -40,7 +40,7 @@
             </div>
           </div>
           <div v-if="!formsLoading && enrichedForms.length === 0" class="flex flex-wrap justify-center max-w-4xl">
-            <NuxtImg class="w-56"
+            <img class="w-56"
                  src="/img/pages/forms/search_notfound.png" alt="search-not-found"
             />
 
diff --git a/client/pages/index.vue b/client/pages/index.vue
index 0384af40..4bcfe4e1 100644
--- a/client/pages/index.vue
+++ b/client/pages/index.vue
@@ -88,7 +88,7 @@
           <div
             class="-m-2 rounded-xl bg-blue-900/5 p-2 backdrop-blur-sm ring-1 ring-inset ring-blue-900/10 lg:-m-4 lg:rounded-2xl lg:p-4 w-full"
           >
-            <NuxtImg src="/img/pages/welcome/product-cover.jpg"
+            <img src="/img/pages/welcome/product-cover.jpg"
                      sizes="320px sm:650px lg:896px"
                  alt="Product screenshot" loading="lazy" class="rounded-md w-full shadow-2xl ring-1 ring-gray-900/10"
             />
diff --git a/client/pages/templates/[slug].vue b/client/pages/templates/[slug].vue
index b44d590d..4e594ddc 100644
--- a/client/pages/templates/[slug].vue
+++ b/client/pages/templates/[slug].vue
@@ -33,7 +33,7 @@
         <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-sm">
-              <NuxtImg class="object-cover w-full transition-all duration-200 group-hover:scale-110 h-[240px]"
+              <img 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 e7db754a..80cbc25f 100644
--- a/client/runtimeConfig.js
+++ b/client/runtimeConfig.js
@@ -12,7 +12,6 @@ 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,
     featureBaseOrganization: process.env.NUXT_PUBLIC_FEATURE_BASE_ORGANISATION || null,
 
     // Config within public will be also exposed to the client