From fb069825d6688fed3826736885cb9e1000555dcb Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 1 Dec 2020 11:36:51 +0800
Subject: [PATCH] feat: markdown suport

---
 README.md                 |   3 +
 package.json              |  12 +--
 pnpm-lock.yaml            | 178 +++++++++++++++++++++-----------------
 postcss.config.js         |   1 +
 src/components/Footer.vue |  10 ++-
 src/components/README.md  |   2 +-
 src/main.postcss          |  19 +++-
 src/pages/README.md       |   4 +-
 src/pages/about.md        |  11 +++
 vite.config.ts            |  19 ++++
 10 files changed, 169 insertions(+), 90 deletions(-)
 create mode 100644 src/pages/about.md

diff --git a/README.md b/README.md
index 2d8b0ea..10a3879 100644
--- a/README.md
+++ b/README.md
@@ -30,6 +30,8 @@
 
 - 🌍 [i18n ready](./locales)
 
+- 🗒 [Markdown Support](https://github.com/antfu/vite-plugin-md)
+
 - 🔥 Use the [new `<script setup>` style](https://github.com/vuejs/rfcs/pull/227)
 
 - 🦾 TypeScript, of course
@@ -55,6 +57,7 @@
   - [vite-plugin-voie](https://github.com/vamplate/vite-plugin-voie) - file system based routing
 - [vite-plugin-components](https://github.com/antfu/vite-plugin-components) - components auto import
 - [vite-plugin-pwa](https://github.com/antfu/vite-plugin-pwa) - PWA
+- [vite-plugin-md](https://github.com/antfu/vite-plugin-md) - Markdown as components / components in Markdown
 - [vue-i18n](https://github.com/intlify/vue-i18n-next) - internationalization
 - [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
 
diff --git a/package.json b/package.json
index 77129fc..2fb9d8a 100644
--- a/package.json
+++ b/package.json
@@ -9,24 +9,26 @@
     "@vueuse/core": "^4.0.0-rc.4",
     "vue": "^3.0.3",
     "vue-i18n": "9.0.0-beta.8",
-    "vue-router": "^4.0.0-rc.5"
+    "vue-router": "^4.0.0-rc.6"
   },
   "devDependencies": {
     "@antfu/eslint-config-vue": "^0.4.3",
-    "@iconify/json": "^1.1.265",
+    "@iconify/json": "^1.1.266",
     "@purge-icons/generated": "^0.4.1",
-    "@typescript-eslint/eslint-plugin": "^4.8.2",
+    "@typescript-eslint/eslint-plugin": "^4.9.0",
     "@vue/compiler-sfc": "^3.0.3",
     "@vuedx/typescript-plugin-vue": "^0.2.3",
     "autoprefixer": "^10.0.4",
     "cross-env": "^7.0.2",
     "eslint": "^7.14.0",
+    "postcss-nested": "^5.0.1",
     "tailwindcss": "^2.0.1",
     "typescript": "^4.1.2",
     "vite": "^1.0.0-rc.13",
-    "vite-plugin-components": "^0.4.0",
+    "vite-plugin-components": "^0.5.0",
+    "vite-plugin-md": "^0.1.2",
     "vite-plugin-purge-icons": "^0.4.5",
-    "vite-plugin-pwa": "^0.1.5",
+    "vite-plugin-pwa": "^0.1.7",
     "vite-plugin-voie": "^0.4.0",
     "voie-pages": "^0.4.0"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ea1b786..33c2d33 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -3,24 +3,26 @@ dependencies:
   '@vueuse/core': 4.0.0-rc.4_vue@3.0.3
   vue: 3.0.3
   vue-i18n: 9.0.0-beta.8_vue@3.0.3
-  vue-router: 4.0.0-rc.5_vue@3.0.3
+  vue-router: 4.0.0-rc.6_vue@3.0.3
 devDependencies:
   '@antfu/eslint-config-vue': 0.4.3_eslint@7.14.0+typescript@4.1.2
-  '@iconify/json': 1.1.265
+  '@iconify/json': 1.1.266
   '@purge-icons/generated': 0.4.1
-  '@typescript-eslint/eslint-plugin': 4.8.2_eslint@7.14.0+typescript@4.1.2
+  '@typescript-eslint/eslint-plugin': 4.9.0_eslint@7.14.0+typescript@4.1.2
   '@vue/compiler-sfc': 3.0.3_vue@3.0.3
   '@vuedx/typescript-plugin-vue': 0.2.3_vue@3.0.3
   autoprefixer: 10.0.4
   cross-env: 7.0.2
   eslint: 7.14.0
+  postcss-nested: 5.0.1
   tailwindcss: 2.0.1_autoprefixer@10.0.4
   typescript: 4.1.2
   vite: 1.0.0-rc.13
-  vite-plugin-components: 0.4.0
+  vite-plugin-components: 0.5.0
+  vite-plugin-md: 0.1.2_@vue+compiler-sfc@3.0.3
   vite-plugin-purge-icons: 0.4.5
-  vite-plugin-pwa: 0.1.5
-  vite-plugin-voie: 0.4.0_cd83cfd01612f0901ab99ed56feeb391
+  vite-plugin-pwa: 0.1.7
+  vite-plugin-voie: 0.4.0_cc5f94e7f7ee5c93fc7acbfd4f2beeeb
   voie-pages: 0.4.0_vue@3.0.3
 lockfileVersion: 5.2
 overrides:
@@ -82,16 +84,16 @@ packages:
       '@babel/generator': 7.12.1
       '@babel/helper-module-transforms': 7.12.1
       '@babel/helpers': 7.12.1
-      '@babel/parser': 7.12.3
+      '@babel/parser': 7.12.7
       '@babel/template': 7.10.4
       '@babel/traverse': 7.12.1
       '@babel/types': 7.12.1
       convert-source-map: 1.7.0
-      debug: 4.2.0
+      debug: 4.3.1
       gensync: 1.0.0-beta.2
       json5: 2.1.3
       lodash: 4.17.20
-      resolve: 1.18.1
+      resolve: 1.19.0
       semver: 5.7.1
       source-map: 0.5.7
     dev: true
@@ -133,7 +135,7 @@ packages:
       '@babel/compat-data': 7.12.1
       '@babel/core': 7.12.3
       '@babel/helper-validator-option': 7.12.1
-      browserslist: 4.14.5
+      browserslist: 4.14.7
       semver: 5.7.1
     dev: true
     peerDependencies:
@@ -980,7 +982,7 @@ packages:
   /@babel/template/7.10.4:
     dependencies:
       '@babel/code-frame': 7.10.4
-      '@babel/parser': 7.12.3
+      '@babel/parser': 7.12.7
       '@babel/types': 7.12.1
     dev: true
     resolution:
@@ -1005,9 +1007,9 @@ packages:
       '@babel/generator': 7.12.1
       '@babel/helper-function-name': 7.10.4
       '@babel/helper-split-export-declaration': 7.11.0
-      '@babel/parser': 7.12.3
+      '@babel/parser': 7.12.7
       '@babel/types': 7.12.1
-      debug: 4.2.0
+      debug: 4.3.1
       globals: 11.12.0
       lodash: 4.17.20
     dev: true
@@ -1092,10 +1094,10 @@ packages:
     dev: false
     resolution:
       integrity: sha512-BybEHU5/I9EQ0CcwKAqmreZ2bMnAXrqLCTptAc6vPetHMbrXdZfejP5mt57e/8PNSt/qE7BHniU5PCYA+PGIHw==
-  /@iconify/json/1.1.265:
+  /@iconify/json/1.1.266:
     dev: true
     resolution:
-      integrity: sha512-gvBPVAMOBHDPNbqOAlbpWWOv3MQjz80UZQXzxmxrIIa0uV2fWJR5DMp0ubypqZQxByuNURGbm7OBM8woxpgq9Q==
+      integrity: sha512-I8S9lChQATaRroMGccdOQkFbBtMt4C2V/PQGiSjDq9yzdyqDCrPNN9X1qM4FoQt84zfW/+JMHIgShi42E+SXeA==
   /@koa/cors/3.1.0:
     dependencies:
       vary: 1.1.2
@@ -1192,7 +1194,7 @@ packages:
       '@types/resolve': 0.0.8
       builtin-modules: 3.1.0
       is-module: 1.0.0
-      resolve: 1.18.1
+      resolve: 1.19.0
       rollup: 1.32.1
     dev: true
     engines:
@@ -1209,7 +1211,7 @@ packages:
       deep-freeze: 0.0.1
       deepmerge: 4.2.2
       is-module: 1.0.0
-      resolve: 1.18.1
+      resolve: 1.19.0
     dev: true
     engines:
       node: '>= 8.0.0'
@@ -1470,11 +1472,11 @@ packages:
         optional: true
     resolution:
       integrity: sha512-mjb/gwNcmDKNt+6mb7Aj/TjKzIJjOPcoCJpjBQC9ZnTRnBt1p4q5dJSSmIqAtsZ/Pff5N+hJlbiPc5bl6QN4OQ==
-  /@typescript-eslint/eslint-plugin/4.8.2_eslint@7.14.0+typescript@4.1.2:
+  /@typescript-eslint/eslint-plugin/4.9.0_eslint@7.14.0+typescript@4.1.2:
     dependencies:
-      '@typescript-eslint/experimental-utils': 4.8.2_eslint@7.14.0+typescript@4.1.2
-      '@typescript-eslint/scope-manager': 4.8.2
-      debug: 4.3.0
+      '@typescript-eslint/experimental-utils': 4.9.0_eslint@7.14.0+typescript@4.1.2
+      '@typescript-eslint/scope-manager': 4.9.0
+      debug: 4.3.1
       eslint: 7.14.0
       functional-red-black-tree: 1.0.1
       regexpp: 3.1.0
@@ -1492,7 +1494,7 @@ packages:
       typescript:
         optional: true
     resolution:
-      integrity: sha512-gQ06QLV5l1DtvYtqOyFLXD9PdcILYqlrJj2l+CGDlPtmgLUzc1GpqciJFIRvyfvgLALpnxYINFuw+n9AZhPBKQ==
+      integrity: sha512-WrVzGMzzCrgrpnQMQm4Tnf+dk+wdl/YbgIgd5hKGa2P+lnJ2MON+nQnbwgbxtN9QDLi8HO+JAq0/krMnjQK6Cw==
   /@typescript-eslint/experimental-utils/4.5.0_eslint@7.14.0+typescript@4.1.2:
     dependencies:
       '@types/json-schema': 7.0.6
@@ -1510,12 +1512,12 @@ packages:
       typescript: '*'
     resolution:
       integrity: sha512-bW9IpSAKYvkqDGRZzayBXIgPsj2xmmVHLJ+flGSoN0fF98pGoKFhbunIol0VF2Crka7z984EEhFi623Rl7e6gg==
-  /@typescript-eslint/experimental-utils/4.8.2_eslint@7.14.0+typescript@4.1.2:
+  /@typescript-eslint/experimental-utils/4.9.0_eslint@7.14.0+typescript@4.1.2:
     dependencies:
       '@types/json-schema': 7.0.6
-      '@typescript-eslint/scope-manager': 4.8.2
-      '@typescript-eslint/types': 4.8.2
-      '@typescript-eslint/typescript-estree': 4.8.2_typescript@4.1.2
+      '@typescript-eslint/scope-manager': 4.9.0
+      '@typescript-eslint/types': 4.9.0
+      '@typescript-eslint/typescript-estree': 4.9.0_typescript@4.1.2
       eslint: 7.14.0
       eslint-scope: 5.1.1
       eslint-utils: 2.1.0
@@ -1526,7 +1528,7 @@ packages:
       eslint: '*'
       typescript: '*'
     resolution:
-      integrity: sha512-hpTw6o6IhBZEsQsjuw/4RWmceRyESfAiEzAEnXHKG1X7S5DXFaZ4IO1JO7CW1aQ604leQBzjZmuMI9QBCAJX8Q==
+      integrity: sha512-0p8GnDWB3R2oGhmRXlEnCvYOtaBCijtA5uBfH5GxQKsukdSQyI4opC4NGTUb88CagsoNQ4rb/hId2JuMbzWKFQ==
   /@typescript-eslint/parser/4.5.0_eslint@7.14.0+typescript@4.1.2:
     dependencies:
       '@typescript-eslint/scope-manager': 4.5.0
@@ -1555,27 +1557,27 @@ packages:
       node: ^8.10.0 || ^10.13.0 || >=11.10.1
     resolution:
       integrity: sha512-C0cEO0cTMPJ/w4RA/KVe4LFFkkSh9VHoFzKmyaaDWAnPYIEzVCtJ+Un8GZoJhcvq+mPFXEsXa01lcZDHDG6Www==
-  /@typescript-eslint/scope-manager/4.8.2:
+  /@typescript-eslint/scope-manager/4.9.0:
     dependencies:
-      '@typescript-eslint/types': 4.8.2
-      '@typescript-eslint/visitor-keys': 4.8.2
+      '@typescript-eslint/types': 4.9.0
+      '@typescript-eslint/visitor-keys': 4.9.0
     dev: true
     engines:
       node: ^8.10.0 || ^10.13.0 || >=11.10.1
     resolution:
-      integrity: sha512-qHQ8ODi7mMin4Sq2eh/6eu03uVzsf5TX+J43xRmiq8ujng7ViQSHNPLOHGw/Wr5dFEoxq/ubKhzClIIdQy5q3g==
+      integrity: sha512-q/81jtmcDtMRE+nfFt5pWqO0R41k46gpVLnuefqVOXl4QV1GdQoBWfk5REcipoJNQH9+F5l+dwa9Li5fbALjzg==
   /@typescript-eslint/types/4.5.0:
     dev: true
     engines:
       node: ^8.10.0 || ^10.13.0 || >=11.10.1
     resolution:
       integrity: sha512-n2uQoXnyWNk0Les9MtF0gCK3JiWd987JQi97dMSxBOzVoLZXCNtxFckVqt1h8xuI1ix01t+iMY4h4rFMj/303g==
-  /@typescript-eslint/types/4.8.2:
+  /@typescript-eslint/types/4.9.0:
     dev: true
     engines:
       node: ^8.10.0 || ^10.13.0 || >=11.10.1
     resolution:
-      integrity: sha512-z1/AVcVF8ju5ObaHe2fOpZYEQrwHyZ7PTOlmjd3EoFeX9sv7UekQhfrCmgUO7PruLNfSHrJGQvrW3Q7xQ8EoAw==
+      integrity: sha512-luzLKmowfiM/IoJL/rus1K9iZpSJK6GlOS/1ezKplb7MkORt2dDcfi8g9B0bsF6JoRGhqn0D3Va55b+vredFHA==
   /@typescript-eslint/typescript-estree/4.5.0_typescript@4.1.2:
     dependencies:
       '@typescript-eslint/types': 4.5.0
@@ -1597,10 +1599,10 @@ packages:
         optional: true
     resolution:
       integrity: sha512-gN1mffq3zwRAjlYWzb5DanarOPdajQwx5MEWkWCk0XvqC8JpafDTeioDoow2L4CA/RkYZu7xEsGZRhqrTsAG8w==
-  /@typescript-eslint/typescript-estree/4.8.2_typescript@4.1.2:
+  /@typescript-eslint/typescript-estree/4.9.0_typescript@4.1.2:
     dependencies:
-      '@typescript-eslint/types': 4.8.2
-      '@typescript-eslint/visitor-keys': 4.8.2
+      '@typescript-eslint/types': 4.9.0
+      '@typescript-eslint/visitor-keys': 4.9.0
       debug: 4.3.1
       globby: 11.0.1
       is-glob: 4.0.1
@@ -1617,7 +1619,7 @@ packages:
       typescript:
         optional: true
     resolution:
-      integrity: sha512-HToGNwI6fekH0dOw3XEVESUm71Onfam0AKin6f26S2FtUmO7o3cLlWgrIaT1q3vjB3wCTdww3Dx2iGq5wtUOCg==
+      integrity: sha512-rmDR++PGrIyQzAtt3pPcmKWLr7MA+u/Cmq9b/rON3//t5WofNR4m/Ybft2vOLj0WtUzjn018ekHjTsnIyBsQug==
   /@typescript-eslint/visitor-keys/4.5.0:
     dependencies:
       '@typescript-eslint/types': 4.5.0
@@ -1627,15 +1629,15 @@ packages:
       node: ^8.10.0 || ^10.13.0 || >=11.10.1
     resolution:
       integrity: sha512-UHq4FSa55NDZqscRU//O5ROFhHa9Hqn9KWTEvJGTArtTQp5GKv9Zqf6d/Q3YXXcFv4woyBml7fJQlQ+OuqRcHA==
-  /@typescript-eslint/visitor-keys/4.8.2:
+  /@typescript-eslint/visitor-keys/4.9.0:
     dependencies:
-      '@typescript-eslint/types': 4.8.2
+      '@typescript-eslint/types': 4.9.0
       eslint-visitor-keys: 2.0.0
     dev: true
     engines:
       node: ^8.10.0 || ^10.13.0 || >=11.10.1
     resolution:
-      integrity: sha512-Vg+/SJTMZJEKKGHW7YC21QxgKJrSbxoYYd3MEUGtW7zuytHuEcksewq0DUmo4eh/CTNrVJGSdIY9AtRb6riWFw==
+      integrity: sha512-sV45zfdRqQo1A97pOSx3fsjR+3blmwtdCt8LDrXgCX36v4Vmz4KHrhpV6Fo2cRdXmyumxx11AHw0pNJqCNpDyg==
   /@vue/compiler-core/3.0.0-rc.10:
     dependencies:
       '@babel/parser': 7.11.5
@@ -1950,6 +1952,10 @@ packages:
     dev: true
     resolution:
       integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==
+  /argparse/2.0.1:
+    dev: true
+    resolution:
+      integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
   /array-includes/3.1.1:
     dependencies:
       define-properties: 1.1.3
@@ -2103,18 +2109,6 @@ packages:
       node: '>= 10.16.0'
     resolution:
       integrity: sha512-uA9fOtlTRC0iqKfzff1W34DXUA3GyVqbUaeo3Rw3d4gd1eavKVCETXrn3NzO74W+UVkG3UHu8WxUi+XvKI/huA==
-  /browserslist/4.14.5:
-    dependencies:
-      caniuse-lite: 1.0.30001151
-      electron-to-chromium: 1.3.584
-      escalade: 3.1.1
-      node-releases: 1.1.64
-    dev: true
-    engines:
-      node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7
-    hasBin: true
-    resolution:
-      integrity: sha512-Z+vsCZIvCBvqLoYkBFTwEYH3v5MCQbsAjp50ERycpOjnPmolg1Gjy4+KaWWpm8QOJt9GHkhdqAl14NpCX73CWA==
   /browserslist/4.14.7:
     dependencies:
       caniuse-lite: 1.0.30001161
@@ -2183,10 +2177,6 @@ packages:
       node: '>=6'
     resolution:
       integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
-  /caniuse-lite/1.0.30001151:
-    dev: true
-    resolution:
-      integrity: sha512-Zh3sHqskX6mHNrqUerh+fkf0N72cMxrmflzje/JyVImfpknscMnkeJrlFGJcqTmaa0iszdYptGpWMJCRQDkBVw==
   /caniuse-lite/1.0.30001161:
     dev: true
     resolution:
@@ -2422,7 +2412,7 @@ packages:
       integrity: sha512-8aPsApQfebXnuI+537McwYsDtjVxGm8gTIzQI3FDW6t5t/DAhERxtnbEPN/8RX+uZthoz4eCOgloXaE5cYyNow==
   /core-js-compat/3.6.5:
     dependencies:
-      browserslist: 4.14.5
+      browserslist: 4.14.7
       semver: 7.0.0
     dev: true
     resolution:
@@ -2702,10 +2692,6 @@ packages:
     requiresBuild: true
     resolution:
       integrity: sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
-  /electron-to-chromium/1.3.584:
-    dev: true
-    resolution:
-      integrity: sha512-NB3DzrTzJFhWkUp+nl2KtUtoFzrfGXTir2S+BU4tXGyXH9vlluPuFpE3pTKeH7+PY460tHLjKzh6K2+TWwW+Ww==
   /electron-to-chromium/1.3.610:
     dev: true
     resolution:
@@ -3951,6 +3937,12 @@ packages:
     dev: true
     resolution:
       integrity: sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+  /linkify-it/3.0.2:
+    dependencies:
+      uc.micro: 1.0.6
+    dev: true
+    resolution:
+      integrity: sha512-gDBO4aHNZS6coiZCKVhSNh43F9ioIL4JwRjLZPkoLIY4yZFwg264Y5lu2x6rb1Js42Gh6Yqm2f6L2AJcnkzinQ==
   /load-json-file/2.0.0:
     dependencies:
       graceful-fs: 4.2.4
@@ -4053,6 +4045,21 @@ packages:
     dev: true
     resolution:
       integrity: sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==
+  /markdown-it/12.0.2:
+    dependencies:
+      argparse: 2.0.1
+      entities: 2.0.3
+      linkify-it: 3.0.2
+      mdurl: 1.0.1
+      uc.micro: 1.0.6
+    dev: true
+    hasBin: true
+    resolution:
+      integrity: sha512-4Lkvjbv2kK+moL9TbeV+6/NHx+1Q+R/NIdUlFlkqkkzUcTod4uiyTJRiBidKR9qXSdkNFkgv+AELY8KN9vSgVA==
+  /mdurl/1.0.1:
+    dev: true
+    resolution:
+      integrity: sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=
   /media-typer/0.3.0:
     dev: true
     engines:
@@ -4180,10 +4187,6 @@ packages:
       node: '>= 6.0.0'
     resolution:
       integrity: sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==
-  /node-releases/1.1.64:
-    dev: true
-    resolution:
-      integrity: sha512-Iec8O9166/x2HRMJyLLLWkd0sFFLrFNy+Xf+JQfSQsdBJzPcHpNl3JQ9gD4j+aJxmCa25jNsIbM4bmACtSbkSg==
   /node-releases/1.1.67:
     dev: true
     resolution:
@@ -5547,6 +5550,10 @@ packages:
     hasBin: true
     resolution:
       integrity: sha512-thGloWsGH3SOxv1SoY7QojKi0tc+8FnOmiarEGMbd/lar7QOEd3hvlx3Fp5y6FlDUGl9L+pd4n2e+oToGMmhRQ==
+  /uc.micro/1.0.6:
+    dev: true
+    resolution:
+      integrity: sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
   /unicode-canonical-property-names-ecmascript/1.0.4:
     dev: true
     engines:
@@ -5635,14 +5642,23 @@ packages:
     dev: true
     resolution:
       integrity: sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA==
-  /vite-plugin-components/0.4.0:
+  /vite-plugin-components/0.5.0:
     dependencies:
       debug: 4.3.1
       fast-glob: 3.2.4
       minimatch: 3.0.4
     dev: true
     resolution:
-      integrity: sha512-V+XEXhFj+wiUG5xKyL4rTa3a4b7qKCHeTMK2Zlr2ejFa6+378iGwBcPIfTj3nSiOVIUVlEhHcTuWdEKAqUxpRA==
+      integrity: sha512-9IVhnZKhKPvbTtFDvl5jNkgUQ/ZKTQiDPvnEjBdOnkdXkOiW6thP1lqs09EZbECwR5eMKL0euCJVW5n9oUK50Q==
+  /vite-plugin-md/0.1.2_@vue+compiler-sfc@3.0.3:
+    dependencies:
+      '@vue/compiler-sfc': 3.0.3_vue@3.0.3
+      markdown-it: 12.0.2
+    dev: true
+    peerDependencies:
+      '@vue/compiler-sfc': ^3.0.2
+    resolution:
+      integrity: sha512-Ro4mhJY79g1BG7Iu/NZfn8uFhqEL/QQtN6UqQolnxEmF4NAEFDfPdxZ0W+TZnFxGbDeCaiyczOkLoNZza3PsfA==
   /vite-plugin-purge-icons/0.4.5:
     dependencies:
       '@purge-icons/core': 0.4.5
@@ -5653,20 +5669,20 @@ packages:
       node: '>= 12'
     resolution:
       integrity: sha512-56Jj+mJXsZJpHrQ89D/mYJFFvYalV6rLnAdj7Q7q0w9PVFHBHa2E2zdQBOC0fHB+VM/QLgzVqT7gJd0PTuj3Ag==
-  /vite-plugin-pwa/0.1.5:
+  /vite-plugin-pwa/0.1.7:
     dependencies:
-      debug: 4.3.0
+      debug: 4.3.1
       fast-glob: 3.2.4
       rollup-plugin-workbox: 5.2.1
     dev: true
     resolution:
-      integrity: sha512-7zUCeg0v1z8JpR+1yKN8Bz0d2d6UvV9whi+GkLGc70ms7G1XvkV0WieBSZwTT0lCwrdxthnvbgJJzJlYPHd0KQ==
-  /vite-plugin-voie/0.4.0_cd83cfd01612f0901ab99ed56feeb391:
+      integrity: sha512-S5Hc1x/rcfb6cgKjlW7yxSTv1er6fquzGZt/+xC1wavSBa7Qf6wdf6QzYiYdwmUom5yUSDEawc2gEYgq5SsZFg==
+  /vite-plugin-voie/0.4.0_cc5f94e7f7ee5c93fc7acbfd4f2beeeb:
     dependencies:
       fast-glob: 3.2.4
       vite: 1.0.0-rc.13
       voie-pages: 0.4.0_vue@3.0.3
-      vue-router: 4.0.0-rc.5_vue@3.0.3
+      vue-router: 4.0.0-rc.6_vue@3.0.3
     dev: true
     peerDependencies:
       vite: ^1.0.0-rc.4
@@ -5739,7 +5755,7 @@ packages:
       integrity: sha512-hLfTbhNPDhwXMCAWR6s6C79G/O8Is0MbslglgoHSQsRby+KnqHgtHChCVBHFeV2oZBV/3xhHhnfm94BDPFe8Ww==
   /voie-pages/0.4.0_vue@3.0.3:
     dependencies:
-      vue-router: 4.0.0-rc.5_vue@3.0.3
+      vue-router: 4.0.0-rc.6_vue@3.0.3
     dev: true
     peerDependencies:
       vue: '*'
@@ -5790,13 +5806,13 @@ packages:
       vue: ^3.0.0
     resolution:
       integrity: sha512-tViSN96jLi0AKvAVi4twcYYN5Ld++SqN1/140ua+YWm/iRbO2M0rAcsZ7e6/4LTm6Pd1ldSwWihSuv2bSQmlnw==
-  /vue-router/4.0.0-rc.5_vue@3.0.3:
+  /vue-router/4.0.0-rc.6_vue@3.0.3:
     dependencies:
       vue: 3.0.3
     peerDependencies:
       vue: ^3.0.0
     resolution:
-      integrity: sha512-Q8Tt6VGwGMN5qASeIdjSydU3uRADK9AUkqnbnzmTz+zZKS0W6GZOAuP235lf3y5/MqEFSKRJGaTWPEY0t+Rjmg==
+      integrity: sha512-hVHC8A4/0yku1Z6+oUtX9odeHv78XwDI7putt1hd7os27P7mLabkjArN7f3TI3e/cz17MxAUz5Yp+m8ZE3sPsw==
   /vue/3.0.3:
     dependencies:
       '@vue/compiler-dom': 3.0.3
@@ -6053,23 +6069,25 @@ packages:
 specifiers:
   '@antfu/eslint-config-vue': ^0.4.3
   '@iconify/iconify': ^2.0.0-rc.2
-  '@iconify/json': ^1.1.265
+  '@iconify/json': ^1.1.266
   '@purge-icons/generated': ^0.4.1
-  '@typescript-eslint/eslint-plugin': ^4.8.2
+  '@typescript-eslint/eslint-plugin': ^4.9.0
   '@vue/compiler-sfc': ^3.0.3
   '@vuedx/typescript-plugin-vue': ^0.2.3
   '@vueuse/core': ^4.0.0-rc.4
   autoprefixer: ^10.0.4
   cross-env: ^7.0.2
   eslint: ^7.14.0
+  postcss-nested: ^5.0.1
   tailwindcss: ^2.0.1
   typescript: ^4.1.2
   vite: ^1.0.0-rc.13
-  vite-plugin-components: ^0.4.0
+  vite-plugin-components: ^0.5.0
+  vite-plugin-md: ^0.1.2
   vite-plugin-purge-icons: ^0.4.5
-  vite-plugin-pwa: ^0.1.5
+  vite-plugin-pwa: ^0.1.7
   vite-plugin-voie: ^0.4.0
   voie-pages: ^0.4.0
   vue: ^3.0.3
   vue-i18n: 9.0.0-beta.8
-  vue-router: ^4.0.0-rc.5
+  vue-router: ^4.0.0-rc.6
diff --git a/postcss.config.js b/postcss.config.js
index 07d5d79..42b4e3a 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -1,5 +1,6 @@
 module.exports = {
   plugins: [
+    require('postcss-nested'),
     require('tailwindcss'),
     require('autoprefixer'),
   ],
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index ee7d377..2f237d7 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,5 +1,9 @@
 <template>
   <div class="text-xl mt-6">
+    <router-link class="icon-btn mx-2" to="/">
+      <Icon icon="carbon:campsite" class="inline-block" />
+    </router-link>
+
     <div class="icon-btn mx-2" @click="isDark = !isDark">
       <Icon :icon="isDark ? 'carbon:moon' : 'carbon:sun'" class="inline-block" />
     </div>
@@ -8,8 +12,12 @@
       <Icon icon="carbon:language" class="inline-block" />
     </div>
 
+    <router-link class="icon-btn mx-2" to="/about">
+      <Icon icon="carbon:dicom-overlay" class="inline-block" />
+    </router-link>
+
     <a class="icon-btn mx-2" href="https://github.com/antfu/vitesse" target="_blank">
-      <Icon icon="carbon:code" class="inline-block" />
+      <Icon icon="carbon:logo-github" class="inline-block" />
     </a>
   </div>
 </template>
diff --git a/src/components/README.md b/src/components/README.md
index 59a1eb5..1442c5f 100644
--- a/src/components/README.md
+++ b/src/components/README.md
@@ -1,6 +1,6 @@
 ## Components
 
-Components in this dir will be auto registered on-demand, powered by [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components).
+Components in this dir will be auto-registered and on-demand, powered by [`vite-plugin-components`](https://github.com/antfu/vite-plugin-components).
 
 
 ### `Icon.vue`
diff --git a/src/main.postcss b/src/main.postcss
index 6273e2b..613001c 100755
--- a/src/main.postcss
+++ b/src/main.postcss
@@ -15,6 +15,23 @@ html.dark {
   background: #222;
 }
 
+.markdown-body {
+  max-width: 300px;
+  @apply m-auto text-left;
+
+  h3 {
+    @apply text-center;
+  }
+
+  a {
+    @apply opacity-50 hover:opacity-100 hover:text-teal-600;
+  }
+
+  p {
+    @apply my-4;
+  }
+}
+
 .btn {
   @apply
     px-4 py-1 rounded inline-block
@@ -27,5 +44,5 @@ html.dark {
   @apply
     inline-block cursor-pointer select-none
     opacity-75 transition duration-200 ease-in-out
-    hover:opacity-100;
+    hover:opacity-100 hover:text-teal-600;
 }
diff --git a/src/pages/README.md b/src/pages/README.md
index 99bdddf..bdb0736 100644
--- a/src/pages/README.md
+++ b/src/pages/README.md
@@ -1,6 +1,6 @@
-## File Based Routing
+## File-based Routing
 
-Routes will auto generated for Vue files in this dir with the same file structure. 
+Routes will auto-generated for Vue files in this dir with the same file structure.
 Check out [`vite-plugin-voie`](https://github.com/vamplate/vite-plugin-voie) for more details.
 
 ### Path Aliasing
diff --git a/src/pages/about.md b/src/pages/about.md
new file mode 100644
index 0000000..dca0ace
--- /dev/null
+++ b/src/pages/about.md
@@ -0,0 +1,11 @@
+<div class="text-4xl text-center">
+  <!-- You can use Vue components inside markdown -->
+  <Icon class="iconify inline-block" icon="carbon:dicom-overlay" />
+</div>
+
+### About
+
+[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. It has file-based routing, components auto importing, markdown support, i18n, PWA and uses Tailwind v2 for UI.
+
+
+Check out the [GitHub repo](https://github.com/antfu/vitesse) for more details.
diff --git a/vite.config.ts b/vite.config.ts
index cab9155..59bd783 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -3,6 +3,7 @@ import { UserConfig } from 'vite'
 import Voie from 'vite-plugin-voie'
 import PurgeIcons from 'vite-plugin-purge-icons'
 import ViteComponents from 'vite-plugin-components'
+import Markdown from 'vite-plugin-md'
 import { VitePWA } from 'vite-plugin-pwa'
 
 const alias = {
@@ -12,6 +13,8 @@ const alias = {
 const config: UserConfig = {
   alias,
   plugins: [
+
+    // https://github.com/vamplate/vite-plugin-voie
     Voie({
       // load index page sync and bundled with the landing page to improve first loading time.
       // feel free to remove if you don't need it
@@ -20,13 +23,29 @@ const config: UserConfig = {
           return 'sync'
         return 'async'
       },
+      extensions: ['vue', 'md'],
     }),
+
+    // https://github.com/antfu/vite-plugin-md
+    Markdown(),
+
+    // https://github.com/antfu/vite-plugin-components
     ViteComponents({
       // currently, vite does not provide an API for plugins to get the config https://github.com/vitejs/vite/issues/738
       // as the `alias` changes the behavior of middlewares, you have to pass it to ViteComponents to do the resolving
       alias,
+
+      // allow auto load markdown components under `./src/components/`
+      extensions: ['vue', 'md'],
+
+      // allow auto import and register components used in markdown
+      customLoaderMatcher: ({ path }) => path.endsWith('.md'),
     }),
+
+    // https://github.com/antfu/purge-icons
     PurgeIcons(),
+
+    // https://github.com/antfu/vite-plugin-pwa
     VitePWA({
       manifest: {
         name: 'Vitesse',