Add open graph images (mainmatter#699)

* add open graph images

* remove duplicate og type

* edit the variables passed to templates

* Move og object to post data

Sent the wrong file reference by accident.

* update images

* optimize images

* ignore og-images in service worker

* assert og:images are named "og-image.png"

* run img optim

* reduce image size

* make og:image absolute

_posts/2017-02-13-npm-libs-in-ember-cli.md

@@ -6,6 +6,8 @@ twitter: tobiasbieniek
 bio: "Senior Frontend Engineer, Ember CLI core team member"
 description: "Tobias Bieniek introduces a mechanism for using arbitrary npm libraries in Ember CLI applications and explains how that works under the hood."
 topic: ember
+og:
+  image: /assets/images/posts/2017-02-13-npm-libs-in-ember-cli/og-image.png
 ---
 
 tl;dr Use npm instead of Bower whenever you can!

_posts/2017-03-21-on-computed-properties-vs-helpers.md

@@ -6,6 +6,8 @@ twitter: marcoow
 bio: "Founding Director of simplabs, author of Ember Simple Auth"
 description: "Marco Otte-Witte discusses differences between computed properties and helpers and explains pros and cons of each alternative."
 topic: ember
+og:
+  image: /assets/images/posts/2017-03-21-on-computed-properties-vs-helpers/og-image.png
 ---
 
 Ember's computed properties are a great mechanism for encapsulating reactive

_posts/2018-06-11-actix.md

@@ -6,6 +6,8 @@ twitter: tobiasbieniek
 bio: "Senior Frontend Engineer, Ember CLI core team member"
 description: "Tobias Bieniek gives an overview of actix, an actor framework written in the Rust programming language."
 topic: rust
+og:
+  image: /assets/images/posts/2018-06-11-actix/og-image.png
 ---
 
 While we mostly focus our work around [Ember.js], [Rails] and [Elixir], we

_posts/2018-06-27-actix-tcp-client.md

@@ -6,6 +6,8 @@ twitter: tobiasbieniek
 bio: "Senior Frontend Engineer, Ember CLI core team member"
 description: "Tobias Bieniek shows how actix, the actor framework written in Rust, can be used to build a basic TCP client."
 topic: rust
+og:
+  image: /assets/images/posts/2018-06-27-actix-tcp-client/og-image.png
 ---
 
 In our [last post] about [actix] we introduced you to the [Rust] programming

_posts/2018-07-03-building-a-pwa-with-glimmer-js.md

@@ -6,6 +6,8 @@ twitter: marcoow
 bio: "Founding Director of simplabs, author of Ember Simple Auth"
 description: "Marco Otte-Witte dives deep into the details of how simplabs built Breethe, an open source progressive web app, with Glimmer.js."
 topic: ember
+og:
+  image: /assets/images/posts/2018-07-03-building-a-pwa-with-glimmer-js/og-image.png
 ---
 
 We recently set out to build a progressive web app with

_posts/2018-07-24-from-spa-to-pwa.md

@@ -6,6 +6,8 @@ twitter: marcoow
 bio: "Founding Director of simplabs, author of Ember Simple Auth"
 description: "Marco Otte-Witte goes over the characteristics of progressive web apps and shows how to make the next step from a SPA to a PWA."
 topic: javascript
+og:
+  image: /assets/images/posts/2018-07-24-from-spa-to-pwa/og-image.png
 ---
 
 Progressive Web Apps are the next level of browser based applications. While

_posts/2018-12-10-assert-your-style.md

@@ -6,6 +6,8 @@ twitter: jjordan_dev
 bio: "Senior Frontend Engineer, Ember Learning core team member"
 description: "Jessica Jordan explains approaches and patterns for testing styles in Ember.js applications."
 topic: javascript
+og:
+  image: /assets/images/posts/2018-12-10-assert-your-style/og-image.png
 ---
 
 Sometimes you really want to make sure that your web application looks good; and that it keeps doing so in the future.

_posts/2019-04-05-spas-pwas-and-ssr.md

@@ -6,6 +6,8 @@ twitter: marcoow
 topic: javascript
 bio: "Founding Director of simplabs, author of Ember Simple Auth"
 description: "Marco Otte-Witte dives deep into different approaches for building web apps like SPAs, PWAs, SSR and how they all can be combined for the best result."
+og:
+  image: /assets/images/posts/2019-04-05-spas-pwas-and-ssr/og-image.png
 ---
 
 Single Page Apps, Progressive Web Apps and classic Server side rendered

_posts/2019-04-24-dependency-updates-for-gitlab.md

@@ -6,6 +6,8 @@ twitter: tobiasbieniek
 topic: misc
 bio: "Senior Frontend Engineer, Ember CLI core team member"
 description: "Tobias Bieniek shares how to set up the Renovate bot for automatic dependency updates with self-hosted internal GitLab servers."
+og:
+  image: /assets/images/posts/2019-04-24-dependency-updates-for-gitlab/og-image.png
 ---
 
 Are your dependencies hopelessly outdated? Would you need to hire another

_posts/2019-07-15-sentry-and-ember.md

@@ -6,6 +6,8 @@ twitter: tobiasbieniek
 topic: ember
 bio: "Senior Frontend Engineer, Ember CLI core team member"
 description: "Tobias Bieniek explains how to set up Sentry for Ember.js applications using @sentry/browser instead of the now unnecessary ember-cli-sentry."
+og:
+  image: /assets/images/posts/2019-07-15-sentry-and-ember/og-image.png
 ---
 
 Are you confident that your apps have no bugs? Do you not need a support team

lib/generate-blog/lib/components-builder.js

@@ -140,6 +140,11 @@ module.exports = class ComponentsBuilder extends BaseComponentsBuilder {
       post.content.includes(BREAK_MARKER),
       `Post "${post.meta.title}" does not contain break marker! Add "${BREAK_MARKER}" after the teaser.`,
     );
+    let ogImage = post.meta.og ? post.meta.og.image : null;
+    assert(
+      !ogImage || ogImage.endsWith('/og-image.png'),
+      `Post "${post.meta.title}" does has an og:image named "${ogImage}"; the og:image must be named "og-image.png".`,
+    );
 
     return {
       title: post.meta.title,
@@ -158,6 +163,7 @@ module.exports = class ComponentsBuilder extends BaseComponentsBuilder {
         twitter: post.meta.twitter,
         bio: post.meta.bio,
       },
+      og: post.meta.og || {},
     };
   }
 

lib/generate-blog/lib/templates/post/template.hbs

@@ -2,6 +2,7 @@
   <HeadTag @name='meta' @keys=\{{hash property="article:published_time"}} @values=\{{hash content="{{isoDate}}"}} />
   <HeadTag @name='meta' @keys=\{{hash property="article:section"}} @values=\{{hash content="{{topic}}"}} />
   <HeadTag @name='meta' @keys=\{{hash name="twitter:creator"}} @values=\{{hash content="{{author.twitter}}"}} />
+  <HeadTag @name='meta' @keys=\{{hash property="og:image"}} @values=\{{hash content="https://simplabs.com{{og.image}}"}} />
   <script type="application/ld+json">
     {
       "@type": "BlogPosting",

lib/service-workers/lib/worker-builder.js

@@ -34,6 +34,7 @@ module.exports = class WorkerBuilder extends BroccoliPlugin {
   findAssets(assetsFolder) {
     return walkSync(assetsFolder, {
       globs: ['**/*.png', '**/*.jpg', '**/*.gif', '**/*.svg', '**/blog/page/*.js', '**/blog/author-*.js'],
+      ignore: ['**/posts/**/og-image?(-*).png'],
     });
   }