feat: add version endpoint (#48)

OLILHR · hf-krechan · web-flow · commit 680071be89db · 2025-01-15T19:12:03.000+01:00
* add version endpoint infos for stage release

* add dummy version json

* add version endpoint infos for prod

* Add version endpoint to fetch version information from `version.json`

* Add version tag to the footer

* fix branch name

When running in GitHub Actions, git rev-parse --abbrev-ref HEAD will return "HEAD" because the checkout action performs a "detached HEAD" checkout by default.
To get the actual branch name in GitHub Actions, you can use the built-in GitHub context variable.

* use commit id from github env

* set fetch_depth to 0

* another try to get the right commit id

* use github env vars for commit id and branch name

* Exclude `/version/` endpoint from authentication

* make version endpoint public

* Link footer version tag to version endpoint

---------

Co-authored-by: kevin &lt;kevin.krechan@hochfrequenz.de&gt;
diff --git a/.github/workflows/azure-static-web-apps-brave-ocean-076b69903.yml b/.github/workflows/azure-static-web-apps-brave-ocean-076b69903.yml
@@ -19,6 +19,16 @@ jobs:
         with:
           submodules: false
           lfs: false
+          fetch-depth: 0
+      - name: Set build and release information
+        id: build_release_info
+        run: |
+          BUILD_DATE=$(date -u +'%Y-%m-%dT%H:%M:%SZ')
+          COMMIT_ID=${{ github.event.pull_request.head.sha || github.sha }}
+          BUILD_BRANCH=${{ github.head_ref || github.ref_name }}
+          sed -i "s|\"build_date\": \"0001-01-01T00:00:00Z\"|\"build_date\": \"$BUILD_DATE\"|" static/version.json
+          sed -i "s|\"commit_id\": \"dummy-commit-id\"|\"commit_id\": \"$COMMIT_ID\"|" static/version.json
+          sed -i "s|\"build_branch\": \"dummy-branch\"|\"build_branch\": \"$BUILD_BRANCH\"|" static/version.json
       - name: Build And Deploy
         id: builddeploy
         uses: Azure/static-web-apps-deploy@v1
diff --git a/.github/workflows/azure-static-web-apps-icy-stone-001be1b03.yml b/.github/workflows/azure-static-web-apps-icy-stone-001be1b03.yml
@@ -14,6 +14,17 @@ jobs:
         with:
           submodules: false
           lfs: false
+      - name: Set build and release information
+        id: build_release_info
+        run: |
+          BUILD_DATE=$(date -u +'%Y-%m-%dT%H:%M:%SZ')
+          COMMIT_ID=${{ github.sha }}
+          BUILD_BRANCH=${{ github.ref_name }}
+          VERSION_TAG=${GITHUB_REF#refs/tags/}
+          sed -i "s|\"build_date\": \"0001-01-01T00:00:00Z\"|\"build_date\": \"$BUILD_DATE\"|" static/version.json
+          sed -i "s|\"commit_id\": \"dummy-commit-id\"|\"commit_id\": \"$COMMIT_ID\"|" static/version.json
+          sed -i "s|\"build_branch\": \"dummy-branch\"|\"build_branch\": \"$BUILD_BRANCH\"|" static/version.json
+          sed -i "s|\"version_tag\": \"v0.0.0\"|\"version_tag\": \"$VERSION_TAG\"|" static/version.json
       - name: Build And Deploy
         id: builddeploy
         uses: Azure/static-web-apps-deploy@v1
diff --git a/src/lib/components/shared/footer.svelte b/src/lib/components/shared/footer.svelte
@@ -1,9 +1,23 @@
-<script>
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  import { base } from "$app/paths";
   import { IconHeart, IconLogo } from "$lib/components";
 
   export let background = "bg-tint";
 
+  type VersionInfo = {
+    version_tag: string;
+  };
+
   let currentYear = new Date().getFullYear();
+  let versionTag: string | null = null;
+
+  onMount(async () => {
+    const response = await fetch(`${base}/version.json`);
+    const data: VersionInfo = await response.json();
+    versionTag = data.version_tag;
+  });
 </script>
 
 <footer class="flex items-center {background} px-3 py-2">
@@ -16,45 +30,54 @@
   <div class="flex-1 flex justify-center">
     <div class="flex items-center text-sm text-black/70 space-x-1 text-center">
       <p class="flex items-center flex-wrap justify-center">
-        © {currentYear} - made with
+        © {currentYear}
+        {#if versionTag}
+          -
+          <a
+            href="{base}/version/"
+            class="hover:underline font-bold mx-1"
+            title="Version details"
+            >{versionTag}
+          </a>
+        {/if}
+        - made with
         <IconHeart />
         by
         <a
-          class="ml-1 mr-2"
+          class="ml-1 mr-2 hover:underline font-bold"
           target="_blank"
           rel="noopener noreferrer"
           href="https://hochfrequenz.de">Hochfrequenz</a
         >
         |
         <a
-          class="font-bold underline ml-2"
+          class="font-bold ml-2 text-secondary"
           target="_blank"
-          rel="noopener
-        noreferrer"
+          rel="noopener noreferrer"
           href="https://www.hochfrequenz.de/#fristenkalender"
         >
           hier klicken</a
         >
-        <span class="mr-2"
-          >, um unseren aktuellsten Fristenkalender als PDF anzufordern</span
+        <span class="ml-1 mr-2">
+          um unseren aktuellsten Fristenkalender als PDF anzufordern</span
         >
         |
         <a
-          class="mx-2"
+          class="mx-2 hover:underline"
           target="_blank"
           rel="noopener noreferrer"
           href="https://www.hochfrequenz.de/datenschutz/">Datenschutz</a
         >
         |
         <a
-          class="mx-2"
+          class="mx-2 hover:underline"
           target="_blank"
           rel="noopener noreferrer"
           href="https://www.hochfrequenz.de/impressum/">Impressum</a
         >
         |
         <a
-          class="mx-2"
+          class="mx-2 hover:underline"
           target="_blank"
           rel="noopener noreferrer"
           href="https://www.hochfrequenz.de/kontakt/">Kontakt</a
@@ -63,5 +86,6 @@
     </div>
   </div>
 
-  <div class="flex-none w-[150px]"></div>
+  <!-- to compensate the padding caused by the logo on the left -->
+  <div class="flex-none w-[160px]"></div>
 </footer>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -12,6 +12,8 @@
 
   let isLoading = true;
 
+  const exposedEndpoints = [`${base}/`, `${base}/version/`];
+
   onMount(async () => {
     await auth.createClient();
 
@@ -27,14 +29,18 @@
     isLoading = false;
 
     isAuthenticated.subscribe((value: boolean) => {
-      if (!value && !isLoading && $page.url.pathname !== `${base}/`) {
+      const isExposedEndpoint = exposedEndpoints.includes($page.url.pathname);
+      if (!value && !isLoading && !isExposedEndpoint) {
         goto(`${base}/`);
       }
     });
   });
 
-  $: if (!$isAuthenticated && !isLoading && $page.url.pathname !== `${base}/`) {
-    goto(`${base}/`);
+  $: {
+    const isExposedEndpoint = exposedEndpoints.includes($page.url.pathname);
+    if (!$isAuthenticated && !isLoading && !isExposedEndpoint) {
+      goto(`${base}/`);
+    }
   }
 </script>
 
diff --git a/src/routes/version/+page.svelte b/src/routes/version/+page.svelte
@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  import { base } from "$app/paths";
+
+  type VersionInfo = {
+    build_date: string;
+    commit_id: string;
+    version_tag: string;
+    build_branch: string;
+  };
+
+  let versionData: VersionInfo | null = null;
+
+  onMount(async () => {
+    const response = await fetch(`${base}/version.json`); // local development: static/version.json & stage/prod: build/version.json
+    versionData = await response.json();
+  });
+</script>
+
+<div class="p-6">
+  {#if versionData}
+    <div class="flex flex-col">
+      <div class="flex gap-4">
+        <div class="text-black/70 font-medium">build date:</div>
+        <div class="text-black/70">
+          {new Date(versionData.build_date).toLocaleString()}
+        </div>
+      </div>
+
+      <div class="flex gap-4">
+        <div class="text-black/70 font-medium">version:</div>
+        <div class="text-black/70">{versionData.version_tag}</div>
+      </div>
+
+      <div class="flex gap-4">
+        <div class="text-black/70 font-medium">commit ID:</div>
+        <div class="text-black/70">{versionData.commit_id}</div>
+      </div>
+
+      <div class="flex gap-4">
+        <div class="text-black/70 font-medium">build branch:</div>
+        <div class="text-black/70">{versionData.build_branch}</div>
+      </div>
+    </div>
+  {/if}
+</div>
diff --git a/static/version.json b/static/version.json
@@ -0,0 +1,6 @@
+{
+  "build_date": "0001-01-01T00:00:00Z",
+  "commit_id": "dummy-commit-id",
+  "version_tag": "v0.0.0",
+  "build_branch": "dummy-branch"
+}
