Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 John Campion Jr
|
01ddfaf80a |
@@ -1,3 +0,0 @@
|
||||
dist
|
||||
node_modules
|
||||
public
|
||||
@@ -1,12 +0,0 @@
|
||||
---
|
||||
name: General
|
||||
about: General issue
|
||||
title: ''
|
||||
labels: ''
|
||||
assignees: ''
|
||||
|
||||
---
|
||||
|
||||
PLEASE READ: I originally made this template for myself to mocking up apps quicker. I am glad to see you are willing to give it a try! Before your open the issue, please make sure you are reporting bugs in the template itself. **I am NOT creating this template to solve the problems you faced in your project, please use Vue or Vite's discord server to ask questions.** Thank you.
|
||||
|
||||
**Describe the bug/issue**
|
||||
@@ -5,5 +5,3 @@
|
||||
dist
|
||||
dist-ssr
|
||||
node_modules
|
||||
# intellij stuff
|
||||
.idea/
|
||||
|
||||
Vendored
+1
-3
@@ -1,11 +1,9 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"antfu.vite",
|
||||
"johnsoncodehk.volar",
|
||||
"lokalise.i18n-ally",
|
||||
"antfu.iconify",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"voorjaar.windicss-intellisense",
|
||||
"csstools.postcss"
|
||||
"bradlc.vscode-tailwindcss"
|
||||
]
|
||||
}
|
||||
|
||||
Vendored
+7
-14
@@ -1,17 +1,10 @@
|
||||
{
|
||||
"cSpell.words": ["Vitesse"],
|
||||
"i18n-ally.keystyle": "nested",
|
||||
"i18n-ally.localesPaths": "locales",
|
||||
"i18n-ally.sortKeys": true,
|
||||
"prettier.enable": false,
|
||||
"typescript.tsdk": "node_modules/typescript/lib",
|
||||
"volar.style.defaultLanguage": "postcss",
|
||||
"volar.tsPlugin": true,
|
||||
"volar.tsPluginStatus": false,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": true,
|
||||
},
|
||||
"files.associations": {
|
||||
"*.css": "postcss",
|
||||
},
|
||||
"i18n-ally.localesPaths": "locales",
|
||||
"i18n-ally.keystyle": "nested",
|
||||
"i18n-ally.sortKeys": true,
|
||||
"cSpell.words": [
|
||||
"Vitesse"
|
||||
],
|
||||
"typescript.tsdk": "node_modules/typescript/lib"
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2020-2021 Anthony Fu
|
||||
Copyright (c) 2020 Anthony Fu
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
<p align='center'>
|
||||
<img src='https://user-images.githubusercontent.com/11247099/111864893-a457fd00-899e-11eb-9f05-f4b88987541d.png' alt='Vitesse - 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'>
|
||||
Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
|
||||
<sub><em>Now with <a href="http://windicss.netlify.app/">Windi CSS</a>! ⚡️</em></sub>
|
||||
<sub><em>Now with Vite 2.0! ⚡️</em></sub>
|
||||
</p>
|
||||
|
||||
<br>
|
||||
@@ -27,7 +27,7 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
|
||||
|
||||
- 📲 [PWA](https://github.com/antfu/vite-plugin-pwa)
|
||||
|
||||
- 🎨 [Windi CSS](https://github.com/windicss/windicss) - next generation utility-first CSS framework
|
||||
- 🎨 [TailwindCSS **v2.0**](https://blog.tailwindcss.com/tailwindcss-v2) with dark mode out-of-box
|
||||
|
||||
- 😃 [Use icons from any icon sets, with no compromise](./src/components)
|
||||
|
||||
@@ -49,8 +49,8 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
|
||||
|
||||
### UI Frameworks
|
||||
|
||||
- [Windi CSS](https://github.com/windicss/windicss) (On-demand [TailwindCSS](https://tailwindcss.com/)) - lighter and faster, with a bundle additional features!
|
||||
- [Windi CSS Typography](https://windicss.netlify.app/guide/plugins.html#typography) - similar to [Tailwind CSS Typography](https://github.com/tailwindlabs/tailwindcss-typograph) but for Windi CSS
|
||||
- [Tailwind CSS](https://tailwindcss.com/) - with built-in dark mode!
|
||||
- [Tailwind Typography](https://github.com/tailwindlabs/tailwindcss-typography) - Typography for Tailwind
|
||||
|
||||
### Icons
|
||||
|
||||
@@ -64,7 +64,6 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
|
||||
- [`vite-plugin-vue-layouts`](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) - layouts for pages
|
||||
- [`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-windicss`](https://github.com/antfu/vite-plugin-windicss) - WindiCSS support
|
||||
- [`vite-plugin-md`](https://github.com/antfu/vite-plugin-md) - Markdown as components / components in Markdown
|
||||
- [`markdown-it-prism`](https://github.com/jGleitz/markdown-it-prism) - [Prism](https://prismjs.com/) for syntax highlighting
|
||||
- [`prism-theme-vars`](https://github.com/antfu/prism-theme-vars) - customizable Prism.js theme using CSS variables
|
||||
@@ -75,31 +74,27 @@ Mocking up web app with <b>Vitesse</b><sup><em>(speed)</em></sup><br>
|
||||
|
||||
### Coding Style
|
||||
|
||||
- Use Composition API with [`<script setup>` SFC syntax](https://github.com/vuejs/rfcs/pull/227)
|
||||
- [ESLint](https://eslint.org/) with [@antfu/eslint-config](https://github.com/antfu/eslint-config), single quotes, no semi.
|
||||
- Use Composition API with [`<script setup>` SFC](https://github.com/vuejs/rfcs/pull/227)
|
||||
- [ESLint](https://eslint.org/) with [@antfu/eslint-config-vue](https://github.com/antfu/eslint-config), single quotes, no semi.
|
||||
|
||||
### Dev tools
|
||||
|
||||
- [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
|
||||
- [Netlify](https://www.netlify.com/) - zero-config deployment
|
||||
- [Netlify](https://www.netlify.com/) - deploy
|
||||
- [VS Code Extensions](./.vscode/extensions.json)
|
||||
- [Vite](https://marketplace.visualstudio.com/items?itemName=antfu.vite) - Fire up Vite server automatically
|
||||
- [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) - Vue 3 `<script setup>` IDE support
|
||||
- [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - Icon inline display and autocomplete
|
||||
- [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally) - All in one i18n support
|
||||
- [Windi CSS Intellisense](https://marketplace.visualstudio.com/items?itemName=voorjaar.windicss-intellisense) - IDE support for Windi CSS
|
||||
- [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
|
||||
- [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify)
|
||||
- [i18n Ally](https://marketplace.visualstudio.com/items?itemName=lokalise.i18n-ally)
|
||||
- [Tailwind CSS IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
|
||||
- [ESLint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint)
|
||||
|
||||
## Variations
|
||||
|
||||
As this template is strongly opinionated, the following provides a curated list for community maintained variations with different preferences and feature sets. Check them out as well. PR to add yours are also welcome!
|
||||
|
||||
- [vitesse-addons](https://github.com/JohnCampionJr/vitesse-addons) by [@johncampionjr](https://github.com/johncampionjr) - additional options for integrations, including [Prettier](https://prettier.io) and [Storybook](https://storybook.js.org)
|
||||
- [vitesse-ssr-template](https://github.com/frandiox/vitesse-ssr-template) by [@frandiox](https://github.com/frandiox) - Vitesse with SSR
|
||||
- [vitesse-nuxt](https://github.com/antfu/vitesse-nuxt) - Vitesse for Nuxt 2 (expiremental)
|
||||
- [vitespa](https://github.com/ctholho/vitespa) - Like Vitesse but without SSG/SSR
|
||||
- [vitesse-lite](https://github.com/kn0wn/vitesse-lite) by [@kn0wn](https://github.com/kn0wn)
|
||||
|
||||
## Try it now!
|
||||
|
||||
@@ -123,7 +118,7 @@ When you use this template, try follow the checklist to update your info properl
|
||||
|
||||
- [ ] Rename `name` field in `package.json`
|
||||
- [ ] Change the author name in `LICENSE`
|
||||
- [ ] Change the title in `App.vue`
|
||||
- [ ] Change the title in `index.html`
|
||||
- [ ] Change the favicon in `public`
|
||||
- [ ] Remove the `.github` folder which contains the funding info
|
||||
- [ ] Clean up the READMEs and remove routes
|
||||
@@ -156,6 +151,6 @@ Go to [Netlify](https://app.netlify.com/start) and select your clone, `OK` along
|
||||
|
||||
## Why
|
||||
|
||||
I have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the ideas simply come true within a very short time.
|
||||
I have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the ideas simply come true within a very short time.
|
||||
|
||||
So I made this starter template for myself to create apps more easily, along with some good practices that I have learned from making those apps. It's strongly opinionated, but feel free to tweak it or even maintains your own forks. [(see community maintained variation forks)](#variations)
|
||||
|
||||
Vendored
-11
@@ -1,11 +0,0 @@
|
||||
// generated by vite-plugin-components
|
||||
// read more https://github.com/vuejs/vue-next/pull/3399
|
||||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
Footer: typeof import('./src/components/Footer.vue')
|
||||
README: typeof import('./src/components/README.md')
|
||||
}
|
||||
}
|
||||
|
||||
export { }
|
||||
+1
-1
@@ -1,6 +1,6 @@
|
||||
## i18n
|
||||
|
||||
This directory is to serve your locale translation files. YAML under this folder would be loaded automatically and register with their filenames as locale code.
|
||||
This directory is to serve your locale translation files. JSON under this folder would be loaded automatically and register with their filenames as locale code.
|
||||
|
||||
Check out [`vue-i18n`](https://github.com/intlify/vue-i18n-next) for more details.
|
||||
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
button:
|
||||
about: Über
|
||||
back: Zurück
|
||||
go: Los
|
||||
home: Startseite
|
||||
toggle_dark: Dunkelmodus umschalten
|
||||
toggle_langs: Sprachen ändern
|
||||
intro:
|
||||
desc: Vite Startvorlage mit Vorlieben
|
||||
dynamic-route: Demo einer dynamischen Route
|
||||
hi: Hi, {name}!
|
||||
whats-your-name: Wie heißt du?
|
||||
not-found: Nicht gefunden
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"button": {
|
||||
"about": "About",
|
||||
"back": "Back",
|
||||
"go": "GO",
|
||||
"home": "Home",
|
||||
"toggle_dark": "Toggle dark mode",
|
||||
"toggle_langs": "Change languages"
|
||||
},
|
||||
"intro": {
|
||||
"desc": "Opinionated Vite Starter Template",
|
||||
"dynamic-route": "Demo of dynamic route",
|
||||
"hi": "Hi, {name}!",
|
||||
"whats-your-name": "What's your name?"
|
||||
},
|
||||
"not-found": "Not found"
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
button:
|
||||
about: About
|
||||
back: Back
|
||||
go: GO
|
||||
home: Home
|
||||
toggle_dark: Toggle dark mode
|
||||
toggle_langs: Change languages
|
||||
intro:
|
||||
desc: Opinionated Vite Starter Template
|
||||
dynamic-route: Demo of dynamic route
|
||||
hi: Hi, {name}!
|
||||
whats-your-name: What's your name?
|
||||
not-found: Not found
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"button": {
|
||||
"about": "Acerca de",
|
||||
"back": "Atrás",
|
||||
"go": "Ir",
|
||||
"home": "Inicio",
|
||||
"toggle_dark": "Alternar modo oscuro",
|
||||
"toggle_langs": "Cambiar idiomas"
|
||||
},
|
||||
"intro": {
|
||||
"desc": "Plantilla de Inicio de Vite Dogmática",
|
||||
"dynamic-route": "Demo de ruta dinámica",
|
||||
"hi": "¡Hola, {name}!",
|
||||
"whats-your-name": "¿Cómo te llamas?"
|
||||
},
|
||||
"not-found": "No se ha encontrado"
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
button:
|
||||
about: Acerca de
|
||||
back: Atrás
|
||||
go: Ir
|
||||
home: Inicio
|
||||
toggle_dark: Alternar modo oscuro
|
||||
toggle_langs: Cambiar idiomas
|
||||
intro:
|
||||
desc: Plantilla de Inicio de Vite Dogmática
|
||||
dynamic-route: Demo de ruta dinámica
|
||||
hi: ¡Hola, {name}!
|
||||
whats-your-name: ¿Cómo te llamas?
|
||||
not-found: No se ha encontrado
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"button": {
|
||||
"about": "À propos de",
|
||||
"back": "Retour",
|
||||
"go": "Essayer",
|
||||
"home": "Maison",
|
||||
"toggle_dark": "Basculer en mode sombre",
|
||||
"toggle_langs": "Changer de langue"
|
||||
},
|
||||
"intro": {
|
||||
"desc": "Example d'application Vite",
|
||||
"dynamic-route": "Démo de route dynamique",
|
||||
"hi": "Salut, {name} !",
|
||||
"whats-your-name": "Comment t'appelles-tu ?"
|
||||
},
|
||||
"not-found": "Page non trouvée"
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
button:
|
||||
about: À propos de
|
||||
back: Retour
|
||||
go: Essayer
|
||||
home: Accueil
|
||||
toggle_dark: Basculer en mode sombre
|
||||
toggle_langs: Changer de langue
|
||||
intro:
|
||||
desc: Exemple d'application Vite
|
||||
dynamic-route: Démo de route dynamique
|
||||
hi: Salut, {name}!
|
||||
whats-your-name: Comment t'appelles-tu ?
|
||||
not-found: Page non trouvée
|
||||
@@ -1,13 +0,0 @@
|
||||
button:
|
||||
about: Su di me
|
||||
back: Indietro
|
||||
go: Vai
|
||||
home: Home
|
||||
toggle_dark: Attiva/disattiva modalità scura
|
||||
toggle_langs: Cambia lingua
|
||||
intro:
|
||||
desc: Modello per una Applicazione Vite
|
||||
dynamic-route: Demo di rotta dinamica
|
||||
hi: Ciao, {name}!
|
||||
whats-your-name: Come ti chiami?
|
||||
not-found: Non trovato
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"button": {
|
||||
"about": "これは？",
|
||||
"back": "戻る",
|
||||
"go": "進む",
|
||||
"home": "ホーム",
|
||||
"toggle_dark": "ダークモード切り替え",
|
||||
"toggle_langs": "言語切り替え"
|
||||
},
|
||||
"intro": {
|
||||
"desc": "固執された Vite スターターテンプレート",
|
||||
"dynamic-route": "動的ルートのデモ",
|
||||
"hi": "こんにちは、{name}！",
|
||||
"whats-your-name": "あなたの名前は？"
|
||||
},
|
||||
"not-found": "見つかりませんでした"
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
button:
|
||||
about: これは？
|
||||
back: 戻る
|
||||
go: 進む
|
||||
home: ホーム
|
||||
toggle_dark: ダークモード切り替え
|
||||
toggle_langs: 言語切り替え
|
||||
intro:
|
||||
desc: 固執された Vite スターターテンプレート
|
||||
dynamic-route: 動的ルートのデモ
|
||||
hi: こんにちは、{name}!
|
||||
whats-your-name: 君の名は。
|
||||
not-found: 見つかりませんでした
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"button": {
|
||||
"about": "소개",
|
||||
"back": "뒤로가기",
|
||||
"go": "이동",
|
||||
"home": "홈",
|
||||
"toggle_dark": "다크모드 토글",
|
||||
"toggle_langs": "언어 변경"
|
||||
},
|
||||
"intro": {
|
||||
"desc": "Vite 애플리케이션 템플릿",
|
||||
"dynamic-route": "다이나믹 라우트 데모",
|
||||
"hi": "안녕, {name}!",
|
||||
"whats-your-name": "이름이 뭐예요?"
|
||||
},
|
||||
"not-found": "찾을 수 없습니다"
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
button:
|
||||
about: 소개
|
||||
back: 뒤로가기
|
||||
go: 이동
|
||||
home: 홈
|
||||
toggle_dark: 다크모드 토글
|
||||
toggle_langs: 언어 변경
|
||||
intro:
|
||||
desc: Vite 애플리케이션 템플릿
|
||||
dynamic-route: 다이나믹 라우트 데모
|
||||
hi: 안녕, {name}!
|
||||
whats-your-name: 이름이 뭐예요?
|
||||
not-found: 찾을 수 없습니다
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
button:
|
||||
about: Sobre
|
||||
back: Voltar
|
||||
go: Ir
|
||||
home: Início
|
||||
toggle_dark: Alternar modo escuro
|
||||
toggle_langs: Mudar de idioma
|
||||
intro:
|
||||
desc: Modelo Opinativo de Partida de Vite
|
||||
dynamic-route: Demonstração de rota dinâmica
|
||||
hi: Olá, {name}!
|
||||
whats-your-name: Qual é o seu nome?
|
||||
not-found: Não encontrado
|
||||
@@ -1,13 +0,0 @@
|
||||
button:
|
||||
about: О шаблоне
|
||||
back: Назад
|
||||
go: Перейти
|
||||
home: Главная
|
||||
toggle_dark: Включить темный режим
|
||||
toggle_langs: Сменить язык
|
||||
intro:
|
||||
desc: Самостоятельный начальный шаблон Vite
|
||||
dynamic-route: Демо динамического маршрута
|
||||
hi: Привет, {name}!
|
||||
whats-your-name: Как тебя зовут?
|
||||
not-found: Не найден
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"button": {
|
||||
"about": "Hakkımda",
|
||||
"back": "Geri",
|
||||
"go": "İLERİ",
|
||||
"home": "Anasayfa",
|
||||
"toggle_dark": "Karanlık modu değiştir",
|
||||
"toggle_langs": "Dilleri değiştir"
|
||||
},
|
||||
"intro": {
|
||||
"desc": "Görüşlü Vite Başlangıç Şablonu",
|
||||
"dynamic-route": "Dinamik rota demosu",
|
||||
"hi": "Merhaba, {name}!",
|
||||
"whats-your-name": "Adınız nedir ?"
|
||||
},
|
||||
"not-found": "Bulunamadı"
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
button:
|
||||
about: Hakkımda
|
||||
back: Geri
|
||||
go: İLERİ
|
||||
home: Anasayfa
|
||||
toggle_dark: Karanlık modu değiştir
|
||||
toggle_langs: Dilleri değiştir
|
||||
intro:
|
||||
desc: Görüşlü Vite Başlangıç Şablonu
|
||||
dynamic-route: Dinamik rota demosu
|
||||
hi: Merhaba, {name}!
|
||||
whats-your-name: Adınız nedir?
|
||||
not-found: Bulunamadı
|
||||
@@ -0,0 +1,13 @@
|
||||
{
|
||||
"button": {
|
||||
"back": "Quay lại",
|
||||
"go": "Đi"
|
||||
},
|
||||
"intro": {
|
||||
"desc": "Ý kiến cá nhân Vite Template để bắt đầu",
|
||||
"dynamic-route": "Bản giới thiệu về dynamic route",
|
||||
"hi": "Hi, {name}!",
|
||||
"whats-your-name": "Tên bạn là gì?"
|
||||
},
|
||||
"not-found": "Không tìm thấy"
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
button:
|
||||
about: Về
|
||||
back: Quay lại
|
||||
go: Đi
|
||||
home: Khởi đầu
|
||||
toggle_dark: Chuyển đổi chế độ tối
|
||||
toggle_langs: Thay đổi ngôn ngữ
|
||||
intro:
|
||||
desc: Ý kiến cá nhân Vite Template để bắt đầu
|
||||
dynamic-route: Bản giới thiệu về dynamic route
|
||||
hi: Hi, {name}!
|
||||
whats-your-name: Tên bạn là gì?
|
||||
not-found: Không tìm thấy
|
||||
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"button": {
|
||||
"about": "关于",
|
||||
"back": "返回",
|
||||
"go": "确定",
|
||||
"home": "首页",
|
||||
"toggle_dark": "切换深色模式",
|
||||
"toggle_langs": "切换语言"
|
||||
},
|
||||
"intro": {
|
||||
"desc": "固执己见的 Vite 项目模板",
|
||||
"dynamic-route": "动态路由演示",
|
||||
"hi": "你好，{name}！",
|
||||
"whats-your-name": "输入你的名字"
|
||||
},
|
||||
"not-found": "未找到页面"
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
button:
|
||||
about: 关于
|
||||
back: 返回
|
||||
go: 确定
|
||||
home: 首页
|
||||
toggle_dark: 切换深色模式
|
||||
toggle_langs: 切换语言
|
||||
intro:
|
||||
desc: 固执己见的 Vite 项目模板
|
||||
dynamic-route: 动态路由演示
|
||||
hi: 你好，{name}
|
||||
whats-your-name: 输入你的名字
|
||||
not-found: 未找到页面
|
||||
+38
-31
@@ -2,43 +2,50 @@
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "vite --port 3333 --open",
|
||||
"build": "cross-env NODE_ENV=production vite-ssg build",
|
||||
"preview": "vite preview",
|
||||
"preview-https": "serve dist"
|
||||
"build": "cross-env NODE_ENV=production vite-ssg build"
|
||||
},
|
||||
"dependencies": {
|
||||
"@vueuse/core": "^4.11.1",
|
||||
"@vueuse/head": "^0.5.1",
|
||||
"@vueuse/core": "^4.1.1",
|
||||
"@vueuse/head": "^0.2.3",
|
||||
"nprogress": "^0.2.0",
|
||||
"prism-theme-vars": "^0.2.2",
|
||||
"vue": "^3.0.11",
|
||||
"vue-i18n": "^9.1.6",
|
||||
"vue-router": "^4.0.8"
|
||||
"prism-theme-vars": "^0.1.4",
|
||||
"vue": "^3.0.5",
|
||||
"vue-i18n": "^9.0.0-rc.7",
|
||||
"vue-router": "^4.0.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@antfu/eslint-config": "^0.6.5",
|
||||
"@iconify/json": "^1.1.348",
|
||||
"@intlify/vite-plugin-vue-i18n": "^2.1.2",
|
||||
"@antfu/eslint-config": "^0.4.3",
|
||||
"@iconify/json": "^1.1.303",
|
||||
"@intlify/vite-plugin-vue-i18n": "^1.0.0-beta.17",
|
||||
"@tailwindcss/typography": "^0.4.0",
|
||||
"@types/nprogress": "^0.2.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.25.0",
|
||||
"@vitejs/plugin-vue": "^1.2.2",
|
||||
"@vue/compiler-sfc": "^3.0.11",
|
||||
"@vue/server-renderer": "^3.0.11",
|
||||
"@typescript-eslint/eslint-plugin": "^4.15.1",
|
||||
"@vitejs/plugin-vue": "^1.1.4",
|
||||
"@vue/compiler-sfc": "^3.0.5",
|
||||
"@vue/server-renderer": "^3.0.5",
|
||||
"autoprefixer": "^10.2.4",
|
||||
"cross-env": "^7.0.3",
|
||||
"eslint": "^7.27.0",
|
||||
"https-localhost": "^4.6.5",
|
||||
"markdown-it-prism": "^2.1.6",
|
||||
"pnpm": "^6.5.0",
|
||||
"typescript": "^4.2.4",
|
||||
"vite": "^2.3.4",
|
||||
"vite-plugin-components": "^0.10.1",
|
||||
"vite-plugin-icons": "^0.5.1",
|
||||
"vite-plugin-md": "^0.6.7",
|
||||
"vite-plugin-pages": "^0.12.1",
|
||||
"vite-plugin-pwa": "^0.7.3",
|
||||
"vite-plugin-vue-layouts": "^0.3.1",
|
||||
"vite-plugin-windicss": "^0.16.0",
|
||||
"vite-ssg": "^0.11.1",
|
||||
"vue-tsc": "^0.1.6"
|
||||
"eslint": "^7.20.0",
|
||||
"markdown-it-prism": "^2.1.4",
|
||||
"pnpm": "^5.17.2",
|
||||
"postcss": "^8.2.6",
|
||||
"postcss-nested": "^5.0.3",
|
||||
"tailwindcss": "^2.0.3",
|
||||
"typescript": "^4.1.5",
|
||||
"vite": "^2.0.1",
|
||||
"vite-plugin-components": "^0.6.12",
|
||||
"vite-plugin-icons": "^0.2.2",
|
||||
"vite-plugin-md": "^0.5.1",
|
||||
"vite-plugin-pages": "^0.4.4",
|
||||
"vite-plugin-pwa": "^0.4.7",
|
||||
"vite-plugin-vue-layouts": "^0.2.2",
|
||||
"vite-ssg": "^0.8.9"
|
||||
},
|
||||
"eslintConfig": {
|
||||
"extends": "@antfu/eslint-config",
|
||||
"rules": {
|
||||
"no-unused-vars": "off",
|
||||
"@typescript-eslint/no-unused-vars": "off"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Generated
+3746
-5488
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
'postcss-nested': {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
+1
-1
@@ -3,7 +3,7 @@ import { useHead } from '@vueuse/head'
|
||||
|
||||
// https://github.com/vueuse/head
|
||||
// you can use this to manipulate the document head in any components,
|
||||
// they will be rendered correctly in the html results with vite-ssg
|
||||
// they will be renedered correctly in the html results with vite-ssg
|
||||
useHead({
|
||||
title: 'Vitesse',
|
||||
meta: [
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { isDark, toggleDark } from '~/logic'
|
||||
import { isDark, toggleDark } from '~/logics'
|
||||
|
||||
const { t, availableLocales, locale } = useI18n()
|
||||
|
||||
|
||||
@@ -5,6 +5,6 @@ Components in this dir will be auto-registered and on-demand, powered by [`vite-
|
||||
|
||||
### Icons
|
||||
|
||||
You can use icons from almost any icon sets by the power of [Iconify](https://iconify.design/).
|
||||
You can uses icons from almost any icon sets by the power of [Iconify](https://iconify.design/).
|
||||
|
||||
It will only bundle the icons you use. Check out [vite-plugin-icons](https://github.com/antfu/vite-plugin-icons) for more details.
|
||||
It will only bundles the icons you use, check out [vite-plugin-icons](https://github.com/antfu/vite-plugin-icons) for more details.
|
||||
|
||||
@@ -1,4 +0,0 @@
|
||||
import { useDark, useToggle } from '@vueuse/core'
|
||||
|
||||
export const isDark = useDark()
|
||||
export const toggleDark = useToggle(isDark)
|
||||
@@ -0,0 +1,25 @@
|
||||
import { watch, computed } from 'vue'
|
||||
import { usePreferredDark, useToggle } from '@vueuse/core'
|
||||
import { colorSchema } from './store'
|
||||
|
||||
const preferredDark = usePreferredDark()
|
||||
|
||||
export const isDark = computed({
|
||||
get() {
|
||||
return colorSchema.value === 'auto' ? preferredDark.value : colorSchema.value === 'dark'
|
||||
},
|
||||
set(v: boolean) {
|
||||
if (v === preferredDark.value)
|
||||
colorSchema.value = 'auto'
|
||||
else
|
||||
colorSchema.value = v ? 'dark' : 'light'
|
||||
},
|
||||
})
|
||||
|
||||
export const toggleDark = useToggle(isDark)
|
||||
|
||||
watch(
|
||||
isDark,
|
||||
v => typeof document !== 'undefined' && document.documentElement.classList.toggle('dark', v),
|
||||
{ immediate: true },
|
||||
)
|
||||
@@ -0,0 +1,4 @@
|
||||
import { Ref } from 'vue'
|
||||
import { useStorage } from '@vueuse/core'
|
||||
|
||||
export const colorSchema = useStorage('color-schema', 'auto') as Ref<'auto' | 'dark' | 'light'>
|
||||
+9
-5
@@ -1,10 +1,14 @@
|
||||
// this allows much faster HMR
|
||||
// discussed here: https://github.com/tailwindlabs/tailwindcss/issues/2820
|
||||
import './styles/tw-base.postcss'
|
||||
import './styles/tw-components.postcss'
|
||||
import './styles/tw-utilities.postcss'
|
||||
import './styles/main.postcss'
|
||||
|
||||
import { ViteSSG } from 'vite-ssg'
|
||||
import generatedRoutes from 'virtual:generated-pages'
|
||||
import { setupLayouts } from 'virtual:generated-layouts'
|
||||
import generatedRoutes from 'pages-generated'
|
||||
import { setupLayouts } from 'layouts-generated'
|
||||
import App from './App.vue'
|
||||
import 'virtual:windi.css'
|
||||
import 'virtual:windi-devtools'
|
||||
import './styles/main.css'
|
||||
|
||||
const routes = setupLayouts(generatedRoutes)
|
||||
|
||||
|
||||
+2
-3
@@ -5,10 +5,9 @@ import { UserModule } from '~/types'
|
||||
// https://vitejs.dev/guide/features.html#glob-import
|
||||
const messages = Object.fromEntries(
|
||||
Object.entries(
|
||||
import.meta.globEager('../../locales/*.y(a)?ml'))
|
||||
import.meta.globEager('../../locales/*.json'))
|
||||
.map(([key, value]) => {
|
||||
const yaml = key.endsWith('.yaml')
|
||||
return [key.slice(14, yaml ? -5 : -4), value.default]
|
||||
return [key.slice(14, -5), value.default]
|
||||
}),
|
||||
)
|
||||
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
import { UserModule } from '~/types'
|
||||
|
||||
// https://github.com/antfu/vite-plugin-pwa#automatic-reload-when-new-content-available
|
||||
export const install: UserModule = ({ isClient, router }) => {
|
||||
if (!isClient)
|
||||
return
|
||||
|
||||
router.isReady().then(async() => {
|
||||
const { registerSW } = await import('virtual:pwa-register')
|
||||
registerSW({ immediate: true })
|
||||
})
|
||||
}
|
||||
+4
-4
@@ -1,6 +1,6 @@
|
||||
## File-based Routing
|
||||
|
||||
Routes will be auto-generated for Vue files in this dir with the same file structure.
|
||||
Routes will auto-generated for Vue files in this dir with the same file structure.
|
||||
Check out [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) for more details.
|
||||
|
||||
### Path Aliasing
|
||||
@@ -10,11 +10,11 @@ Check out [`vite-plugin-pages`](https://github.com/hannoeru/vite-plugin-pages) f
|
||||
For example, instead of having
|
||||
|
||||
```ts
|
||||
import { isDark } from '../../../../logic'
|
||||
import { isDark } from '../../../../logics'
|
||||
```
|
||||
|
||||
now, you can use
|
||||
now you can use
|
||||
|
||||
```ts
|
||||
import { isDark } from '~/logic'
|
||||
import { isDark } from '~/logics'
|
||||
```
|
||||
|
||||
+1
-1
@@ -8,7 +8,7 @@ title: About
|
||||
<h3>About</h3>
|
||||
</div>
|
||||
|
||||
[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **WindiCSS** for UI.
|
||||
[Vitesse](https://github.com/antfu/vitesse) is an opinionated [Vite](https://github.com/vitejs/vite) starter template made by [@antfu](https://github.com/antfu) for mocking apps swiftly. With **file-based routing**, **components auto importing**, **markdown support**, I18n, PWA and uses **Tailwind** v2 for UI.
|
||||
|
||||
```js
|
||||
// syntax highlighting example
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
@import './markdown.css';
|
||||
@import './markdown.postcss';
|
||||
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
background: #121212;
|
||||
background: #222;
|
||||
}
|
||||
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#nprogress .bar {
|
||||
@apply bg-teal-600 opacity-75;
|
||||
.bar {
|
||||
@apply bg-teal-600 opacity-75;
|
||||
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
@@ -8,42 +8,36 @@
|
||||
html:not(.dark) {
|
||||
--prism-foreground: #393a34;
|
||||
--prism-background: #fbfbfb;
|
||||
--prism-comment: #a0ada0;
|
||||
--prism-string: #b56959;
|
||||
--prism-literal: #2f8a89;
|
||||
--prism-number: #296aa3;
|
||||
--prism-keyword: #1c6b48;
|
||||
--prism-function: #6c7834;
|
||||
--prism-boolean: #1c6b48;
|
||||
--prism-constant: #a65e2b;
|
||||
--prism-comment: #8e8f8e;
|
||||
--prism-string: #a1644c;
|
||||
--prism-literal: #3a9c9b;
|
||||
--prism-keyword: #248358;
|
||||
--prism-function: #7e8a42;
|
||||
--prism-deleted: #a14f55;
|
||||
--prism-class: #2993a3;
|
||||
--prism-builtin: #ab5959;
|
||||
--prism-property: #b58451;
|
||||
--prism-namespace: #b05a78;
|
||||
--prism-class: #2b91af;
|
||||
--prism-builtin: #a52727;
|
||||
--prism-property: #ad502b;
|
||||
--prism-namespace: #c96880;
|
||||
--prism-punctuation: #8e8f8b;
|
||||
--prism-decorator: #bd8f8f;
|
||||
--prism-regex: #ab5e3f;
|
||||
--prism-json-property: #698c96;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--prism-scheme: dark;
|
||||
--prism-foreground: #d4cfbf;
|
||||
--prism-background: #151515;
|
||||
--prism-background: #1e1e1e;
|
||||
--prism-comment: #758575;
|
||||
--prism-string: #d48372;
|
||||
--prism-literal: #429988;
|
||||
--prism-string: #ce9178;
|
||||
--prism-literal: #4fb09d;
|
||||
--prism-keyword: #4d9375;
|
||||
--prism-boolean: #1c6b48;
|
||||
--prism-number: #6394bf;
|
||||
--prism-variable: #c2b36e;
|
||||
--prism-function: #a1b567;
|
||||
--prism-function: #c2c275;
|
||||
--prism-deleted: #a14f55;
|
||||
--prism-class: #54b1bf;
|
||||
--prism-builtin: #e0a569;
|
||||
--prism-class: #5ebaa8;
|
||||
--prism-builtin: #cb7676;
|
||||
--prism-property: #dd8e6e;
|
||||
--prism-namespace: #db889a;
|
||||
--prism-punctuation: #858585;
|
||||
--prism-namespace: #c96880;
|
||||
--prism-punctuation: #d4d4d4;
|
||||
--prism-decorator: #bd8f8f;
|
||||
--prism-regex: #ab5e3f;
|
||||
--prism-json-property: #6b8b9e;
|
||||
@@ -52,3 +46,10 @@ html.dark {
|
||||
--prism-line-highlight-background: #444444;
|
||||
--prism-selection-background: #444444;
|
||||
}
|
||||
|
||||
/* fix tailwind typography in darkmode */
|
||||
.prose {
|
||||
a code {
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
@import 'tailwindcss/base';
|
||||
@@ -0,0 +1,43 @@
|
||||
@import 'tailwindcss/components';
|
||||
/*
|
||||
html,
|
||||
body,
|
||||
#app {
|
||||
height: 100vh;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
background: #222;
|
||||
}
|
||||
|
||||
#nprogress {
|
||||
pointer-events: none;
|
||||
|
||||
.bar {
|
||||
@apply bg-teal-600 opacity-75;
|
||||
|
||||
position: fixed;
|
||||
z-index: 1031;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.btn {
|
||||
@apply px-4 py-1 rounded inline-block
|
||||
bg-teal-600 text-white cursor-pointer
|
||||
hover:bg-teal-700
|
||||
disabled:cursor-default disabled:bg-gray-600 disabled:opacity-50;
|
||||
}
|
||||
|
||||
.icon-btn {
|
||||
@apply inline-block cursor-pointer select-none
|
||||
opacity-75 transition duration-200 ease-in-out
|
||||
hover:opacity-100 hover:text-teal-600;
|
||||
font-size: 0.8em;
|
||||
} */
|
||||
@@ -0,0 +1 @@
|
||||
@import 'tailwindcss/utilities';
|
||||
@@ -0,0 +1,60 @@
|
||||
/* eslint-disable @typescript-eslint/no-var-requires */
|
||||
const colors = require('tailwindcss/colors')
|
||||
const typography = require('@tailwindcss/typography')
|
||||
|
||||
module.exports = {
|
||||
purge: {
|
||||
enabled: process.env.NODE_ENV === 'production',
|
||||
content: [
|
||||
'./index.html',
|
||||
'./src/**/*.vue',
|
||||
'./src/**/*.md',
|
||||
'./src/**/*.js',
|
||||
'./src/**/*.ts',
|
||||
],
|
||||
options: {
|
||||
safelist: ['prose', 'prose-sm', 'm-auto'],
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
extend: {
|
||||
cursor: ['disabled'],
|
||||
backgroundColor: ['disabled'],
|
||||
borderColor: ['active', 'disabled'],
|
||||
textColor: ['active', 'disabled'],
|
||||
opacity: ['dark', 'active', 'disabled'],
|
||||
}
|
||||
},
|
||||
darkMode: 'class',
|
||||
plugins: [typography],
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
teal: colors.teal,
|
||||
},
|
||||
typography: {
|
||||
DEFAULT: {
|
||||
css: {
|
||||
color: 'inherit',
|
||||
a: {
|
||||
color: 'inherit',
|
||||
opacity: 0.75,
|
||||
'&:hover': {
|
||||
opacity: 1,
|
||||
color: colors.teal[600],
|
||||
},
|
||||
},
|
||||
b: { color: 'inherit' },
|
||||
strong: { color: 'inherit' },
|
||||
em: { color: 'inherit' },
|
||||
h1: { color: 'inherit' },
|
||||
h2: { color: 'inherit' },
|
||||
h3: { color: 'inherit' },
|
||||
h4: { color: 'inherit' },
|
||||
code: { color: 'inherit' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
+2
-1
@@ -6,7 +6,7 @@
|
||||
"lib": ["DOM", "ESNext"],
|
||||
"strict": true,
|
||||
"esModuleInterop": true,
|
||||
"incremental": false,
|
||||
"incremental": true,
|
||||
"skipLibCheck": true,
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
@@ -15,6 +15,7 @@
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"types": [
|
||||
"vite/client",
|
||||
"vite-plugin-pages/client",
|
||||
"vite-plugin-vue-layouts/client"
|
||||
],
|
||||
"paths": {
|
||||
|
||||
+1
-9
@@ -6,7 +6,6 @@ import Layouts from 'vite-plugin-vue-layouts'
|
||||
import ViteIcons, { ViteIconsResolver } from 'vite-plugin-icons'
|
||||
import ViteComponents from 'vite-plugin-components'
|
||||
import Markdown from 'vite-plugin-md'
|
||||
import WindiCSS from 'vite-plugin-windicss'
|
||||
import { VitePWA } from 'vite-plugin-pwa'
|
||||
import VueI18n from '@intlify/vite-plugin-vue-i18n'
|
||||
import Prism from 'markdown-it-prism'
|
||||
@@ -48,8 +47,6 @@ export default defineConfig({
|
||||
// allow auto import and register components used in markdown
|
||||
customLoaderMatcher: id => id.endsWith('.md'),
|
||||
|
||||
globalComponentsDeclaration: true,
|
||||
|
||||
// auto import icons
|
||||
customComponentResolvers: [
|
||||
// https://github.com/antfu/vite-plugin-icons
|
||||
@@ -63,14 +60,9 @@ export default defineConfig({
|
||||
// https://github.com/antfu/vite-plugin-icons
|
||||
ViteIcons(),
|
||||
|
||||
// https://github.com/antfu/vite-plugin-windicss
|
||||
WindiCSS({
|
||||
safelist: 'prose prose-sm m-auto text-left',
|
||||
}),
|
||||
|
||||
// https://github.com/antfu/vite-plugin-pwa
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
inlineRegister: false,
|
||||
manifest: {
|
||||
name: 'Vitesse',
|
||||
short_name: 'Vitesse',
|
||||
|
||||
@@ -1,41 +0,0 @@
|
||||
import { defineConfig } from 'vite-plugin-windicss'
|
||||
import colors from 'windicss/colors'
|
||||
import typography from 'windicss/plugin/typography'
|
||||
|
||||
export default defineConfig({
|
||||
darkMode: 'class',
|
||||
plugins: [
|
||||
typography(),
|
||||
],
|
||||
attributify: true,
|
||||
theme: {
|
||||
extend: {
|
||||
typography: {
|
||||
DEFAULT: {
|
||||
css: {
|
||||
maxWidth: '65ch',
|
||||
color: 'inherit',
|
||||
a: {
|
||||
'color': 'inherit',
|
||||
'opacity': 0.75,
|
||||
'fontWeight': '500',
|
||||
'textDecoration': 'underline',
|
||||
'&:hover': {
|
||||
opacity: 1,
|
||||
color: colors.teal[600],
|
||||
},
|
||||
},
|
||||
b: { color: 'inherit' },
|
||||
strong: { color: 'inherit' },
|
||||
em: { color: 'inherit' },
|
||||
h1: { color: 'inherit' },
|
||||
h2: { color: 'inherit' },
|
||||
h3: { color: 'inherit' },
|
||||
h4: { color: 'inherit' },
|
||||
code: { color: 'inherit' },
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
})
|
||||
Reference in New Issue
Block a user