documentation kick off

src/router/index.ts

@@ -651,6 +651,25 @@ const router = createRouter({
         },
       ],
     },
+    {
+      path: "/docs",
+      name: "docs",
+      component: () => import("@/views/docs/View.vue"),
+      props: true,
+      children: [
+        {
+          path: "",
+          name: "docs-default",
+          component: () => import("@/views/docs/ViewSelect.vue"),
+        },
+        {
+          path: ":page",
+          name: "docs-page",
+          component: () => import("@/views/docs/DocPage.vue"),
+          props: true,
+        },
+      ],
+    },
     {
       path: "/nopermissions",
       name: "nopermissions",

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>

src/views/docs/View.vue

@@ -0,0 +1,34 @@
+<template>
+  <SidebarLayout>
+    <template #sidebar>
+      <SidebarTemplate mainTitle="Dokumentation">
+        <template #list>
+          <RoutingLink title="FF Admin" :link="{ name: 'docs-page', params: { page: 'ff-admin' } }" :active="page == 'ff-admin'" />
+        </template>
+      </SidebarTemplate>
+    </template>
+    <template #main>
+      <RouterView />
+    </template>
+  </SidebarLayout>
+</template>
+
+<script setup lang="ts">
+import { defineComponent } from "vue";
+import SidebarLayout from "@/layouts/Sidebar.vue";
+import SidebarTemplate from "@/templates/Sidebar.vue";
+import RoutingLink from "@/components/admin/RoutingLink.vue";
+</script>
+
+<script lang="ts">
+export default defineComponent({
+  props: {
+    page: String
+  },
+  computed: {
+    activeRouteName() {
+      return this.$route.name;
+    },
+  },
+});
+</script>

src/views/docs/ViewSelect.vue

@@ -0,0 +1,3 @@
+<template>
+  <div class="w-full h-full bg-white rounded-md flex items-center justify-center">bitte auswählen</div>
+</template>