feat: show app version in the interface footer

Author: Endika

package.json

@@ -1,6 +1,6 @@
 {
   "name": "influence-sensor",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/main.ts

@@ -19,10 +19,18 @@ function dropzone(): HTMLElement {
   return zone
 }
 
-async function handleFile(file: File): Promise<void> {
+function footer(): HTMLElement {
+  const f = document.createElement('footer')
+  f.className = 'app-footer'
+  f.innerHTML = `influence-sensor <span class="version">v${__APP_VERSION__}</span>`
+  return f
+}
+
+async function handleFile(file: File, results: HTMLElement): Promise<void> {
+  results.innerHTML = ''
   const status = document.createElement('p')
   status.textContent = 'Reading…'
-  app.appendChild(status)
+  results.appendChild(status)
   try {
     const zip = await JSZip.loadAsync(file)
     const adapter = detectAdapter(zip)
@@ -36,9 +44,6 @@ async function handleFile(file: File): Promise<void> {
       return
     }
     const report = analyze(data)
-    const results = document.createElement('div')
-    results.id = 'results'
-    app.appendChild(results)
     status.remove()
     renderReport(results, report)
   } catch {
@@ -49,11 +54,14 @@ async function handleFile(file: File): Promise<void> {
 function init(): void {
   app.innerHTML = ''
   const zone = dropzone()
-  app.appendChild(zone)
+  const results = document.createElement('div')
+  results.id = 'results'
+  app.append(zone, results, footer())
+
   const input = zone.querySelector<HTMLInputElement>('#file')!
   input.addEventListener('change', () => {
     const file = input.files?.[0]
-    if (file) void handleFile(file)
+    if (file) void handleFile(file, results)
   })
   const stop = (e: DragEvent) => {
     e.preventDefault()
@@ -62,7 +70,7 @@ function init(): void {
   zone.addEventListener('drop', (e) => {
     stop(e)
     const file = e.dataTransfer?.files?.[0]
-    if (file) void handleFile(file)
+    if (file) void handleFile(file, results)
   })
 }
 

src/style.css

@@ -17,6 +17,9 @@
 table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
 th, td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #eee; white-space: nowrap; }
 
+.app-footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid #eee; text-align: center; color: #999; font-size: 0.8rem; }
+.app-footer .version { color: #bbb; }
+
 @media (min-width: 560px) {
   #app { padding: 2rem 1rem; }
   .headline { font-size: 1.25rem; }

src/vite-env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+declare const __APP_VERSION__: string

vite.config.ts

@@ -1,8 +1,17 @@
 /// <reference types="vitest" />
 import { defineConfig } from 'vite'
+import { readFileSync } from 'node:fs'
+import { resolve } from 'node:path'
+
+const pkg = JSON.parse(readFileSync(resolve(__dirname, 'package.json'), 'utf8')) as {
+  version: string
+}
 
 export default defineConfig({
   base: '/influence-sensor/',
+  define: {
+    __APP_VERSION__: JSON.stringify(pkg.version),
+  },
   test: {
     globals: true,
     environment: 'node',