feat: implement content parsing & showing

- We use the GFM spec to parse markdown (might be changed later).
- Otonashi should be (mostly) feature-completed as of now.
- More user-friendly settings are in progress.

2 files changed, 19 insertions, 10 deletions

diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
index 9aaf6c4..3a50c80 100644
--- a/src/components/HomePage.vue
+++ b/src/components/HomePage.vue
@@ -2,9 +2,10 @@
   <div class="d-flex align-end justify-start flex-row-reverse flex-wrap">
     <SubCard
       class="ma-2 pa-2"
-      v-for="n in 6"
-      :key="n"
-      :content="markdownToHtml"
+      v-for="(v, k, i) in LSData"
+      :key="i"
+      :title="k"
+      :content="markdownToHtml(v)"
     />
   </div>
 </template>
@@ -20,14 +21,22 @@ export default {
     SubCard,
   },
 
-  computed: {
-    markdownToHtml() {
-      return marked(this.content);
-    },
+  mounted() {
+    this.loadFromLS();
   },
 
   data: () => ({
-    content: `~~Default content :D~~`,
+    LSData: {},
   }),
+
+  methods: {
+    // LocalStorage
+    loadFromLS() {
+      this.LSData = JSON.parse(localStorage.getItem("LSData")) || this.LSData;
+    },
+    markdownToHtml(content) {
+      return marked.parse(content, { gfm: true });
+    },
+  },
 };
 </script>
diff --git a/src/components/SubCard.vue b/src/components/SubCard.vue
index ab03ac3..5a08e3b 100644
--- a/src/components/SubCard.vue
+++ b/src/components/SubCard.vue
@@ -11,8 +11,8 @@
 export default {
   name: "SubCard",
   data: () => ({
-    title: "Default Title",
+    //
   }),
-  props: ["content"],
+  props: ["title", "content"],
 };
 </script>