Feature: Add Version Tag to Footer

This currently uses an environment variable (`VITE_DOCAT_VERSION`) to display either the tag (if clean) or the last tag + the number of commits since + the current hash (if dirty) in the Footer.

Also added the Footer to the Help page.

Fixes: #427

.github/workflows/docat.yml

@@ -81,7 +81,7 @@ jobs:
       - uses: actions/checkout@v4
       - name: Build Image
         run: |
-          docker build . --tag ${{ matrix.registry.name }}/${{ matrix.registry.org }}/docat:${{ github.sha }}
+          docker build . --build-arg DOCAT_VERSION=$(git describe --tags --always) --tag ${{ matrix.registry.name }}/${{ matrix.registry.org }}/docat:${{ github.sha }}
           docker tag ${{ matrix.registry.name }}/${{ matrix.registry.org }}/docat:${{ github.sha }} ${{ matrix.registry.name }}/${{ matrix.registry.org }}/docat:unstable
 
       - name: tag latest and version on release

Dockerfile

@@ -8,6 +8,12 @@ RUN yarn install --frozen-lockfile
 # fix docker not following symlinks
 COPY web ./
 COPY doc/getting-started.md ./src/assets/
+
+RUN yarn install --frozen-lockfile
+
+ARG DOCAT_VERSION=unknown
+ENV VITE_DOCAT_VERSION=$DOCAT_VERSION
+
 RUN yarn build
 
 # setup Python

web/README.md

@@ -8,20 +8,24 @@ yarn install [--pure-lockfile]
 
 ### Compiles and hot-reloads for development
 
-Configure both the frontend port and the backend connection
-by setting them in `.env.development.local`.
-```sh
-PORT=8080
-BACKEND_HOST=127.0.0.1
-BACKEND_PORT=5000
-```
+The script for `yarn start` automatically sets `VITE_DOCAT_VERSION` to display the current version in the footer,
+so you can just run:
 
 ```sh
 yarn start
 ```
 
 ### Compiles and minifies for production
 
+To display the current version of docat in the footer, use the following script to set `VITE_DOCAT_VERSION`.
+This one liner uses the latest tag, if there is one on the current commit, and the current commit if not.
+
+```sh
+VITE_DOCAT_VERSION=$(git describe --tags --always) yarn build
+```
+
+Otherwise you can just use the following and the footer will show `unknown`.
+
 ```sh
 yarn build
 ```
@@ -65,4 +69,4 @@ try changing the permissions of your docs folder on your host.
 
 ```sh
 sudo chmod 777 /path/to/doc -r
-```
+```

web/package.json

@@ -32,7 +32,7 @@
     "web-vitals": "^3.1.1"
   },
   "scripts": {
-    "start": "vite",
+    "start": "VITE_DOCAT_VERSION=$(git describe --tags --always) vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "test": "vitest --watch=false",

web/src/components/Footer.tsx

@@ -8,6 +8,10 @@ export default function Footer (): JSX.Element {
       <Link to="/help" className={styles['help-link']}>
         Help
       </Link>
+
+      <div className={styles['version-info']}>
+        Docat Version <code>{import.meta.env.VITE_DOCAT_VERSION ?? 'unknown'}</code>
+      </div>
     </div>
   )
 }

web/src/pages/Help.tsx

@@ -6,6 +6,7 @@ import gettingStarted from './../assets/getting-started.md'
 
 import UploadButton from '../components/UploadButton'
 import Header from '../components/Header'
+import Footer from '../components/Footer'
 import LoadingPage from './LoadingPage'
 
 import styles from './../style/pages/Help.module.css'
@@ -62,6 +63,7 @@ export default function Help (): JSX.Element {
         {content}
       </ReactMarkdown>
       <UploadButton isSingleButton={true} />
+      <Footer />
     </>
   )
 }

web/src/style/components/Footer.module.css

@@ -10,3 +10,9 @@
     color: black;
     font-size: 15px;
 }
+
+.version-info {
+    font-size: 12px;
+    margin-top: 0.8em;
+    color: var(--primary-foreground);
+}

web/vite-env.d.ts

@@ -1 +1,9 @@
 /// <reference types="vite/client" />
+
+interface ImportMetaEnv {
+  readonly VITE_DOCAT_VERSION: string
+}
+
+interface ImportMeta {
+  readonly env: ImportMetaEnv
+}