Show current git commit in footer

SavageCore · Sep 21, 2023 · f3eaed8 · f3eaed8
1 parent 71f4021
commit f3eaed8
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 9 deletions.
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
@@ -23,6 +23,13 @@ jobs:
       - name: Update node-gyp 🔨
         run: npm install -g node-gyp@latest
 
+      - name: Find and Replace
+        uses: jacobtomlinson/gha-find-replace@v3
+        with:
+          find: "#{GH_COMMIT_HASH}#"
+          replace: "${{ github.sha }}"
+          regex: false
+
       - name: Install and Build 🔧
         run: |
           npm ci

diff --git a/src/Components/Footer/index.svelte b/src/Components/Footer/index.svelte
@@ -1,20 +1,35 @@
 <script>
+    import GitIcon from '../Icons/Git.svelte';
 
+    let ghCommitHash = '#{GH_COMMIT_HASH}#';
+
+    // Dev mode
+    if (ghCommitHash === '#{GH_COMMIT_HASH}#') {
+        ghCommitHash = '71f4021b61d394d1ed3b5b1845dcb6df3907a538';
+    }
 </script>
 
 <style src="./style.scss">
 
 </style>
 
 <div class="background">
-    <!-- <div class="wrapper"> -->
     <div class="footer">
-        <div>
-            Made with 🔫 by
+        <div class="made_by">
+            Made with 🔫 by &nbsp;
             <a href="https://github.com/SavageCore" target="_blank">
                 SavageCore
             </a>
         </div>
-        <!-- </div> -->
+        <div class="version">
+            <div class="icon">
+                <GitIcon />
+            </div>
+            <a
+                href="https://github.com/SavageCore/pd3-vault-cracker/commit/{ghCommitHash}"
+                target="_blank">
+                {ghCommitHash.slice(0, 7)}
+            </a>
+        </div>
     </div>
 </div>
diff --git a/src/Components/Footer/style.scss b/src/Components/Footer/style.scss
@@ -1,18 +1,37 @@
 .footer {
     font-family: "Roboto", sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 10px 20px;
+    padding: 0.5rem 1rem;
     color: #fff;
     background-color: #1c1b22;
     width: 100%;
-    position: fixed; /* Change to fixed */
+    position: fixed;
     bottom: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
 }
 
 .footer a {
     text-decoration: none;
     color: #fff;
     font-weight: bold;
 }
+
+.made_by {
+    display: flex;
+    align-items: center;
+    margin: 0 auto;
+}
+
+.version {
+    display: flex;
+    align-items: center;
+}
+
+.version .icon {
+    fill: #f14e32;
+    width: 24px;
+    margin-right: 0.5rem;
+    display: flex;
+    align-items: center;
+}
diff --git a/src/Components/Icons/Git.svelte b/src/Components/Icons/Git.svelte
@@ -0,0 +1,12 @@
+<!-- https://boxicons.com/ -->
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+    <path
+        d="m21.62 11.108-8.731-8.729a1.292 1.292 0 0 0-1.823 0L9.257 4.19l2.299
+        2.3a1.532 1.532 0 0 1 1.939 1.95l2.214 2.217a1.53 1.53 0 0 1 1.583
+        2.531c-.599.6-1.566.6-2.166 0a1.536 1.536 0 0
+        1-.337-1.662l-2.074-2.063V14.9c.146.071.286.169.407.29a1.537 1.537 0 0 1
+        0 2.166 1.536 1.536 0 0 1-2.174 0 1.528 1.528 0 0 1
+        0-2.164c.152-.15.322-.264.504-.339v-5.49a1.529 1.529 0 0
+        1-.83-2.008l-2.26-2.271-5.987 5.982c-.5.504-.5 1.32 0 1.824l8.731
+        8.729a1.286 1.286 0 0 0 1.821 0l8.69-8.689a1.284 1.284 0 0 0 .003-1.822" />
+</svg>
diff --git a/src/Components/Icons/Github.svelte b/src/Components/Icons/Github.svelte
@@ -1,3 +1,4 @@
+<!-- https://boxicons.com/ -->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path
         fill-rule="evenodd"

diff --git a/src/Components/Icons/Help.svelte b/src/Components/Icons/Help.svelte
@@ -1,3 +1,4 @@
+<!-- https://boxicons.com/ -->
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <path
         d="M12 6a3.939 3.939 0 0 0-3.934 3.934h2C10.066 8.867 10.934 8 12