feat: ⚡️ Vite 2! (#29)

vite.config.ts

@@ -1,19 +1,22 @@
 import path from 'path'
 import { UserConfig } from 'vite'
+import Vue from '@vitejs/plugin-vue'
 import Voie from 'vite-plugin-voie'
 import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
 import ViteComponents from 'vite-plugin-components'
 import Markdown from 'vite-plugin-md'
-import Shiki from 'markdown-it-shiki'
+import Prism from 'markdown-it-prism'
 import { VitePWA } from 'vite-plugin-pwa'
 
-const alias = {
-  '/~/': path.resolve(__dirname, 'src'),
-}
-
 const config: UserConfig = {
-  alias,
+  alias: {
+    '/~/': `${path.resolve(__dirname, 'src')}/`,
+  },
   plugins: [
+    Vue({
+      ssr: !!process.env.SSG,
+    }),
+
     // https://github.com/vamplate/vite-plugin-voie
     Voie({
       // load index page sync and bundled with the landing page to improve first loading time.
@@ -29,13 +32,8 @@ const config: UserConfig = {
       // for https://github.com/tailwindlabs/tailwindcss-typography
       wrapperClasses: 'prose prose-sm m-auto',
       markdownItSetup(md) {
-        // https://github.com/antfu/markdown-it-shiki
-        md.use(Shiki, {
-          theme: {
-            dark: 'min-dark',
-            light: 'min-light',
-          },
-        })
+        // https://prismjs.com/
+        md.use(Prism)
       },
     }),
 
@@ -43,15 +41,11 @@ const config: UserConfig = {
     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 }) {
-        return path.endsWith('.md')
-      },
+      customLoaderMatcher: id => id.endsWith('.md'),
 
       // auto import icons
       customComponentResolvers: [