Improve icons & css & seo & a11y

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/package.json

@@ -56,8 +56,11 @@
     "chai": "^4.2.0",
     "dotenv-webpack": "^1.7.0",
     "eslint": "^6.5.1",
+    "glob-all": "^3.1.0",
     "graphql-cli": "^3.0.12",
     "node-sass": "^4.11.0",
+    "path": "^0.12.7",
+    "purgecss-webpack-plugin": "^1.6.0",
     "sass-loader": "^8.0.0",
     "tslint": "^5.20.0",
     "tslint-config-airbnb": "^5.11.2",

js/public/manifest.json

@@ -1,5 +1,5 @@
 {
-  "name": "mobilizon",
+  "name": "Mobilizon",
   "short_name": "mobilizon",
   "icons": [
     {
@@ -13,8 +13,8 @@
       "type": "image/png"
     }
   ],
-  "start_url": "/index.html",
+  "start_url": "/",
   "display": "standalone",
-  "background_color": "#000000",
-  "theme_color": "#4DBA87"
+  "background_color": "#FAB12D",
+  "theme_color": "#424056"
 }

js/public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Allow: /

js/src/App.vue

@@ -2,7 +2,7 @@
   <div id="mobilizon">
     <NavBar />
     <div class="container">
-      <b-message type="is-danger" :title="$t('Warning').toLocaleUpperCase()" closable>
+      <b-message type="is-danger" :title="$t('Warning').toLocaleUpperCase()" closable aria-close-label="Close">
         <p>{{ $t('This is a demonstration site to test the beta version of Mobilizon.') }}</p>
         <p v-html="$t('<b>Please do not use it in any real way</b>: everything you create here (accounts, events, identities, etc.) will be automatically deleted every 48 hours.')" />
         <p>
@@ -100,4 +100,12 @@ $mdi-font-path: "~@mdi/font/fonts";
     // background: #f7f8fa;
     background: #ebebeb;
   }
+
+  #mobilizon > .container > .message .message-header {
+    button.delete {
+      background: #4a4a4a;
+    }
+
+    color: #111;
+  }
 </style>

js/src/assets/mobilizon_logo.svg

@@ -1,6 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 248.16 46.78">
-    <title>Fichier 1</title>
-    <g id="e11b986d-bcba-4466-9834-a5e44ebfe12a" data-name="Calque 2">
+    <title id="MobilizonLogoTitle">Mobilizon Logo</title>
     <g id="ab18705c-9f78-4d57-8f04-bd2f1ccdd04c" data-name="header">
         <path d="M0,46.07,3.18,5.27a29.88,29.88,0,0,1,5.07-.36,27.74,27.74,0,0,1,4.95.36l4.86,17.16A92.19,92.19,0,0,1,20.4,32.51h.36A92.19,92.19,0,0,1,23.1,22.43L28,5.27a29.23,29.23,0,0,1,5-.36,29.23,29.23,0,0,1,5,.36l3.18,40.8a13.61,13.61,0,0,1-3.63.42,23.41,23.41,0,0,1-3.63-.24l-1.2-19.92q-.36-5.52-.48-12.84H31.8L24.48,40a25.62,25.62,0,0,1-4,.3,23.36,23.36,0,0,1-3.84-.3L9.36,13.49H9q-.3,8.94-.48,12.84L7.26,46.25a22.47,22.47,0,0,1-3.6.24A13.75,13.75,0,0,1,0,46.07Z"
               transform="translate(0 -0.25)"/>
@@ -29,5 +28,4 @@
         <path d="M198.26,11a7.37,7.37,0,0,1-.6-3,7.37,7.37,0,0,1,.6-3,8.09,8.09,0,0,1,3.87-.84,7.05,7.05,0,0,1,3.69.84,7.37,7.37,0,0,1,.6,3,7.37,7.37,0,0,1-.6,3,7.46,7.46,0,0,1-3.87.84A6.49,6.49,0,0,1,198.26,11Z"
               transform="translate(0 -0.25)" fill="#fff"/>
     </g>
-    </g>
 </svg>

js/vue.config.js

@@ -1,5 +1,7 @@
 const Dotenv = require('dotenv-webpack');
 const path = require('path');
+const PurgecssPlugin = require('purgecss-webpack-plugin');
+const glob = require('glob-all');
 
 module.exports = {
   pluginOptions: {
@@ -13,6 +15,13 @@ module.exports = {
   configureWebpack: {
     plugins: [
       new Dotenv({ path: path.resolve(process.cwd(), '../.env') }),
+      new PurgecssPlugin({
+        paths: glob.sync([
+          path.join(__dirname, './public/index.html'),
+          path.join(__dirname, './src/**/*.vue'),
+          path.join(__dirname, './src/**/*.ts')
+        ])
+      })
     ],
     module: {
       rules: [ // fixes https://github.com/graphql/graphql-js/issues/1272
@@ -46,6 +55,23 @@ module.exports = {
         .rule("vue")
         .use("vue-svg-inline-loader")
         .loader("vue-svg-inline-loader")
-        .options({ /* ... */ });
+        .options({
+          addAttributes: {
+            role: "img",
+            focusable: false,
+            tabindex: -1,
+            'aria-labelledby': "MobilizonLogoTitle"
+          },
+          svgo: {
+            plugins: [
+              {
+                removeTitle: false,
+              },
+              {
+                cleanupIDs: false
+              }
+            ]
+          }
+        });
   }
 };

js/yarn.lock

@@ -5237,6 +5237,14 @@ github-slugger@^1.2.0, github-slugger@^1.2.1:
   dependencies:
     emoji-regex ">=6.0.0 <=6.1.1"
 
+glob-all@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/glob-all/-/glob-all-3.1.0.tgz#8913ddfb5ee1ac7812656241b03d5217c64b02ab"
+  integrity sha1-iRPd+17hrHgSZWJBsD1SF8ZLAqs=
+  dependencies:
+    glob "^7.0.5"
+    yargs "~1.2.6"
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-3.1.0.tgz#9e6af6299d8d3bd2bd40430832bd113df906c5ae"
@@ -5269,7 +5277,7 @@ glob@7.1.2:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-glob@^7.0.0, glob@^7.0.3, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@~7.1.1:
+glob@^7.0.0, glob@^7.0.3, glob@^7.0.5, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@~7.1.1:
   version "7.1.4"
   resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.4.tgz#aa608a2f6c577ad357e1ae5a5c26d9a8d1969255"
   integrity sha512-hkLPepehmnKk41pUGm3sYxoFs/umurYfYJCerbXEyFIWcAzvpipAgVkBqqT9RBKMGjnq6kMuyYwha6csxbiM1A==
@@ -7731,6 +7739,11 @@ minimist@1.2.0, minimist@^1.1.3, minimist@^1.2.0:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
+minimist@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.1.0.tgz#99df657a52574c21c9057497df742790b2b4c0de"
+  integrity sha1-md9lelJXTCHJBXSX33QnkLK0wN4=
+
 minipass@^2.6.0, minipass@^2.8.6, minipass@^2.9.0:
   version "2.9.0"
   resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.9.0.tgz#e713762e7d3e32fed803115cf93e04bca9fcc9a6"
@@ -8827,6 +8840,14 @@ path-type@^3.0.0:
   dependencies:
     pify "^3.0.0"
 
+path@^0.12.7:
+  version "0.12.7"
+  resolved "https://registry.yarnpkg.com/path/-/path-0.12.7.tgz#d4dc2a506c4ce2197eb481ebfcd5b36c0140b10f"
+  integrity sha1-1NwqUGxM4hl+tIHr/NWzbAFAsQ8=
+  dependencies:
+    process "^0.11.1"
+    util "^0.10.3"
+
 pathval@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/pathval/-/pathval-1.1.0.tgz#b942e6d4bde653005ef6b71361def8727d0645e0"
@@ -9388,7 +9409,7 @@ process-nextick-args@~2.0.0:
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
   integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
-process@^0.11.10:
+process@^0.11.1, process@^0.11.10:
   version "0.11.10"
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
@@ -9719,6 +9740,24 @@ punycode@^1.2.4, punycode@^1.4.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
   integrity sha1-wNWmOycYgArY4esPpSachN1BhF4=
 
+purgecss-webpack-plugin@^1.6.0:
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/purgecss-webpack-plugin/-/purgecss-webpack-plugin-1.6.0.tgz#7b5d6d189f5574c1365592e1445d252162404e4a"
+  integrity sha512-rVrTWYsOTShUvD5gl0q/krkwTlBUILlyoqRk2XoujNm2dETt276yvK4vP9oyXVPSQyaMCjjP5YPMCq9PNgIlJQ==
+  dependencies:
+    purgecss "^1.4.0"
+    webpack-sources "^1.4.3"
+
+purgecss@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/purgecss/-/purgecss-1.4.0.tgz#79905624ec1c6c8e1f03044bca92dd8a598ba429"
+  integrity sha512-or7/16i7O6DH+NpXqY8NCcWCc940O6PxOgjWAcMTElzgccKOJua1/n6JVtM8UYqoMMWoCyKk+CbLpo4+4mY3BQ==
+  dependencies:
+    glob "^7.1.3"
+    postcss "^7.0.14"
+    postcss-selector-parser "^6.0.0"
+    yargs "^14.0.0"
+
 q-i@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/q-i/-/q-i-2.0.1.tgz#fec7e3f0e713f3467358bb5ac80bcc4c115187d6"
@@ -12326,6 +12365,13 @@ util@0.10.3:
   dependencies:
     inherits "2.0.1"
 
+util@^0.10.3:
+  version "0.10.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.10.4.tgz#3aa0125bfe668a4672de58857d3ace27ecb76901"
+  integrity sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==
+  dependencies:
+    inherits "2.0.3"
+
 util@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"
@@ -12776,7 +12822,7 @@ webpack-merge@^4.0.0, webpack-merge@^4.2.1:
   dependencies:
     lodash "^4.17.15"
 
-webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1:
+webpack-sources@^1.1.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933"
   integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ==
@@ -13171,6 +13217,14 @@ yargs-parser@^13.1.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^15.0.0:
+  version "15.0.0"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-15.0.0.tgz#cdd7a97490ec836195f59f3f4dbe5ea9e8f75f08"
+  integrity sha512-xLTUnCMc4JhxrPEPUYD5IBR1mWCK/aT6+RJ/K29JY2y1vD+FhtgKK0AXRWvI262q3QSffAQuTouFIKUuHX89wQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-parser@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-5.0.0.tgz#275ecf0d7ffe05c77e64e7c86e4cd94bf0e1228a"
@@ -13269,6 +13323,23 @@ yargs@^13.0.0, yargs@^13.2.2:
     y18n "^4.0.0"
     yargs-parser "^13.1.1"
 
+yargs@^14.0.0:
+  version "14.2.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-14.2.0.tgz#f116a9242c4ed8668790b40759b4906c276e76c3"
+  integrity sha512-/is78VKbKs70bVZH7w4YaZea6xcJWOAwkhbR0CFuZBmYtfTYF0xjGJF43AYd8g2Uii1yJwmS5GR2vBmrc32sbg==
+  dependencies:
+    cliui "^5.0.0"
+    decamelize "^1.2.0"
+    find-up "^3.0.0"
+    get-caller-file "^2.0.1"
+    require-directory "^2.1.1"
+    require-main-filename "^2.0.0"
+    set-blocking "^2.0.0"
+    string-width "^3.0.0"
+    which-module "^2.0.0"
+    y18n "^4.0.0"
+    yargs-parser "^15.0.0"
+
 yargs@^7.0.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-7.1.0.tgz#6ba318eb16961727f5d284f8ea003e8d6154d0c8"
@@ -13307,6 +13378,13 @@ yargs@^8.0.2:
     y18n "^3.2.1"
     yargs-parser "^7.0.0"
 
+yargs@~1.2.6:
+  version "1.2.6"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-1.2.6.tgz#9c7b4a82fd5d595b2bf17ab6dcc43135432fe34b"
+  integrity sha1-nHtKgv1dWVsr8Xq23MQxNUMv40s=
+  dependencies:
+    minimist "^0.1.0"
+
 yargs@~3.10.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"