added first roadmap draft

assets/css/style.css

@@ -571,6 +571,44 @@ h3 {
 .left {
   flex-direction: row-reverse;
 }
+
+.color-main.link {
+  color: rgb(46, 46, 46) !important;
+}
+
+.color-main.link:hover {
+  color: #cdcdcd;
+}
+
+.roadmap {
+  margin-left: 3rem;
+  margin-right: 3rem;
+}
+
+.roadmap_container {
+  margin-top: 5rem;
+  display: flex;
+  align-items: flex-start;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background-color-accent: #111111;
+  }
+
+  body {
+    color: #d2d2d2;
+  }
+
+  .description {
+    color: #a1a1a1 !important;
+  }
+  .color-main.link {
+    color: white !important;
+  }
+}
 @media screen and (max-width: 600px) {
   #main_header {
     font-size: 3rem;
@@ -619,29 +657,7 @@ h3 {
   .about_container {
     flex-direction: column-reverse;
   }
-}
-
-.color-main.link {
-  color: rgb(46, 46, 46) !important;
-}
-
-.color-main.link:hover {
-  color: #cdcdcd;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background-color-accent: #111111;
-  }
-
-  body {
-    color: #d2d2d2;
-  }
-
-  .description {
-    color: #a1a1a1 !important;
-  }
-  .color-main.link {
-    color: white !important;
+  .roadmap_container {
+    padding: 0.5rem;
   }
 }

components/navbar.vue

@@ -11,18 +11,18 @@
         <NuxtLink to="/about/" class="link mr-15 color-main nav_link"
           >About</NuxtLink
         >
-        <!-- 
+
         <NuxtLink to="/roadmap/" class="link mr-15 color-main nav_link"
           >Roadmap</NuxtLink
         >
-        -->
+
         <a
           href="https://docs.fosscord.com/"
           target="_blank"
           class="link mx-15 color-main nav_link"
           >Documentation</a
         >
-        <!-- 
+        <!--
         <a
           href="https://github.com/fosscord/fosscord"
           target="_blank"

components/roadmap.vue → components/roadmapapi.vue

@@ -1,20 +1,12 @@
 <!--this shit doesnt work fuck nuxt and vue-->
-<!--
+
 <template>
   <div class="roadmap">
-    <div id="roadmap_api" @load="$fetch">
-      <vue-markdown>{{ content }}</vue-markdown>
-    </div>
+    <h4>API:</h4>
+    <div id="roadmap_api" v-html="$md.render(content)"></div>
   </div>
 </template>
 <script>
-import VueMarkdown from "@adapttive/vue-markdown";
-
-new Vue({
-  components: {
-    VueMarkdown
-  }
-});
 export default {
   data() {
     return {
@@ -28,8 +20,13 @@ export default {
     res = await res.json();
     let { body } = res;
 
-    this.content = body;
+    this.content = body
+      .replace(/\[ \]/g, "<input type='checkbox' disabled/>")
+      .replace(/\[x\]/g, "<input type='checkbox' checked disabled/>")
+      .replace(
+        /#(\d+)/g,
+        '<a href="https://github.com/fosscord/fosscord-api/issues/$1">#$1</a>'
+      );
   }
 };
 </script>
--->

components/roadmapclient.vue

@@ -0,0 +1,32 @@
+<!--this shit doesnt work fuck nuxt and vue-->
+
+<template>
+  <div class="roadmap">
+    <h4>Client:</h4>
+    <div id="roadmap_client" v-html="$md.render(content)"></div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      content: ""
+    };
+  },
+  async fetch() {
+    let res = await fetch(
+      "https://api.github.com/repos/fosscord/fosscord-client/issues/67"
+    );
+    res = await res.json();
+    let { body } = res;
+
+    this.content = body
+      .replace(/\[ \]/g, "<input type='checkbox' disabled/>")
+      .replace(/\[x\]/g, "<input type='checkbox' checked disabled/>")
+      .replace(
+        /#(\d+)/g,
+        '<a href="https://github.com/fosscord/fosscord-client/issues/$1">#$1</a>'
+      );
+  }
+};
+</script>

components/roadmapmedia.vue

@@ -0,0 +1,32 @@
+<!--this shit doesnt work fuck nuxt and vue-->
+
+<template>
+  <div class="roadmap">
+    <h4>Media:</h4>
+    <div id="roadmap_media" v-html="$md.render(content)"></div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      content: ""
+    };
+  },
+  async fetch() {
+    let res = await fetch(
+      "https://api.github.com/repos/fosscord/fosscord-rtc/issues/18"
+    );
+    res = await res.json();
+    let { body } = res;
+
+    this.content = body
+      .replace(/\[ \]/g, "<input type='checkbox' disabled/>")
+      .replace(/\[x\]/g, "<input type='checkbox' checked disabled/>")
+      .replace(
+        /#(\d+)/g,
+        '<a href="https://github.com/fosscord/fosscord-rtc/issues/$1">#$1</a>'
+      );
+  }
+};
+</script>

nuxt.config.js

@@ -27,7 +27,17 @@ export default {
   buildModules: [],
 
   // Modules: https://go.nuxtjs.dev/config-modules
-  modules: [],
+  modules: ["@nuxtjs/markdownit"],
+  markdownit: {
+    runtime: true, // Support `$md()`
+    html: true,
+    xhtmlOut: true,
+    breaks: true,
+    langPrefix: "language-",
+    linkify: true,
+    typographer: true,
+    maxNesting: 100
+  },
 
   // Build Configuration: https://go.nuxtjs.dev/config-build
   build: {},