fix(open-graph): use description for facebook (#239)

nuxt · May 17, 2023 · 31c92f5 · 31c92f5
1 parent bb02a52
commit 31c92f5
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 22 deletions.
diff --git a/packages/devtools/client/components/social/SocialPreviewGroup.vue b/packages/devtools/client/components/social/SocialPreviewGroup.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { NormalizedHeadTag, SocialPreviewResolved } from '../../../src/types'
+import type { NormalizedHeadTag } from '../../../src/types'
 
 const props = defineProps<{
   tags: NormalizedHeadTag[]
@@ -13,16 +13,13 @@ const types = [
 
 const selected = ref(types[0])
 
-const card = computed((): SocialPreviewResolved => {
-  return {
-    url: window.location.host,
-    title: props.tags.find(tag => tag.tag === 'title')?.value,
-    image: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'og:image')?.value,
-    imageAlt: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'og:image:alt')?.value,
-    description: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'og:description')?.value,
-    favicon: props.tags.find(tag => tag.tag === 'link' && tag.name === 'icon')?.value,
-  }
-})
+const card = computed(() => getSocialPreviewCard(props.tags, {
+  title: [{ tag: 'title' }],
+  image: [{ tag: 'meta', name: 'og:image' }],
+  imageAlt: [{ tag: 'meta', name: 'og:image:alt' }],
+  description: [{ tag: 'meta', name: 'og:description' }, { tag: 'meta', name: 'description' }],
+  favicon: [{ tag: 'link', name: 'icon' }],
+}))
 </script>
 
 <template>

diff --git a/packages/devtools/client/components/social/SocialTwitter.vue b/packages/devtools/client/components/social/SocialTwitter.vue
@@ -1,20 +1,17 @@
 <script setup lang="ts">
-import type { NormalizedHeadTag, SocialPreviewResolved } from '~/../src/types'
+import type { NormalizedHeadTag } from '~/../src/types'
 
 const props = defineProps<{
   tags: NormalizedHeadTag[]
 }>()
 
-const card = computed((): SocialPreviewResolved => {
-  return {
-    url: window.location.host,
-    title: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'twitter:title')?.value || props.tags.find(tag => tag.tag === 'title')?.value,
-    image: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'twitter:image')?.value,
-    imageAlt: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'twitter:image:alt')?.value,
-    description: props.tags.find(tag => tag.tag === 'meta' && tag.name === 'twitter:description')?.value || props.tags.find(tag => tag.tag === 'meta' && tag.name === 'description')?.value,
-    favicon: props.tags.find(tag => tag.tag === 'link' && tag.name === 'icon')?.value,
-  }
-})
+const card = computed(() => getSocialPreviewCard(props.tags, {
+  title: [{ tag: 'title' }],
+  image: [{ tag: 'meta', name: 'twitter:image' }, { tag: 'meta', name: 'og:image' }],
+  imageAlt: [{ tag: 'meta', name: 'twitter:image:alt' }],
+  description: [{ tag: 'meta', name: 'twitter:description' }, { tag: 'meta', name: 'description' }],
+  favicon: [{ tag: 'link', name: 'icon' }],
+}))
 
 const type = computed(() => {
   if (!card.value.image)

diff --git a/packages/devtools/client/composables/utils.ts b/packages/devtools/client/composables/utils.ts
@@ -1,6 +1,7 @@
 import { relative } from 'pathe'
 import type { Ref } from 'vue'
 import type { AsyncDataOptions } from '#app'
+import type { NormalizedHeadTag, SocialPreviewCard, SocialPreviewResolved } from '~/../src/types'
 
 export function isNodeModulePath(path: string) {
   return !!path.match(/[/\\]node_modules[/\\]/) || isPackageName(path)
@@ -97,3 +98,25 @@ const requestMethodClass: Record<string, string> = {
 export function getRequestMethodClass(method: string) {
   return requestMethodClass[method.toLowerCase()] || requestMethodClass.default
 }
+
+export function getSocialPreviewCard(
+  rawTags: NormalizedHeadTag[],
+  tags: SocialPreviewCard,
+): SocialPreviewResolved {
+  const resolvedTags: { [key: string]: string | undefined } = {}
+
+  for (const [key, value] of Object.entries(tags)) {
+    for (const tag of value) {
+      const tagValue = rawTags.find(item => item.tag === tag.tag && (tag.name ? item.name === tag.name : true))?.value
+      if (tagValue) {
+        resolvedTags[key] = tagValue
+        break
+      }
+    }
+  }
+
+  return {
+    url: window.location.host,
+    ...resolvedTags,
+  }
+}
diff --git a/packages/devtools/src/types/ui-state.ts b/packages/devtools/src/types/ui-state.ts
@@ -18,6 +18,20 @@ export interface SocialPreviewResolved {
   imageAlt?: string
 }
 
+export interface SocialPreviewCard {
+  url?: SocialPreviewCardItem[]
+  title?: SocialPreviewCardItem[]
+  description?: SocialPreviewCardItem[]
+  favicon?: SocialPreviewCardItem[]
+  image?: SocialPreviewCardItem[]
+  imageAlt?: SocialPreviewCardItem[]
+}
+
+interface SocialPreviewCardItem {
+  tag: string
+  name?: string
+}
+
 export interface NormalizedHeadTag {
   tag: string
   name: string