blob: 7ab50903a5691d38aa19d8b9041f1658107f2b94 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
|
<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>
|
