From ece5bb477e14ba899babffea3c64cf48c0a6d3eb Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Mon, 6 Dec 2021 22:47:32 -0500
Subject: [PATCH] [+] About page

---
 src/views/About.vue | 57 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 55 insertions(+), 2 deletions(-)

diff --git a/src/views/About.vue b/src/views/About.vue
index 3b5e43f..ee5f2e0 100644
--- a/src/views/About.vue
+++ b/src/views/About.vue
@@ -1,5 +1,58 @@
 <template>
-    <div class="about">
-        <h1>This is an about page</h1>
+    <div id="About" class="markdown-content" v-html="html">
+
     </div>
 </template>
+
+<script lang="ts">
+import {Options, Vue} from 'vue-class-component';
+import {marked} from 'marked';
+
+@Options({components: {}})
+export default class About extends Vue
+{
+    html = ""
+
+    mounted(): void
+    {
+        // TODO: Cloudflare CDN
+        fetch("https://raw.githubusercontent.com/hykilpikonna/hykilpikonna/main/README.md").then(it => it.text())
+            .then(it => this.html = marked(it))
+    }
+}
+</script>
+
+<style lang="sass" scoped>
+@import "../css/colors"
+
+#About
+    width: min(600px, 80vw)
+    margin: auto
+
+// Markdown style
+.markdown-content
+    text-align: justify
+    text-justify: inter-word
+
+    a
+        color: $color-text-special
+        text-decoration: none
+
+    h1, h2
+        border-bottom: 1px solid $color-text-special
+        font-size: 1.5em
+        margin-top: 1em
+
+    h1, h2
+        line-height: 1.3
+        margin-bottom: 0.25em
+        padding: 0
+
+    p
+        font-size: 0.875em
+        margin: 0.5em 0
+        line-height: 1.6
+
+    li
+        font-size: 0.875em
+</style>