Merge pull request #208 from yannglt/develop

Add dynamic og images for notes
yannglt · Oct 23, 2022 · 517cbfb · 517cbfb
2 parents bd46b86 + 7d3f90b
commit 517cbfb
Show file tree

Hide file tree

Showing 8 changed files with 202 additions and 33 deletions.
diff --git a/nuxt.config.js b/nuxt.config.js
@@ -42,41 +42,21 @@ export default {
         content: 'Personal space of Yann-Edern Gillet, a designer thinking, creating and breaking interfaces, products and systems with a focus on design operations'
       },
       {
-        name:  'og:title',
-        content:  'Yann-Edern Gillet, Product Designer',
-      },
-      {
-        name:  'og:image',
-        content:  'https://yannglt.com/images/og-image.png',
-      },
-      {
-        name:  'og:url',
-        content:  'https://yannglt.com',
+        name:  'og:description',
+        content:  'Personal space of Yann-Edern Gillet, a designer thinking, creating and breaking interfaces, products and systems with a focus on design operations',
       },
       {
-        name:  'og:description',
+        name:  'twitter:description',
         content:  'Personal space of Yann-Edern Gillet, a designer thinking, creating and breaking interfaces, products and systems with a focus on design operations',
       },
       {
         name:  'twitter:site',
         content:  '@yannglt',
       },
-      {
-        name:  'twitter:image',
-        content:  'https://yannglt.com/images/og-image.png',
-      },
       {
         name:  'twitter:card',
         content:  'summary_large_image',
       },
-      {
-        name:  'twitter:title',
-        content:  'Yann-Edern Gillet, Product Designer',
-      },
-      {
-        name:  'twitter:description',
-        content:  'Personal space of Yann-Edern Gillet, a designer thinking, creating and breaking interfaces, products and systems with a focus on design operations',
-      },
     ],
     script: [
       { src: 'https://unpkg.com/splitting/dist/splitting.min.js' }

diff --git a/package.json b/package.json
@@ -13,8 +13,8 @@
   "dependencies": {
     "@nuxtjs/axios": "^5.13.1",
     "nuxt": "^2.15.2",
-    "vue-server-renderer": "^2.6.11",
-    "vue-gtag": "1.16.1"
+    "vue-gtag": "1.16.1",
+    "vue-server-renderer": "^2.6.11"
   },
   "devDependencies": {
     "@nuxtjs/markdownit": "^2.0.0",
@@ -27,10 +27,10 @@
     "gsap": "^3.6.1",
     "imports-loader": "^1.2.0",
     "moment": "^2.29.1",
-    "sass": "^1.39.2",
     "nodemon": "^2.0.7",
+    "sass": "^1.39.2",
     "sass-loader": "^10.0.3",
     "vee-validate": "^3.4.5",
     "vue-clipboard2": "^0.3.1"
   }
-}
+}
diff --git a/pages/about/index.vue b/pages/about/index.vue
@@ -340,6 +340,39 @@
       }
     },
 
+    head() {
+      return {
+        title: 'Yann-Edern Gillet — About',
+        meta: [
+          {
+            hid: 'og:title',
+            name: 'og:title',
+            content: 'Yann-Edern Gillet — About',
+          },
+          {
+            hid: 'twitter:title',
+            name: 'twitter:title',
+            content: 'Yann-Edern Gillet — About',
+          },
+          {
+            hid: 'og:image',
+            name: 'og:image',
+            content: 'https://yannglt.com/images/og-image.png',
+          },
+          {
+            hid: 'twitter:image',
+            name: 'twitter:image',
+            content: 'https://yannglt.com/images/og-image.png',
+          },
+          {
+            hid: 'og:url',
+            name: 'og:url',
+            content: 'https://yannglt.com/about/',
+          },
+        ]
+      }
+    },
+
     methods: {
       collapseAllFacts: function() {
         this.$refs.fact.forEach((fact) => {

diff --git a/pages/about/moodboard.vue b/pages/about/moodboard.vue
@@ -52,6 +52,39 @@
       }
     },
 
+    head() {
+      return {
+        title: 'Yann-Edern Gillet — Moodboard',
+        meta: [
+          {
+            hid: 'og:title',
+            name: 'og:title',
+            content: 'Yann-Edern Gillet — Moodboard',
+          },
+          {
+            hid: 'twitter:title',
+            name: 'twitter:title',
+            content: 'Yann-Edern Gillet — Moodboard',
+          },
+          {
+            hid: 'og:image',
+            name: 'og:image',
+            content: 'https://yannglt.com/images/og-image.png',
+          },
+          {
+            hid: 'twitter:image',
+            name: 'twitter:image',
+            content: 'https://yannglt.com/images/og-image.png',
+          },
+          {
+            hid: 'og:url',
+            name: 'og:url',
+            content: 'https://yannglt.com/moodboard/',
+          },
+        ]
+      }
+    },
+
     methods: {
       importAll(r) {
         r.keys().forEach(key => (this.inspirationsImages.push({ pathLong: r(key) })))

diff --git a/pages/contact.vue b/pages/contact.vue
@@ -71,6 +71,39 @@
       }
     },
 
+    head() {
+      return {
+        title: 'Yann-Edern Gillet — Contact',
+        meta: [
+          {
+            hid: 'og:title',
+            name: 'og:title',
+            content: 'Yann-Edern Gillet — Contact',
+          },
+          {
+            hid: 'twitter:title',
+            name: 'twitter:title',
+            content: 'Yann-Edern Gillet — Contact',
+          },
+          {
+            hid: 'og:image',
+            name: 'og:image',
+            content: 'https://yannglt.com/images/og-image.png',
+          },
+          {
+            hid: 'twitter:image',
+            name: 'twitter:image',
+            content: 'https://yannglt.com/images/og-image.png',
+          },
+          {
+            hid: 'og:url',
+            name: 'og:url',
+            content: 'https://yannglt.com/contact/',
+          },
+        ]
+      }
+    },
+
     methods: {
       copyEmail: function () {
         this.$copyText(this.email)

diff --git a/pages/index.vue b/pages/index.vue
@@ -203,6 +203,39 @@
       }
     },
 
+    head() {
+      return {
+        title: 'Yann-Edern Gillet',
+        meta: [
+          {
+            hid: 'og:title',
+            name: 'og:title',
+            content: 'Yann-Edern Gillet',
+          },
+          {
+            hid: 'twitter:title',
+            name: 'twitter:title',
+            content: 'Yann-Edern Gillet',
+          },
+          {
+            hid: 'og:image',
+            name: 'og:image',
+            content: 'https://yannglt.com/images/og-image.png',
+          },
+          {
+            hid: 'twitter:image',
+            name: 'twitter:image',
+            content: 'https://yannglt.com/images/og-image.png',
+          },
+          {
+            hid: 'og:url',
+            name: 'og:url',
+            content: 'https://yannglt.com/',
+          },
+        ]
+      }
+    },
+
     methods: {
       copyEmail: function () {
         this.$copyText(this.email)

diff --git a/pages/notes/_slug.vue b/pages/notes/_slug.vue
@@ -28,15 +28,43 @@
   import SuperLink from '@/components/SuperLink.vue'
 
   export default {
-    head() {
+
+    data() {
       return {
-        title: this.note.fields.title
+        slug: this.$route.params.slug
       }
     },
 
-    data() {
+    head() {
       return {
-        slug: this.$route.params.slug
+        title: this.note.fields.title,
+        meta: [
+          {
+            hid: 'og:title',
+            name: 'og:title',
+            content: this.note.fields.title,
+          },
+          {
+            hid: 'twitter:title',
+            name: 'twitter:title',
+            content: this.note.fields.title,
+          },
+          {
+            hid: 'og:image',
+            name: 'og:image',
+            content: 'https://dynamic-og-image-helloyannglt.vercel.app/api/og?title=' + this.note.fields.title,
+          },
+          {
+            hid: 'twitter:image',
+            name: 'twitter:image',
+            content: 'https://dynamic-og-image-helloyannglt.vercel.app/api/og?title=' + this.note.fields.title,
+          },
+          {
+            hid: 'og:url',
+            name: 'og:url',
+            content: 'https://yannglt.com/notes/' + this.note.fields.slug,
+          },
+        ]
       }
     },
 

diff --git a/pages/notes/index.vue b/pages/notes/index.vue
@@ -26,8 +26,37 @@
 
   export default {
     
-    data: function () {
-      return { }
+    head() {
+      return {
+        title: 'Yann-Edern Gillet — Notes',
+        meta: [
+          {
+            hid: 'og:title',
+            name: 'og:title',
+            content: 'Yann-Edern Gillet — Notes',
+          },
+          {
+            hid: 'twitter:title',
+            name: 'twitter:title',
+            content: 'Yann-Edern Gillet — Notes',
+          },
+          {
+            hid: 'og:image',
+            name: 'og:image',
+            content: 'https://yannglt.com/images/og-image.png',
+          },
+          {
+            hid: 'twitter:image',
+            name: 'twitter:image',
+            content: 'https://yannglt.com/images/og-image.png',
+          },
+          {
+            hid: 'og:url',
+            name: 'og:url',
+            content: 'https://yannglt.com/notes/',
+          },
+        ]
+      }
     },
 
     computed: {