From 7ef7490538dd580ddab7734ae6609203391180e6 Mon Sep 17 00:00:00 2001
From: 135e2 <135e2@135e2.tk>
Date: Sun, 7 Aug 2022 22:41:49 +0800
Subject: feat: implement nav-drawer & markdown parser

---
 package-lock.json           | 17 ++++++++++++++++
 package.json                |  1 +
 src/App.vue                 | 49 +++++++++++++++++++++++++++++++++++++++++----
 src/components/HomePage.vue | 33 ++++++++++++++++++++++++++++++
 src/components/MainPage.vue | 21 -------------------
 src/components/SubCard.vue  |  6 ++----
 6 files changed, 98 insertions(+), 29 deletions(-)
 create mode 100644 src/components/HomePage.vue
 delete mode 100644 src/components/MainPage.vue

diff --git a/package-lock.json b/package-lock.json
index 22b8985..ad48368 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "@mdi/font": "5.9.55",
         "core-js": "^3.8.3",
+        "marked": "^4.0.18",
         "roboto-fontface": "*",
         "vue": "^3.2.13",
         "vuetify": "^3.0.0-beta.0",
@@ -7183,6 +7184,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/marked": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmmirror.com/marked/-/marked-4.0.18.tgz",
+      "integrity": "sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw==",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz",
@@ -16772,6 +16784,11 @@
         "semver": "^6.0.0"
       }
     },
+    "marked": {
+      "version": "4.0.18",
+      "resolved": "https://registry.npmmirror.com/marked/-/marked-4.0.18.tgz",
+      "integrity": "sha512-wbLDJ7Zh0sqA0Vdg6aqlbT+yPxqLblpAZh1mK2+AO2twQkPywvvqQNfEPVwSSRjZ7dZcdeVBIAgiO7MMp3Dszw=="
+    },
     "mdn-data": {
       "version": "2.0.14",
       "resolved": "https://registry.npmmirror.com/mdn-data/-/mdn-data-2.0.14.tgz",
diff --git a/package.json b/package.json
index feb4215..de2e14a 100644
--- a/package.json
+++ b/package.json
@@ -10,6 +10,7 @@
   "dependencies": {
     "@mdi/font": "5.9.55",
     "core-js": "^3.8.3",
+    "marked": "^4.0.18",
     "roboto-fontface": "*",
     "vue": "^3.2.13",
     "vuetify": "^3.0.0-beta.0",
diff --git a/src/App.vue b/src/App.vue
index 8c80550..80e462e 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,29 +1,70 @@
 <template>
-  <v-app :style="bg">
+  <v-app @keyup.shift.tab="toggleDrawer" :style="bg">
+    <v-navigation-drawer temporary v-model="drawer" location="right"
+      ><v-list density="compact" nav>
+        <v-list-item
+          prepend-icon="mdi-home"
+          title="Home"
+          value="home"
+        ></v-list-item>
+        <v-list-item
+          prepend-icon="mdi-pencil"
+          title="Edit"
+          value="edit"
+        ></v-list-item>
+        <v-list-item
+          prepend-icon="mdi-theme-light-dark"
+          title="Theme"
+          value="theme"
+          @click="toggleTheme"
+        ></v-list-item> </v-list
+    ></v-navigation-drawer>
     <v-main>
       <v-container>
-        <MainPage class="float-end w-50" />
+        <HomePage class="float-end w-50" />
       </v-container>
     </v-main>
   </v-app>
 </template>
 
 <script>
-import MainPage from "./components/MainPage.vue";
+import { useTheme } from "vuetify";
+import HomePage from "./components/HomePage.vue";
 
 export default {
   name: "App",
 
   components: {
-    MainPage,
+    HomePage,
   },
 
   data: () => ({
+    drawer: null,
+    snackbar: false,
+    snackbarColor: "black",
     bg: {
       backgroundColor: "grey",
       // backgroundImage: "url(https://wallpapercave.com/wp/wp9649930.jpg)",
       backgroundPosition: "center",
     },
   }),
+
+  setup() {
+    const theme = useTheme();
+
+    return {
+      theme,
+      toggleTheme: () =>
+        (theme.global.name.value = theme.global.current.value.dark
+          ? "light"
+          : "dark"),
+    };
+  },
+
+  methods: {
+    toggleDrawer() {
+      this.drawer = !this.drawer;
+    },
+  },
 };
 </script>
diff --git a/src/components/HomePage.vue b/src/components/HomePage.vue
new file mode 100644
index 0000000..9aaf6c4
--- /dev/null
+++ b/src/components/HomePage.vue
@@ -0,0 +1,33 @@
+<template>
+  <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"
+    />
+  </div>
+</template>
+
+<script>
+import SubCard from "./SubCard.vue";
+import { marked } from "marked";
+
+export default {
+  name: "HomePage",
+
+  components: {
+    SubCard,
+  },
+
+  computed: {
+    markdownToHtml() {
+      return marked(this.content);
+    },
+  },
+
+  data: () => ({
+    content: `~~Default content :D~~`,
+  }),
+};
+</script>
diff --git a/src/components/MainPage.vue b/src/components/MainPage.vue
deleted file mode 100644
index 97dad53..0000000
--- a/src/components/MainPage.vue
+++ /dev/null
@@ -1,21 +0,0 @@
-<template>
-  <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" />
-  </div>
-</template>
-
-<script>
-import SubCard from "./SubCard.vue";
-
-export default {
-  name: "MainPage",
-
-  components: {
-    SubCard,
-  },
-
-  data: () => ({
-    //
-  }),
-};
-</script>
diff --git a/src/components/SubCard.vue b/src/components/SubCard.vue
index 5b611f6..ab03ac3 100644
--- a/src/components/SubCard.vue
+++ b/src/components/SubCard.vue
@@ -2,9 +2,7 @@
   <v-card variant="outlined">
     <v-card-item>
       <v-card-title>{{ title }}</v-card-title>
-      <div class="text-caption">
-        {{ content }}
-      </div>
+      <div v-html="content"></div>
     </v-card-item>
   </v-card>
 </template>
@@ -14,7 +12,7 @@ export default {
   name: "SubCard",
   data: () => ({
     title: "Default Title",
-    content: "Bruh",
   }),
+  props: ["content"],
 };
 </script>
-- 
cgit v1.2.3