diff --git a/resources/js/base.js b/resources/js/base.js index 19f5aec..42a09e6 100644 --- a/resources/js/base.js +++ b/resources/js/base.js @@ -4,36 +4,13 @@ import debounce from 'debounce' export default { + computed: { $crisp () { return window.$crisp } }, - - metaInfo () { - const info = { - meta: this.metaTags ?? [] - } - if (this.metaTitle) { - info.title = this.metaTitle - info.meta = [ - ...info.meta, - { vmid: 'og:title', property: 'og:title', content: this.metaTitle }, - { vmid: 'twitter:title', property: 'twitter:title', content: this.metaTitle } - ] - } - if (this.metaDescription) { - info.meta = [ - ...info.meta, - { vmid: 'description', name: 'description', content: this.metaDescription }, - { vmid: 'og:description', property: 'og:description', content: this.metaDescription }, - { vmid: 'twitter:description', property: 'twitter:description', content: this.metaDescription } - ] - } - - return info - }, - + methods: { /** * Creates a debounced function that delays invoking a callback. diff --git a/resources/js/components/App.vue b/resources/js/components/App.vue index 6f063c3..bbed52f 100644 --- a/resources/js/components/App.vue +++ b/resources/js/components/App.vue @@ -45,6 +45,7 @@ import Amplitude from './service/Amplitude' import Crisp from './service/Crisp' import StopImpersonation from './pages/StopImpersonation' import Notifications from "./common/Notifications" +import SeoMeta from '../mixins/seo-meta' // Load layout components dynamically. const requireContext = require.context('~/layouts', false, /.*\.vue$/) @@ -70,7 +71,11 @@ export default { Loading }, + mixins: [SeoMeta], + data: () => ({ + metaTitle: 'OpnForm', + metaDescription: 'Create beautiful forms for free. Unlimited fields, unlimited submissions. It\'s free and it takes less than 1 minute to create your first form.', layout: null, defaultLayout: 'default', announcement: false, @@ -82,27 +87,7 @@ export default { confirmationCancel: null } }), - - metaInfo () { - const { appName } = window.config - const description = "Create beautiful forms for free. Unlimited fields, unlimited submissions. It's free and it takes less than 1 minute to create your first form." - - return { - title: appName, - titleTemplate: `%s · ${appName}`, - meta: [ - { vmid: 'description', name: 'description', content: description }, - { vmid: 'og:title', property: 'og:title', content: appName }, - { vmid: 'og:description', property: 'og:description', content: description }, - { vmid: 'og:image', property: 'og:image', content: this.asset('img/social-preview.jpg') }, - { vmid: 'twitter:title', property: 'twitter:title', content: appName }, - { vmid: 'twitter:description', property: 'twitter:description', content: description }, - { vmid: 'twitter:image', property: 'twitter:image', content: this.asset('img/social-preview.jpg') }, - { vmid: 'twitter:card', property: 'twitter:card', content: 'summary_large_image' } - ] - } - }, - + mounted () { this.$loading = this.$refs.loading }, diff --git a/resources/js/mixins/seo-meta.js b/resources/js/mixins/seo-meta.js new file mode 100644 index 0000000..6020596 --- /dev/null +++ b/resources/js/mixins/seo-meta.js @@ -0,0 +1,22 @@ +export default { + metaInfo () { + const title = this.metaTitle ?? 'OpnForm' + const description = this.metaDescription ?? "Create beautiful forms for free. Unlimited fields, unlimited submissions. It's free and it takes less than 1 minute to create your first form." + const image = this.metaImage ?? this.asset('img/social-preview.jpg') + + return { + title: title, + titleTemplate: '%s · OpnForm', + meta: [ + ...(this.metaTags ?? []), + { vmid: 'og:title', property: 'og:title', content: title }, + { vmid: 'twitter:title', property: 'twitter:title', content: title }, + { vmid: 'description', name: 'description', content: description }, + { vmid: 'og:description', property: 'og:description', content: description }, + { vmid: 'twitter:description', property: 'twitter:description', content: description }, + { vmid: 'twitter:image', property: 'twitter:image', content: image }, + { vmid: 'og:image', property: 'og:image', content: image } + ] + } + } +} diff --git a/resources/js/pages/auth/login.vue b/resources/js/pages/auth/login.vue index 8bae1fe..94ac204 100644 --- a/resources/js/pages/auth/login.vue +++ b/resources/js/pages/auth/login.vue @@ -59,6 +59,7 @@ import OpenFormFooter from '../../components/pages/OpenFormFooter' import Testimonials from '../../components/pages/welcome/Testimonials' import LoginForm from './components/LoginForm' +import SeoMeta from '../../mixins/seo-meta' export default { components: { @@ -69,12 +70,10 @@ export default { middleware: 'guest', - metaInfo () { - return { title: this.$t('login') } - }, + mixins: [SeoMeta], data: () => ({ - + metaTitle: 'Login', }), methods: { diff --git a/resources/js/pages/auth/password/email.vue b/resources/js/pages/auth/password/email.vue index d1e743b..02a327f 100644 --- a/resources/js/pages/auth/password/email.vue +++ b/resources/js/pages/auth/password/email.vue @@ -25,17 +25,18 @@