feat: ️ Vite 2! (#29)

This commit is contained in:
Anthony Fu 2021-01-07 13:49:19 +08:00 committed by GitHub
parent bbb1392db8
commit aca2ec183c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 1553 additions and 2028 deletions

View File

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

View File

@ -1,9 +1,10 @@
<p align='center'> <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>
<p align='center'> <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> </p>
<br> <br>
@ -16,7 +17,7 @@
## Features ## 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) - 🗂 [File based routing](./src/pages)
@ -61,7 +62,7 @@
- [vite-plugin-components](https://github.com/antfu/vite-plugin-components) - components auto import - [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-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 - [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 - [vue-i18n](https://github.com/intlify/vue-i18n-next) - internationalization
- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs - [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs

View File

@ -5,44 +5,40 @@
"build": "cross-env NODE_ENV=production vite-ssg build --script async" "build": "cross-env NODE_ENV=production vite-ssg build --script async"
}, },
"dependencies": { "dependencies": {
"@vueuse/core": "^4.0.0", "@vueuse/core": "^4.0.3",
"nprogress": "^0.2.0", "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": { "devDependencies": {
"@antfu/eslint-config-vue": "^0.4.3", "@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", "@tailwindcss/typography": "^0.3.1",
"@types/nprogress": "^0.2.0", "@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", "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", "postcss-nested": "^5.0.3",
"tailwindcss": "^2.0.2", "tailwindcss": "^2.0.2",
"typescript": "^4.1.3", "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" "voie-pages": "^0.4.0"
}, },
"pnpm": {
"overrides": {
"postcss": "8"
}
},
"eslintConfig": { "eslintConfig": {
"extends": "@antfu/eslint-config-vue", "extends": "@antfu/eslint-config-vue",
"rules": { "rules": {

File diff suppressed because it is too large Load Diff

View File

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

View File

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

View File

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

View File

@ -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;
}
}

View File

@ -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));
}
}

38
src/styles/prism.css Normal file
View File

@ -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;
}
}

View File

@ -1,19 +1,22 @@
import path from 'path' import path from 'path'
import { UserConfig } from 'vite' import { UserConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
import Voie from 'vite-plugin-voie' import Voie from 'vite-plugin-voie'
import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons' import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
import ViteComponents from 'vite-plugin-components' import ViteComponents from 'vite-plugin-components'
import Markdown from 'vite-plugin-md' import Markdown from 'vite-plugin-md'
import Shiki from 'markdown-it-shiki' import Prism from 'markdown-it-prism'
import { VitePWA } from 'vite-plugin-pwa' import { VitePWA } from 'vite-plugin-pwa'
const alias = {
'/~/': path.resolve(__dirname, 'src'),
}
const config: UserConfig = { const config: UserConfig = {
alias, alias: {
'/~/': `${path.resolve(__dirname, 'src')}/`,
},
plugins: [ plugins: [
Vue({
ssr: !!process.env.SSG,
}),
// https://github.com/vamplate/vite-plugin-voie // https://github.com/vamplate/vite-plugin-voie
Voie({ Voie({
// load index page sync and bundled with the landing page to improve first loading time. // 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 // for https://github.com/tailwindlabs/tailwindcss-typography
wrapperClasses: 'prose prose-sm m-auto', wrapperClasses: 'prose prose-sm m-auto',
markdownItSetup(md) { 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({ ViteComponents({
// currently, vite does not provide an API for plugins to get the config https://github.com/vitejs/vite/issues/738 // 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 // 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/` // allow auto load markdown components under `./src/components/`
extensions: ['vue', 'md'], extensions: ['vue', 'md'],
// allow auto import and register components used in markdown // allow auto import and register components used in markdown
customLoaderMatcher({ path }) { customLoaderMatcher: id => id.endsWith('.md'),
return path.endsWith('.md')
},
// auto import icons // auto import icons
customComponentResolvers: [ customComponentResolvers: [