✨ (text editor) add a page for text editor

src/assets/icons/left-arrow.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-arrow-narrow-left" width="28" height="28" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round" stroke-linejoin="round">
+  <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
+  <line x1="5" y1="12" x2="19" y2="12" />
+  <line x1="5" y1="12" x2="9" y2="16" />
+  <line x1="5" y1="12" x2="9" y2="8" />
+</svg>

src/components/WelcomeWorld.vue

@@ -4,13 +4,8 @@
 
     <ol>
       <li>
-        Take notes on VS code (<a
-          href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one#review-details"
-          target="_blank"
-          rel="noopener noreferrer"
-          >this extension</a
-        >
-        may be necessary)
+        Take notes your favorite
+        <router-link :to="{ name: 'TextEditor' }">text editor</router-link>
       </li>
       <li>
         Push to GitHub

src/router/router.ts

@@ -3,6 +3,12 @@ import { RouteRecordRaw, createRouter, createWebHistory } from 'vue-router'
 import Home from '@/views/Home.vue'
 
 const routes: Array<RouteRecordRaw> = [
+  {
+    path: '/text-editor',
+    name: 'TextEditor',
+    component: () =>
+      import(/* webpackChunkName: "text-editor" */ '@/views/TextEditor.vue')
+  },
   {
     path: '/:user?/:repo?',
     name: 'Home',

src/views/Home.vue

@@ -75,6 +75,7 @@ export default defineComponent({
 <style lang="scss" scoped>
 .home {
   display: flex;
+  flex: 1;
 
   .readme {
     position: sticky;

src/views/TextEditor.vue

@@ -0,0 +1,103 @@
+<template>
+  <div class="text-editor content">
+    <button class="button is-primary" @click="back">
+      <img src="@/assets/icons/left-arrow.svg" alt="back" />
+    </button>
+    <hr />
+    <p>
+      Lite note is used to display efficiently notes. To edit them, use your
+      favorite text editor.
+    </p>
+    <ul>
+      <li>
+        <a
+          href="https://code.visualstudio.com/"
+          target="_blank"
+          rel="noopener noreferrer"
+          >VS Code</a
+        >
+        <p>Useful extensions:</p>
+        <ul>
+          <li>
+            <a
+              href="https://marketplace.visualstudio.com/items?itemName=yzhang.markdown-all-in-one"
+              target="_blank"
+              rel="noopener noreferrer"
+              >Markdown All in One</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://marketplace.visualstudio.com/items?itemName=shd101wyy.markdown-preview-enhanced"
+              target="_blank"
+              rel="noopener noreferrer"
+              >Markdown Preview Enhanced</a
+            >
+          </li>
+        </ul>
+      </li>
+      <li>
+        <a href="https://atom.io/" target="_blank" rel="noopener noreferrer"
+          >Atom</a
+        >
+        <ul>
+          <li>
+            <a
+              href="https://atom.io/packages/markdown-writer"
+              target="_blank"
+              rel="noopener noreferrer"
+              >Markdown Writer</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://atom.io/packages/language-markdown"
+              target="_blank"
+              rel="noopener noreferrer"
+              >Language Markdown</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://atom.io/packages/markdown-preview-plus"
+              target="_blank"
+              rel="noopener noreferrer"
+              >Markdown Preview Plus</a
+            >
+          </li>
+          <li>
+            <a
+              href="https://atom.io/packages/markdown-table-editor"
+              target="_blank"
+              rel="noopener noreferrer"
+              >Markdown Table Editor</a
+            >
+          </li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  name: 'TextEditor',
+  setup() {
+    const { go } = useRouter()
+
+    return {
+      back: () => go(-1)
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.text-editor {
+  padding: 1rem;
+  flex: 1;
+}
+</style>