feat: Patch notes (#18)

* feat: add Rust method to fetch Northstar release notes

* feat: fetch release notes on changelog view mount

* feat: only transmit some info to frontend

GitHub API gives much information about releases, we only need some: name,
publication date and content of such release; so other information is not
transmitted to UI.

* feat: add ReleaseInfo Typescript interface matching Rust struct

* feat: display release notes on a timeline

* refactor: remove old releases external link

* build: add marked dependency

* build: add marked types dev dependency

* feat: format release notes' markdown

* fix: member typo in ReleaseInfo interface

* fix: type releases array

* fix: open github links in external browser

* fix: adjust marked import

* refactor: store release notes in store

Release notes are now stored in the app store, so we don't have to
fetch them multiple times.

* fix: notes fetching method is now async

* feat: display a loading bar while release notes are being fetched

* feat: display dates in white

* feat: release notes' dates are human-readable

* fix: make menu bar appear on top of release notes view when scrolled

* feat: add custom scrollbar

* refactor: format releases creation to please reviewer

* Update src-tauri/src/github/mod.rs

* Update src-tauri/src/github/release_notes.rs

* Update src-vue/src/utils/ReleaseInfo.d.ts

* fix: augment scrollbar opacity

* fix: only display releases' release date (no more time of the day)

* fix: adjust Github request user agent

* style: add missing end line in src-vue/src/style.css

* fix: link formatting only targets GitHub PR links (whose name begins with a #)

* fix: timeline element children cannot be bigger than container card

1 files changed, 69 insertions, 11 deletions

diff --git a/src-vue/src/views/ChangelogView.vue b/src-vue/src/views/ChangelogView.vue
index ff4f2659..62d7f820 100644
--- a/src-vue/src/views/ChangelogView.vue
+++ b/src-vue/src/views/ChangelogView.vue
@@ -1,24 +1,82 @@
 <template>
-    <div class="fc__changelog__container">
-        <el-link :underline="false" icon="DocumentCopy" target="_blank"
-            href="https://github.com/R2Northstar/Northstar/releases">
-            Open release notes
-        </el-link>
+    <div style="height: calc(100% - var(--fc-menu_height))">
+        <div v-if="releases.length === 0" class="fc__changelog__container">
+            <el-progress :show-text="false" :percentage="50" :indeterminate="true" />
+        </div>
+        <el-scrollbar v-else>
+            <el-timeline>
+                <el-timeline-item
+                    v-for="release in releases"
+                    v-bind:key="release.name"
+                    :timestamp="formatDate(release.published_at)"
+                    placement="top"
+                >
+                <el-card>
+                    <h4>{{ release.name }}</h4>
+                    <p v-html="formatRelease(release.body)"></p>
+                </el-card>
+                </el-timeline-item>
+            </el-timeline>
+        </el-scrollbar>
     </div>
 </template>
 
 <script lang="ts">
-export default {
-    name: "ChangelogView"
-}
+import { defineComponent } from 'vue';
+import ReleaseInfo from '../utils/ReleaseInfo';
+import { marked } from "marked";
+
+
+export default defineComponent({
+    name: "ChangelogView",
+    async mounted() {
+        this.$store.commit('fetchReleaseNotes');
+    },
+    computed: {
+        releases(): ReleaseInfo[] {
+            return this.$store.state.releaseNotes;
+        }
+    },
+    methods: {
+        // Transforms a Markdown document into an HTML document.
+        // Taken from Viper launcher:
+        // https://github.com/0neGal/viper/blob/5106d9ed409a3cc91a7755f961fab1bf91d8b7fb/src/app/launcher.js#L26
+        formatRelease(releaseBody: string) {
+            // GitHub authors' links formatting
+            let content: string = releaseBody.replaceAll(/\@(\S+)/g, `<a target="_blank" href="https://github.com/$1">@$1</a>`);
+
+            // PR's links formatting
+            content = content.replaceAll(/\[\#(\S+)\]\(([^)]+)\)/g, `<a target="_blank" href="$2">#$1</a>`);
+
+            return marked.parse(content, {breaks: true});
+        },
+        // Formats an ISO-formatted date into a human-readable string.
+        formatDate(timestamp: string): string {
+            return new Date(timestamp).toLocaleDateString();
+        }
+    }
+});
 </script>
 
-<style scoped>
-.fc__changelog__container {
+<style>
+.el-scrollbar__view {
     padding: 20px 30px;
 }
 
-.el-link {
+.fc__changelog__container {
+    padding: 20px 30px;
+    position: relative;
+    overflow-y: auto;
+    height: calc(100% - var(--fc-menu_height));
     color: white;
 }
+
+.el-timeline-item__timestamp {
+    color: white !important;
+    user-select: none !important;
+}
+
+.el-card__body * {
+    max-width: 100%;
+}
 </style>