feat: Re-implement changelog view and changelog fetching

src-tauri/src/github/release_notes.rs

@@ -1,6 +1,14 @@
 use serde::{Deserialize, Serialize};
 use ts_rs::TS;
 
+#[derive(Serialize, Deserialize, Debug, Clone, TS)]
+#[ts(export)]
+pub struct ReleaseInfo {
+    pub name: String,
+    pub published_at: String,
+    pub body: String,
+}
+
 #[derive(Serialize, Deserialize, Debug, Clone, TS)]
 #[ts(export)]
 pub struct FlightCoreVersion {
@@ -80,4 +88,39 @@ pub async fn check_is_flightcore_outdated() -> Result<bool, String> {
     }
 
     Ok(is_outdated)
-}
+}
+
+#[tauri::command]
+pub async fn get_northstar_release_notes() -> Result<Vec<ReleaseInfo>, String> {
+    let octocrab = octocrab::instance();
+    let page = octocrab
+        .repos("R2Northstar", "Northstar")
+        .releases()
+        .list()
+        // Optional Parameters
+        .per_page(25)
+        .page(1u32)
+        // Send the request
+        .send()
+        .await
+        .map_err(|err| err.to_string())?;
+
+    // TODO there's probably a way to automatically serialize into the struct but I don't know yet how to
+    let mut release_info_vector: Vec<ReleaseInfo> = vec![];
+    for item in page.items {
+        let release_info = ReleaseInfo {
+            name: item.name.ok_or(String::from("Release name not found"))?,
+            published_at: item
+                .published_at
+                .ok_or(String::from("Release date not found"))?
+                .to_rfc3339(),
+            body: item.body.ok_or(String::from("Release body not found"))?,
+        };
+        release_info_vector.push(release_info);
+    }
+
+    log::info!("Done checking GitHub API");
+
+    Ok(release_info_vector)
+}
+

src-tauri/src/lib.rs

@@ -22,6 +22,7 @@ pub fn run() {
         .invoke_handler(tauri::generate_handler![
             greet,
             github::release_notes::check_is_flightcore_outdated,
+            github::release_notes::get_northstar_release_notes,
             northstar::install::find_game_install_location,
             repair_and_verify::verify_install_location,
             util::get_flightcore_version_number,

src-vue/src/views/ChangelogView.vue

@@ -1,10 +1,82 @@
 <template>
     <div class="fc-container">
+        <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">
+import { defineComponent } from 'vue';
+import { ReleaseInfo } from "../../../src-tauri/bindings/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*)\#(\S+)\]\(([^)]+)\)/g, `<a target="_blank" href="$3">$1#$2</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>
+.el-scrollbar__view {
+    padding: 20px 30px;
+}
+
+.el-table .el-scrollbar__view {
+    padding: 0;
+}
+
+.fc__changelog__container {
+    padding: 20px 30px;
+}
+
+.el-timeline-item__timestamp {
+    color: white !important;
+    user-select: none !important;
+}
+
+.el-card__body * {
+    max-width: 100%;
+}
 </style>