feat: display app version in Settings (#113)

.github/workflows/publish.yml

@@ -29,6 +29,9 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GH_PERSONAL_ACCESS_TOKEN }}
 
+      - name: Update package.json
+        run: node .github/workflows/publish/update-package-json.js ${{ steps.semantic.outputs.new_release_version }}
+
   docker:
     needs: release
     if: ${{ needs.release.outputs.new_release_published == 'true' }}

.github/workflows/publish/update-package-json.cjs

@@ -0,0 +1,21 @@
+// Usage:
+// node .github/workflows/publish/update-package-json.js 4.2.0
+
+const fs = require('fs');
+const version = process.argv[2]; // Get version from command line argument
+
+// Read package.json
+fs.readFile('package.json', (err, data) => {
+  if (err) throw err;
+
+  let json = JSON.parse(data);
+
+  // Update version field
+  json.version = version;
+
+  // Write updated package.json
+  fs.writeFile('package.json', JSON.stringify(json, null, 2), (err) => {
+    if (err) throw err;
+    console.log('Package.json file has been updated');
+  });
+});

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "hollama",
-	"version": "0.0.1",
+	"version": "0.0.0-dev",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev --host",

src/routes/settings/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { version } from '$app/environment';
 
 	import Badge from '$lib/components/Badge.svelte';
 	import Button from '$lib/components/Button.svelte';
@@ -163,6 +164,11 @@
 				</Button>
 			</p>
 		</div>
+		<div class="version">
+			<p class="p">
+				<strong>Version</strong> <Button variant="link" href="https://github.com/fmaclen/hollama/releases" target="_blank">{version}</Button>
+			</p>
+		</div>
 	</div>
 </section>
 
@@ -178,11 +184,16 @@
 		@apply flex flex-col gap-y-4 my-auto;
 	}
 
-	.about {
+	.about,
+	.version {
 		@apply container mx-auto flex max-w-[80ch] flex-col gap-y-2 p-4;
 		@apply lg:p-6;
 	}
 
+	.version {
+		@apply last:py-0 last:text-muted;
+	}
+
 	.code {
 		@apply rounded-md p-1 text-active;
 	}

svelte.config.js

@@ -25,7 +25,10 @@ const config = {
 		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: process.env.ADAPTER === 'docker-node' ?
 			adapterNode(adapterConfig) :
-			adapterCloudflare(adapterConfig)
+			adapterCloudflare(adapterConfig),
+			version: {
+				name: process.env.npm_package_version
+			}
 	}
 };