Merge pull request element-hq#6317 from vector-im/dbkr/og_image_sort_of_configurable

lukebarnard1 · web-flow · commit 527e8306b275 · 2018-03-15T09:21:12.000Z
Remove og:image with status.im URL
diff --git a/README.md b/README.md
@@ -149,6 +149,17 @@ For a good example, see https://riot.im/develop/config.json
    with referral tracking; please ignore it.
 1. `welcomeUserId`: the user ID of a bot to invite whenever users register that can give them a tour
 
+
+Note that `index.html` also has an og:image meta tag that is set to an image
+hosted on riot.im. This is the image used if links to your copy of Riot
+appear in some websites like Facebook, and indeed Riot itself. This has to be
+static in the HTML and an absolute URL (and HTTP rather than HTTPS), so it's
+not possible for this to be an option in config.json. If you'd like to change
+it, you can build Riot as above, but run
+`RIOT_OG_IMAGE_URL="http://example.com/logo.png" npm run build`.
+Alternatively, you can edit the `og:image` meta tag in `index.html` directly
+each time you download a new version of Riot.
+
 Running as a Desktop app
 ========================
 
diff --git a/src/vector/index.html b/src/vector/index.html
@@ -20,7 +20,7 @@
     <meta name="msapplication-TileImage" content="vector-icons/mstile-144x144.png">
     <meta name="msapplication-config" content="vector-icons/browserconfig.xml">
     <meta name="theme-color" content="#ffffff">
-    <meta property="og:image" content="https://chat.status.im/img/logos/riot-im-logo-1.png" />
+    <meta property="og:image" content="<%= htmlWebpackPlugin.options.vars.og_image_url %>" />
     <% for (var i=0; i < htmlWebpackPlugin.files.css.length; i++) {
         var file = htmlWebpackPlugin.files.css[i];
         var match = file.match(/^bundles\/.*?\/theme-(.*)\.css$/);
diff --git a/webpack.config.js b/webpack.config.js
@@ -3,6 +3,9 @@ const webpack = require('webpack');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
+let og_image_url = process.env.RIOT_OG_IMAGE_URL;
+if (!og_image_url) og_image_url = 'https://riot.im/app/img/logos/riot-im-logo-1.png';
+
 module.exports = {
     entry: {
         "bundle": "./src/vector/index.js",
@@ -123,6 +126,9 @@ module.exports = {
             // bottom of <head> or the bottom of <body>, and I'm a bit scared
             // about moving them.
             inject: false,
+            vars: {
+                og_image_url: og_image_url,
+            },
         }),
     ],
     devtool: 'source-map',
