add footer and build sha display

Author: PssbleTrngle

.github/workflows/deploy.yml .github/workflows/release.yml

@@ -34,11 +34,18 @@ jobs:
            with:
               images: ${{ env.REGISTRY }}/${{ env.GITHUB_REPO }}
 
+         - name: Set outputs
+           id: vars
+           run: echo "sha_short=$(git rev-parse --short HEAD)" >> $GITHUB_OUTPUT
+
          - name: Build and push Docker image
            uses: docker/build-push-action@v6
            with:
               context: .
               push: true
               tags: ${{ steps.meta.outputs.tags }}
               labels: ${{ steps.meta.outputs.labels }}
-              build-args: github_token=${{ secrets.GITHUB_TOKEN }}
+              build-args: |
+                 github_token=${{ secrets.GITHUB_TOKEN }}
+                 build_link=https://github.com/${{ env.GITHUB_REPO }}/tree/${{ github.sha }}
+                 build_sha=${{ steps.vars.outputs.sha_short }}

Dockerfile

@@ -13,6 +13,12 @@ COPY . .
 ARG github_token
 ENV GITHUB_TOKEN=$github_token
 
+ARG build_link
+ENV BUILD_LINK=$build_link
+
+ARG build_name
+ENV BUILD_NAME=$build_name
+
 RUN --mount=type=cache,id=pnpm,target=/pnpm/store pnpm install --frozen-lockfile
 
 RUN pnpm run build

components/Footer.vue

@@ -0,0 +1,53 @@
+<template>
+   <footer>
+      <span>
+         <span>atlas@</span>
+         <a v-if="buildLink" :href="buildLink">{{ buildName }}</a>
+         <span v-else>{{ buildName }}</span>
+      </span>
+      <span class="icons">
+         <a title="View Source Code" href="https://github.com/VoidShake/Atlas">
+            <GitHubIcon />
+         </a>
+         <a title="Help Translate" href="https://weblate.macarena.ceo/projects/void-shake/atlas/">
+            <WeblateIcon />
+         </a>
+      </span>
+   </footer>
+</template>
+
+<script lang="ts" setup>
+import { GitHubIcon, WeblateIcon } from 'vue3-simple-icons';
+
+const { buildName, buildLink } = useAppConfig()
+
+</script>
+
+<style lang="scss" scoped>
+footer {
+   @apply py-4 px-5;
+   @apply flex items-center;
+   @apply grid grid-flow-col;
+
+   @apply bg-solid-700;
+
+   a {
+      @apply text-accent-400;
+   }
+
+   .icons {
+      @apply justify-self-end;
+      @apply grid grid-flow-col gap-3;
+
+      a {
+         &:not(:hover) {
+            @apply text-inherit transition-colors;
+         }
+      }
+   }
+}
+
+.dark-mode footer {
+   @apply bg-solid-dark-900;
+}
+</style>

layouts/default.vue

@@ -5,13 +5,15 @@
          <section id="action-buttons" />
          <slot />
       </main>
+
+      <Footer />
    </section>
 </template>
 
 <style scoped>
 main {
    @apply p-5 relative;
-   height: calc(100vh - theme(spacing.14));
+   min-height: calc(100vh - theme(spacing.14) - theme(spacing.14));
 }
 
 #action-buttons {

nuxt.config.ts

@@ -70,6 +70,11 @@ export default defineNuxtConfig({
       },
    },
 
+   appConfig: {
+      buildName: process.env.BUILD_NAME ?? 'dev',
+      buildLink: process.env.BUILD_LINK ?? '',
+   },
+
    experimental: {
       externalVue: false,
    },

package.json

@@ -64,5 +64,8 @@
       "stylelint-config-recommended-vue": "^1.5.0",
       "stylelint-config-standard-scss": "^6.1.0",
       "v-network-graph": "^0.9.15"
+   },
+   "dependencies": {
+      "vue3-simple-icons": "^13.2.0"
    }
 }