Merge pull request #347 from synyx/home-improvements

Show build info on home page

.eslintrc

@@ -13,6 +13,9 @@
     "plugin:jest/recommended",
     "plugin:prettier/recommended"
   ],
+  "globals": {
+    "process": true
+  },
   "plugins": ["jest", "prettier"],
   "rules": {
     "max-len": ["error", 80],

rollup.config.mjs

@@ -28,6 +28,8 @@ export default [
         preventAssignment: true,
         /* workaround for missing env variable  */
         "process.env.NODE_ENV": JSON.stringify("production"),
+        "process.env.APP_VERSION": JSON.stringify(pkg.version),
+        "process.env.BUILD_DATE": JSON.stringify(new Date().toISOString()),
       }),
       babel({ exclude: "node_modules/**", babelHelpers: "bundled" }),
     ],

src/css/tales.css

@@ -341,6 +341,7 @@ label.range input {
   flex-direction: column;
   width: 40rem;
   max-width: 90%;
+  min-height: 100vh;
   margin: 0 auto;
 }
 
@@ -456,6 +457,14 @@ label.range input {
   flex: 1 1 auto;
 }
 
+#home footer {
+  margin-top: auto;
+  padding: 1rem 0;
+  text-align: center;
+  font-size: var(--font-size-small);
+  font-style: italic;
+}
+
 #editor {
   display: flex;
   height: 100%;

src/js/editor/index.js

@@ -10,7 +10,7 @@ import { uploader } from "./upload";
 import { slideBounds } from "./slide-bounds";
 import { settings } from "../settings";
 import { normalizeRect } from "../util/geometry";
-import i18n from "../i18n";
+import { i18n } from "../i18n";
 
 /**
  * The speed in which the editor zoom level changes when the user zooms in/out.

src/js/editor/preview.js

@@ -2,7 +2,7 @@ import { connect, trigger, withInputSignals } from "flyps";
 import { h } from "flyps-dom-snabbdom";
 import { intersectRects, padRect } from "../util/geometry";
 import * as previewMove from "./preview-move";
-import i18n from "../i18n";
+import { i18n } from "../i18n";
 
 export function previewRect(
   rect,

src/js/editor/upload.js

@@ -1,6 +1,6 @@
 import { signal, trigger } from "flyps";
 import { h } from "flyps-dom-snabbdom";
-import i18n from "../i18n";
+import { i18n } from "../i18n";
 
 let dropTarget = signal();
 

src/js/i18n/de.json

@@ -1,5 +1,6 @@
 {
   "home.tale-name-prompt": "Gib einen Namen für deine Geschichte ein",
+  "home.build-info": "Version %{version} (%{buildDate})",
 
   "editor.unwritten-tale": "Eine ungeschriebene Geschichte…",
   "editor.tell": "Erzählen",

src/js/i18n/en.json

@@ -1,5 +1,6 @@
 {
   "home.tale-name-prompt": "Enter the name of your tale",
+  "home.build-info": "Version %{version} (%{buildDate})",
 
   "editor.unwritten-tale": "An unwritten tale…",
   "editor.tell": "Tell",

src/js/i18n/index.js

@@ -19,4 +19,9 @@ const polyglot = new Polyglot({
 });
 
 export const i18n = (...args) => polyglot.t(...args);
-export default i18n;
+
+export const dateFormatter = new Intl.DateTimeFormat(language, {
+  year: "numeric",
+  month: "2-digit",
+  day: "2-digit",
+});

src/js/index.js

@@ -21,7 +21,7 @@ import "./slide";
 import { editor } from "./editor/index";
 import { presenter } from "./presenter/index";
 import * as router from "./router";
-import i18n from "./i18n/index";
+import { i18n, dateFormatter } from "./i18n/index";
 import { arrowRight } from "./icons";
 
 handler(
@@ -97,6 +97,17 @@ let taleList = withInputSignals(
   tales => h("ul.tale-list", tales.map(taleItem)),
 );
 
+connector("app/version", () => process.env.APP_VERSION || "dev");
+connector("app/build-date", () =>
+  dateFormatter.format(new Date(process.env.BUILD_DATE)),
+);
+
+let footer = () => {
+  const version = connect("app/version").value();
+  const buildDate = connect("app/build-date").value();
+  return h("footer", i18n("home.build-info", { version, buildDate }));
+};
+
 let home = () => {
   let onKeydown = e => {
     switch (e.which) {
@@ -139,8 +150,8 @@ let home = () => {
         arrowRight(),
       ),
     ]),
-
     taleList(),
+    footer(),
   ]);
 };
 

src/js/presenter/index.js

@@ -1,7 +1,7 @@
 import { h } from "flyps-dom-snabbdom";
 
 import { viewport } from "../viewport";
-import i18n from "../i18n";
+import { i18n } from "../i18n";
 
 const notFound = () => h("div", i18n("editor.unwritten-tale"));
 

src/js/settings/export.js

@@ -1,6 +1,6 @@
 import { h } from "flyps-dom-snabbdom";
 import { connect, trigger, withInputSignals } from "flyps";
-import i18n from "../i18n";
+import { i18n } from "../i18n";
 
 /**
  * Export of a Tale as self-contained HTML file.

src/js/settings/index.js

@@ -13,7 +13,7 @@ import "../util/effects";
 import { posterDimSetting } from "./poster";
 import { themeSetting } from "./theme";
 import { transitionSettings } from "./transition";
-import i18n from "../i18n";
+import { i18n } from "../i18n";
 import { exportSettings } from "./export";
 
 const DEFAULT_SETTINGS = {

src/js/settings/poster.js

@@ -7,7 +7,7 @@ import {
   trigger,
   withInputSignals,
 } from "flyps";
-import i18n from "../i18n";
+import { i18n } from "../i18n";
 
 /**
  * Settings for the poster in the editor.

src/js/settings/theme.js

@@ -7,7 +7,7 @@ import {
   trigger,
   withInputSignals,
 } from "flyps";
-import i18n from "../i18n";
+import { i18n } from "../i18n";
 
 /**
  * The application UI theme (light/dark).

src/js/settings/transition.js

@@ -3,7 +3,7 @@ import { connect, handler, signal, trigger, withInputSignals } from "flyps";
 import { easingAnimator } from "../animation";
 import { vec3 } from "gl-matrix";
 import { DEFAULT_SLIDE_TRANSITION_DURATION } from "../config";
-import i18n from "../i18n";
+import { i18n } from "../i18n";
 
 /**
  * Possible values (in ms) for transition duration setting.