Add proper About page

src/App.vue

@@ -3,21 +3,28 @@ import { RouterLink, RouterView } from 'vue-router'
 </script>
 
 <template>
-  <header>
-    <router-link to="/">
-      <img src="/nwslogo.gif" width="38" height="38" />
-      <h5 class="is-size-5 has-text-weight-bold">Weather</h5>
-    </router-link>
+  <div class="page-wrapper">
+    <header>
+      <router-link to="/">
+        <img src="/nwslogo.gif" width="38" height="38" />
+        <h5 class="is-size-5 has-text-weight-bold">Weather</h5>
+      </router-link>
+    </header>
 
-  </header>
-
-  <div style="padding: 0.5rem;">
-    <router-view v-slot="{Component}">
-      <keep-alive>
-        <component :is="Component" />
-      </keep-alive>
-    </router-view>
+    <div style="padding: 0.5rem;">
+      <router-view v-slot="{Component}">
+        <keep-alive>
+          <component :is="Component" />
+        </keep-alive>
+      </router-view>
+    </div>
   </div>
+
+  <footer class="footer">
+    <div class="content">
+      <router-link to="/about">About this app</router-link>
+    </div>
+  </footer>
 </template>
 
 <style scoped>

src/appsettings.js

@@ -0,0 +1,10 @@
+
+import packageData from '../package.json'
+
+const appsettings = {
+    appTitle: packageData.name,
+    appVersion: packageData.version,
+    appDependencies: packageData.dependencies,
+}
+
+export default appsettings

src/assets/main.scss

@@ -1 +1,15 @@
 @import './custom.scss';
+
+
+/* nb. these are here to force footer to bottom of screen */
+
+html, body {
+    height: 100%;
+}
+
+#app {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}

src/views/AboutView.vue

@@ -1,15 +1,67 @@
+<script setup>
+import appsettings from '../appsettings'
+</script>
+
+<script>
+export default {
+
+    data() {
+        return {
+            appsettings,
+        }
+    },
+}
+</script>
+
 <template>
   <div class="about">
-    <h1>This is an about page</h1>
+    <h4 class="is-size-4">{{ appsettings.appTitle }} {{ appsettings.appVersion }}</h4>
+
+    <br />
+
+    <p class="block">
+      This app was built in rather a hurry, to replace my personal
+      usage of the original
+      <a href="https://mobile.weather.gov" target="_blank">
+        <span class="icon-text">
+          <o-icon icon="external-link" />
+          <span>mobile.weather.gov</span>
+        </span>
+      </a>
+      site which was being decommissioned.&nbsp;
+      (See also
+      <a href="https://www.weather.gov/media/notification/pdf_2023_24/scn24-51_mobile_decommissioning.pdf" target="_blank">
+        <span class="icon-text">
+          <o-icon icon="external-link" />
+          <span>this statement</span>
+        </span>
+      </a>.)
+    </p>
+
+    <p class="block">
+      Source code is not currently browseable online but you can get it with:
+    </p>
+
+    <p class="block is-family-monospace"
+       style="padding-left: 4rem;">
+      git clone https://git.edbob.org/readonly/myweather.git
+    </p>
+
+    <p class="block">
+      This app is primarily for personal use, but if you also find it useful and
+      have suggestions, email me at <a href="mailto:lance@edbob.org">lance@edbob.org</a>
+    </p>
+
+    <br />
+
+    <o-field label="Dependencies">
+      <ul>
+        <li v-for="(ver, pkg, i) in appsettings.appDependencies"
+            :key="pkg">
+          {{ pkg }} {{ ver }}
+        </li>
+      </ul>
+    </o-field>
+
   </div>
 </template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>