feat: schemaOrgMetatags support

Author: dulnan

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "vuepal",
-  "version": "3.0.0-alpha.3",
+  "version": "3.0.0-alpha.4",
   "description": "Nuxt+Vue Drupal Integration",
   "license": "MIT",
   "homepage": "https://github.com/liip/vuepal",

package.json

@@ -43,17 +43,22 @@ export default defineVuepalFeature<{
 
     helper.addGraphqlFile('fragment.metatag.graphql')
 
-    // Conditionally add the breadcrumb on the route fragment.
-    const breadcrumbSpread = helper.hasFeatureEnabled('breadcrumb')
-      ? 'breadcrumb { ...breadcrumb }'
-      : ''
-
-    // Conditionally add the languageSwitchLinks on the route fragment.
-    const languageSwitchLinksSpread = helper.hasFeatureEnabled(
-      'languageSwitchLinks',
-    )
-      ? 'languageSwitchLinks { ...languageSwitchLink }'
-      : ''
+    const routeSpreadParts: string[] = ['metatags { ...metatag }']
+
+    if (helper.graphql.schemaHasType('SchemaMetatag')) {
+      helper.addGraphqlFile('fragment.schemaMetatag.graphql')
+      routeSpreadParts.push('schemaOrgMetatags { ...schemaMetatag }')
+    }
+
+    if (helper.hasFeatureEnabled('breadcrumb')) {
+      routeSpreadParts.push('breadcrumb { ...breadcrumb }')
+    }
+
+    if (helper.hasFeatureEnabled('languageSwitchLinks')) {
+      routeSpreadParts.push('languageSwitchLinks { ...languageSwitchLink }')
+    }
+
+    const routeSpreads = routeSpreadParts.join('\n      ')
 
     helper.graphql.addDocument(
       'fragment.drupalRoute.graphql',
@@ -64,32 +69,19 @@ fragment useDrupalRoute on Query {
     path
 
     ... on InternalUrl {
-      ${breadcrumbSpread}
-      ${languageSwitchLinksSpread}
-
-      metatags {
-        ...metatag
-      }
-
       routeName
+      ${routeSpreads}
     }
 
     ... on EntityUrl {
-      ${breadcrumbSpread}
-      ${languageSwitchLinksSpread}
-
-      metatags {
-        ...metatag
-      }
-
+      routeName
       drupalRouteEntity: entity {
         uuid
         entityBundle
         entityTypeId
         id
       }
-
-      routeName
+      ${routeSpreads}
     }
 
     ... on RedirectUrl {

src/build/features/drupalRoute/index.ts

@@ -1,32 +1,21 @@
-import type { Link, Meta } from '@unhead/vue'
-
-type GraphqlDrupalMetatagAttribute = {
-  key: string
-  value: string
-}
-
-type GraphqlDrupalMetatag = {
-  id?: string
-  tag?: string
-  attributes: GraphqlDrupalMetatagAttribute[]
-}
+import type {
+  MetatagFragment,
+  UseDrupalRouteFragment,
+} from '#graphql-operations'
+import type { Link, Meta, Script } from '@unhead/vue'
+import type { DrupalRouteMetatags } from '../../types/metatags'
 
 type GraphqlDrupalMetatags = {
-  metatags: GraphqlDrupalMetatag[]
-  schema: string
-}
-
-type DrupalRouteMetatags = {
-  title: string
-  link: Link[]
-  meta: Link[]
-  schema: string
+  metatags?: MetatagFragment[]
+  schemaOrgMetatags?: {
+    json?: string
+  }
 }
 
 /**
  * Get the page title from the Drupal metatags.
  */
-function getTitle(tag: GraphqlDrupalMetatag): string | undefined {
+function getTitle(tag: MetatagFragment): string | undefined {
   if (tag.id !== 'title') {
     return
   }
@@ -49,52 +38,57 @@ function getTitle(tag: GraphqlDrupalMetatag): string | undefined {
  * single object:
  * { one: 'foo', two: 'bar' }
  */
-function getTagObject(
-  attributes: GraphqlDrupalMetatagAttribute[],
-): Link | Meta {
+function getTagObject(attributes: MetatagFragment['attributes']): Link | Meta {
   return attributes.reduce<Record<string, string>>((acc, v) => {
     acc[v.key] = v.value
     return acc
   }, {})
 }
 
 export function buildDrupalMetatags(
-  data:
-    | GraphqlDrupalMetatags
-    | GraphqlDrupalMetatags['metatags']
-    | undefined
-    | null,
+  data: GraphqlDrupalMetatags | UseDrupalRouteFragment | undefined | null,
 ): DrupalRouteMetatags {
   try {
-    const link: Link[] = []
-    const meta: Meta[] = []
-    let title: string = ''
-    const schema = data && 'schema' in data ? data.schema : ''
+    if (data && 'route' in data && data.route && 'metatags' in data.route) {
+      const route = data.route
+      const schemaOrg = route.schemaOrgMetatags?.json || ''
+      const tags = route.metatags
+
+      const link: Link[] = []
+      const meta: Meta[] = []
+      const script: Script[] = []
 
-    const tags = data && 'metatags' in data ? data.metatags : data
+      if (schemaOrg) {
+        script.push({
+          type: 'application/ld+json',
+          innerHTML: schemaOrg,
+        })
+      }
 
-    if (tags && Array.isArray(tags)) {
-      for (let i = 0; i < tags.length; i++) {
-        const tag = tags[i]!
-        const tagTitle = getTitle(tag)
-        if (tagTitle) {
-          title = tagTitle
-        } else {
-          const item = getTagObject(tag.attributes)
-          if (tag.tag === 'link') {
-            link.push(item)
-          } else if (tag.tag === 'meta') {
-            meta.push(item)
+      let title: string = ''
+      if (tags && Array.isArray(tags)) {
+        for (let i = 0; i < tags.length; i++) {
+          const tag = tags[i]!
+          const tagTitle = getTitle(tag)
+          if (tagTitle) {
+            title = tagTitle
+          } else {
+            const item = getTagObject(tag.attributes)
+            if (tag.tag === 'link') {
+              link.push(item)
+            } else if (tag.tag === 'meta') {
+              meta.push(item)
+            }
           }
         }
       }
-    }
 
-    return { link, meta, title, schema }
+      return { link, meta, title, script, schemaOrg }
+    }
   } catch (e) {
     console.log('Error in Vuepal:')
     console.log(e)
   }
 
-  return { link: [], meta: [], title: '', schema: '' }
+  return { link: [], meta: [], script: [], title: '', schemaOrg: '' }
 }

src/runtime/composables/buildDrupalMetatags/index.ts

@@ -1,4 +1,3 @@
-import type { Link } from '@unhead/vue'
 import type { HookResult } from '@nuxt/schema'
 import type { RouteLocationRaw } from 'vue-router'
 import type { UseDrupalRouteFragment } from '#graphql-operations'
@@ -15,12 +14,7 @@ import {
   type Ref,
 } from '#imports'
 import type { DrupalRoute, UseDrupalRoute } from './../../helpers/drupalRoute'
-
-type DrupalRouteMetatags = {
-  title: string
-  link: Link[]
-  meta: Link[]
-}
+import type { DrupalRouteMetatags } from '../../types/metatags'
 
 type Options = {
   /**
@@ -91,13 +85,9 @@ export async function useDrupalRoute<T extends object = object>(
     }
   })
 
-  const metatags = computed<DrupalRouteMetatags>(() => {
-    const route = query.value?.route
-    if (route && 'metatags' in route) {
-      return buildDrupalMetatags(route.metatags)
-    }
-    return { link: [], meta: [], title: '', schema: '' }
-  })
+  const metatags = computed<DrupalRouteMetatags>(() =>
+    buildDrupalMetatags(query.value),
+  )
 
   useHead(metatags)
 

src/runtime/composables/useDrupalRoute/index.ts

@@ -0,0 +1,3 @@
+fragment schemaMetatag on SchemaMetatag {
+  json
+}

src/runtime/graphql/fragment.schemaMetatag.graphql

@@ -0,0 +1,9 @@
+import type { Link, Meta, Script } from '@unhead/vue'
+
+export type DrupalRouteMetatags = {
+  title: string
+  link: Link[]
+  meta: Meta[]
+  script: Script[]
+  schemaOrg: string
+}