Merge pull request #76 from technologiestiftung/fix/social-media-image-build

Author: Fabian Morón Zirfas

package-lock.json

@@ -22,6 +22,7 @@
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.6",
     "clean-webpack-plugin": "^3.0.0",
+    "copy-webpack-plugin": "^5.1.1",
     "css-loader": "^3.1.0",
     "eslint": "^7.0.0",
     "eslint-config-react-app": "^5.2.1",

package.json

@@ -7,22 +7,22 @@
         <link rel="icon" type="image/x-icon" href="/favicon.ico">
         <meta name="title" content="Gieß den Kiez | CityLAB Berlin">
         <meta name="description" content="Die Berliner Stadtbäume leiden unter Trockenheit und Du kannst ihnen helfen!">
-        <meta property="og:url" content="https://www.giessdenkiez.de/">
+        <meta property="og:url" content="<%= domain %>/">
         <meta property="og:type" content="website">
         <meta property="og:title" content="Gieß den Kiez | CityLAB Berlin">
         <meta property="og:description" content="Die Berliner Stadtbäume leiden unter Trockenheit und Du kannst ihnen helfen!">
-        <meta property="og:image" content="https://www.giessdenkiez.de/images/social_media.png">
+        <meta property="og:image" content="<%= domain %>/assets/images/social_media.jpg">
         <meta property="og:site_name" content="Gieß den Kiez | CityLAB Berlin">
         <meta name="twitter:card" ontent="summary">
         <meta name="twitter:site" content="@citylabberlin">
         <meta name="twitter:creator" content="@citylabberlin">
-        <meta name="twitter:url" content="https://www.giessdenkiez.de/">
+        <meta name="twitter:url" content="<%= domain %>/">
         <meta name="twitter:title" content="Gieß den Kiez | CityLAB Berlin">
         <meta name="twitter:description" content="Die Berliner Stadtbäume leiden unter Trockenheit und Du kannst ihnen helfen!">
-        <meta name="twitter:image" content="https://www.giessdenkiez.de/images/social_media.png">
+        <meta name="twitter:image" content="<%= domain %>/assets/images/social_media.jpg">
         <meta itemprop="name" content="Gieß den Kiez | CityLAB Berlin">
         <meta itemprop="description" content="Die Berliner Stadtbäume leiden unter Trockenheit und Du kannst ihnen helfen!">
-        <meta itemprop="image" content="https://www.giessdenkiez.de/images/social_media.png">
+        <meta itemprop="image" content="<%= domain %>/assets/images/social_media.jpg">
         <style>
             .mapboxgl-ctrl-attrib {
                 display: none;

public/images/social_media.png

@@ -18,10 +18,6 @@ const onRedirectCallback = appState => {
   );
 };
 
-// if (process.env.NODE_ENV === 'production') {
-//   require('file-loader?name=[name].[ext]!./index.html');
-// }
-
 function startApp() {
   const rootElement = document.getElementById('app');
 

src/assets/images/social_media.jpg

@@ -1,11 +1,10 @@
 const Dotenv = require('dotenv-webpack');
+const webpack = require('webpack'); // to access built-in plugins
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const CopyPlugin = require('copy-webpack-plugin');
 const path = require('path');
-
-// const webpack = require('webpack');
-
-// config.js
+const domain = 'https://www.giessdenkiez.de';
 
 module.exports = {
   mode: 'development',
@@ -22,7 +21,7 @@ module.exports = {
     splitChunks: {
       // include all types of chunks
       chunks: 'all',
-      maxSize: 600,
+      maxSize: 3000,
     },
   },
   output: {
@@ -106,9 +105,19 @@ module.exports = {
     ],
   },
   plugins: [
+    new webpack.ProgressPlugin(),
     new Dotenv(),
     new CleanWebpackPlugin(),
+    new CopyPlugin([
+      {
+        from: 'src/assets/images/social_media.jpg',
+        to: 'assets/images/social_media.jpg',
+      },
+    ]),
     new HtmlWebpackPlugin({
+      templateParameters: {
+        domain,
+      },
       template: path.resolve(__dirname, '../src/index.ejs'),
     }),
   ],