feat: ⚡️ Vite 2! (#29)
This commit is contained in:
Anthony Fu
GitHub
parent
bbb1392db8
commit
aca2ec183c
5
.vscode/settings.json
vendored
5
.vscode/settings.json
vendored
@ -3,5 +3,8 @@
|
||||
"i18n-ally.keystyle": "nested",
|
||||
"i18n-ally.sortKeys": true,
|
||||
|
||||
"vetur.experimental.templateInterpolationService": true
|
||||
"vetur.experimental.templateInterpolationService": true,
|
||||
"cSpell.words": [
|
||||
"Vitesse"
|
||||
]
|
||||
}
|
||||
@ -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
|
||||
|
||||
|
||||
48
package.json
48
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-i18n": "9.0.0-beta.8",
|
||||
"vue-router": "^4.0.1"
|
||||
"vue": "^3.0.5",
|
||||
"vue-i18n": "9.0.0-rc.1",
|
||||
"vue-router": "^4.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config-vue": "^0.4.3",
|
||||
"@iconify/json": "^1.1.276",
|
||||
"@purge-icons/generated": "^0.4.1",
|
||||
"@iconify/json": "^1.1.282",
|
||||
"@tailwindcss/typography": "^0.3.1",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.11.0",
|
||||
"@vue/compiler-sfc": "^3.0.4",
|
||||
"@vue/server-renderer": "^3.0.4",
|
||||
"@vuedx/typescript-plugin-vue": "^0.2.3",
|
||||
"autoprefixer": "^10.1.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.12.0",
|
||||
"@vitejs/plugin-vue": "^1.0.4",
|
||||
"@vue/compiler-sfc": "^3.0.5",
|
||||
"@vue/server-renderer": "^3.0.5",
|
||||
"@vuedx/typescript-plugin-vue": "^0.4.1",
|
||||
"autoprefixer": "^10.2.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^7.16.0",
|
||||
"markdown-it-shiki": "^0.0.2",
|
||||
"pnpm": "^5.14.1",
|
||||
"eslint": "^7.17.0",
|
||||
"markdown-it-prism": "^2.1.4",
|
||||
"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-plugin-components": "^0.5.5",
|
||||
"vite-plugin-icons": "^0.1.0",
|
||||
"vite-plugin-md": "^0.1.5",
|
||||
"vite-plugin-pwa": "^0.1.7",
|
||||
"vite-plugin-voie": "^0.4.1",
|
||||
"vite-ssg": "^0.1.0",
|
||||
"vite": "^2.0.0-beta.10",
|
||||
"vite-plugin-components": "^0.6.3",
|
||||
"vite-plugin-icons": "^0.2.1",
|
||||
"vite-plugin-md": "^0.2.1",
|
||||
"vite-plugin-pwa": "^0.3.2",
|
||||
"vite-plugin-voie": "^0.7.1",
|
||||
"vite-ssg": "^0.2.0",
|
||||
"voie-pages": "^0.4.0"
|
||||
},
|
||||
"pnpm": {
|
||||
"overrides": {
|
||||
"postcss": "8"
|
||||
}
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "@antfu/eslint-config-vue",
|
||||
"rules": {
|
||||
|
||||
3020
pnpm-lock.yaml
3020
pnpm-lock.yaml
File diff suppressed because it is too large
Load Diff
@ -1,7 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: [
|
||||
require('postcss-nested'),
|
||||
require('tailwindcss'),
|
||||
require('autoprefixer'),
|
||||
],
|
||||
plugins: {
|
||||
'postcss-nested': {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import './main.postcss'
|
||||
import './styles/main.postcss'
|
||||
// import routes generated by Voie
|
||||
import routes from 'voie-pages'
|
||||
// progress bar
|
||||
|
||||
@ -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;
|
||||
}
|
||||
259
src/styles/prism-vscode-dark.css
Normal file
259
src/styles/prism-vscode-dark.css
Normal 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;
|
||||
}
|
||||
}
|
||||
143
src/styles/prism-vscode-light.css
Normal file
143
src/styles/prism-vscode-light.css
Normal 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
38
src/styles/prism.css
Normal 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;
|
||||
}
|
||||
}
|
||||
@ -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: [
|
||||
|
||||
Loading…
Reference in New Issue
Block a user