Merges pull request #17

Issue#162 Display version in About page and some refactoring

import_map.json

@@ -13,6 +13,7 @@
     "svelte": "npm:svelte@5.0.x",
     "flowbite": "npm:flowbite@2.2.x",
     "flowbite-svelte": "npm:flowbite-svelte@0.44.x",
-    "flowbite-svelte-icons": "npm:flowbite-svelte-icons@2.0.x"
+    "flowbite-svelte-icons": "npm:flowbite-svelte-icons@2.0.x",
+    "child_process": "node:child_process"
   }
 } 

src/lib/components/Login.svelte

@@ -50,7 +50,7 @@
     <Popover
       class='popover-leather w-fit'
       placement='bottom'
-      target='avatar'
+      triggeredBy='#avatar'
     >
       <div class='w-full flex space-x-2'>
         <Button

src/lib/components/util/Profile.svelte

@@ -46,10 +46,12 @@ function shortenNpub(long: string|undefined) {
       class='h-6 w-6 cursor-pointer'
       src={pfp}
       alt={username}
+      id="profile-avatar"
     />
     {#key username || tag}
       <Popover
-        target="avatar"
+        placement="bottom"
+        triggeredBy="#profile-avatar"
         class='popover-leather w-[180px]'
         trigger='hover'
       >

src/routes/about/+page.svelte

@@ -1,10 +1,19 @@
 <script lang='ts'>
   import { Heading, Img, P, A } from "flowbite-svelte";
+  
+  // Get the git tag version from environment variables
+  const appVersion = import.meta.env.APP_VERSION || 'development';
+  const isVersionKnown = appVersion !== 'development';
 </script>
 
 <div class='w-full flex justify-center'>
   <main class='main-leather flex flex-col space-y-6 max-w-2xl w-full my-6 px-4'>
-    <Heading tag='h1' class='h-leather text-left mb-4'>About the Library of Alexandria</Heading>
+    <div class="flex justify-between items-center">
+      <Heading tag='h1' class='h-leather mb-2'>About the Library of Alexandria</Heading>
+      {#if isVersionKnown}
+        <span class="text-sm bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded text-nowrap">Version: {appVersion}</span>
+      {/if}
+    </div>
     <Img src="/screenshots/old_books.jpg" alt="Alexandria icon" />
 
     <P class="mb-3">

vite.config.ts

@@ -1,5 +1,22 @@
 import { sveltekit } from "@sveltejs/kit/vite";
 import { defineConfig } from "vite";
+import { execSync } from "child_process";
+
+// Function to get the latest git tag
+function getAppVersionString() {
+  // if running in ci context, we can assume the package has been properly versioned
+  if (process.env.ALEXANDIRA_IS_CI_BUILD && process.env.npm_package_version && process.env.npm_package_version.trim() !== '') {
+    return process.env.npm_package_version;
+  }
+    
+  try {
+    // Get the latest git tag, assuming git is installed and tagged branch is available
+    const tag = execSync('git describe --tags --abbrev=0').toString().trim();
+    return tag;
+  } catch (error) {
+    return 'development';
+  }
+}
 
 export default defineConfig({
   plugins: [sveltekit()],
@@ -11,5 +28,9 @@ export default defineConfig({
   },
   test: {
     include: ['./tests/unit/**/*.unit-test.js']
+  },
+  define: {
+    // Expose the app version as a global variable
+    'import.meta.env.APP_VERSION': JSON.stringify(getAppVersionString())
   }
 });