documentation kick off

src/views/docs/DocPage.vue

@@ -0,0 +1,47 @@
+<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>