You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
65 lines
1.7 KiB
Vue
65 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import MarkdownIt from "markdown-it"
|
|
import { data as changelogs } from "../data/changelogs.data"
|
|
import Contributors from "./Contributors.vue"
|
|
|
|
const md = new MarkdownIt()
|
|
|
|
function renderMarkdown(string: string | null | undefined) {
|
|
const body = string ?? "No changelog provided."
|
|
const flavoredString = body
|
|
.split(/---\r\n\r\n### Checksums|---\r\n\r\nMD5/)[0]
|
|
.replace(/(?<=\(|(, ))@(.*?)(?=\)|(, ))/g, "[@$2](https://github.com/$2)")
|
|
.replace(/#(\d+)/g, "[#$1](https://github.com/KotatsuApp/Kotatsu/issues/$1)")
|
|
.replace(/^Check out the .*past release notes.* if you're.*$/m, "")
|
|
.replace(/https\:\/\/github.com\/KotatsuApp\/Kotatsu\/releases\/tag\/(.*?)/g, "#$1")
|
|
.replace(/## [ \t]*([^\n\r]*)/g, "### $1")
|
|
.trim()
|
|
|
|
return md.render(flavoredString)
|
|
}
|
|
|
|
const dateFormatter = new Intl.DateTimeFormat("en", {
|
|
dateStyle: "medium",
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
v-for="(release, index) of changelogs"
|
|
:key="release.tag_name"
|
|
>
|
|
<h2 :id="index === 0 ? 'latest' : release.tag_name">
|
|
<a
|
|
:href="release.html_url"
|
|
target="_blank"
|
|
>
|
|
{{ release.tag_name.substring(1) }}
|
|
</a>
|
|
<Badge v-if="index === 0" type="tip" text="Latest" />
|
|
<a
|
|
class="header-anchor"
|
|
:href="index === 0 ? '#latest' : `#${release.tag_name}`"
|
|
:aria-label="`Permalink to "${release.tag_name}"`"
|
|
/>
|
|
</h2>
|
|
<time :datetime="release.published_at!">
|
|
{{ dateFormatter.format(new Date(release.published_at!)) }}
|
|
</time>
|
|
<div v-html="renderMarkdown(release.body)" />
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="stylus" scoped>
|
|
h2 {
|
|
margin-bottom: 0
|
|
display: flex
|
|
align-items: center
|
|
gap: 0.5rem
|
|
}
|
|
|
|
time {
|
|
font-size: 0.875rem
|
|
color: var(--vp-c-text-2)
|
|
}
|
|
</style> |