47 lines
1.1 KiB
Vue
47 lines
1.1 KiB
Vue
|
<template>
|
||
|
|
<MainTemplate :useStagedOverviewLink="false">
|
||
|
|
<template #topBar>
|
||
|
|
<div class="flex flex-row items-center justify-between pt-5 pb-3 px-7">
|
||
|
|
<h1 class="font-bold text-xl h-8">{{page}}</h1>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
<template #main>
|
||
|
|
<div class="markdown-container">
|
||
|
|
<component v-if="markdownComponent" :is="markdownComponent" />
|
||
|
|
<p v-else>Diese Seite existiert nicht.</p>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</MainTemplate>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { defineAsyncComponent, defineComponent, markRaw} from "vue";
|
||
|
|
import MainTemplate from "@/templates/Main.vue";
|
||
|
|
import 'highlight.js/styles/atom-one-dark.css';
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<script lang="ts">
|
||
|
|
export default defineComponent({
|
||
|
|
props: {
|
||
|
|
page: String
|
||
|
|
},
|
||
|
|
watch:{
|
||
|
|
page() {
|
||
|
|
this.loadPage()
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
markdownComponent: null,
|
||
|
|
};
|
||
|
|
},
|
||
|
|
async mounted() {
|
||
|
|
this.loadPage()
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
loadPage(){
|
||
|
|
this.markdownComponent = markRaw(defineAsyncComponent(() => import(`$/${this.page?.toLowerCase()}.md`)));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|