add settings button, link socials and get the changelog from github

src/App.vue

@@ -4,9 +4,10 @@ import {RouterLink, RouterView} from 'vue-router'</script>
 <template>
   <header>
     <nav>
-      <RouterLink to="/">Guild</RouterLink>
-      <RouterLink to="/quests">Quests</RouterLink>
-      <RouterLink to="/adventurers">Adventurers</RouterLink>
+      <RouterLink :to="{name: 'guild'}">Guild</RouterLink>
+      <RouterLink :to="{name: 'quests'}">Quests</RouterLink>
+      <RouterLink :to="{name: 'adventurers'}">Adventurers</RouterLink>
+      <RouterLink :to="{name: 'technical'}"><img class="icon" src="/img/icons/cog.svg" alt="Technical"></RouterLink>
     </nav>
   </header>
     <RouterView
@@ -290,14 +291,23 @@ nav {
   background-blend-mode: darken;
   background-color: rgba(0, 0, 0, 0.65);
 
+  .icon {
+    width: 2rem;
+    height: 2rem;
+    fill: white;
+    filter: invert(1);
+    transform: translateY(0.35rem);
+  }
+
   a {
     font-size: 2rem;
     color: #fff;
+    text-decoration: none;
+    &.router-link-active {
+      text-decoration: underline;
+    }
   }
 
-  &.router-link-exact-active {
-
-  }
 }
 
 </style>

src/components/ChangelogComponent.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="changelog">
+    <h1>Changelog</h1>
+    <div class="changelog-entry" v-for="release in releases">
+      <h2>Version {{ release.name }}</h2>
+      <pre>{{ release.body }}</pre>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+
+
+export default defineComponent({
+  name: "ChangelogComponent",
+  data: () => ({
+    releases: [] as Array<any>,
+    lastPage: 1,
+  }),
+  methods: {
+    async getReleases(page: number): Promise<void> {
+      const result = await fetch("https://api.github.com/repos/YouHaveTrouble/GuildMaster/releases?per_page=10")
+          .catch((e) => {
+            return null;
+          });
+
+      if (result === null) return;
+      const json = await result.json();
+
+
+      for (const release of json) {
+        const version = {} as any;
+        version.body = release.body.trim();
+        version.name = release.name;
+        if (release.body.length === 0) continue;
+        this.releases.push(version);
+      }
+    }
+  },
+  async mounted() {
+    this.getReleases(1);
+
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.changelog {
+  padding: 3rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  max-width: 45rem;
+  h1 {
+    font-size: 3rem;
+    line-height: 1;
+    margin: 0;
+    text-align: center;
+  }
+  .changelog-entry {
+    width: 100%;
+    h2 {
+      margin: 0;
+    }
+    pre {
+      line-height: 1.2;
+      margin: 0;
+      white-space: pre-wrap;
+      font-family: 'EB Garamond', serif;
+    }
+  }
+}
+</style>

src/router/index.ts

@@ -18,6 +18,11 @@ const router = createRouter({
       path: '/adventurers',
       name: 'adventurers',
       component: () => import('../views/AdventurerView.vue')
+    },
+    {
+      path: '/technical',
+      name: 'technical',
+      component: () => import('../views/TechnicalView.vue')
     }
   ]
 })

src/views/TechnicalView.vue

@@ -0,0 +1,63 @@
+<template>
+<section class="technical-view">
+  <h1>Socials</h1>
+  <div class="socials">
+    <a class="link" href="https://discord.gg/j8KK5dGBps"><img class="icon" src="/img/icons/discord.svg" alt="Discord" />Discord</a>
+    <a class="link" href="https://github.com/YouHaveTrouble/GuildMaster"><img class="icon" src="/img/icons/github.svg" alt="GitHub" />GitHub</a>
+
+  </div>
+
+  <ChangelogComponent/>
+
+</section>
+</template>
+
+<script lang="ts">
+import {defineComponent} from "vue";
+import ChangelogComponent from "@/components/ChangelogComponent.vue";
+
+export default defineComponent({
+  name: "TechnicalView",
+  components: {ChangelogComponent},
+
+})
+</script>
+
+<style lang="scss" scoped>
+.technical-view {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 1rem;
+  padding-block: 1rem;
+  h1 {
+    font-size: 3rem;
+    line-height: 1;
+    margin: 0;
+  }
+  .socials {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    gap: 1rem;
+  }
+  .link {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0.05rem;
+    text-decoration: underline;
+    font-size: 1.5rem;
+    color: #000;
+    font-weight: bold;
+  }
+  .icon {
+    width: 2rem;
+    height: 2rem;
+  }
+}
+</style>