SEO meta nuxt migration (#274)

* SEO meta nuxt migration

* Polish seo metas, add defaults for OG and twitter

---------

Co-authored-by: Julien Nahum <julien@nahum.net>

client/pages/templates/[slug].vue

@@ -265,24 +265,24 @@ const copyTemplateUrl = () => {
   useAlert().success('Copied!')
 }
 
-// metaTitle() {
-//   return this.template ? this.template.name : 'Form Template'
-// },
-// metaDescription() {
-//   if (!this.template) return null
-//   // take the first 140 characters of the description
-//   return this.template.short_description?.substring(0, 140) + '... | Customize any template and create your own form in minutes.'
-// },
-// metaImage() {
-//   if (!this.template) return null
-//   return this.template.image_url
-// },
-// metaTags() {
-//   if (!this.template) {
-//     return [];
-//   }
-//   return this.template.publicly_listed ? [] : [{name: 'robots', content: 'noindex'}]
-// },
+useOpnSeoMeta({
+  title: () => {
+    return template ? template.value.name : 'Form Template'
+  },
+  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 () {
+    if (!template || !template.value) return null
+    return template.value.image_url
+  },
+  robots () {
+    if (!template || !template.value) return null
+    return template.value.publicly_listed ? null : 'noindex'
+  }
+})
 </script>
 
 <style lang='scss'>

client/pages/templates/index.vue

@@ -26,10 +26,10 @@ defineRouteRules({
   prerender: true
 })
 
-// props: {
-//   metaTitle: { type: String, default: 'Templates' },
-//   metaDescription: { type: String, default: 'Our collection of beautiful templates to create your own forms!' }
-// },
+useOpnSeoMeta({
+  title: 'Form Templates',
+  description: 'Our collection of beautiful templates to create your own forms!'
+})
 
 const templatesStore = useTemplatesStore()
 loadAllTemplates(templatesStore)

client/pages/templates/industries/[slug].vue

@@ -3,7 +3,7 @@
     <breadcrumb :path="breadcrumbs"/>
 
     <p v-if="industry === null || !industry" class="text-center my-4">
-      We could not find this type.
+      We could not find this industry.
     </p>
     <template v-else>
       <section class="py-12 sm:py-16 bg-gray-50 border-b border-gray-200">
@@ -23,7 +23,7 @@
       </section>
 
 
-      <templates-list :templates="templates" :filter-industries="false" :show-types="false">
+      <templates-list :templates="templates" :filter-industries="false" :show-industrys="false">
         <template #before-lists>
           <section class="py-12 bg-white border-t border-gray-200 sm:py-16">
             <div class="px-4 mx-auto sm:px-6 lg:px-8 max-w-7xl">
@@ -70,6 +70,29 @@ const breadcrumbs = computed(() => {
 
 const industry = computed(() => templatesStore.industries.get(route.params.slug))
 
+useOpnSeoMeta({
+  title: () => {
+    if (!industry.value) return 'Form Templates'
+    if (industry.value.meta_title.length > 60) {
+      return industry.value.meta_title
+    }
+    return industry.value.meta_title
+  },
+  description: () => industry.value ? industry.value.meta_description: 'Our collection of beautiful templates to create your own forms!'
+})
+useHead({
+  titleTemplate: (titleChunk) => {
+    // Disable title template for longer titles
+    if (industry.value
+      && industry.value.meta_title.length < 60
+      && !industry.value.meta_title.toLowerCase().includes('opnform')
+    ) {
+      return titleChunk ? `${titleChunk} - OpnForm` : 'Form Templates - OpnForm'
+    }
+    return titleChunk ? titleChunk : 'Form Templates - OpnForm'
+  }
+})
+
 </script>
 
 <style lang='scss'>

client/pages/templates/my-templates.vue

@@ -24,9 +24,11 @@ export default {
   components: { TemplatesList },
   middleware: 'auth',
 
-  props: {
-    metaTitle: { type: String, default: 'My Templates' },
-    metaDescription: { type: String, default: 'Our collection of beautiful templates to create your own forms!' }
+  setup () {
+    useOpnSeoMeta({
+      title: 'My Templates',
+      description: 'Our collection of beautiful templates to create your own forms!'
+    })
   },
 
   data () {

client/pages/templates/types/[slug].vue

@@ -71,6 +71,29 @@ const breadcrumbs = computed(() => {
 
 const type = computed(() => templatesStore.types.get(route.params.slug))
 
+useOpnSeoMeta({
+  title: () => {
+    if (!type.value) return 'Form Templates'
+    if (type.value.meta_title.length > 60) {
+      return type.value.meta_title
+    }
+    return type.value.meta_title
+  },
+  description: () => type.value ? type.value.meta_description: 'Our collection of beautiful templates to create your own forms!'
+})
+useHead({
+  titleTemplate: (titleChunk) => {
+    // Disable title template for longer titles
+    if (type.value
+      && type.value.meta_title.length < 60
+      && !type.value.meta_title.toLowerCase().includes('opnform')
+    ) {
+      return titleChunk ? `${titleChunk} - OpnForm` : 'Form Templates - OpnForm'
+    }
+    return titleChunk ? titleChunk : 'Form Templates - OpnForm'
+  }
+})
+
 </script>
 
 <style lang='scss'>