<script setup lang="ts">
import { ref } from 'vue';
import Button from 'primevue/button';
import ScrollPanel from 'primevue/scrollpanel';
import { invoke } from '../invoke';
import { VueMarkdownIt } from '@f3ve/vue-markdown-it';

const changelog = ref('');

invoke('get_changelog').then((s) => (changelog.value = s as string));
</script>

<template>
    <h1>About</h1>
    STARTLINER is a simple launcher, configuration tool and mod manager for
    O.N.G.E.K.I. and CHUNITHM.
    <h1>Changelog</h1>
    <ScrollPanel style="height: 200px">
        <div class="changelog">
            <vue-markdown-it
                :source="changelog"
                :options="{ typographer: true, breaks: true }"
            />
        </div>
    </ScrollPanel>
    <footer class="mt-10 flex gap-3">
        <Button
            icon="pi pi-discord"
            as="a"
            target="_blank"
            href="https://discord.gg/jxvzHjjEmc"
        />
        <Button
            icon="pi pi-github"
            as="a"
            target="_blank"
            href="https://gitea.tendokyu.moe/akanyan/STARTLINER"
        />
    </footer>
</template>

<style lang="css">
h1 {
    font-size: 1.7rem;
}

.changelog h2 {
    font-size: 1.4rem;
}
.changelog ul {
    list-style-type: circle;
}
.changelog li {
    margin-left: 40px;
}
</style>
