<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; } .fc__changelog__container { padding: 20px 30px; } .el-timeline-item__timestamp { color: white !important; user-select: none !important; } .el-card__body * { max-width: 100%; } </style>