implement useOpenGraphImage composable on blog page

voorhoede · Mar 1, 2023 · 3a611cf · 3a611cf
1 parent 6aa8552
commit 3a611cf
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/pages/[language]/blog/[slug]/index.query.graphql b/src/pages/[language]/blog/[slug]/index.query.graphql
@@ -1,5 +1,5 @@
 query BlogSlug($locale: SiteLocale, $slug: String) {
-  page: blogPost(locale: $locale, filter: {slug: {eq: $slug}}) {
+  page: blogPost(locale: $locale, filter: { slug: { eq: $slug } }) {
     ...page
   }
 }
@@ -165,4 +165,16 @@ fragment page on BlogPostRecord {
       }
     }
   }
+  openGraphImage {
+    title
+    image {
+      url
+    }
+    authors {
+      name
+      image {
+        url
+      }
+    }
+  }
 }
diff --git a/src/pages/[language]/blog/[slug]/index.vue b/src/pages/[language]/blog/[slug]/index.vue
@@ -186,6 +186,8 @@
 
   useSeoHead(data.value.page);
 
+  useOpenGraphImage(data.value.page.openGraphImage)
+
   const prismify = ({ body, language }) => (
     prismjs.languages[language]
       ? prismjs.highlight(body, prismjs.languages[language], language)