97 lines
2.5 KiB
Vue
97 lines
2.5 KiB
Vue
<script lang="ts" setup>
|
|
import MarkdownIt from 'markdown-it';
|
|
import markdownItKatex from 'markdown-it-katex';
|
|
import { ref, onMounted } from 'vue';
|
|
import 'katex/dist/katex.min.css';
|
|
|
|
const props = defineProps<{
|
|
markdownFileName: string;
|
|
}>();
|
|
const emit = defineEmits<{
|
|
loaded: [];
|
|
}>();
|
|
|
|
const html = ref<string>('');
|
|
const title = ref<string>('');
|
|
|
|
onMounted(() => {
|
|
const fullUrl = `/helptext/${props.markdownFileName}.md`;
|
|
|
|
fetch(fullUrl)
|
|
.then((res) => {
|
|
if (!res.ok) throw new Error('Failed to load file');
|
|
return res.text();
|
|
})
|
|
.then((markdown) => {
|
|
const md = new MarkdownIt({
|
|
html: true,
|
|
linkify: true,
|
|
typographer: true,
|
|
});
|
|
md.use(markdownItKatex);
|
|
md.renderer.rules.link_open = (
|
|
tokens,
|
|
index,
|
|
options,
|
|
env,
|
|
self,
|
|
) => {
|
|
const token = tokens[index];
|
|
token.attrSet('target', '_blank');
|
|
token.attrSet('rel', 'noopener noreferrer');
|
|
return self.renderToken(tokens, index, options);
|
|
};
|
|
|
|
html.value = md.render(markdown);
|
|
const firstHeading = html.value.match(/<h[1-6]>(.*?)<\/h[1-6]>/i);
|
|
title.value = firstHeading?.[1].trim() || '';
|
|
html.value = firstHeading
|
|
? html.value.replace(firstHeading[0], '')
|
|
: html.value;
|
|
emit('loaded');
|
|
})
|
|
.catch((err) => {
|
|
console.error('Could not load help file:', err);
|
|
html.value = '';
|
|
title.value = '';
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="p-6 w-full">
|
|
<h1 class="b-4 mb-7 text-4xl font-semibold">{{ title }}</h1>
|
|
|
|
<div
|
|
v-html="html"
|
|
class="max-w-none block prose prose-lg text-justify prose-headings:text-left dark:prose-invert prose-code:before:hidden prose-code:after:hidden"
|
|
role="region"
|
|
aria-label="Help text"
|
|
></div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.prose :deep(.katex) {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.prose :deep(.katex .vlist) {
|
|
font-size: 0.7em;
|
|
line-height: 0em;
|
|
}
|
|
</style>
|
|
<style>
|
|
|
|
/* Custom styles for the help text */
|
|
.exercice {
|
|
padding: 0.1px 1rem;
|
|
background-color: var(--accent);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.exercice ul li span {
|
|
font-style: oblique;
|
|
}
|
|
</style>
|