feat: new footer, close #486

.eslintrc

@@ -26,6 +26,9 @@
     "es6": true,
     "jest": true
   },
+  "globals": {
+    "__APP_VERSION__": true
+  },
   "rules": {
     "no-tabs": 0,
     "keyword-spacing": 0,

src/webui/src/components/Footer/footer.scss

@@ -0,0 +1,41 @@
+@import '../../styles/variable';
+
+.wrap {
+  margin-top: auto;
+  border-top: 1px solid $border-color;
+  background: #f9f9f9;
+}
+footer.footer {
+  display: flex;
+  margin-top: 0;
+  padding: 20px 0;
+  font-size: 14px;
+  line-height: 18px;
+  height: 18px;
+  color: #999;
+
+  span {
+    display: inline-block;
+    height: 18px;
+    vertical-align: middle;
+  }
+
+  :global {
+    .emoji {
+      width: 18px;
+      height: 18px;
+    }
+    [data-type="flags"] .emoji {
+      margin-left: 8px;
+    }
+  }
+
+  .right {
+    margin-left: auto;
+  }
+  .logo {
+    vertical-align: top;
+    height: 18px;
+    width: 20px;
+  }
+}

src/webui/src/components/Footer/index.js

@@ -0,0 +1,44 @@
+import React from 'react';
+
+import classes from './footer.scss';
+import logo from './logo.svg';
+
+export default class Footer extends React.Component {
+  componentDidMount() {
+    // Scripts inserted at top of `template/index.html`
+    if (typeof window.twemoji === 'object' && typeof window.twemoji.parse === 'function') {
+      window.twemoji.parse(document.getElementById('global-footer'), {
+        // JSDeliver is the fattest open source cdn in all region, see https://www.jsdelivr.com/network
+        base: 'https://cdn.jsdelivr.net/npm/twemoji@2.5.0/2/',
+        ext: '.svg',
+        size: 'svg'
+      });
+    }
+  }
+
+  render() {
+    return (
+      <div className={classes.wrap}>
+        <footer id="global-footer" className={`container ${classes.footer}`}>
+          <span>Made with&nbsp;</span>
+          <span>❤</span>
+          <span>&nbsp;in</span>
+          <span data-type="flags" title="Brazil">🇧🇷</span>
+          <span data-type="flags" title="China">🇨🇳</span>
+          <span data-type="flags" title="India">🇮🇳</span>
+          <span data-type="flags" title="Nicaragua">🇳🇮</span>
+          <span data-type="flags" title="Pakistan">🇵🇰</span>
+          <span data-type="flags" title="Spain">🇪🇸</span>
+          {/* Countries are order by alphabets */}
+
+          <div className={classes.right}>
+            Powered by&nbsp;
+            <img className={classes.logo} src={logo} alt="Verdaccio" title="Verdaccio"/>
+            &nbsp;/&nbsp;
+            {__APP_VERSION__}
+            </div>
+        </footer>
+      </div>
+    );
+  }
+}

src/webui/src/components/Footer/logo.svg

@@ -0,0 +1 @@
+<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path d="M48 17.6L32.8 48H24L.4.8h15.2l12.8 25.6 4.4-8.8H48z" id="a"/><filter id="b" filterUnits="objectBoundingBox" height="140.3%" width="139.9%" y="-11.7%" x="-20%"><feGaussianBlur stdDeviation="2.5"/></filter><path d="M50.8 12H35.6L41.2.8h15.2L50.8 12z" id="c"/><filter id="d" filterUnits="objectBoundingBox" height="269.6%" width="191.3%" y="-49.1%" x="-45.7%"><feGaussianBlur stdDeviation="2.5"/></filter><path d="M32.8 48H24L.4.8h15.2l20.377 40.89L32.8 48z" id="e"/></defs><path fill="none" d="M-1-1h582v402H-1z"/><g><g stroke="null" fill-rule="evenodd" fill="none"><use transform="matrix(1.71429 0 0 1.71429 -37.027 -40.362)" x="22.366" y="28.311" xlink:href="#a" filter="url(#b)" fill="#000"/><use transform="matrix(1.71429 0 0 1.71429 -37.027 -40.362)" x="22.366" y="28.311" xlink:href="#a" fill="#405236"/><path stroke="#405236" d="M80.27 40.4H58.816L50 58.028 26.785 11.6H5.33l38.4 76.8h12.542l24-48z" stroke-width="2.4"/><use transform="matrix(1.71429 0 0 1.71429 -37.027 -40.362)" x="22.366" y="28.311" xlink:href="#c" filter="url(#d)" fill="#000"/><use transform="matrix(1.71429 0 0 1.71429 -37.027 -40.362)" x="22.366" y="28.311" xlink:href="#c" fill="#CD4000"/><path stroke="#CD4000" d="M87.128 26.686L94.671 11.6H73.215l-7.543 15.086h21.456z" stroke-width="2.4"/><g><use transform="matrix(1.71429 0 0 1.71429 -37.027 -40.362)" x="22.366" y="28.311" xlink:href="#e" fill="#4A5E3F"/><path stroke="#405236" d="M56.274 88.4l4.415-8.763L26.783 11.6H5.33l38.4 76.8h12.547-.002z" stroke-width="2.4"/></g><path stroke="#CD4000" stroke-linecap="square" stroke-width="2.4" d="M65.771 11.6h26.094m-32.95 6.857h26.092m-32.95 8.229H78.15"/></g></g></svg>

src/webui/src/components/PackageList/packageList.scss

@@ -5,6 +5,10 @@
   li {
     border-bottom: 1px solid #e4e8f1;
     list-style: none;
+
+    &:last-child {
+      border-bottom: none;
+    }
   }
 
   .listTitle {

src/webui/src/router.js

@@ -4,11 +4,12 @@ import {HashRouter as Router, Route, Switch} from 'react-router-dom';
 import Header from './components/Header';
 import Home from './modules/home';
 import Detail from './modules/detail';
+import Footer from './components/Footer';
 
 const RouterApp = () => {
   return (
     <Router>
-      <div>
+      <div className="page-full-height">
         <Header/>
         <div className="container">
           <Switch>
@@ -17,6 +18,7 @@ const RouterApp = () => {
             <Route exact path="/detail/:package" component={Detail} />
           </Switch>
         </div>
+        <Footer/>
       </div>
     </Router>
   );

src/webui/src/styles/global.scss

@@ -22,4 +22,10 @@ ul {
       margin-top: 0 !important;
     }
   }
+
+  .page-full-height {
+    display: flex;
+    flex-direction: column;
+    min-height: 100vh;
+  }
 }

src/webui/template/index.html

@@ -8,6 +8,7 @@
     <script>
         window.VERDACCIO_API_URL = '<%= htmlWebpackPlugin.options.verdaccioURL %>/-/verdaccio/';
     </script>
+    <script src="https://cdn.jsdelivr.net/npm/twemoji@2.5.0/2/twemoji.min.js"></script>
 </head>
 <body class="body">
     <div id="root"></div>

tools/getPackageVersion.js

@@ -0,0 +1,9 @@
+import fs from 'fs';
+import path from 'path';
+
+export default function getPackageVersion() {
+  let packageJSON = JSON.parse(fs.readFileSync(path.join(__dirname, '../package.json')));
+
+  return packageJSON.version;
+}
+

tools/webpack.config.js

@@ -41,7 +41,7 @@ module.exports = {
         use: 'babel-loader',
       },
       {
-        test: /\.(jpe?g|png|gif|svg)$/,
+        test: /\.(jpe?g|png|gif)$/,
         use: 'file-loader?name=[name].[ext]',
       },
       {

tools/webpack.dev.config.babel.js

@@ -4,6 +4,7 @@ import FriendlyErrorsPlugin from 'friendly-errors-webpack-plugin';
 import baseConfig from './webpack.config';
 import env from '../src/config/env';
 import StyleLintPlugin from 'stylelint-webpack-plugin';
+import getPackageVersion from './getPackageVersion';
 
 export default {
   ...baseConfig,
@@ -25,6 +26,7 @@ export default {
     new webpack.DefinePlugin({
       '__DEBUG__': true,
       'process.env.NODE_ENV': '"development"',
+      '__APP_VERSION__': `"${getPackageVersion()}"`,
     }),
     new HTMLWebpackPlugin({
       title: 'Verdaccio',

tools/webpack.prod.config.babel.js

@@ -5,6 +5,7 @@ const baseConfig = require('./webpack.config');
 const env = require('../src/config/env');
 const _ = require('lodash');
 const merge = require('webpack-merge');
+import getPackageVersion from './getPackageVersion';
 
 const prodConf = {
   entry: {
@@ -19,6 +20,7 @@ const prodConf = {
     new webpack.DefinePlugin({
       '__DEBUG__': false,
       'process.env.NODE_ENV': '"production"',
+      '__APP_VERSION__': `"${getPackageVersion()}"`,
     }),
     new webpack.optimize.UglifyJsPlugin({
       sourceMap: true,