image optimization caching + fix hydratation issue form template page
This commit is contained in:
parent
668b0217d2
commit
630ae1df1d
|
@ -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>
|
||||||
|
|
|
@ -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
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
|
@ -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'
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue