fix: integration documentation pages

Informatievlaanderen · Dec 16, 2022 · f17be5d · f17be5d
1 parent a572c1e
commit f17be5d
Show file tree

Hide file tree

Showing 8 changed files with 177 additions and 26 deletions.
diff --git a/site/src/core/mixins/LocaleMixin.ts b/site/src/core/mixins/LocaleMixin.ts
@@ -17,13 +17,16 @@ interface LocalePropertyOptions {
   } | undefined,
   doormatItems: {
     title: string | undefined;
+    text: string | undefined;
     url: string | undefined;
+    hide: boolean | undefined;
   }[] | undefined;
   spotlightItems: {
     title: string | undefined;
     subtitle: string | undefined;
     text: string | undefined;
     url: string | LocaleData.EnvVars | undefined;
+    hide: boolean | undefined;
   }[] | undefined;
 }
 
@@ -140,15 +143,17 @@ Vue.mixin(Vue.extend({
             }
             item.url = url;
           }
-          this.spotlightItems.push(item);
+          if(item.hide !== true) {
+            this.spotlightItems.push(item);
+          }
         });
       }
     },
     getDoormatItems() {
       const options = this.getDefaultLocaleOptions();
       if (options && options.doormatItems) {
         this.doormatItems.splice(0);
-        this.doormatItems.push(...options.doormatItems);
+        this.doormatItems.push(...options.doormatItems.filter(i => i.hide !== true));
       }
     },
     getSidebar() {

diff --git a/site/src/modules/integration-documentation/index.ts b/site/src/modules/integration-documentation/index.ts
@@ -0,0 +1,31 @@
+import Root from "./views/Root.vue";
+import IntegrationDocumentation from "./views/IntegrationDocumentation.vue";
+import IntegrationDocumentationGrar from "./views/IntegrationDocumentationGrar.vue";
+import IntegrationDocumentationWr from "./views/IntegrationDocumentationWr.vue";
+
+export const IntegrationDocumentationRoutes = [
+    {
+        path: "/integratie-documentatie",
+        component: Root,
+        meta: {},
+        children: [
+            {
+                path: "",
+                component: IntegrationDocumentation,
+                name: "integration-documentatie"
+            },
+            {
+                path: "grar",
+                component: IntegrationDocumentationGrar,
+                name: "integration-documentatie-grar"
+            },
+            {
+                path: "wr",
+                component: IntegrationDocumentationWr,
+                name: "integration-documentatie-wr"
+            },
+        ],
+    },
+];
+
+export default IntegrationDocumentationRoutes;
diff --git a/...-guideline/views/IntegrationGuideline.vue → ...tation/views/IntegrationDocumentation.vue b/...-guideline/views/IntegrationGuideline.vue → ...tation/views/IntegrationDocumentation.vue
@@ -21,7 +21,7 @@
                       </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-doormat :title="item.title" :href="item.url" mod-alt>{{ item.subtitle || item.text || "" }}</vl-doormat>
                     </vl-column>
                   </vl-grid>
                 </vl-column>
@@ -51,7 +51,7 @@
 import Vue from "vue";
 
 export default Vue.extend({
-  localeName: "integration-guideline",
+  localeName: "integrationDocumentation",
   hasMarkdown: true,
   created() {
   },

diff --git a/site/src/modules/integration-documentation/views/IntegrationDocumentationGrar.vue b/site/src/modules/integration-documentation/views/IntegrationDocumentationGrar.vue
@@ -0,0 +1,67 @@
+<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.integrationDocumentation.url')" mod-bold v-l="`backButtons.integrationDocumentation.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 < 1) ? 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 < 1)" 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: "integrationDocumentationGrar",
+  hasMarkdown: true,
+  created() {
+  },
+  async mounted() {
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+  },
+});
+</script>
diff --git a/site/src/modules/integration-documentation/views/IntegrationDocumentationWr.vue b/site/src/modules/integration-documentation/views/IntegrationDocumentationWr.vue
@@ -0,0 +1,67 @@
+<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.integrationDocumentation.url')" mod-bold v-l="`backButtons.integrationDocumentation.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 < 1) ? 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 < 1)" 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: "integrationDocumentationWr",
+  hasMarkdown: true,
+  created() {
+  },
+  async mounted() {
+  },
+  data() {
+    return {
+    };
+  },
+  computed: {
+  },
+});
+</script>
diff --git a/...ules/integration-guideline/views/Root.vue → .../integration-documentation/views/Root.vue b/...ules/integration-guideline/views/Root.vue → .../integration-documentation/views/Root.vue
diff --git a/site/src/modules/integration-guideline/index.ts b/site/src/modules/integration-guideline/index.ts
diff --git a/site/src/router.ts b/site/src/router.ts
@@ -15,7 +15,7 @@ import { VersionRoutes } from "./modules/versions";
 import { FaqRoutes } from "./modules/faq";
 import { OpensourceApplicationsRoutes } from "./modules/opensource-applications";
 import { OpensourceComponentsRoutes } from "./modules/opensource-components";
-import { IntegrationGuidelineRoutes } from "./modules/integration-guideline" ; 
+import { IntegrationDocumentationRoutes } from "./modules/integration-documentation" ; 
 
 Vue.use(Router);
 
@@ -32,10 +32,10 @@ const routes: RouteConfig[] = [
     ...StatusRoutes,
     ...ReleaseNotesRoutes,
     ...VersionRoutes,
+    ...IntegrationDocumentationRoutes,
     ...FaqRoutes,
     ...OpensourceApplicationsRoutes,
-    ...OpensourceComponentsRoutes,
-    ...IntegrationGuidelineRoutes
+    ...OpensourceComponentsRoutes
 ];
 
 function ensureRouteMetaValue(route: Route, predicate: (meta: any) => boolean) {