feat: add markdown supported documentation pages

Informatievlaanderen · Oct 20, 2022 · 3dcc8cb · 3dcc8cb
1 parent b9c668c
commit 3dcc8cb
Show file tree

Hide file tree

Showing 5 changed files with 164 additions and 1 deletion.
diff --git a/site/src/modules/documentation/index.ts b/site/src/modules/documentation/index.ts
@@ -0,0 +1,25 @@
+import Root from "./views/Root.vue";
+import Documentation from "./views/Documentation.vue";
+import EditEndPointsGrar from "./views/EditEndPointsGrar.vue";
+
+export const DocumentationRoutes = [
+  {
+    path: "/documentatie",
+    component: Root,
+    meta: {},
+    children: [
+      {
+        path: "",
+        component: Documentation,
+        name: "documentation"
+      },
+      {
+        path: "editendpointsgrar",
+        component: EditEndPointsGrar,
+        name: "editendpointsgrar"
+      },
+    ],
+  },
+];
+
+export default DocumentationRoutes;
diff --git a/site/src/modules/documentation/views/Documentation.vue b/site/src/modules/documentation/views/Documentation.vue
@@ -0,0 +1,64 @@
+<template>
+  <vl-page>
+    <vl-main>
+      <vl-region>
+        <vl-layout>
+          <vl-grid mod-stacked>
+            <vl-column width="9" width-s="12">
+              <vl-link :to="$l('backButtons.home.url')" mod-bold v-l="`backButtons.home.text`" />
+              <header>
+                <y-markdown v-if="$data.markdownLoaded" :src="$data.header" />
+              </header>
+            </vl-column>
+
+            <vl-column>
+              <vl-grid mod-stacked>
+                <vl-column :width="`${$data.sidebar.urls > 0 ? 8 : 12}`" width-s="12">
+                  <vl-grid mod-stacked>
+                    <vl-column>
+                      <vl-typography>
+                        <y-markdown v-if="$data.markdownLoaded" :src="$data.content" />
+                      </vl-typography>
+                    </vl-column>
+                    <vl-column v-for="item in $data.doormatItems" :key="item.url" width="6" width-s="12">
+                      <vl-doormat :title="item.title" :href="item.url" mod-alt />
+                    </vl-column>
+                  </vl-grid>
+                </vl-column>
+                <vl-column v-if="$data.sidebar.urls > 0" width="3" push="1" push-m="reset" width-s="12">
+                  <aside v-vl-sticky="{ top: '120px', left: '0' }">
+                    <vl-side-navigation :title="$l(`${$options.localeName}.sidebar.title`)">
+                      <vl-side-navigation-list>
+                        <template v-for="item in $data.sidebar.urls">
+                          <vl-side-navigation-item :key="item.url" :href="item.url" :text="item.title" />
+                        </template>
+                      </vl-side-navigation-list>
+                    </vl-side-navigation>
+                  </aside>
+                </vl-column>
+              </vl-grid>
+            </vl-column>
+          </vl-grid>
+        </vl-layout>
+      </vl-region>
+    </vl-main>
+  </vl-page>
+</template>
+
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+  localeName: "documentation",
+  hasMarkdown: true
+});
+</script>
+
+<style lang="scss">
+div.functional-documentation {
+  h2, h3, h4, h5, h6, a, p {
+    scroll-margin: 80px;
+  }
+}
+</style>
diff --git a/site/src/modules/documentation/views/EditEndPointsGrar.vue b/site/src/modules/documentation/views/EditEndPointsGrar.vue
@@ -0,0 +1,64 @@
+<template>
+  <vl-page class="edit-endpoints-grar">
+    <vl-main>
+      <vl-region>
+        <vl-layout>
+          <vl-grid mod-stacked>
+            <vl-column width="9" width-s="12">
+              <vl-link :to="$l('backButtons.documentation.url')" mod-bold v-l="`backButtons.documentation.text`" />
+              <header>
+                <y-markdown v-if="$data.markdownLoaded" :src="$data.header" />
+              </header>
+            </vl-column>
+
+            <vl-column>
+              <vl-grid mod-stacked>
+                <vl-column :width="`${$data.sidebar.urls > 0 ? 8 : 12}`" width-s="12">
+                  <vl-grid mod-stacked>
+                    <vl-column>
+                      <vl-typography>
+                        <y-markdown v-if="$data.markdownLoaded" :src="$data.content" />
+                      </vl-typography>
+                    </vl-column>
+                    <vl-column v-for="item in $data.doormatItems" :key="item.url" width="6" width-s="12">
+                      <vl-doormat :title="item.title" :href="item.url" mod-alt />
+                    </vl-column>
+                  </vl-grid>
+                </vl-column>
+                <vl-column v-if="$data.sidebar.urls > 0" width="3" push="1" push-m="reset" width-s="12">
+                  <aside v-vl-sticky="{ top: '120px', left: '0' }">
+                    <vl-side-navigation :title="$l(`${$options.localeName}.sidebar.title`)">
+                      <vl-side-navigation-list>
+                        <template v-for="item in $data.sidebar.urls">
+                          <vl-side-navigation-item :key="item.url" :href="item.url" :text="item.title" />
+                        </template>
+                      </vl-side-navigation-list>
+                    </vl-side-navigation>
+                  </aside>
+                </vl-column>
+              </vl-grid>
+            </vl-column>
+          </vl-grid>
+        </vl-layout>
+      </vl-region>
+    </vl-main>
+  </vl-page>
+</template>
+
+
+<script lang="ts">
+import Vue from "vue";
+
+export default Vue.extend({
+  localeName: "editendpointsgrar",
+  hasMarkdown: true,
+});
+</script>
+
+<style lang="scss">
+div.edit-endpoints-grar {
+  h2, h3, h4, h5, h6, a, p {
+    scroll-margin: 80px;
+  }
+}
+</style>
diff --git a/site/src/modules/documentation/views/Root.vue b/site/src/modules/documentation/views/Root.vue
@@ -0,0 +1,8 @@
+<template>
+    <div>
+        <router-view
+            @pageLoaded="(args) => $emit('pageLoaded', args)"
+            @updateStatus="(args) => $emit('updateStatus', args)"
+        />
+    </div>
+</template>
diff --git a/site/src/router.ts b/site/src/router.ts
@@ -1,6 +1,7 @@
 import Vue from "vue";
 import Router, { RawLocation, Route, RouteConfig } from "vue-router";
 import { HomeRoutes } from "./modules/home/";
+import { DocumentationRoutes } from "./modules/documentation/";
 import { ImplementationModelRoutes } from "./modules/implementation-model/";
 import { InformationRoutes } from "./modules/information/";
 import { GeneralRoutes } from "./modules/general/";
@@ -18,6 +19,7 @@ Vue.use(Router);
 
 const routes: RouteConfig[] = [
     ...HomeRoutes,
+    ...DocumentationRoutes,
     ...ImplementationModelRoutes,
     ...InformationRoutes,
     ...GeneralRoutes,
@@ -47,4 +49,4 @@ export const router = new Router({
     routes,
 });
 
-export default router;
+export default router;