add version to name in header

components/AppLayout.js

@@ -1,6 +1,6 @@
 import React, { Fragment as F } from 'react'
 
-const AppLayout = ({ menu, children }) => {
+const AppLayout = ({ version, menu, children }) => {
   return (
     <div className="app">
       {false && (
@@ -40,6 +40,17 @@ const AppLayout = ({ menu, children }) => {
             <div className="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
               <h1 className="h3">
                 <b>audioplotter</b>
+                {!!version && (
+                  <>
+                    {' '}
+                    <small
+                      className="ui-version text-muted font-monospace"
+                      style={{ verticalAlign: 'super', fontSize: '0.75rem', letterSpacing: '-0.05em' }}
+                    >
+                      {version}
+                    </small>
+                  </>
+                )}
               </h1>
 
               {menu && <div className="btn-toolbar mb-2 mb-md-0">{menu}</div>}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "audioplotter",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "private": true,
   "homepage": "https://audioplotter.ars.is",
   "repository": "https://github.com/eins78/audioplotter",

pages/index.js

@@ -1,8 +1,33 @@
 import React, { useState, useEffect, useRef } from 'react'
-import pkg from '../package.json'
+import packageJson from '../package.json'
 import AppLayout from '../components/AppLayout'
 import AudioPlotter from '../components/AudioPlotter'
-const SOURCE_URL = pkg['repository']
+// const SOURCE_URL = pkg.repository
+const isDev = process.env.NODE_ENV === 'development'
+
+const { version: PKG_VERSION, repository: SOURCE_URL } = packageJson
+
+const version = isDev ? 'dev' : `v${PKG_VERSION}`
+
+export async function getStaticProps(context) {
+  return {
+    props: {
+      // TODO: get from git (childprocess_exec)
+      gitTreeIdShort: 'd2ba02a',
+    }, // will be passed to the page component as props
+  }
+}
+
+export default function Home() {
+  const [isClient, setIsClient] = useState(false)
+  useEffect(() => setIsClient(true), [])
+
+  return (
+    <AppLayout version={version} menu={menu}>
+      {isClient && <AudioPlotter />}
+    </AppLayout>
+  )
+}
 
 const menu = (
   <div className="btn-group btn-group-sm me-2">
@@ -14,10 +39,3 @@ const menu = (
     </a>
   </div>
 )
-
-export default function Home() {
-  const [isClient, setIsClient] = useState(false)
-  useEffect(() => setIsClient(true), [])
-
-  return <AppLayout menu={menu}>{isClient && <AudioPlotter />}</AppLayout>
-}