Inject build informations in frontend

client/src/components/app.tsx

@@ -5,6 +5,7 @@ import Home from "../routes/home/index";
 import Project from "../routes/project/index";
 import NotFoundPage from '../routes/notfound/index';
 import Header from "./header/index";
+import Footer from "./footer";
 
 const App: FunctionalComponent = () => {
     let currentUrl: string;
@@ -13,14 +14,15 @@ const App: FunctionalComponent = () => {
     };
 
     return (
-        <div id="app">
+      <div id="app">
-            <Header class="noPrint" />
+        <Header class="noPrint" />
-            <Router onChange={handleRoute}>
+        <Router onChange={handleRoute}>
-                <Route path="/" component={Home} />
+          <Route path="/" component={Home} />
-                <Route path="/p/:projectId" component={Project} />
+          <Route path="/p/:projectId" component={Project} />
-                <NotFoundPage default />
+          <NotFoundPage default />
-            </Router>
+        </Router>
-        </div>
+        <Footer />
+      </div>
     );
 };
 

client/src/components/footer/index.tsx

@@ -0,0 +1,30 @@
+import { FunctionalComponent, h } from "preact";
+import style from "./style.module.css";
+
+declare var __BUILD__: any;
+
+export interface FooterProps {
+  class?: string
+}
+
+const Footer: FunctionalComponent<FooterProps> = ({ ...props}) => {
+  console.log(__BUILD__)
+  return (
+    <div class={`container ${style.footer} ${props.class ? props.class : ''}`}>
+      <div class="columns">
+        <div class="column is-4 is-offset-8">
+          <p class="has-text-right is-size-7">
+            Propulsé par <a class="has-text-primary" href="https://forge.cadoles.com/wpetit/guesstimate">Guesstimate</a> et publié sous licence <a class="has-text-primary" href="https://www.gnu.org/licenses/agpl-3.0.txt">AGPL-3.0</a>.
+          </p>
+          <p class="has-text-right is-size-7">
+            Version: {__BUILD__.version} - 
+            Réf.: {__BUILD__.gitRef ? __BUILD__.gitRef : '??'} - 
+            Date de construction: {__BUILD__.buildDate ? __BUILD__.buildDate : '??'}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

client/src/components/footer/style.module.css

@@ -0,0 +1,3 @@
+.footer {
+    display: inherit;
+}

client/src/components/footer/style.module.css.d.ts

@@ -0,0 +1,12 @@
+declare namespace StyleModuleCssModule {
+  export interface IStyleModuleCss {
+    footer: string;
+  }
+}
+
+declare const StyleModuleCssModule: StyleModuleCssModule.IStyleModuleCss & {
+  /** WARNING: Only available when `css-loader` is used without `style-loader` or `mini-css-extract-plugin` */
+  locals: StyleModuleCssModule.IStyleModuleCss;
+};
+
+export = StyleModuleCssModule;

client/webpack.config.js

@@ -4,6 +4,7 @@ const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const webpack = require('webpack');
 const path = require('path');
 const env = process.env;
+const exec = require('child_process').execSync;
 
 module.exports = {
   mode: `${env.NODE_ENV ? env.NODE_ENV : 'production'}`,
@@ -73,5 +74,24 @@ module.exports = {
     new MiniCssExtractPlugin({
       filename: '[name].[hash].css'
     }),
+    new webpack.DefinePlugin({
+      __BUILD__: JSON.stringify({
+        version: getCurrentVersion(),
+        gitRef: getCurrentGitRef(),
+        buildDate: new Date(),
+      })
+   })
   ]
-};
+};
+
+function getCurrentVersion() {
+  let version 
+  try {
+    version = exec("git describe --abbrev=0 2>/dev/null")
+  } catch(err) {}
+  return version ? version : "0.0.0";
+}
+
+function getCurrentGitRef() {
+  return exec("git log -n 1 --pretty='format:%h'").toString()
+}