🏷️Adds automatically generated version information

.gitignore

@@ -88,3 +88,6 @@ sw.*
 
 # Vim swap files
 *.swp
+
+# Postwoman build data
+.postwoman

assets/css/styles.scss

@@ -51,12 +51,14 @@ h3.title {
 
 header,
 footer {
+ & > div {
   display: flex;
   padding: 16px;
   width: 100%;
   align-items: center;
   justify-content: space-between;
  }
+}
 
 nav {
   a:not(:last-of-type) {
@@ -330,6 +332,10 @@ fieldset#history {
   text-align: left;
 }
 
+.align-center {
+ text-align: center;
+}
+
 .align-right {
   text-align: right;
 }

build.js

@@ -0,0 +1,40 @@
+const axios = require('axios');
+const fs = require('fs');
+const { spawnSync } = require('child_process');
+const runCommand = (command, args) => spawnSync(command, args).stdout.toString().replace(/\n/g, "");
+
+const FAIL_ON_ERROR = false;
+const PW_BUILD_DATA_DIR = "./.postwoman";
+const IS_DEV_MODE = process.argv.includes("--dev");
+
+try {
+
+	(async () => {
+		// Create the build data directory if it does not exist.
+		if (!fs.existsSync(PW_BUILD_DATA_DIR)) {
+			fs.mkdirSync(PW_BUILD_DATA_DIR);
+		}
+
+		let version = {};
+		// Get the current version name as the tag from Git.
+		version.name = runCommand('git', ['tag']);
+
+		// FALLBACK: If version.name was unset, let's grab it from GitHub.
+		if(!version.name){
+			version.name = (await axios.get("https://api.github.com/repos/liyasthomas/postwoman/releases")).data[0]['tag_name'];
+		}
+
+		// Get the current version hash as the short hash from Git.
+		version.hash = runCommand('git', ['rev-parse', '--short', 'HEAD']);
+		// Get the 'variant' name as the branch, if it's not master.
+		version.variant = (process.env.TRAVIS_BRANCH || runCommand('git', ['branch']).split("* ")[1].split(" ")[0] + (IS_DEV_MODE ? " - (DEV MODE)" : ""));
+		if(version.variant === "" || version.variant === "master") delete version.variant;
+
+		// Write version data into a file
+		fs.writeFileSync(PW_BUILD_DATA_DIR + "/version.json", JSON.stringify(version));
+	})();
+
+}catch(ex){
+	console.error(ex);
+	process.exit(FAIL_ON_ERROR ? 1 : 0);
+}

layouts/default.vue

@@ -1,6 +1,7 @@
 <template>
 	<div>
 		<header>
+			<div>
 				<div class="slide-in">
 					<nuxt-link to="/">
 						<h1 class="logo">
@@ -18,15 +19,27 @@
 						</svg>
 					</nuxt-link>
 				</nav>
+			</div>
 		</header>
 		<nuxt id="main" />
 		<footer>
+			<!-- Top section of footer: GitHub/install links -->
+			<div>
 				<div>
 					<a href="https://github.com/liyasthomas/postwoman" target="_blank"><img id="imgGitHub" src="~static/icons/github.svg" alt="" :style="logoStyle()">GitHub</a>
 				</div>
 				<button id="installPWA" @click.prevent="showInstallPrompt()">
 					Install PWA
 				</button>
+			</div>
+
+			<!-- Bottom section of footer: version/author information -->
+			<p class="align-center">
+				<span v-if="version.name">{{ version.name }}
+					<span v-if="version.hash">- {{ version.hash }}</span>
+					<span v-if="version.variant"> ({{ version.variant }})</span>
+					&#x2022; </span>by <a href="https://liyasthomas.web.app" target="_blank">Liyas Thomas 🦄</a>
+			</p>
 		</footer>
 	</div>
 </template>
@@ -55,6 +68,10 @@
 		max-width: 1200px;
 	}
 
+	footer {
+		margin: 40px auto;
+	}
+
 	nav {
 		svg {
 			vertical-align: sub;
@@ -111,10 +128,13 @@
 <script>
     import intializePwa from '../assets/js/pwa';
     import logo from "../components/logo";
+    import * as version from '../.postwoman/version.json';
+
     export default {
         components: {
             logo
         },
+
         data() {
             return {
                 // Once the PWA code is initialized, this holds a method
@@ -123,10 +143,16 @@
                 showInstallPrompt: null,
                 logoStyle() {
                     return "margin-right: 16px;" + (((this.$store.state.postwoman.settings.THEME_CLASS || '').includes("light")) ? " filter: invert(100%); -webkit-filter: invert(100%);" : '')
-         }
+                },
+
+								version: {}
             }
         },
+
         beforeMount() {
+            // Set version data
+						this.version = version.default;
+
             // Load theme settings
             (() => {
                 // Apply theme from settings.
@@ -139,6 +165,7 @@
                 document.documentElement.style.setProperty('--act-color', vibrant ? '#121212' : '#fff');
             })();
         },
+
         mounted() {
             // Initializes the PWA code - checks if the app is installed,
             // etc.

package.json

@@ -5,9 +5,14 @@
   "author": "liyasthomas",
   "private": true,
   "scripts": {
+		"predev": "node build.js --dev",
     "dev": "nuxt",
+
+		"prebuild": "node build.js",
     "build": "nuxt build",
     "start": "nuxt start",
+
+		"pregenerate": "node build.js",
     "generate": "nuxt generate"
   },
   "dependencies": {