feat: custom page favicon upload (#380)

* feat: custom  page  favicon  upload

* fix helper text

* fix ios icon

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
This commit is contained in:
Favour Olayinka 2024-04-22 15:46:19 +01:00 committed by GitHub
parent e70d0955d0
commit 7cad0a0c3d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 51 additions and 2 deletions

View File

@ -79,6 +79,23 @@ export default {
titleTemplate: (titleChunk) => {
return titleChunk ? `${titleChunk} - OpnForm` : "OpnForm"
},
meta: [
{
name: 'apple-mobile-web-app-capable',
content: 'yes'
},
{
name: 'apple-mobile-web-app-status-bar-style',
content: 'black-translucent'
},
],
link: [
{
rel: 'apple-touch-icon',
type: 'image/png',
href: '/favicon.ico'
}
]
})
const appStore = useAppStore()

View File

@ -55,6 +55,13 @@
label="Page Thumbnail Image"
help="Also know as og:image - 1200 X 630"
/>
<image-input
v-model="form.seo_meta.page_favicon"
name="page_favicon"
class="mt-4"
label="Page Favicon Image"
help="Upload favicon image to be displayed on the form page"
/>
</editor-options-panel>
</template>
@ -104,7 +111,7 @@ export default {
},
watch: {},
mounted() {
["page_title", "page_description", "page_thumbnail"].forEach((keyname) => {
["page_title", "page_description", "page_thumbnail", "page_favicon"].forEach((keyname) => {
if (this.form.seo_meta[keyname] === undefined) {
this.form.seo_meta[keyname] = null
}

View File

@ -207,6 +207,31 @@ useHead({
}
return titleChunk ? `${titleChunk} - OpnForm` : 'OpnForm'
},
link: pageMeta.value.page_favicon ? [
{
rel: 'icon', type: 'image/x-icon',
href: pageMeta.value.page_favicon
},
{
rel: 'apple-touch-icon',
type: 'image/png',
href: pageMeta.value.page_favicon
},
{
rel: 'shortcut icon',
href: pageMeta.value.page_favicon
}
] : {},
meta: pageMeta.value.page_favicon ? [
{
name: 'apple-mobile-web-app-capable',
content: 'yes'
},
{
name: 'apple-mobile-web-app-status-bar-style',
content: 'black-translucent'
},
] : {},
script: [{ src: '/widgets/iframeResizer.contentWindow.min.js' } ]
})
</script>