feat: add WR technical release notes

.gitignore

@@ -50,3 +50,4 @@ structurizr-*.json
 
 .env.local
 .env.*.local
+/site/public/assets/locales-dev.json

site/nginx.conf.template

@@ -146,6 +146,13 @@ server {
         proxy_set_header X-Robots-Tag "noindex, nofollow";
     }
 
+    location /changelogs/road-registry {
+        proxy_redirect off;
+        proxy_ssl_server_name on;
+        proxy_pass https://raw.githubusercontent.com/Informatievlaanderen/road-registry/main/CHANGELOG.md;
+        proxy_set_header X-Robots-Tag "noindex, nofollow";
+    }
+
     location /wiki {
         proxy_redirect off;
         proxy_ssl_server_name on;

site/package.json

@@ -9,7 +9,8 @@
   },
   "private": true,
   "scripts": {
-    "serve": "NODE_ENV=development vue-cli-service serve --mode development",
+    "serve": "vue-cli-service serve --mode development",
+    "serve-dev": "NODE_ENV=development vue-cli-service serve --mode development",
     "serve-tst": "NODE_ENV=test vue-cli-service serve --mode test",
     "serve-stg": "NODE_ENV=staging vue-cli-service serve --mode staging",
     "serve-prd": "NODE_ENV=production vue-cli-service serve --mode production",

site/src/modules/release-notes/index.ts

@@ -1,6 +1,7 @@
 import Root from "./views/Root.vue";
 import ReleaseNotes from "./views/ReleaseNotes.vue";
 import ReleaseNotesTechnicalGrar from "./views/ReleaseNotesTechnicalGrar.vue";
+import ReleaseNotesTechnicalWr from "./views/ReleaseNotesTechnicalWr.vue";
 import ReleaseNotesBusinessGrar from "./views/ReleaseNotesBusinessGrar.vue";
 import ReleaseNotesBusinessWr from "./views/ReleaseNotesBusinessWr.vue";
 
@@ -20,6 +21,11 @@ export const ReleaseNotesRoutes = [
                   component: ReleaseNotesTechnicalGrar,
                   name: "release-notes-technisch-grar"
               },
+              {
+                  path: "technischwr",
+                  component: ReleaseNotesTechnicalWr,
+                  name: "release-notes-technisch-wr"
+              },
               {
                   path: "functioneelgrar",
                   component: ReleaseNotesBusinessGrar,

site/src/modules/release-notes/views/ReleaseNotes.vue

@@ -48,20 +48,17 @@
 
 <script lang="ts">
 import Vue from "vue";
-import { TranslationClient } from "../../../services/translations-client";
 
 export default Vue.extend({
   localeName: "release-notes",
   hasMarkdown: true,
   async mounted() {
     this.loaded = false;
-    this.githubMarkdown = await TranslationClient.getMarkdownReleaseNotes();
     this.loaded = true;
   },
   data() {
     return {
-      loaded: false as boolean,
-      githubMarkdown: "" as string
+      loaded: false as boolean
     };
   },
 });

site/src/modules/release-notes/views/ReleaseNotesBusinessGrar.vue

@@ -48,20 +48,17 @@
 
 <script lang="ts">
 import Vue from "vue";
-import { TranslationClient } from "../../../services/translations-client";
 
 export default Vue.extend({
   localeName: "release-notes/business-grar",
   hasMarkdown: true,
   async mounted() {
     this.loaded = false;
-    this.githubMarkdown = await TranslationClient.getMarkdownReleaseNotes();
     this.loaded = true;
   },
   data() {
     return {
-      loaded: false as boolean,
-      githubMarkdown: "" as string
+      loaded: false as boolean
     };
   },
 });

site/src/modules/release-notes/views/ReleaseNotesBusinessWr.vue

@@ -48,20 +48,17 @@
 
 <script lang="ts">
 import Vue from "vue";
-import { TranslationClient } from "../../../services/translations-client";
 
 export default Vue.extend({
   localeName: "release-notes/business-wr",
   hasMarkdown: true,
   async mounted() {
     this.loaded = false;
-    this.githubMarkdown = await TranslationClient.getMarkdownReleaseNotes();
     this.loaded = true;
   },
   data() {
     return {
-      loaded: false as boolean,
-      githubMarkdown: "" as string
+      loaded: false as boolean
     };
   },
 });

site/src/modules/release-notes/views/ReleaseNotesTechnicalWr.vue

@@ -0,0 +1,70 @@
+<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.releaseNotes.url')" mod-bold v-l="`backButtons.releaseNotes.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>
+                      <vl-typography>
+                        <y-markdown v-if="loaded" :src="githubMarkdown" />
+                      </vl-typography>
+                    </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(`releaseNotes.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";
+import { TranslationClient } from "../../../services/translations-client";
+
+export default Vue.extend({
+  localeName: "release-notes/technisch-wr",
+  hasMarkdown: true,
+  async mounted() {
+    this.loaded = false;
+    this.githubMarkdown = await TranslationClient.getRoadRegistryChangeLog();
+    this.loaded = true;
+  },
+  data() {
+    return {
+      loaded: false as boolean,
+      githubMarkdown: "" as string
+    };
+  },
+});
+</script>

site/src/services/api-client.ts

@@ -1,6 +1,5 @@
 import Vue from "vue";
-import axios, { AxiosInstance, AxiosRequestConfig, Method } from "axios";
-import {API_KEY} from "../environment";
+import axios, { AxiosInstance, Method } from "axios";
 
 export interface IApiClient {
   get<T = any>(

site/src/services/i18n.ts

@@ -2,85 +2,94 @@ import Vue from "vue";
 import VueI18n from "vue-i18n";
 import TranslationClient, { Faq, ErrorDetail, ImplementationModelType } from "./translations-client";
 import { DirectiveBinding } from "vue/types/options";
-import  Util from "./util";
+import Util from "./util";
 
 Vue.use(VueI18n);
 
 const translations = Vue.observable({
-    nl: {} as any,
-    faqTableOfContents: {} as Faq.TableOfContents,
-    faqAccordionItems: {} as Faq.Accordion,
-    errorDetailTableOfContents: {} as ErrorDetail.TableOfContents
+  nl: {} as any,
+  faqTableOfContents: {} as Faq.TableOfContents,
+  faqAccordionItems: {} as Faq.Accordion,
+  errorDetailTableOfContents: {} as ErrorDetail.TableOfContents,
 });
 
 const i18n = {
-    translate: (key: string, args?: any): any => {        
-        //type check
-        const value = Util.GetPropByName(translations.nl, key);
-        if (typeof value === "boolean") {
-            return value;
-        }
-        if(!value) return key;
-        if (args){
-            const onMissingParam = (paramName: string) => console.warn(`No parameter '${paramName}' passed for key '${key}'`);
-            return Util.interpolateString(value, args, onMissingParam);
-        } 
-        return value;
-    },
-    directive: (el: HTMLElement, binding: DirectiveBinding) => {
-        let key = binding.value || el.innerText;
-        let translation: string;
-        if (typeof binding.value === "string") {
-            translation = i18n.translate(key);
-        } else {
-            key = binding.value.key;
-            delete binding.value.key;
-            translation = i18n.translate(key, binding.value);
-        }
-        el.innerHTML = translation;
-    },
-    async init() {
-        await i18n.refresh();
-    },
-    async refresh() {
-        const result = await TranslationClient.getTranslations("nl");
-        translations.nl = { ...result } as any;
-        const path = window.location.pathname; 
-        if (path.startsWith("/foutmeldingen/")) {
-            const data = await TranslationClient.getErrorDetailTableOfContents("nl");
-            translations.errorDetailTableOfContents = { ...data };
-        }
-        if (path.startsWith("/veelgestelde-vragen")){
-            const data = await TranslationClient.getAccordion("nl", "faq");
-            translations.faqAccordionItems = { ...data };
-        }
+  translate: (key: string, args?: any): any => {
+    //type check
+    const value = Util.GetPropByName(translations.nl, key);
+    if (typeof value === "boolean") {
+      return value;
     }
-}
+    if (!value) return key;
+    if (args) {
+      const onMissingParam = (paramName: string) => console.warn(`No parameter '${paramName}' passed for key '${key}'`);
+      return Util.interpolateString(value, args, onMissingParam);
+    }
+    return value;
+  },
+  directive: (el: HTMLElement, binding: DirectiveBinding) => {
+    let key = binding.value || el.innerText;
+    let translation: string;
+    if (typeof binding.value === "string") {
+      translation = i18n.translate(key);
+    } else {
+      key = binding.value.key;
+      delete binding.value.key;
+      translation = i18n.translate(key, binding.value);
+    }
+    el.innerHTML = translation;
+  },
+  async init() {
+    await i18n.refresh();
+  },
+  async refresh() {
+    const result = await TranslationClient.getTranslations("nl");
+    translations.nl = { ...result } as any;
+
+    if (process.env.NODE_ENV === "development") {
+      try {
+        const devTranslations = await TranslationClient.getDevTranslations();
+        translations.nl = { ...translations.nl, ...devTranslations } as any;
+      } catch (err) {
+        console.error('Failed to load dev locales json', err);
+      }
+    }
+
+    const path = window.location.pathname;
+    if (path.startsWith("/foutmeldingen/")) {
+      const data = await TranslationClient.getErrorDetailTableOfContents("nl");
+      translations.errorDetailTableOfContents = { ...data };
+    }
+    if (path.startsWith("/veelgestelde-vragen")) {
+      const data = await TranslationClient.getAccordion("nl", "faq");
+      translations.faqAccordionItems = { ...data };
+    }
+  },
+};
 const { init, refresh, directive, translate } = i18n;
 
-Vue.directive("l", { 
-    bind: (el, binding) => directive(el, binding), 
-    update: (el, binding) => directive(el, binding) 
+Vue.directive("l", {
+  bind: (el, binding) => directive(el, binding),
+  update: (el, binding) => directive(el, binding),
 });
 Vue.prototype.$l = translate;
 Vue.prototype.localeName = undefined as string | undefined;
 Vue.prototype.hasMarkdown = false;
 declare module "vue/types/vue" {
-    interface Vue { 
-        $l: (key: string, args?: any) => any;
-
-    }
+  interface Vue {
+    $l: (key: string, args?: any) => any;
+  }
 }
-declare module 'vue/types/options' {
-    interface ComponentOptions<V extends Vue> {
-      localeName?: string;
-      hasMarkdown?: boolean;
-      implementationModelRegistry?: ImplementationModelType;
-    }
+declare module "vue/types/options" {
+  interface ComponentOptions<V extends Vue> {
+    localeName?: string;
+    hasMarkdown?: boolean;
+    implementationModelRegistry?: ImplementationModelType;
   }
+}
 
 export default {
-    init,
-    refresh,
-    translations
-}
+  init,
+  refresh,
+  translations,
+};

site/src/services/translations-client.ts

@@ -7,6 +7,10 @@ export const TranslationClient = {
         const path = `/assets/locales/${lang}.json`;
         return (await apiClient.get<string>(path, undefined, { 'Cache-Control': 'no-store' })).data;
     },
+    getDevTranslations: async (): Promise<any> => {
+        const path = `/assets/locales-dev.json`;
+        return (await apiClient.get<string>(path, undefined, { 'Cache-Control': 'no-store' })).data;
+    },
     getPageMarkdownContent: async (lang: string, page: string): Promise<string> => {
         const path = `/assets/locales/${lang}/${page}/content.md`;
         return (await apiClient.get<string>(path, undefined, { 'Cache-Control': 'no-store' })).data;
@@ -19,6 +23,10 @@ export const TranslationClient = {
         const path = `/wiki/Informatievlaanderen/registry-documentation/Release-Notes.md`;
         return (await apiClient.get<string>(path, undefined, { 'Cache-Control': 'no-store' })).data;
     },
+    getRoadRegistryChangeLog: async (): Promise<string> => {
+        const path = `/changelogs/road-registry`;
+        return (await apiClient.get<string>(path, undefined, { 'Cache-Control': 'no-store' })).data;
+    },
     getFaqTableOfContents: async (lang: string): Promise<Faq.TableOfContents> => {
         const path = `/assets/locales/${lang}/faq/table-of-contents.json`;
         return (await apiClient.get<Faq.TableOfContents>(path, undefined, { 'Cache-Control': 'no-store' })).data;