Merge pull request s1lvax#63 from Discusser/feature/autoupdate-versio…

…n-label

Retrieve version from release tag name for index page

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "connekt",
-	"version": "0.0.1",
+	"version": "1.0.0",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",

src/lib/components/Index/Hero.svelte

@@ -1,9 +1,17 @@
 <script lang="ts">
 	import { Button } from '$lib/components/ui/button';
-	import { GitPullRequestCreate, UserPen, Github, LogOut } from 'lucide-svelte';
-
+	import { Loader2, UserPen, Github, LogOut } from 'lucide-svelte';
 	import { signIn, signOut } from '@auth/sveltekit/client';
 	import { page } from '$app/stores';
+	import { onMount } from 'svelte';
+	import { getReleaseVersion } from '$lib/utils/getReleaseVersion';
+
+	// undefined means that we haven't received the result from getReleaseVersion
+	// null means that getReleaseVersion couldn't find the release version
+	let releaseVersion: string | null | undefined = undefined;
+	onMount(async () => {
+		releaseVersion = await getReleaseVersion();
+	});
 </script>
 
 <div class="relative isolate overflow-hidden">
@@ -15,22 +23,31 @@
 						class="rounded-full px-3 py-1 text-sm font-semibold leading-6 ring-1 ring-inset ring-indigo-500/20"
 						>What's new</span
 					>
-					<span class="inline-flex items-center space-x-2 text-sm font-medium leading-6">
-						<span>Just shipped v1.0.0</span>
-						<svg
-							class="h-5 w-5 text-gray-500"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							aria-hidden="true"
-							data-slot="icon"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-					</span>
+					{#if releaseVersion !== null}
+						<span class="inline-flex items-center space-x-2 text-sm font-medium leading-6">
+							<span>Just shipped</span>
+							{#if releaseVersion === undefined}
+								<div class="animate-spin">
+									<Loader2 />
+								</div>
+							{:else}
+								<span>{releaseVersion}</span>
+							{/if}
+							<svg
+								class="h-5 w-5 text-gray-500"
+								viewBox="0 0 20 20"
+								fill="currentColor"
+								aria-hidden="true"
+								data-slot="icon"
+							>
+								<path
+									fill-rule="evenodd"
+									d="M8.22 5.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L11.94 10 8.22 6.28a.75.75 0 0 1 0-1.06Z"
+									clip-rule="evenodd"
+								/>
+							</svg>
+						</span>
+					{/if}
 				</a>
 			</div>
 			<h1 class="mt-10 text-pretty text-5xl font-semibold tracking-tight sm:text-7xl">

src/lib/utils/getReleaseVersion.ts

@@ -0,0 +1,17 @@
+export const getReleaseVersion = async () => {
+  const repository = 's1lvax/route';
+  let releaseVersion: string | null = null;
+
+  // If we are unable to retrieve the release version for some reason, we can continue, and ensure that it's not
+  // displayed in components by setting it to null and letting the components handle conditional rendering
+  try {
+    const response = await fetch(`https://api.github.com/repos/${repository}/releases`);
+    if (response.ok) {
+      releaseVersion = 'v' + (await response.json())[0].tag_name;
+    }
+  } catch {
+    console.error(`Failed to fetch release info for ${repository}`);
+  }
+
+  return releaseVersion;
+};

src/routes/+page.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import Contributors from '$lib/components/Index/Contributors.svelte';
 	import Features from '$lib/components/Index/Features.svelte';
 	import Footer from '$lib/components/Index/Footer.svelte';