feat: update UI

README.md

@@ -1,3 +1,5 @@
+![image](./public/image.png)
+
 # MkDown
 
 MkDown is an online markdown editor built with [vueJs](https://vuejs.org)

index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <meta name="google-site-verification" content="fXdVxE2E3p8p3lQv6erGx_M0Gy83aaG9fTvaS4UgE3A" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <link rel="icon" href="/favicon.ico" />
     <link href="https://fonts.googleapis.com/css2?family=Fira+Code&family=Inter:wght@400;700&display=swap" rel="stylesheet">
     <title>MkDown - Online Markdown Editor</title>
     <meta name="title" content="MkDown - Online markdown editor">

package.json

@@ -10,31 +10,21 @@
   },
   "dependencies": {
     "@mdi/js": "^5.7.55",
-    "codemirror": "^5.52.2",
+    "codemirror": "^5.61.0",
     "file-saver": "^2.0.2",
     "highlight.js": "^10.1.1",
-    "markdown-it": "^12.0.0",
-    "markdown-it-abbr": "^1.0.4",
-    "markdown-it-deflist": "^2.0.3",
-    "markdown-it-highlightjs": "^3.1.0",
-    "markdown-it-ins": "^3.0.0",
-    "markdown-it-mark": "^3.0.0",
-    "markdown-it-sub": "^1.0.0",
-    "markdown-it-sup": "^1.0.0",
-    "markdown-it-task-lists": "^2.1.1",
-    "register-service-worker": "^1.6.2",
-    "shortid": "^2.2.15",
-    "turndown": "^6.0.0",
-    "turndown-plugin-gfm": "^1.0.2",
-    "vue": "^2.6.11",
-    "vue-mdijs": "^0.4.13",
-    "vue-router": "^3.1.5",
-    "vue-toastification": "^1.4.0",
-    "vuex": "^3.1.2"
+    "localforage": "^1.9.0",
+    "lodash.camelcase": "^4.3.0",
+    "nanoid": "^3.1.22",
+    "showdown": "^1.9.1",
+    "tippy.js": "^6.3.1",
+    "vue": "^3.0.11",
+    "vue-mdijs": "^0.5.0",
+    "vue-router": "^4.0.6",
+    "vuex": "^4.0.0"
   },
   "devDependencies": {
     "@rollup/plugin-eslint": "^8.0.1",
-    "@tailwindcss/forms": "^0.2.1",
     "@vitejs/plugin-vue": "^1.0.4",
     "@vue/compiler-sfc": "^3.0.5",
     "autoprefixer": "^10.2.4",
@@ -44,10 +34,12 @@
     "eslint-plugin-prettier-vue": "^3.0.0-alpha.2",
     "eslint-plugin-vue": "^7.6.0",
     "postcss": "^8.2.6",
+    "postcss-nested": "^5.0.5",
     "prettier": "^2.2.1",
     "rollup-plugin-analyzer": "^4.0.0",
     "tailwindcss": "^2.1.1",
-    "vite": "^2.0.0-beta.12"
+    "vite": "^2.0.0-beta.12",
+    "vite-plugin-pwa": "^0.7.2"
   },
   "config": {
     "commitizen": {

postcss.config.js

@@ -2,5 +2,6 @@ module.exports = {
   plugins: {
     tailwindcss: {},
     autoprefixer: {},
+    'postcss-nested': {},
   },
 };

src/App.vue

@@ -1,40 +1,42 @@
 <template>
   <div class="app">
-    <router-view v-if="retrieved" />
+    <router-view />
     <div
-     class="h-full w-full absolute splash"
-     v-else>
-      <div class="content">
-        <h1 class="text-6xl font-bold">MkDown</h1>
-        <p class="text-2xl text-lighter">Online Markdown Editor</p>
-        <p class="text-lighter mt-6">Loading...</p>
+      v-if="needRefresh"
+      class="absolute p-5 absolute z-50 bottom-0 right-0 bg-gray-700 m-5 max-w-xs shadow-xl rounded-xl"
+    >
+      <p class="leading-tight">New content available, click on reload button to update.</p>
+      <div class="space-x-2 flex mt-4">
+        <ui-button class="w-64" @click="needRefresh = false">Close</ui-button>
+        <ui-button variant="primary" class="w-64" @click="updateServiceWorker">Reload</ui-button>
       </div>
     </div>
   </div>
 </template>
 <script>
+import { ref, computed, watch, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { useStore } from 'vuex';
+import { useRegisterSW } from 'virtual:pwa-register/vue';
+
 export default {
-  data: () => ({
-    retrieved: false,
-  }),
-  watch: {
-    activeFile({ title }) {
-      document.title = title;
-    },
-  },
-  computed: {
-    activeFile() {
-      return this.$store.getters['files/activeFile'];
-    },
-  },
-  created() {
-    if (this.$route.name === 'Home') {
-      this.$store.dispatch('retrieve').then(() => {
-        this.retrieved = true;
-      });
-    } else {
-      this.retrieved = true;
-    }
+  setup() {
+    const store = useStore();
+    const { needRefresh, updateServiceWorker } = useRegisterSW();
+
+    watch(
+      () => store.state.files.activeFile,
+      () => {
+        const activeFile = store.getters['files/active'];
+
+        document.title = activeFile.title;
+      }
+    );
+
+    return {
+      needRefresh,
+      updateServiceWorker,
+    };
   },
 };
 </script>

src/assets/css/markdown-theme.css

@@ -0,0 +1,15 @@
+body {
+  font-family: 'Inter', sans-serif;
+  color: theme('colors.gray.50');
+  background-color: theme('colors.gray.800');
+}
+
+.preview-content {
+  @apply py-8 px-4 mx-auto w-full;
+}
+
+@screen lg {
+  .preview-content {
+    @apply w-8/12;
+  }
+}