feat: ⚡️ Vite 2! (#29)

.vscode/settings.json

@@ -3,5 +3,8 @@
   "i18n-ally.keystyle": "nested",
   "i18n-ally.sortKeys": true,
 
-  "vetur.experimental.templateInterpolationService": true
+  "vetur.experimental.templateInterpolationService": true,
+  "cSpell.words": [
+    "Vitesse"
+  ]
 }

README.md

@@ -1,9 +1,10 @@
 <p align='center'>
-  <img src='https://repository-images.githubusercontent.com/286295150/b1b1be80-354a-11eb-87c0-5dc96cae2bd9' alt='Vitess - Opinionated Vite Starter Template' width='600'/>
+  <img src='https://repository-images.githubusercontent.com/286295150/b1b1be80-354a-11eb-87c0-5dc96cae2bd9' alt='Vitesse - Opinionated Vite Starter Template' width='600'/>
 </p>
 
 <p align='center'>
-<em>Mocking up web app with <b>⚡️Vitesse</b></em>
+Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em><sub><br>
+<sub><em>Now with Vite 2.0! ⚡️</em></sub>
 </p>
 
 <br>
@@ -16,7 +17,7 @@
 
 ## Features
 
-- ⚡️ [Vue3](https://github.com/vuejs/vue-next), [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.js.org/), [ESBuild](https://github.com/evanw/esbuild) - born with fastness
+- ⚡️ [Vue 3](https://github.com/vuejs/vue-next), [Vite 2](https://github.com/vitejs/vite), [pnpm](https://pnpm.js.org/), [ESBuild](https://github.com/evanw/esbuild) - born with fastness
 
 - 🗂 [File based routing](./src/pages)
 
@@ -61,7 +62,7 @@
 - [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
-  - [markdown-it-shiki](https://github.com/antfu/markdown-it-shiki) - [Shiki](https://github.com/shikijs/shiki) for syntax highlighting
+  - [markdown-it-prism](https://github.com/jGleitz/markdown-it-prism) - [Prism](https://prismjs.com/) for syntax highlighting
 - [vue-i18n](https://github.com/intlify/vue-i18n-next) - internationalization
 - [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
 

package.json

@@ -5,44 +5,40 @@
     "build": "cross-env NODE_ENV=production vite-ssg build --script async"
   },
   "dependencies": {
-    "@vueuse/core": "^4.0.0",
+    "@vueuse/core": "^4.0.3",
     "nprogress": "^0.2.0",
-    "vue": "^3.0.4",
+    "vue": "^3.0.5",
-    "vue-i18n": "9.0.0-beta.8",
+    "vue-i18n": "9.0.0-rc.1",
-    "vue-router": "^4.0.1"
+    "vue-router": "^4.0.2"
   },
   "devDependencies": {
     "@antfu/eslint-config-vue": "^0.4.3",
-    "@iconify/json": "^1.1.276",
+    "@iconify/json": "^1.1.282",
-    "@purge-icons/generated": "^0.4.1",
     "@tailwindcss/typography": "^0.3.1",
     "@types/nprogress": "^0.2.0",
-    "@typescript-eslint/eslint-plugin": "^4.11.0",
+    "@typescript-eslint/eslint-plugin": "^4.12.0",
-    "@vue/compiler-sfc": "^3.0.4",
+    "@vitejs/plugin-vue": "^1.0.4",
-    "@vue/server-renderer": "^3.0.4",
+    "@vue/compiler-sfc": "^3.0.5",
-    "@vuedx/typescript-plugin-vue": "^0.2.3",
+    "@vue/server-renderer": "^3.0.5",
-    "autoprefixer": "^10.1.0",
+    "@vuedx/typescript-plugin-vue": "^0.4.1",
+    "autoprefixer": "^10.2.0",
     "cross-env": "^7.0.3",
-    "eslint": "^7.16.0",
+    "eslint": "^7.17.0",
-    "markdown-it-shiki": "^0.0.2",
+    "markdown-it-prism": "^2.1.4",
-    "pnpm": "^5.14.1",
+    "pnpm": "^5.14.3",
+    "postcss": "^8.2.2",
     "postcss-nested": "^5.0.3",
     "tailwindcss": "^2.0.2",
     "typescript": "^4.1.3",
-    "vite": "^1.0.0-rc.13",
+    "vite": "^2.0.0-beta.10",
-    "vite-plugin-components": "^0.5.5",
+    "vite-plugin-components": "^0.6.3",
-    "vite-plugin-icons": "^0.1.0",
+    "vite-plugin-icons": "^0.2.1",
-    "vite-plugin-md": "^0.1.5",
+    "vite-plugin-md": "^0.2.1",
-    "vite-plugin-pwa": "^0.1.7",
+    "vite-plugin-pwa": "^0.3.2",
-    "vite-plugin-voie": "^0.4.1",
+    "vite-plugin-voie": "^0.7.1",
-    "vite-ssg": "^0.1.0",
+    "vite-ssg": "^0.2.0",
     "voie-pages": "^0.4.0"
   },
-  "pnpm": {
-    "overrides": {
-      "postcss": "8"
-    }
-  },
   "eslintConfig": {
     "extends": "@antfu/eslint-config-vue",
     "rules": {

postcss.config.js

@@ -1,7 +1,7 @@
 module.exports = {
-  plugins: [
+  plugins: {
-    require('postcss-nested'),
+    'postcss-nested': {},
-    require('tailwindcss'),
+    tailwindcss: {},
-    require('autoprefixer'),
+    autoprefixer: {},
-  ],
+  },
 }

src/main.ts

@@ -1,4 +1,4 @@
-import './main.postcss'
+import './styles/main.postcss'
 // import routes generated by Voie
 import routes from 'voie-pages'
 // progress bar

src/styles/main.postcss

@@ -1,6 +1,7 @@
 @import 'tailwindcss/base';
 @import 'tailwindcss/components';
 @import 'tailwindcss/utilities';
+@import './prism.css';
 
 html,
 body,
@@ -45,18 +46,6 @@ html.dark {
   font-size: 0.9em;
 }
 
-.shiki {
+.prose pre {
   text-align: left;
 }
-
-.shiki-light {
-  background: #fafafa !important;
-}
-
-html.dark .shiki-light {
-  display: none;
-}
-
-html:not(.dark) .shiki-dark {
-  display: none;
-}

src/styles/prism-vscode-dark.css

@@ -0,0 +1,259 @@
+/*
+ * https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-vsc-dark-plus.css
+ */
+
+html.dark .prose {
+  pre[class*='language-'],
+  code[class*='language-'] {
+    color: #d4d4d4;
+    background: #1e1e1e;
+  }
+
+  pre[class*='language-']::selection,
+  code[class*='language-']::selection,
+  pre[class*='language-'] *::selection,
+  code[class*='language-'] *::selection {
+    text-shadow: none;
+    background: #75a7ca;
+  }
+
+  /*********************************************************
+   * Tokens
+   */
+  .namespace {
+    opacity: 0.7;
+  }
+
+  .token.doctype .token.doctype-tag {
+    color: #569cd6;
+  }
+
+  .token.doctype .token.name {
+    color: #9cdcfe;
+  }
+
+  .token.comment,
+  .token.prolog {
+    color: #6a9955;
+    font-style: italic;
+  }
+
+  .token.punctuation,
+  .language-html .language-css .token.punctuation,
+  .language-html .language-javascript .token.punctuation {
+    color: #d4d4d4;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.constant,
+  .token.symbol,
+  .token.inserted,
+  .token.unit {
+    color: #b5cea8;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.deleted {
+    color: #ce9178;
+  }
+
+  .language-css .token.string.url {
+    text-decoration: underline;
+  }
+
+  .token.operator,
+  .token.entity {
+    color: #d4d4d4;
+  }
+
+  .token.operator.arrow {
+    color: #569cd6;
+  }
+
+  .token.atrule {
+    color: #ce9178;
+  }
+
+  .token.atrule .token.rule {
+    color: #c586c0;
+  }
+
+  .token.atrule .token.url {
+    color: #9cdcfe;
+  }
+
+  .token.atrule .token.url .token.function {
+    color: #dcdcaa;
+  }
+
+  .token.atrule .token.url .token.punctuation {
+    color: #d4d4d4;
+  }
+
+  .token.keyword {
+    color: #569cd6;
+  }
+
+  .token.keyword.module,
+  .token.keyword.control-flow {
+    color: #c586c0;
+  }
+
+  .token.function,
+  .token.function .token.maybe-class-name {
+    color: #dcdcaa;
+  }
+
+  .token.regex {
+    color: #d16969;
+  }
+
+  .token.important {
+    color: #569cd6;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.constant {
+    color: #9cdcfe;
+  }
+
+  .token.class-name,
+  .token.maybe-class-name {
+    color: #4ec9b0;
+  }
+
+  .token.console {
+    color: #9cdcfe;
+  }
+
+  .token.parameter {
+    color: #9cdcfe;
+  }
+
+  .token.interpolation {
+    color: #9cdcfe;
+  }
+
+  .token.punctuation.interpolation-punctuation {
+    color: #569cd6;
+  }
+
+  .token.boolean {
+    color: #569cd6;
+  }
+
+  .token.property,
+  .token.variable,
+  .token.imports .token.maybe-class-name,
+  .token.exports .token.maybe-class-name {
+    color: #9cdcfe;
+  }
+
+  .token.selector {
+    color: #d7ba7d;
+  }
+
+  .token.escape {
+    color: #d7ba7d;
+  }
+
+  .token.tag {
+    color: #569cd6;
+  }
+
+  .token.tag .token.punctuation {
+    color: #808080;
+  }
+
+  .token.cdata {
+    color: #808080;
+  }
+
+  .token.attr-name {
+    color: #9cdcfe;
+  }
+
+  .token.attr-value,
+  .token.attr-value .token.punctuation {
+    color: #ce9178;
+  }
+
+  .token.attr-value .token.punctuation.attr-equals {
+    color: #d4d4d4;
+  }
+
+  .token.entity {
+    color: #569cd6;
+  }
+
+  .token.namespace {
+    color: #4ec9b0;
+  }
+  /*********************************************************
+* Language Specific
+*/
+
+  pre[class*='language-javascript'],
+  code[class*='language-javascript'],
+  pre[class*='language-jsx'],
+  code[class*='language-jsx'],
+  pre[class*='language-typescript'],
+  code[class*='language-typescript'],
+  pre[class*='language-tsx'],
+  code[class*='language-tsx'] {
+    color: #9cdcfe;
+  }
+
+  pre[class*='language-css'],
+  code[class*='language-css'] {
+    color: #ce9178;
+  }
+
+  pre[class*='language-html'],
+  code[class*='language-html'] {
+    color: #d4d4d4;
+  }
+
+  .language-regex .token.anchor {
+    color: #dcdcaa;
+  }
+
+  .language-html .token.punctuation {
+    color: #808080;
+  }
+  /*********************************************************
+* Line highlighting
+*/
+  pre[data-line] {
+    position: relative;
+  }
+
+  pre[class*='language-'] > code[class*='language-'] {
+    position: relative;
+    z-index: 1;
+  }
+
+  .line-highlight {
+    position: absolute;
+    left: 0;
+    right: 0;
+    padding: inherit 0;
+    margin-top: 1em;
+    background: #f7ebc6;
+    box-shadow: inset 5px 0 0 #f7d87c;
+    z-index: 0;
+    pointer-events: none;
+    line-height: inherit;
+    white-space: pre;
+  }
+}

src/styles/prism-vscode-light.css

@@ -0,0 +1,143 @@
+/**
+ * VS theme by Andrew Lock (https://andrewlock.net)
+ * Inspired by Visual Studio syntax coloring
+ *
+ * https://raw.githubusercontent.com/PrismJS/prism-themes/master/themes/prism-vs.css
+ */
+
+html:not(.dark) .prose {
+  code[class*='language-'],
+  pre[class*='language-'] {
+    color: #393a34;
+  }
+
+  pre[class*='language-']::-moz-selection,
+  pre[class*='language-'] ::-moz-selection,
+  code[class*='language-']::-moz-selection,
+  code[class*='language-'] ::-moz-selection {
+    background: #c1def1;
+  }
+
+  pre[class*='language-']::selection,
+  pre[class*='language-'] ::selection,
+  code[class*='language-']::selection,
+  code[class*='language-'] ::selection {
+    background: #c1def1;
+  }
+
+  /* Code blocks */
+  pre[class*='language-'] {
+    background-color: #f8f8f8;
+  }
+
+  /* Inline code */
+  :not(pre) > code[class*='language-'] {
+    background: #f8f8f8;
+  }
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: #008000;
+    font-style: italic;
+  }
+
+  .token.namespace {
+    opacity: 0.7;
+  }
+
+  .token.string {
+    color: #a31515;
+  }
+
+  .token.punctuation,
+  .token.operator {
+    color: #393a34; /* no highlight */
+  }
+
+  .token.url,
+  .token.symbol,
+  .token.number,
+  .token.boolean,
+  .token.variable,
+  .token.constant,
+  .token.inserted {
+    color: #36acaa;
+  }
+
+  .token.atrule,
+  .token.keyword,
+  .token.attr-value,
+  .language-autohotkey .token.selector,
+  .language-json .token.boolean,
+  .language-json .token.number,
+  code[class*='language-css'] {
+    color: #0000ff;
+  }
+
+  .token.function {
+    color: #393a34;
+  }
+
+  .token.deleted,
+  .language-autohotkey .token.tag {
+    color: #9a050f;
+  }
+
+  .token.selector,
+  .language-autohotkey .token.keyword {
+    color: #00009f;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.class-name,
+  .language-json .token.property {
+    color: #2b91af;
+  }
+
+  .token.tag,
+  .token.selector {
+    color: #800000;
+  }
+
+  .token.attr-name,
+  .token.property,
+  .token.regex,
+  .token.entity {
+    color: #ff0000;
+  }
+
+  .token.directive.tag .tag {
+    background: #ffff00;
+    color: #393a34;
+  }
+
+  /* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+  .line-numbers .line-numbers-rows {
+    border-right-color: #a5a5a5;
+  }
+
+  .line-numbers-rows > span:before {
+    color: #2b91af;
+  }
+
+  /* overrides color-values for the Line Highlight plugin
+   * http://prismjs.com/plugins/line-highlight/
+   */
+  .line-highlight {
+    background: rgba(193, 222, 241, 0.2);
+    background: -webkit-linear-gradient(left, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
+    background: linear-gradient(to right, rgba(193, 222, 241, 0.2) 70%, rgba(221, 222, 241, 0));
+  }
+}

src/styles/prism.css

@@ -0,0 +1,38 @@
+@import './prism-vscode-light.css';
+@import './prism-vscode-dark.css';
+
+.prose {
+  pre[class*='language-'],
+  code[class*='language-'] {
+    text-shadow: none;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    line-height: 1.5;
+    -moz-tab-size: 2;
+    -o-tab-size: 2;
+    tab-size: 2;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  pre[class*='language-'],
+  code[class*='language-'] {
+    text-shadow: none;
+  }
+
+  pre[class*='language-'] {
+    padding: 1em;
+    margin: 0.5em 0;
+    overflow: auto;
+  }
+
+  :not(pre) > code[class*='language-'] {
+    padding: 0.1em 0.3em;
+    border-radius: 0.3em;
+  }
+}

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
+        // https://prismjs.com/
-        md.use(Shiki, {
+        md.use(Prism)
-          theme: {
-            dark: 'min-dark',
-            light: 'min-light',
-          },
-        })
       },
     }),
 
@@ -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 }) {
+      customLoaderMatcher: id => id.endsWith('.md'),
-        return path.endsWith('.md')
-      },
 
       // auto import icons
       customComponentResolvers: [