ff-admin/src/views/docs/DocPage.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 #diffMain>
      <div class="flex flex-col gap-2 h-full px-4 overflow-hidden">
        <div class="markdown-container overflow-y-scroll">
          <component v-if="markdownComponent" :is="markdownComponent" />
          <p v-else>Diese Seite existiert nicht.</p>
        </div>
      </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 = null
      this.markdownComponent = markRaw(defineAsyncComponent(() => import(`$/${this.page?.toLowerCase()}.md`)));
    }
  }
});
</script>

<style>
.markdown-container {
  font-family: 'Open Sans', sans-serif;
  color: #555;
  background-color: #f8f8f8;
  border: 2px solid gray;
  padding: 20px;
  border-radius: 5px;
  height: 100%
}

.markdown-container h1 {
  font-size: 2rem !important;
  color: #222;
}

.markdown-container h2 {
  font-size: 1.25rem !important;
  color: #222;
}

.markdown-container hr {
  background-color: #222;
  margin: 8px 0;
  padding: 1px;
}

.markdown-container p {
  margin: 10px 0;
}

.markdown-container ul {
  list-style-type: disc;
  margin-left: 20px;
}
</style>