diff options
| -rw-r--r-- | package-lock.json | 17 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/App.vue | 49 | ||||
| -rw-r--r-- | src/components/HomePage.vue | 33 | ||||
| -rw-r--r-- | src/components/MainPage.vue | 21 | ||||
| -rw-r--r-- | src/components/SubCard.vue | 6 |
6 files changed, 98 insertions, 29 deletions
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> |