image optimization caching + fix hydratation issue form template page

This commit is contained in:
Julien Nahum 2024-01-11 09:48:57 +01:00
parent 668b0217d2
commit 630ae1df1d
3 changed files with 37 additions and 32 deletions

View File

@ -62,10 +62,8 @@
mode="out-in" mode="out-in"
> >
<div v-if="!submitted" key="form"> <div v-if="!submitted" key="form">
<p v-if="form.description && 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" class="form-description mb-4 text-gray-700 dark:text-gray-300 whitespace-pre-wrap px-2"/>
v-html="form.description"
/>
<open-form v-if="form" <open-form v-if="form"
:form="form" :form="form"
:loading="loading" :loading="loading"
@ -86,7 +84,9 @@
<a href="https://opnform.com?utm_source=form&utm_content=powered_by" <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" 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" target="_blank"
>Powered by <span class="font-semibold">OpnForm</span></a> >
Powered by <span class="font-semibold">OpnForm</span>
</a>
</p> </p>
</div> </div>
<div v-else key="submitted" class="px-2"> <div v-else key="submitted" class="px-2">
@ -100,7 +100,9 @@
</a> </a>
</p> </p>
<p v-if="!form.no_branding" class="mt-5"> <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> </p>
</div> </div>
</transition> </transition>

View File

@ -51,9 +51,12 @@ export default defineNuxtConfig({
], ],
nitro: { nitro: {
awsAmplify: { awsAmplify: {
imageOptimization: {
cacheControl: "public, max-age=600, immutable" // 10 minutes
},
imageSettings: { imageSettings: {
formats: ['image/webp'],
dangerouslyAllowSVG: true, dangerouslyAllowSVG: true,
minumumCacheTTL: 120
} }
} }
}, },

View File

@ -1,28 +1,28 @@
<template> <template>
<div class="flex flex-col min-h-full"> <div class="flex flex-col min-h-full">
<breadcrumb :path="breadcrumbs" v-if="template"> <breadcrumb :path="breadcrumbs" v-if="template">
<template #left> <template #left>
<div v-if="canEditTemplate" class="ml-5"> <div v-if="canEditTemplate" class="ml-5">
<v-button color="gray" size="small" @click.prevent="showFormTemplateModal=true"> <v-button color="gray" size="small" @click.prevent="showFormTemplateModal=true">
Edit Template 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> </v-button>
<form-template-modal v-if="form" :form="form" :template="template" :show="showFormTemplateModal" <v-button v-track.use_template_button_clicked size="small" class="mr-5"
@close="showFormTemplateModal=false" :to="createFormWithTemplateUrl"
/> >
</div> Use this template
</template> </v-button>
<template #right> </template>
<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>
</breadcrumb> </breadcrumb>
<p v-if="template === null || !template" class="text-center my-4"> <p v-if="template === null || !template" class="text-center my-4">
@ -206,7 +206,7 @@ defineRouteRules({
swr: 3600 swr: 3600
}) })
const { copy } = useClipboard() const {copy} = useClipboard()
const authStore = useAuthStore() const authStore = useAuthStore()
const templatesStore = useTemplatesStore() const templatesStore = useTemplatesStore()
@ -266,16 +266,16 @@ useOpnSeoMeta({
if (!template || !template.value) return 'Form Template' if (!template || !template.value) return 'Form Template'
return template.value.name return template.value.name
}, },
description () { description() {
if (!template || !template.value) return null if (!template || !template.value) return null
// take the first 140 characters of the description // 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.' 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 if (!template || !template.value) return null
return template.value.image_url return template.value.image_url
}, },
robots () { robots() {
if (!template || !template.value) return null if (!template || !template.value) return null
return template.value.publicly_listed ? null : 'noindex' return template.value.publicly_listed ? null : 'noindex'
} }