Fix twitter metadata

gridsome.config.js

@@ -6,7 +6,7 @@
 
 module.exports = {
     siteName: 'ThreeFold',
-
+    siteUrl: 'https://threefold.io',
     pathPrefix: "threefold",
     plugins: [
 

src/templates/BlogPost.vue

@@ -207,6 +207,9 @@
         path
       }
     }
+    metadata {
+      siteUrl
+    }
   }
 </page-query>
 
@@ -242,6 +245,19 @@ export default {
       return image;
     },
   },
+  computed: {
+    getCoverImage() {
+      let coverImage = "";
+      const cover = this.$page.blog.image;
+      if (cover != null) {
+        coverImage = `${this.getBaseUrl}${this.$page.blog.image.src}`;
+      }
+      return coverImage;
+    },
+    getBaseUrl() {
+      return this.$page.metadata.siteUrl;
+    },
+  },
   metaInfo() {
     return {
       title: "",
@@ -265,7 +281,7 @@ export default {
         {
           key: "og:image",
           property: "og:image",
-          content: this.img(this.$page.blog.image),
+          content: this.getCoverImage,
         },
         {
           name: "twitter:description",
@@ -275,7 +291,7 @@ export default {
         {
           name: "twitter:image",
           property: "twitter:image",
-          content: this.img(this.$page.blog.image),
+          content: this.getCoverImage,
         },
         {
           name: "twitter:title",
@@ -288,7 +304,6 @@ export default {
           content: "summary_large_image",
         },
       ],
-      script: [{ src: "https://platform.twitter.com/widgets.js", async: true }],
     };
   },
 };

src/templates/NewsPost.vue

@@ -203,8 +203,9 @@
       }
     }
    
-
-    
+    metadata {
+      siteUrl
+    } 
   }
 </page-query>
 
@@ -246,7 +247,7 @@ export default {
         {
           key: "og:image",
           property: "og:image",
-          content: this.$page.news.image.src,
+          content: this.getCoverImage,
         },
         {
           key: "twitter:description",
@@ -256,7 +257,7 @@ export default {
         {
           key: "twitter:image",
           property: "twitter:image",
-          content: this.$page.news.image.src,
+          content: this.getCoverImage,
         },
         {
           key: "twitter:title",
@@ -280,5 +281,18 @@ export default {
       this.showAlert = val;
     },
   },
+  computed: {
+    getCoverImage() {
+      let coverImage = "";
+      const cover = this.$page.news.image;
+      if (cover != null) {
+        coverImage = `${this.getBaseUrl}${this.$page.news.image.src}`;
+      }
+      return coverImage;
+    },
+    getBaseUrl() {
+      return this.$page.metadata.siteUrl;
+    },
+  },
 };
 </script>