feat: ssg critical css
This commit is contained in:
Anthony Fu
parent
439119935c
commit
91f08f3b13
@ -38,6 +38,8 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
|
||||
|
||||
- 🖨 Server-side generation (SSG) via [vite-ssg](https://github.com/antfu/vite-ssg)
|
||||
|
||||
- 🦔 Critical CSS via [critters](https://github.com/GoogleChromeLabs/critters)
|
||||
|
||||
- 🦾 TypeScript, of course
|
||||
|
||||
- ☁️ Deploy on Netlify, zero-config
|
||||
@ -83,6 +85,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
|
||||
- [TypeScript](https://www.typescriptlang.org/)
|
||||
- [pnpm](https://pnpm.js.org/) - fast, disk space efficient package manager
|
||||
- [`vite-ssg`](https://github.com/antfu/vite-ssg) - Server-side generation
|
||||
- [critters](https://github.com/GoogleChromeLabs/critters) - Critical CSS
|
||||
- [Netlify](https://www.netlify.com/) - zero-config deployment
|
||||
- [VS Code Extensions](./.vscode/extensions.json)
|
||||
- [Vite](https://marketplace.visualstudio.com/items?itemName=antfu.vite) - Fire up Vite server automatically
|
||||
|
||||
@ -26,6 +26,7 @@
|
||||
"@vitejs/plugin-vue": "^1.3.0",
|
||||
"@vue/compiler-sfc": "^3.1.5",
|
||||
"@vue/server-renderer": "^3.1.5",
|
||||
"critters": "^0.0.10",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^7.32.0",
|
||||
"https-localhost": "^4.6.5",
|
||||
@ -41,7 +42,7 @@
|
||||
"vite-plugin-pwa": "^0.9.3",
|
||||
"vite-plugin-vue-layouts": "^0.3.1",
|
||||
"vite-plugin-windicss": "^1.2.7",
|
||||
"vite-ssg": "^0.13.0",
|
||||
"vite-ssg": "^0.14.4",
|
||||
"vue-tsc": "^0.2.2"
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,6 +11,7 @@ specifiers:
|
||||
'@vue/server-renderer': ^3.1.5
|
||||
'@vueuse/core': ^5.2.0
|
||||
'@vueuse/head': ^0.6.0
|
||||
critters: ^0.0.10
|
||||
cross-env: ^7.0.3
|
||||
eslint: ^7.32.0
|
||||
https-localhost: ^4.6.5
|
||||
@ -28,7 +29,7 @@ specifiers:
|
||||
vite-plugin-pwa: ^0.9.3
|
||||
vite-plugin-vue-layouts: ^0.3.1
|
||||
vite-plugin-windicss: ^1.2.7
|
||||
vite-ssg: ^0.13.0
|
||||
vite-ssg: ^0.14.4
|
||||
vue: ^3.1.5
|
||||
vue-demi: ^0.11.2
|
||||
vue-global-api: ^0.4.1
|
||||
@ -56,6 +57,7 @@ devDependencies:
|
||||
'@vitejs/plugin-vue': 1.3.0_@vue+compiler-sfc@3.1.5
|
||||
'@vue/compiler-sfc': 3.1.5_vue@3.1.5
|
||||
'@vue/server-renderer': 3.1.5_vue@3.1.5
|
||||
critters: 0.0.10
|
||||
cross-env: 7.0.3
|
||||
eslint: 7.32.0
|
||||
https-localhost: 4.6.5
|
||||
@ -71,7 +73,7 @@ devDependencies:
|
||||
vite-plugin-pwa: 0.9.3_vite@2.4.4
|
||||
vite-plugin-vue-layouts: 0.3.1_vite@2.4.4
|
||||
vite-plugin-windicss: 1.2.7_vite@2.4.4
|
||||
vite-ssg: 0.13.0_b0c93b2db9b0c7e1ffb2e29b00915306
|
||||
vite-ssg: 0.14.4_4d4bc60af3721dd3f198b31f3d098737
|
||||
vue-tsc: 0.2.2_typescript@4.3.5
|
||||
|
||||
packages:
|
||||
@ -2179,6 +2181,12 @@ packages:
|
||||
engines: {node: '>= 4.0.0'}
|
||||
dev: true
|
||||
|
||||
/atob/2.1.2:
|
||||
resolution: {integrity: sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==}
|
||||
engines: {node: '>= 4.5.0'}
|
||||
hasBin: true
|
||||
dev: true
|
||||
|
||||
/available-typed-arrays/1.0.4:
|
||||
resolution: {integrity: sha512-SA5mXJWrId1TaQjfxUYghbqQ/hYioKmLJvPJyDuYRtXXenFNMjj4hSSt1Cf1xsuXSXrtxrVC5Ot4eU6cOtBDdA==}
|
||||
engines: {node: '>= 0.4'}
|
||||
@ -2515,6 +2523,16 @@ packages:
|
||||
vary: 1.1.2
|
||||
dev: true
|
||||
|
||||
/critters/0.0.10:
|
||||
resolution: {integrity: sha512-p5VKhP1803+f+0Jq5P03w1SbiHtpAKm+1EpJHkiPxQPq0Vu9QLZHviJ02GRrWi0dlcJqrmzMWInbwp4d22RsGw==}
|
||||
dependencies:
|
||||
chalk: 4.1.2
|
||||
css: 3.0.0
|
||||
parse5: 6.0.1
|
||||
parse5-htmlparser2-tree-adapter: 6.0.1
|
||||
pretty-bytes: 5.6.0
|
||||
dev: true
|
||||
|
||||
/cross-env/7.0.3:
|
||||
resolution: {integrity: sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==}
|
||||
engines: {node: '>=10.14', npm: '>=6', yarn: '>=1'}
|
||||
@ -2537,6 +2555,14 @@ packages:
|
||||
engines: {node: '>=8'}
|
||||
dev: true
|
||||
|
||||
/css/3.0.0:
|
||||
resolution: {integrity: sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==}
|
||||
dependencies:
|
||||
inherits: 2.0.4
|
||||
source-map: 0.6.1
|
||||
source-map-resolve: 0.6.0
|
||||
dev: true
|
||||
|
||||
/cssesc/3.0.0:
|
||||
resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
|
||||
engines: {node: '>=4'}
|
||||
@ -2598,6 +2624,11 @@ packages:
|
||||
resolution: {integrity: sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==}
|
||||
dev: true
|
||||
|
||||
/decode-uri-component/0.2.0:
|
||||
resolution: {integrity: sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=}
|
||||
engines: {node: '>=0.10'}
|
||||
dev: true
|
||||
|
||||
/deep-equal/2.0.5:
|
||||
resolution: {integrity: sha512-nPiRgmbAtm1a3JsnLCf6/SLfXcjyN5v8L1TXzdCmHrXJ4hx+gW/w1YCcn7z8gJtSiDArZCgYtbao3QqLm/N1Sw==}
|
||||
dependencies:
|
||||
@ -4496,6 +4527,12 @@ packages:
|
||||
lines-and-columns: 1.1.6
|
||||
dev: true
|
||||
|
||||
/parse5-htmlparser2-tree-adapter/6.0.1:
|
||||
resolution: {integrity: sha512-qPuWvbLgvDGilKc5BoicRovlT4MtYT6JfJyBOMDsKoiT+GiuP5qyrPCnR9HcPECIJJmZh5jRndyNThnhhb/vlA==}
|
||||
dependencies:
|
||||
parse5: 6.0.1
|
||||
dev: true
|
||||
|
||||
/parse5/6.0.1:
|
||||
resolution: {integrity: sha512-Ofn/CTFzRGTTxwpNEs9PP93gXShHcTq255nzRYSKe8AkVpZY7e1fpmTfOyoIvjP5HG7Z2ZM7VS9PPhQGW2pOpw==}
|
||||
dev: true
|
||||
@ -5197,6 +5234,13 @@ packages:
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/source-map-resolve/0.6.0:
|
||||
resolution: {integrity: sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==}
|
||||
dependencies:
|
||||
atob: 2.1.2
|
||||
decode-uri-component: 0.2.0
|
||||
dev: true
|
||||
|
||||
/source-map-support/0.5.19:
|
||||
resolution: {integrity: sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==}
|
||||
dependencies:
|
||||
@ -5764,22 +5808,27 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/vite-ssg/0.13.0_b0c93b2db9b0c7e1ffb2e29b00915306:
|
||||
resolution: {integrity: sha512-CoG6uHfjZ8ALJan9IafutwxLxrT8fSRNQ5aI2hsv5D/dcMY37fetvt2RA4+0FUkVAhvOhbDNAL74ZSo7JrjLOg==}
|
||||
/vite-ssg/0.14.4_4d4bc60af3721dd3f198b31f3d098737:
|
||||
resolution: {integrity: sha512-Y2Q8Mx1FBqNcuAzRc9fx7N43uIYpkvrt0GssMa3hFVnXKZ7Zi1A0fvgvShwgH7WjZCwucZQFA5v40IvCaz1bOg==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
hasBin: true
|
||||
peerDependencies:
|
||||
'@vue/compiler-sfc': ^3.0.4
|
||||
'@vue/server-renderer': ^3.0.4
|
||||
'@vueuse/head': ^0.5.1
|
||||
critters: ^0.0.10
|
||||
vite: ^2.0.0
|
||||
vue: ^3.0.4
|
||||
vue-router: ^4.0.1
|
||||
peerDependenciesMeta:
|
||||
critters:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@vue/compiler-sfc': 3.1.5_vue@3.1.5
|
||||
'@vue/server-renderer': 3.1.5_vue@3.1.5
|
||||
'@vueuse/head': 0.6.0_vue@3.1.5
|
||||
chalk: 4.1.2
|
||||
critters: 0.0.10
|
||||
fs-extra: 10.0.0
|
||||
html-minifier: 4.0.0
|
||||
jsdom: 16.6.0
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
/* https://github.com/antfu/prism-theme-vars */
|
||||
@import 'prism-theme-vars/base.css';
|
||||
|
||||
:root {
|
||||
.prose {
|
||||
--prism-font-family: 'Input Mono', monospace;
|
||||
}
|
||||
|
||||
html:not(.dark) {
|
||||
html:not(.dark) .prose {
|
||||
--prism-foreground: #393a34;
|
||||
--prism-background: #fbfbfb;
|
||||
--prism-comment: #a0ada0;
|
||||
@ -27,7 +27,7 @@ html:not(.dark) {
|
||||
--prism-json-property: #698c96;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
html.dark .prose {
|
||||
--prism-foreground: #d4cfbf;
|
||||
--prism-background: #151515;
|
||||
--prism-comment: #758575;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user