feat: updated meta tags (#30)

* feat: Updated meta tags * chore: Fixed prettier complaints * chore(README): Updated about cover image * style(post): Inlined image variable * style(post): aligned with prettier * fix title case
saberland · Jun 25, 2019 · f0a1cb7 · f0a1cb7
1 parent 60cc5af
commit f0a1cb7
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 8 deletions.
diff --git a/README.md b/README.md
@@ -59,6 +59,22 @@ Run `npm run build` to create a production build of your app, generated files ca
 
 Check out [the example post](./packages/create-portfolio/template/pages/_posts/my-first-post.md).
 
+### Adding a Social Media Cover Photo
+
+By default, all posts will use your GitHub profile picture when embedded on social media. Should you wish to use a different image you can add under `assets.cover`:
+
+```markdown
+---
+title: My First Post
+layout: post
+date: 2019-05-26 20:23:00
+assets:
+  cover: @/images/cover.png
+tags:
+  - life
+---
+```
+
 ## Site Configuration
 
 Use `siteConfig` option in `saber-config.js` for site configuration.

diff --git a/packages/saber-theme-portfolio/src/layouts/home.vue b/packages/saber-theme-portfolio/src/layouts/home.vue
@@ -32,7 +32,21 @@ export default {
 
   head() {
     return {
-      title: this.$siteConfig.title
+      title: this.$siteConfig.title,
+      meta: [
+        {
+          property: 'og:title',
+          content: this.$siteConfig.title
+        },
+        {
+          property: 'og:description',
+          content: this.$siteConfig.description
+        },
+        {
+          property: 'og:image',
+          content: this.$themeConfig.profilePicture
+        }
+      ]
     }
   }
 }

diff --git a/packages/saber-theme-portfolio/src/layouts/page.vue b/packages/saber-theme-portfolio/src/layouts/page.vue
@@ -29,8 +29,23 @@ export default {
   props: ['page'],
 
   head() {
+    const description = this.page.excerpt.replace(/<(?:.|\n)*?>/gm, '')
     return {
-      title: `${this.page.attributes.title} - ${this.$siteConfig.title}`
+      title: `${this.page.attributes.title} - ${this.$siteConfig.title}`,
+      meta: [
+        {
+          property: 'og:title',
+          content: this.$siteConfig.title
+        },
+        {
+          property: 'og:description',
+          content: description
+        },
+        {
+          property: 'og:image',
+          content: this.$themeConfig.profilePicture
+        }
+      ]
     }
   }
 }

diff --git a/packages/saber-theme-portfolio/src/layouts/post.vue b/packages/saber-theme-portfolio/src/layouts/post.vue
@@ -53,6 +53,7 @@ export default {
   head() {
     const title = `${this.page.attributes.title} - ${this.$siteConfig.title}`
     const description = this.page.excerpt.replace(/<(?:.|\n)*?>/gm, '')
+
     return {
       title,
       meta: [
@@ -69,16 +70,18 @@ export default {
           content: `@${this.$themeConfig.twitter}`
         },
         {
-          name: 'og:title',
+          property: 'og:title',
           content: title
         },
         {
-          name: 'og:description',
+          property: 'og:description',
           content: description
         },
-        this.page.attributes.assets.cover && {
-          name: 'og:image',
-          content: this.page.attributes.assets.cover
+        {
+          property: 'og:image',
+          content:
+            this.page.attributes.assets.cover ||
+            this.$themeConfig.profilePicture
         }
       ].filter(Boolean)
     }

diff --git a/packages/saber-theme-portfolio/src/layouts/posts.vue b/packages/saber-theme-portfolio/src/layouts/posts.vue
@@ -65,7 +65,21 @@ export default {
 
   head() {
     return {
-      title: `${this.pageTitle} - ${this.$siteConfig.title}`
+      title: `${this.pageTitle} - ${this.$siteConfig.title}`,
+      meta: [
+        {
+          property: 'og:title',
+          content: this.$siteConfig.title
+        },
+        {
+          property: 'og:description',
+          content: this.$siteConfig.description
+        },
+        {
+          property: 'og:image',
+          content: this.$themeConfig.profilePicture
+        }
+      ]
     }
   },