From e9b4593abf2dbbc4ded2fc24afe0ba324b7224f1 Mon Sep 17 00:00:00 2001
From: "Phyks (Lucas Verney)" <phyks@phyks.me>
Date: Wed, 11 Jul 2018 16:53:29 +0200
Subject: [PATCH] Fix OpenGraph icon, OG does not support SVG

---
 build/utils.js                         |  2 +-
 build/webpack.dev.conf.js              | 12 ++++++++++--
 build/webpack.prod.conf.js             | 10 +++++++++-
 config/index.js                        |  2 +-
 index.html                             |  3 ++-
 package.json                           |  3 ++-
 static/icon.svg => src/assets/logo.svg |  0
 src/views/Map.vue                      |  2 +-
 yarn.lock                              | 17 +++++++++++++++--
 9 files changed, 41 insertions(+), 10 deletions(-)
 rename static/icon.svg => src/assets/logo.svg (100%)

diff --git a/build/utils.js b/build/utils.js
index d2317cc..5aa640a 100644
--- a/build/utils.js
+++ b/build/utils.js
@@ -95,7 +95,7 @@ exports.createNotifierCallback = () => {
       title: packageConfig.name,
       message: severity + ': ' + error.name,
       subtitle: filename || '',
-      icon: path.join(__dirname, 'static/icon.svg')
+      icon: path.join(__dirname, '../src/assets/logo.svg')
     })
   }
 }
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
index 9863dda..499806a 100755
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@@ -1,4 +1,5 @@
 'use strict'
+const svg2png = require('svg2png')
 const utils = require('./utils')
 const webpack = require('webpack')
 const config = require('../config')
@@ -53,7 +54,7 @@ const devWebpackConfig = merge(baseWebpackConfig, {
         new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update.
         new webpack.NoEmitOnErrorsPlugin(),
         new AppManifestWebpackPlugin({
-            logo: path.resolve(__dirname, '../static/icon.svg'),
+            logo: path.resolve(__dirname, '../src/assets/logo.svg'),
             prefix: '.',
             output: '/static/icons-[hash:8]/',
             inject: true,
@@ -77,9 +78,16 @@ const devWebpackConfig = merge(baseWebpackConfig, {
         new CopyWebpackPlugin([
             {
                 from: path.resolve(__dirname, '../static'),
-                to: config.dev.assetsSubDirectory,
+                to: config.build.assetsSubDirectory,
                 ignore: ['.*']
             },
+            {
+                from: path.resolve(__dirname, '../src/assets/logo.svg'),
+                to: path.join(config.build.assetsSubDirectory, 'ogIcon.png'),
+                transform (content, path) {
+                    return Promise.resolve(svg2png(content, { width: 400, height: 400 }));
+                }
+            },
             {
                 from: path.resolve(__dirname, '../humans.txt'),
                 to: config.build.assetsRoot,
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
index 2edcc4d..fdfb39d 100644
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@@ -1,5 +1,6 @@
 'use strict'
 const path = require('path')
+const svg2png = require('svg2png')
 const utils = require('./utils')
 const webpack = require('webpack')
 const config = require('../config')
@@ -59,7 +60,7 @@ const webpackConfig = merge(baseWebpackConfig, {
             : { safe: true }
         }),
         new AppManifestWebpackPlugin({
-            logo: path.resolve(__dirname, '../static/icon.svg'),
+            logo: path.resolve(__dirname, '../src/assets/logo.svg'),
             prefix: '.',
             output: '/static/icons-[hash:8]/',
             inject: true,
@@ -132,6 +133,13 @@ const webpackConfig = merge(baseWebpackConfig, {
                 to: config.build.assetsSubDirectory,
                 ignore: ['.*']
             },
+            {
+                from: path.resolve(__dirname, '../src/assets/logo.svg'),
+                to: path.join(config.build.assetsSubDirectory, 'ogIcon.png'),
+                transform (content, path) {
+                    return Promise.resolve(svg2png(content, { width: 400, height: 400 }));
+                }
+            },
             {
                 from: path.resolve(__dirname, '../humans.txt'),
                 to: config.build.assetsRoot,
diff --git a/config/index.js b/config/index.js
index 67a33dc..52cab66 100644
--- a/config/index.js
+++ b/config/index.js
@@ -75,6 +75,6 @@ module.exports = {
 
     // OpenGraph-related variables
     ogURL: 'https://cyclo.phyks.me',
-    ogImage: 'https://cyclo.phyks.me/static/icon.svg',
+    ogImage: 'https://cyclo.phyks.me/static/ogIcon.png',
   }
 }
diff --git a/index.html b/index.html
index 96bc459..c616f00 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="en" prefix="og: http://ogp.me/ns#">
     <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
@@ -7,6 +7,7 @@
         <meta name="description" content="Track and share issues (work, interruption in routes, parked cars) on bike lanes in realtime!">
         <meta name="twitter:card" content="summary" />
         <meta name="twitter:creator" content="@PhyksIsHere" />
+        <meta property="og:type" content="website" />
         <meta property="og:title" content="Cyclassist: your bike companion!" />
         <meta property="og:description" content="Track and share issues (work, interruption in routes, parked cars) on bike lanes in realtime!" />
         <meta property="og:url" content="<%= htmlWebpackPlugin.options.ogURL %>" />
diff --git a/package.json b/package.json
index a133deb..bfae6a4 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,6 @@
         "build": "node build/build.js"
     },
     "dependencies": {
-        "app-manifest-webpack-plugin": "^1.1.3",
         "es6-promise": "^4.2.4",
         "isomorphic-fetch": "^2.2.1",
         "leaflet": "^1.3.1",
@@ -29,6 +28,7 @@
         "vuex": "^3.0.1"
     },
     "devDependencies": {
+        "app-manifest-webpack-plugin": "^1.1.3",
         "autoprefixer": "^7.1.2",
         "babel-core": "^6.22.1",
         "babel-eslint": "^7.1.1",
@@ -63,6 +63,7 @@
         "rimraf": "^2.6.0",
         "semver": "^5.3.0",
         "shelljs": "^0.7.6",
+        "svg2png": "^4.1.1",
         "uglifyjs-webpack-plugin": "^1.1.1",
         "url-loader": "^0.5.8",
         "vue-loader": "^13.3.0",
diff --git a/static/icon.svg b/src/assets/logo.svg
similarity index 100%
rename from static/icon.svg
rename to src/assets/logo.svg
diff --git a/src/views/Map.vue b/src/views/Map.vue
index d487084..136e468 100644
--- a/src/views/Map.vue
+++ b/src/views/Map.vue
@@ -2,7 +2,7 @@
     <v-container fluid fill-height class="no-padding">
         <v-layout v-if="isIntro" row wrap class="text-xs-center blue lighten-2">
             <v-flex xs8 offset-xs2>
-                <p><img src="static/icon.svg" alt="Logo"/></p></p>
+                <p><img src="@/assets/logo.svg" alt="Logo"/></p></p>
                 <p>{{ $t('about.summary') }}</p>
                 <v-btn role="button" round color="green" dark @click="introButtonClick">{{ $t('intro.start') }}</v-btn>
             </v-flex>
diff --git a/yarn.lock b/yarn.lock
index 9c9360f..896f97f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2648,6 +2648,10 @@ file-type@^3.1.0, file-type@^3.8.0:
   version "3.9.0"
   resolved "https://registry.yarnpkg.com/file-type/-/file-type-3.9.0.tgz#257a078384d1db8087bc449d107d52a52672b9e9"
 
+file-url@^2.0.0:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/file-url/-/file-url-2.0.2.tgz#e951784d79095127d3713029ab063f40818ca2ae"
+
 filename-regex@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/filename-regex/-/filename-regex-2.0.1.tgz#c1c4b9bee3e09725ddb106b75c1e301fe2f18b26"
@@ -4815,7 +4819,7 @@ performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
 
-phantomjs-prebuilt@^2.1.10:
+phantomjs-prebuilt@^2.1.10, phantomjs-prebuilt@^2.1.14:
   version "2.1.16"
   resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.16.tgz#efd212a4a3966d3647684ea8ba788549be2aefef"
   dependencies:
@@ -6183,6 +6187,15 @@ supports-color@^5.1.0, supports-color@^5.3.0, supports-color@^5.4.0:
   dependencies:
     has-flag "^3.0.0"
 
+svg2png@^4.1.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/svg2png/-/svg2png-4.1.1.tgz#6b9e0398aa418778b6436e127a2fb7f00d499c28"
+  dependencies:
+    file-url "^2.0.0"
+    phantomjs-prebuilt "^2.1.14"
+    pn "^1.0.0"
+    yargs "^6.5.0"
+
 svg2png@~3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/svg2png/-/svg2png-3.0.1.tgz#a2644d68b0231ac00af431aa163714ff17106447"
@@ -6940,7 +6953,7 @@ yargs-parser@^7.0.0:
   dependencies:
     camelcase "^4.1.0"
 
-yargs@6.6.0:
+yargs@6.6.0, yargs@^6.5.0:
   version "6.6.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-6.6.0.tgz#782ec21ef403345f830a808ca3d513af56065208"
   dependencies: