From 630ae1df1d50cb6d1856bffdac27fb91c659e9f7 Mon Sep 17 00:00:00 2001
From: Julien Nahum <julien@nahum.net>
Date: Thu, 11 Jan 2024 09:48:57 +0100
Subject: [PATCH] image optimization caching + fix hydratation issue form
 template page

---
 .../open/forms/OpenCompleteForm.vue           | 14 +++---
 client/nuxt.config.ts                         |  5 +-
 client/pages/templates/[slug].vue             | 50 +++++++++----------
 3 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/client/components/open/forms/OpenCompleteForm.vue b/client/components/open/forms/OpenCompleteForm.vue
index 5934f86..4d54b4f 100644
--- a/client/components/open/forms/OpenCompleteForm.vue
+++ b/client/components/open/forms/OpenCompleteForm.vue
@@ -62,10 +62,8 @@
       mode="out-in"
     >
       <div v-if="!submitted" key="form">
-        <p v-if="form.description && form.description !==''"
-           class="form-description mb-4 text-gray-700 dark:text-gray-300 whitespace-pre-wrap px-2"
-           v-html="form.description"
-        />
+        <div v-if="form.description" v-html="form.description"
+           class="form-description mb-4 text-gray-700 dark:text-gray-300 whitespace-pre-wrap px-2"/>
         <open-form v-if="form"
                    :form="form"
                    :loading="loading"
@@ -86,7 +84,9 @@
           <a href="https://opnform.com?utm_source=form&utm_content=powered_by"
              class="text-gray-400 hover:text-gray-500 dark:text-gray-600 dark:hover:text-gray-500 cursor-pointer hover:underline text-xs"
              target="_blank"
-          >Powered by <span class="font-semibold">OpnForm</span></a>
+          >
+            Powered by <span class="font-semibold">OpnForm</span>
+          </a>
         </p>
       </div>
       <div v-else key="submitted" class="px-2">
@@ -100,7 +100,9 @@
           </a>
         </p>
         <p v-if="!form.no_branding" class="mt-5">
-          <a target="_parent" href="https://opnform.com/?utm_source=form&utm_content=create_form_free" class="text-nt-blue hover:underline">Create your form for free with OpnForm</a>
+          <a target="_parent" href="https://opnform.com/?utm_source=form&utm_content=create_form_free" class="text-nt-blue hover:underline">
+            Create your form for free with OpnForm
+          </a>
         </p>
       </div>
     </transition>
diff --git a/client/nuxt.config.ts b/client/nuxt.config.ts
index ed137a1..1f96e39 100644
--- a/client/nuxt.config.ts
+++ b/client/nuxt.config.ts
@@ -51,9 +51,12 @@ export default defineNuxtConfig({
     ],
     nitro: {
         awsAmplify: {
+            imageOptimization: {
+                cacheControl: "public, max-age=600, immutable" // 10 minutes
+            },
             imageSettings: {
+                formats: ['image/webp'],
                 dangerouslyAllowSVG: true,
-                minumumCacheTTL: 120
             }
         }
     },
diff --git a/client/pages/templates/[slug].vue b/client/pages/templates/[slug].vue
index 00c9bf2..8936240 100644
--- a/client/pages/templates/[slug].vue
+++ b/client/pages/templates/[slug].vue
@@ -1,28 +1,28 @@
 <template>
   <div class="flex flex-col min-h-full">
     <breadcrumb :path="breadcrumbs" v-if="template">
-      <template #left>
-        <div v-if="canEditTemplate" class="ml-5">
-          <v-button color="gray" size="small" @click.prevent="showFormTemplateModal=true">
-            Edit Template
+        <template #left>
+          <div v-if="canEditTemplate" class="ml-5">
+            <v-button color="gray" size="small" @click.prevent="showFormTemplateModal=true">
+              Edit Template
+            </v-button>
+            <form-template-modal v-if="form" :form="form" :template="template" :show="showFormTemplateModal"
+                                 @close="showFormTemplateModal=false"
+            />
+          </div>
+        </template>
+        <template #right>
+          <v-button v-if="canEditTemplate" v-track.copy_template_button_clicked size="small" color="white" class="mr-5"
+                    @click.prevent="copyTemplateUrl"
+          >
+            Copy Template URL
           </v-button>
-          <form-template-modal v-if="form" :form="form" :template="template" :show="showFormTemplateModal"
-                              @close="showFormTemplateModal=false"
-          />
-        </div>
-      </template>
-      <template #right>
-        <v-button v-if="canEditTemplate" v-track.copy_template_button_clicked size="small" color="white" class="mr-5"
-                  @click.prevent="copyTemplateUrl"
-        >
-          Copy Template URL
-        </v-button>
-        <v-button v-track.use_template_button_clicked size="small" class="mr-5"
-                  :to="createFormWithTemplateUrl"
-        >
-          Use this template
-        </v-button>
-      </template>
+          <v-button v-track.use_template_button_clicked size="small" class="mr-5"
+                    :to="createFormWithTemplateUrl"
+          >
+            Use this template
+          </v-button>
+        </template>
     </breadcrumb>
 
     <p v-if="template === null || !template" class="text-center my-4">
@@ -206,7 +206,7 @@ defineRouteRules({
   swr: 3600
 })
 
-const { copy } = useClipboard()
+const {copy} = useClipboard()
 const authStore = useAuthStore()
 const templatesStore = useTemplatesStore()
 
@@ -266,16 +266,16 @@ useOpnSeoMeta({
     if (!template || !template.value) return 'Form Template'
     return template.value.name
   },
-  description () {
+  description() {
     if (!template || !template.value) return null
     // take the first 140 characters of the description
     return template.value.short_description?.substring(0, 140) + '... | Customize any template and create your own form in minutes.'
   },
-  ogImage () {
+  ogImage() {
     if (!template || !template.value) return null
     return template.value.image_url
   },
-  robots () {
+  robots() {
     if (!template || !template.value) return null
     return template.value.publicly_listed ? null : 'noindex'
   }