feat(frontend): add footer with version number

.dockerignore

@@ -3,3 +3,5 @@ dist/
 
 frontend/node_modules/
 frontend/src/tailwind/tailwind.generated.css
+
+charts/

Dockerfile

@@ -33,6 +33,8 @@ RUN NODE_ENV=production npm run build
 FROM common as build-frontend
 LABEL stage="build-frontend"
 
+ARG VERSION=unknown
+
 WORKDIR /app/frontend
 
 RUN npm ci
@@ -41,6 +43,7 @@ COPY frontend/postcss.config.js /app/frontend/postcss.config.js
 COPY frontend/tailwind.config.js /app/frontend/tailwind.config.js
 COPY frontend/src/ /app/frontend/src/
 COPY frontend/public/ /app/frontend/public/
+COPY frontend/.env.production /app/frontend/.env.production
 RUN NODE_ENV=production npm run build
 
 ##################

frontend/.env.production

@@ -0,0 +1 @@
+REACT_APP_VERSION=$VERSION

frontend/src/App.tsx

@@ -1,5 +1,6 @@
 import React from "react";
 import { Route, Switch } from "react-router-dom";
+import { Footer } from "./components/Footer";
 import { LoginFailure } from "./components/LoginFailure";
 import { LoginSuccess } from "./components/LoginSuccess";
 import { NavBar } from "./components/NavBar";
@@ -19,20 +20,29 @@ export function App() {
   }
 
   return (
-    <div className="App">
+    <div className="flex flex-col h-screen justify-between">
       <header>
         <NavBar />
       </header>
-      <Switch>
+      <main className="mb-auto" /* mb-auto is for sticky footer */>
-        <Route path="/" exact />
+        <Switch>
-        <Route path="/login/success" exact component={LoginSuccess} />
+          <Route path="/" exact />
-        <Route path="/login/failure" exact component={LoginFailure} />
+          <Route path="/login/success" exact component={LoginSuccess} />
-        <Route path="/listens" exact component={RecentListens} />
+          <Route path="/login/failure" exact component={LoginFailure} />
-        <Route path="/reports/listens" exact component={ReportListens} />
+          <Route path="/listens" exact component={RecentListens} />
-        <Route path="/reports/top-artists" exact component={ReportTopArtists} />
+          <Route path="/reports/listens" exact component={ReportListens} />
-        <Route path="/reports/top-albums" exact component={ReportTopAlbums} />
+          <Route
-        <Route path="/reports/top-tracks" exact component={ReportTopTracks} />
+            path="/reports/top-artists"
-      </Switch>
+            exact
+            component={ReportTopArtists}
+          />
+          <Route path="/reports/top-albums" exact component={ReportTopAlbums} />
+          <Route path="/reports/top-tracks" exact component={ReportTopTracks} />
+        </Switch>
+      </main>
+      <footer>
+        <Footer />
+      </footer>
     </div>
   );
 }

frontend/src/components/Footer.tsx

@@ -0,0 +1,33 @@
+import React from "react";
+
+const REPO_URL = "https://github.com/apricote/Listory";
+const CHANGELOG_URL = `${REPO_URL}/blob/master/CHANGELOG.md`;
+
+const VERSION = process.env.REACT_APP_VERSION || "Unknown";
+
+export const Footer: React.FC = () => {
+  return (
+    <div className="flex items-center justify-between flex-wrap bg-green-500 p-4 text-green-200 hover:text-white text-xs">
+      <div>
+        <a
+          href={CHANGELOG_URL}
+          target="_blank"
+          rel="noreferrer"
+          title="Listory Changelog"
+        >
+          v{VERSION}
+        </a>{" "}
+      </div>
+      <div>
+        <a
+          href={REPO_URL}
+          target="_blank"
+          rel="noreferrer"
+          title="Listory GitHub Repository"
+        >
+          Check out on GitHub
+        </a>
+      </div>
+    </div>
+  );
+};

frontend/src/components/NavBar.tsx

@@ -8,11 +8,11 @@ export const NavBar: React.FC = () => {
   const { user, loginWithSpotifyProps } = useAuth();
 
   return (
-    <nav className="flex items-center justify-between flex-wrap bg-green-500 p-6">
+    <div className="flex items-center justify-between flex-wrap bg-green-500 p-6">
       <div className="flex items-center flex-shrink-0 text-white mr-6">
         <span className="font-semibold text-xl tracking-tight">Listory</span>
       </div>
-      <div className="w-full block flex-grow lg:flex lg:items-center lg:w-auto ">
+      <nav className="w-full block flex-grow lg:flex lg:items-center lg:w-auto ">
         <div className="text-sm lg:flex-grow">
           {user && (
             <>
@@ -48,8 +48,8 @@ export const NavBar: React.FC = () => {
           )}
           {user && <NavUserInfo user={user} />}
         </div>
-      </div>
+      </nav>
-    </nav>
+    </div>
   );
 };
 

frontend/src/components/NavItem.tsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export const NavItem: React.FC = ({ children }) => {
-  return <li>{children}</li>;
-};