Add software versions to about page

src/api/instance.ts

@@ -27,6 +27,7 @@ export interface InstanceInfo {
   title: string;
   short_description: string;
   description: string;
+  version: string;
   registrations: boolean;
   login_message: string;
   post_character_limit: number;

src/views/About.vue

@@ -3,6 +3,12 @@
     <template #content v-if="instance">
       <h1>{{ instance.title }}</h1>
       <div class="description static-text" v-html="renderMarkdown(instance.description)"></div>
+      <details class="technical-info static-text">
+        <summary>Technical Info</summary>
+        mitra version: {{ getMitraVersion(instance.version) }}
+        <br>
+        mitra-web version: {{ APP_VERSION }}
+      </details>
     </template>
   </sidebar-layout>
   <static-page v-else-if="currentUser === null && instance" class="wide">
@@ -16,6 +22,7 @@
 <script setup lang="ts">
 import { $ } from "vue/macros"
 
+import { APP_VERSION } from "@/constants"
 import SidebarLayout from "@/components/SidebarLayout.vue"
 import StaticPage from "@/components/StaticPage.vue"
 import { useCurrentUser } from "@/store/user"
@@ -24,13 +31,32 @@ import { renderMarkdown } from "@/utils/markdown"
 
 const { currentUser } = $(useCurrentUser())
 const { instance } = $(useInstanceInfo())
+
+function getMitraVersion(apiVersion: string): string {
+  const match = apiVersion.match(/.+Mitra ([\d.]+)/)
+  if (match) {
+    return match[1]
+  } else {
+    return "unknown"
+  }
+}
 </script>
 
 <style scoped lang="scss">
 @import "../styles/layout";
+@import "../styles/theme";
 
 /* Internal page */
 .content .description {
   font-size: 18px;
 }
+
+.technical-info {
+  font-size: 18px;
+  margin-top: 25px;
+
+  summary {
+    font-weight: bold;
+  }
+}
 </style>