Add metadata

content/page/home/home.md

@@ -1,5 +1,8 @@
 ---
 id: home
+metaTitle: ThreeFold | Home
+metaDesc: Welcome to the world’s largest peer-to-peer Internet, formed by people who want to make a difference, by people who care, by people just like you.
+metaImg: ./home_header.png
 header_slogan: YOU
 header_title: ARE THE NEW INTERNET
 header_image: ./home_header.png

content/page/token/token.md

@@ -1,5 +1,8 @@
 ---
 id: token
+metaTitle: ThreeFold | Token (TFT)
+metaDesc: The ThreeFold Token is the currency of the fastest growing P2P internet network on the planet.
+metaImg: ./token_header.png
 header_slogan: WE ARE GROWING NOW
 header_title: YOU GROW WHEN THE THREEFOLD GRID GROWS
 header_image: ./token_header.png

content/page/universe/universe.md

@@ -1,7 +1,8 @@
 ---
 id: universe
+metaTitle: ThreeFold | Universe
+metaDesc: Be part of a better tomorrow by expanding the peer-to-peer Internet and set yourself free from the centralized applications and services that exploit your data today.
+metaImg: ./universe_header.png
 productsMain: product_page
 productData: [farming, cloud, marketplace, twin, tech, aci]
 ---
-
-

content/page/why/why.md

@@ -1,5 +1,8 @@
 ---
 id: why
+metaTitle: ThreeFold | Why
+metaDesc:  Our mission is to accelerate the transition of the data economy to a decentralized P2P model and make it possible for every person to learn, partake and succeed.
+metaImg: ./why-home.jpg
 header_slogan: We need a way of achieving it
 header_title: We do not need a reason to want a better future
 header_image: ./why-home.jpg

src/pages/Blog.vue

@@ -71,6 +71,11 @@ query($page: Int){
     }
   }
 
+  markdownPage(id: "home") {
+        id
+        metaImg
+  }
+
    topics: allBlogTag {
     edges{
       node{
@@ -119,8 +124,51 @@ export default {
     };
   },
 
-  metaInfo: {
+  metaInfo() {
-    title: "Blog",
+    return {
+      title: "",
+      titleTemplate: "ThreeFold | Blog",
+      meta: [
+        {
+          key: "description",
+          name: "description",
+          content:
+            "A collection of posts from the ThreeFold Foundation team about our products, our technology, our ecosystem, our why, and more.",
+        },
+        {
+          key: "og:title",
+          property: "og:title",
+          content: "ThreeFold | Blog",
+        },
+        {
+          key: "og:description",
+          property: "og:description",
+          content:
+            "A collection of posts from the ThreeFold Foundation team about our products, our technology, our ecosystem, our why, and more.",
+        },
+        {
+          key: "og:image",
+          property: "og:image",
+          content: this.getImg,
+        },
+        {
+          key: "twitter:description",
+          name: "twitter:description",
+          content:
+            "A collection of posts from the ThreeFold Foundation team about our products, our technology, our ecosystem, our why, and more.",
+        },
+        {
+          key: "twitter:image",
+          property: "twitter:image",
+          content: this.getImg,
+        },
+        {
+          key: "twitter:title",
+          property: "twitter:title",
+          content: "ThreeFold | Blog",
+        },
+      ],
+    };
   },
   components: {
     PostListItem,
@@ -198,6 +246,13 @@ export default {
         return window.innerHeight - 100;
       }
     },
+    getImg() {
+      let img = "";
+      if (process.isClient) {
+        img = `${window.location.origin}${this.$page.markdownPage.metaImg.src}`;
+      }
+      return img;
+    },
 
     blogs() {
       var res = {};

src/pages/Index.vue

@@ -123,6 +123,9 @@
     markdownPage(id: "home") {
         id
         path
+        metaTitle
+        metaDesc
+        metaImg
         header_slogan
         header_title
         header_image
@@ -292,6 +295,13 @@
 
 </page-query>
 
+<static-query>
+  query {
+    metadata {
+      siteUrl
+    }
+  }
+</static-query>
 <script>
 import Header from "~/components/marketing/sections/cta-sections/Header.vue";
 import SolutionsHeader from "~/components/custom/sections/header/HeaderSection.vue";
@@ -323,9 +333,57 @@ export default {
     InTheNews,
     SignUp,
   },
-  metaInfo: {
+  computed: {
-    title: "",
+    getImg() {
-    titleTemplate: "ThreeFold | Welcome",
+      let img = "";
+      if (process.isClient) {
+        img = `${window.location.origin}${this.$page.markdownPage.metaImg.src}`;
+      }
+      return img;
+    },
+  },
+  metaInfo() {
+    return {
+      title: "",
+      titleTemplate: "ThreeFold | Welcome",
+      meta: [
+        {
+          key: "description",
+          name: "description",
+          content: this.$page.markdownPage.metaDesc,
+        },
+        {
+          key: "og:title",
+          property: "og:title",
+          content: this.$page.markdownPage.metaTitle,
+        },
+        {
+          key: "og:description",
+          property: "og:description",
+          content: this.$page.markdownPage.metaDesc,
+        },
+        {
+          key: "og:image",
+          property: "og:image",
+          content: this.getImg,
+        },
+        {
+          key: "twitter:description",
+          name: "twitter:description",
+          content: this.$page.markdownPage.metaDesc,
+        },
+        {
+          key: "twitter:image",
+          property: "twitter:image",
+          content: this.getImg,
+        },
+        {
+          key: "twitter:title",
+          property: "twitter:title",
+          content: this.$page.markdownPage.metaTitle,
+        },
+      ],
+    };
   },
 };
 </script>

src/pages/News.vue

@@ -65,6 +65,10 @@ query($page: Int){
       }
     }
   }
+  markdownPage(id: "home") {
+        id
+        metaImg
+  }
 
   topics:  allNewsTag(filter: { title: {in: ["blockchain", "experience", "technology", "farming", "community", "infrastructure", "impact"]}}) {
     edges{
@@ -115,8 +119,48 @@ export default {
     };
   },
 
-  metaInfo: {
+  metaInfo() {
-    title: "Newsroom",
+    return {
+      title: "",
+      titleTemplate: "ThreeFold | News",
+      meta: [
+        {
+          key: "description",
+          name: "description",
+          content: "Updates and announcements from the ThreeFold Foundation.",
+        },
+        {
+          key: "og:title",
+          property: "og:title",
+          content: "ThreeFold | News",
+        },
+        {
+          key: "og:description",
+          property: "og:description",
+          content: "Updates and announcements from the ThreeFold Foundation.",
+        },
+        {
+          key: "og:image",
+          property: "og:image",
+          content: this.getImg,
+        },
+        {
+          key: "twitter:description",
+          name: "twitter:description",
+          content: "Updates and announcements from the ThreeFold Foundation.",
+        },
+        {
+          key: "twitter:image",
+          property: "twitter:image",
+          content: this.getImg,
+        },
+        {
+          key: "twitter:title",
+          property: "twitter:title",
+          content: "ThreeFold | News",
+        },
+      ],
+    };
   },
   components: {
     PostListItem,
@@ -255,6 +299,13 @@ export default {
         return window.innerHeight - 570;
       }
     },
+    getImg() {
+      let img = "";
+      if (process.isClient) {
+        img = `${window.location.origin}${this.$page.markdownPage.metaImg.src}`;
+      }
+      return img;
+    },
   },
 };
 </script>

src/templates/MarkdownPage.vue

@@ -107,6 +107,9 @@
         id
         path
         excerpt
+        metaTitle
+        metaDesc
+        metaImg
         header_excerpt
         header_altImg
         header_title
@@ -257,19 +260,66 @@ export default {
     AppListItem,
     Partenerships,
   },
-
-  metaInfo() {
-    return {
-      title: this.pageName,
-    };
-  },
   computed: {
+    getImg() {
+      let img = "";
+      if (process.isClient) {
+        img = `${window.location.origin}${this.$page.markdownPage.metaImg.src}`;
+      }
+      return img;
+    },
     pageName() {
       let path = this.$route.path.substring(1);
       let name = path[0].toUpperCase() + path.slice(1);
       return name;
     },
   },
+  metaInfo() {
+    return {
+      title: "",
+      titleTemplate: this.$page.markdownPage.metaTitle,
+      meta: [
+        {
+          key: "description",
+          name: "description",
+          content: this.$page.markdownPage.metaDesc,
+        },
+        {
+          key: "og:title",
+          property: "og:title",
+          content: this.$page.markdownPage.metaTitle,
+        },
+        {
+          key: "og:description",
+          property: "og:description",
+          content: this.$page.markdownPage.metaDesc,
+        },
+        {
+          key: "og:image",
+          property: "og:image",
+          content: this.getImg,
+        },
+        {
+          key: "twitter:description",
+          name: "twitter:description",
+          content: this.$page.markdownPage.metaDesc,
+        },
+        {
+          key: "twitter:image",
+          property: "twitter:image",
+          content: this.getImg,
+        },
+        {
+          key: "twitter:title",
+          property: "twitter:title",
+          content: this.$page.markdownPage.metaTitle,
+        },
+      ],
+    };
+  },
+  mounted() {
+    console.log(this.getImg);
+  },
 };
 </script>
 <style scoped>

src/templates/Partners.vue

@@ -49,6 +49,11 @@ query ($private: Int){
       }
     }
   }
+
+  markdownPage(id: "home") {
+        id
+        metaImg
+  }
   
   tags: allProjectTag (filter: { title: {in: ["blockchain", "experience", "technology", "farming", "community", "infrastructure", "impact"]}}) {
      edges{
@@ -79,6 +84,59 @@ export default {
       );
       return res;
     },
+    getImg() {
+      let img = "";
+      if (process.isClient) {
+        img = `${window.location.origin}${this.$page.markdownPage.metaImg.src}`;
+      }
+      return img;
+    },
+  },
+  metaInfo() {
+    return {
+      title: "",
+      titleTemplate: "ThreeFold | Partners",
+      meta: [
+        {
+          key: "description",
+          name: "description",
+          content:
+            "Meet the incredible organizations co-creating the peer-to-peer alongside the ThreeFold Foundation.",
+        },
+        {
+          key: "og:title",
+          property: "og:title",
+          content: "ThreeFold | Partners",
+        },
+        {
+          key: "og:description",
+          property: "og:description",
+          content:
+            "Meet the incredible organizations co-creating the peer-to-peer alongside the ThreeFold Foundation.",
+        },
+        {
+          key: "og:image",
+          property: "og:image",
+          content: this.getImg,
+        },
+        {
+          key: "twitter:description",
+          name: "twitter:description",
+          content:
+            "Meet the incredible organizations co-creating the peer-to-peer alongside the ThreeFold Foundation.",
+        },
+        {
+          key: "twitter:image",
+          property: "twitter:image",
+          content: this.getImg,
+        },
+        {
+          key: "twitter:title",
+          property: "twitter:title",
+          content: "ThreeFold | Partners",
+        },
+      ],
+    };
   },
 };
 </script>

src/templates/People.vue

@@ -45,6 +45,11 @@ query ($private: Int){
     }
   }
 
+    markdownPage(id: "home") {
+        id
+        metaImg
+  }
+
    memberships: allMembership(filter: {title: {in: ["cofounders", "tech", "foundation", "ambassadors", "matchmakers", "farmers", "aci_members", "partners", "wisdom_council", "technology_council", "grid_guardians"]}}){
      edges{
       node{
@@ -66,6 +71,49 @@ export default {
     PostListItem,
     TagFilterHeader,
   },
+  metaInfo() {
+    return {
+      title: "",
+      titleTemplate: "ThreeFold | People",
+      meta: [
+        {
+          key: "description",
+          name: "description",
+          content: "Meet the wide range of passionate and dedicated individuals involved in the ThreeFold movement.",
+        },
+        {
+          key: "og:title",
+          property: "og:title",
+          content: "ThreeFold | People",
+        },
+        {
+          key: "og:description",
+          property: "og:description",
+          content: "Meet the wide range of passionate and dedicated individuals involved in the ThreeFold movement.",
+        },
+        {
+          key: "og:image",
+          property: "og:image",
+          content: this.getImg,
+        },
+        {
+          key: "twitter:description",
+          name: "twitter:description",
+          content: "Meet the wide range of passionate and dedicated individuals involved in the ThreeFold movement.",
+        },
+        {
+          key: "twitter:image",
+          property: "twitter:image",
+          content: this.getImg,
+        },
+        {
+          key: "twitter:title",
+          property: "twitter:title",
+          content: "ThreeFold | People",
+        },
+      ],
+    };
+  },
   computed: {
     memberships() {
       var res = [{ title: "All", path: "/people" }];
@@ -74,6 +122,13 @@ export default {
       );
       return res;
     },
+    getImg() {
+      let img = "";
+      if (process.isClient) {
+        img = `${window.location.origin}${this.$page.markdownPage.metaImg.src}`;
+      }
+      return img;
+    },
   },
 };
 </script>