From 8921cb712ccaae5f47f7f3dbb9ea5092ecda487f Mon Sep 17 00:00:00 2001
From: samaradel <samar@incubaid.com>
Date: Mon, 2 Aug 2021 15:53:44 +0200
Subject: [PATCH] Apply open graph

---
 src/templates/BlogPost.vue |  5 ---
 src/templates/NewsPost.vue | 40 ++++++++++++++++++++-
 src/templates/Person.vue   | 40 ++++++++++++++++++++-
 src/templates/Project.vue  | 72 +++++++++++++++++++++++++++++++++++---
 4 files changed, 146 insertions(+), 11 deletions(-)

diff --git a/src/templates/BlogPost.vue b/src/templates/BlogPost.vue
index ba833f74b..931ccc7b5 100644
--- a/src/templates/BlogPost.vue
+++ b/src/templates/BlogPost.vue
@@ -216,11 +216,6 @@ export default {
   components: {
     PostListItem,
   },
-  metaInfo() {
-    return {
-      title: this.$page.blog.title,
-    };
-  },
   methods: {
     copyLink() {
       const el = document.createElement("input");
diff --git a/src/templates/NewsPost.vue b/src/templates/NewsPost.vue
index 2623fc632..bb00f85db 100644
--- a/src/templates/NewsPost.vue
+++ b/src/templates/NewsPost.vue
@@ -214,7 +214,45 @@ export default {
   },
   metaInfo() {
     return {
-      title: this.$page.news.title,
+      title: "",
+      titleTemplate: `ThreeFold | ${this.$page.news.title}`,
+      meta: [
+        {
+          key: "description",
+          name: "description",
+          content: this.$page.news.excerpt,
+        },
+        {
+          key: "og:title",
+          property: "og:title",
+          content: this.$page.news.title,
+        },
+        {
+          key: "og:description",
+          property: "og:description",
+          content: this.$page.news.excerpt,
+        },
+        {
+          key: "og:image",
+          property: "og:image",
+          content: this.$page.news.image.src,
+        },
+        {
+          key: "twitter:description",
+          name: "twitter:description",
+          content: this.$page.news.excerpt,
+        },
+        {
+          key: "twitter:image",
+          property: "twitter:image",
+          content: this.$page.news.image.src,
+        },
+        {
+          key: "twitter:title",
+          property: "twitter:title",
+          content: this.$page.news.title,
+        },
+      ],
     };
   },
   methods: {
diff --git a/src/templates/Person.vue b/src/templates/Person.vue
index 198bb8509..5d715ef41 100644
--- a/src/templates/Person.vue
+++ b/src/templates/Person.vue
@@ -216,7 +216,45 @@ export default {
   },
   metaInfo() {
     return {
-      title: this.$page.person.name,
+      title: "",
+      titleTemplate: `ThreeFold | ${this.$page.person.title}`,
+      meta: [
+        {
+          key: "description",
+          name: "description",
+          content: this.$page.person.excerpt,
+        },
+        {
+          key: "og:title",
+          property: "og:title",
+          content: this.$page.person.title,
+        },
+        {
+          key: "og:description",
+          property: "og:description",
+          content: this.$page.person.excerpt,
+        },
+        {
+          key: "og:image",
+          property: "og:image",
+          content: this.$page.person.image.src,
+        },
+        {
+          key: "twitter:description",
+          name: "twitter:description",
+          content: this.$page.person.excerpt,
+        },
+        {
+          key: "twitter:image",
+          property: "twitter:image",
+          content: this.$page.person.image.src,
+        },
+        {
+          key: "twitter:title",
+          property: "twitter:title",
+          content: this.$page.person.title,
+        },
+      ],
     };
   },
 };
diff --git a/src/templates/Project.vue b/src/templates/Project.vue
index b1dc9c024..b3c1f6a82 100644
--- a/src/templates/Project.vue
+++ b/src/templates/Project.vue
@@ -5,7 +5,15 @@
         <div class="w-full md:w-1/6 mx-auto sm:mx-0">
           <g-image
             :src="$page.project.logo"
-            class="rounded-full bg-gray-200 w-32 h-32 border-4 border-gray-400 mx-auto md:mx-0"
+            class="
+              rounded-full
+              bg-gray-200
+              w-32
+              h-32
+              border-4 border-gray-400
+              mx-auto
+              md:mx-0
+            "
           ></g-image>
         </div>
         <div class="w-full md:w-5/6 text-center md:text-left md:pl-8 lg:pl-0">
@@ -39,7 +47,13 @@
                           <g-image
                             :src="member.image"
                             :alt="member.name"
-                            class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white"
+                            class="
+                              w-8
+                              h-8
+                              rounded-full
+                              bg-gray-200
+                              border-2 border-white
+                            "
                           />
                         </g-link>
                       </li>
@@ -82,7 +96,19 @@
                 v-for="tag in $page.project.tags"
                 :key="tag.id"
                 :to="tag.path"
-                class="text-xs bg-transparent hover:text-blue-700 py-2 px-4 mr-2 border hover:border-blue-500 border-gray-600 text-gray-700 rounded-full"
+                class="
+                  text-xs
+                  bg-transparent
+                  hover:text-blue-700
+                  py-2
+                  px-4
+                  mr-2
+                  border
+                  hover:border-blue-500
+                  border-gray-600
+                  text-gray-700
+                  rounded-full
+                "
                 >{{ tag.title }}</g-link
               >
             </section>
@@ -198,7 +224,45 @@ export default {
   },
   metaInfo() {
     return {
-      title: this.$page.project.title,
+      title: "",
+      titleTemplate: `ThreeFold | ${this.$page.project.title}`,
+      meta: [
+        {
+          key: "description",
+          name: "description",
+          content: this.$page.project.excerpt,
+        },
+        {
+          key: "og:title",
+          property: "og:title",
+          content: this.$page.project.title,
+        },
+        {
+          key: "og:description",
+          property: "og:description",
+          content: this.$page.project.excerpt,
+        },
+        {
+          key: "og:image",
+          property: "og:image",
+          content: this.$page.project.image.src,
+        },
+        {
+          key: "twitter:description",
+          name: "twitter:description",
+          content: this.$page.project.excerpt,
+        },
+        {
+          key: "twitter:image",
+          property: "twitter:image",
+          content: this.$page.project.image.src,
+        },
+        {
+          key: "twitter:title",
+          property: "twitter:title",
+          content: this.$page.project.title,
+        },
+      ],
     };
   },
 };