Dynamically insert the version

dms-viz · Feb 8, 2024 · 2f54e70 · 2f54e70
1 parent 99cbfaa
commit 2f54e70
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 2 deletions.
diff --git a/v0/css/style.css b/v0/css/style.css
@@ -356,13 +356,34 @@ kbd {
   background-color: var(--primary-bg-color);
 }
 
+.github-link .icon {
+  width: 30px;
+  height: 30px;
+}
+
 .github-link a {
   display: flex;
   align-items: center;
   text-decoration: none;
   color: rgba(0, 0, 0, 0.75);
 }
 
+.software-version {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1px;
+  box-sizing: border-box;
+  background-color: var(--primary-bg-color);
+}
+
+.software-version span {
+  display: flex;
+  color: rgba(44, 44, 44, 0.75);
+  font-size: small;
+}
+
 .alert {
   padding: 15px;
   margin-bottom: 20px;

diff --git a/v0/index.html b/v0/index.html
@@ -363,6 +363,10 @@ <h1 class="logo">
             </div>
           </a>
         </div>
+        <!-- Software Version -->
+        <div class="software-version">
+          <span></span>
+        </div>
       </div>
       <!-- Main container with plot and protein content -->
       <div class="main" id="main">
@@ -406,5 +410,11 @@ <h1 class="logo">
       </div>
     </div>
     <script type="module" src="./js/main.js"></script>
+    <script type="module">
+      document.addEventListener("DOMContentLoaded", () => {
+        const versionElement = document.querySelector(".software-version span");
+        versionElement.textContent = `${__APP_VERSION__}`;
+      });
+    </script>
   </body>
 </html>
diff --git a/vite.config.js b/vite.config.js
@@ -1,4 +1,7 @@
-export default {
+import { defineConfig } from "vite";
+import { version } from "./package.json";
+
+export default defineConfig({
   build: {
     rollupOptions: {
       input: {
@@ -7,4 +10,8 @@ export default {
       },
     },
   },
-};
+  define: {
+    // Pass the app version from package.json to the app
+    __APP_VERSION__: JSON.stringify(version),
+  },
+});