basic markdown rendering + routing for /imprint and /privacy

ref #3

package.json

@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "got": "^11.8.2",
+    "marked": "^2.0.1",
     "redaxios": "^0.4.1",
     "toastify-js": "^1.9.3",
     "validator": "^13.5.2",

public/imprint_en.md

@@ -0,0 +1 @@
+TODO: 

public/privacy_en.md

@@ -0,0 +1 @@
+TODO: 

src/components/Footer.vue

@@ -14,16 +14,26 @@
         <a
           target="_blank"
           rel="noopener,noreferrer"
-          href="/impressum/"
+          :href="[[imprint_url]]"
           class="ml-3 text-gray-400 underline"
         >Impressum</a>
         <a
           target="_blank"
           rel="noopener,noreferrer"
-          href="/datenschutz/"
+          :href="[[privacy_url]]"
           class="ml-3 text-gray-400 underline"
         >Datenschutzerklärung</a>
       </span>
     </div>
   </footer>
 </template>
+<script>
+export default {
+  data() {
+    return {
+      imprint_url: config.url_imprint || "/imprint/"
+      , privacy_url: config.url_privacy || "/privacy/"
+    }
+  },
+}
+</script>

src/components/Imprint.vue

@@ -0,0 +1,38 @@
+<template>
+  <section class="container px-4 py-24 mx-auto">
+    <div class="simplecontent">
+      <div class="mb-24 text-left md:text-center">
+        <h1
+          class="mb-4 text-4xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-5xl"
+        >{{$t('imprint')}}</h1>
+      </div>
+      <div class="mx-auto prose" v-html="content"></div>
+    </div>
+  </section>
+</template>
+<style src="./simple.css">
+</style>
+<script>
+import marked from "marked";
+export default {
+  data() {
+    return {
+      content: ""
+    }
+  },
+  async beforeMount() {
+    const browserlocale = ((navigator.languages && navigator.languages[0]) || '').substr(0, 2);
+    let md = "";
+    try {
+      md = await fetch(`/imprint_${browserlocale}.md`);
+    } catch (error) {
+      try {
+        md = await fetch(`/imprint_en.md`);
+      } catch (error) {
+        md = "Error loading Imprint";
+      }
+    }
+    this.content = marked(await md.text());
+  },
+}
+</script>

src/components/Privacy.vue

@@ -0,0 +1,38 @@
+<template>
+  <section class="container px-4 py-24 mx-auto">
+    <div class="simplecontent">
+      <div class="mb-24 text-left md:text-center">
+        <h1
+          class="mb-4 text-4xl font-bold leading-tight text-gray-900 dark:text-gray-50 md:text-5xl"
+        >{{ $t('privacy_policy') }}</h1>
+      </div>
+      <div class="mx-auto prose" v-html="content"></div>
+    </div>
+  </section>
+</template>
+<style src="./simple.css">
+</style>
+<script>
+import marked from "marked";
+export default {
+  data() {
+    return {
+      content: ""
+    }
+  },
+  async beforeMount() {
+    const browserlocale = ((navigator.languages && navigator.languages[0]) || '').substr(0, 2);
+    let md = "";
+    try {
+      md = await fetch(`/privacy_${browserlocale}.md`);
+    } catch (error) {
+      try {
+        md = await fetch(`/privacy_en.md`);
+      } catch (error) {
+        md = "Error loading Privacy Policy";
+      }
+    }
+    this.content = marked(await md.text());
+  },
+}
+</script>

src/locales/en.json

@@ -5,6 +5,7 @@
     "download_certificate": "Download certificate",
     "e_mail_adress": "mail address",
     "go_to_login": "Go To Login",
+    "imprint": "Imprint",
     "lap_time": "Lap time",
     "lap_times": "Lap times",
     "main_page_text": "Here you can register for the Lauf Für Kaya! or manage your runner profile.",
@@ -15,6 +16,7 @@
     "please_provide_a_valid_zipcode": "Please provide a valid zipcode...",
     "please_provide_valid_mail": "Please provide a valid mail address.",
     "plz": "zipcode",
+    "privacy_policy": "Privacy Policy",
     "profile": "Profile",
     "provide_address": "Provide a postal address?",
     "register": {

src/main.js

@@ -22,6 +22,8 @@ const i18n = createI18n({
 
 // ---------------
 const Home = import('./components/Home.vue');
+const Imprint = import('./components/Imprint.vue');
+const Privacy = import('./components/Privacy.vue');
 const Register = import('./components/Register.vue');
 const Profile = import('./components/Profile.vue');
 //
@@ -29,6 +31,8 @@ const router = createRouter({
 	history: createWebHistory(),
 	routes: [
 		{ path: '/', component: Home },
+		{ path: '/imprint', component: Imprint },
+		{ path: '/privacy', component: Privacy },
 		{ path: '/register', component: Register },
 		{ path: '/profile', component: Profile }
 	]