general: Inject also date and link to release in the About page

src/components/About.vue

@@ -18,7 +18,14 @@
               </p>
             </div>
             <div class="w-[45%] flex flex-col justify-end text-end">
-              <p class="mb-1">Version {{ app_version }}</p>
+              <p class="mb-1">
+                Version
+                <a :href="app_version.link" target="_blank" class="text-primary hover:underline">
+                  {{ app_version.version }}
+                </a>
+                <br />
+                <span class="text-sm text-gray-500">Released: {{ app_version.date }}</span>
+              </p>
               <p class="my-3">Created by Blue Robotics</p>
               <p class="mt-1">Licensed under AGPL-3.0-only or LicenseRef-Cockpit-Custom</p>
             </div>

src/libs/cosmos.ts

@@ -172,6 +172,33 @@ Array.prototype.sum = function (this: number[]): number {
 }
 
 declare const __APP_VERSION__: string
-export const app_version = __APP_VERSION__
+declare const __APP_VERSION_DATE__: string
+declare const __APP_VERSION_LINK__: string
+
+/**
+ * Interface representing version information for the application
+ */
+export interface AppVersionInfo {
+  /**
+   * @property {string} version - The version number or commit hash of the application, or 'unknown' in last case.
+   * If the version is a tag prefixed with "v", it is stripped.
+   * If a tag is not found, the commit hash is used.
+   * If a commit hash is not found, 'unknown' is used.
+   */
+  version: string
+  /**
+   * @property {string} date - The release date for tags or commit date for commits
+   */
+  date: string
+  /**
+   * @property {string} link - URL to the GitHub release page for tags or commit page for commits
+   */
+  link: string
+}
+export const app_version: AppVersionInfo = {
+  version: __APP_VERSION__,
+  date: __APP_VERSION_DATE__,
+  link: __APP_VERSION_LINK__,
+}
 
 export default global!

src/libs/non-browser-utils.ts

@@ -1,27 +1,47 @@
 import { execSync } from 'child_process'
 
+import type { AppVersionInfo } from './cosmos'
+
 /**
- * Returns the version of the application.
- * Uses the git describe command to get the latest tag, or the commit hash if no tags exist.
- * Returns a fallback version 'unknown' if git commands fails.
- * @returns {string}
+ * Returns the version information of the application.
+ * Uses git commands to get the version (tag or commit), date, and link to GitHub.
+ * Returns fallback values if git commands fail.
+ * @returns {AppVersionInfo}
  */
-export function getVersion(): string {
+export function getVersion(): AppVersionInfo {
+  const repoUrl = 'https://github.com/bluerobotics/cockpit'
+  const fallback: AppVersionInfo = {
+    version: 'unknown',
+    date: 'unknown',
+    link: repoUrl,
+  }
+
   try {
     // Try to get the latest tag
     const tag = execSync('git describe --tags --abbrev=0', { encoding: 'utf8' }).trim()
-    if (tag.startsWith('v')) {
-      return tag.substring(1)
+    if (tag) {
+      // Get the tag date
+      const date = execSync(`git log -1 --format=%ai ${tag}`, { encoding: 'utf8' }).trim()
+      return {
+        version: tag.startsWith('v') ? tag.substring(1) : tag,
+        date: date.split(' ')[0], // Get just the date part
+        link: `${repoUrl}/releases/tag/${tag}`,
+      }
     }
-    return tag
   } catch {
     try {
       // If no tags exist, get the commit hash
       const commitHash = execSync('git rev-parse HEAD', { encoding: 'utf8' }).trim()
-      return commitHash.substring(0, 8)
+      const date = execSync('git show -s --format=%ai HEAD', { encoding: 'utf8' }).trim()
+      return {
+        version: commitHash.substring(0, 8),
+        date: date.split(' ')[0], // Get just the date part
+        link: `${repoUrl}/commit/${commitHash}`,
+      }
     } catch {
-      // If git commands fail, return a fallback version
-      return 'unknown'
+      // If git commands fail, return fallback values
+      return fallback
     }
   }
+  return fallback
 }

vite.config.ts

@@ -44,7 +44,9 @@ export default defineConfig({
   ].filter(Boolean),
   define: {
     'process.env': {},
-    '__APP_VERSION__': JSON.stringify(getVersion()),
+    '__APP_VERSION__': JSON.stringify(getVersion().version),
+    '__APP_VERSION_DATE__': JSON.stringify(getVersion().date),
+    '__APP_VERSION_LINK__': JSON.stringify(getVersion().link),
   },
   resolve: {
     alias: {