hxx/vitesse
1
0
Fork 0
Code Issues Pull Requests Actions Projects Releases Activity

chore: improve lighthouse

Browse Source
This commit is contained in:
Anthony Fu 2020-12-21 17:48:15 +08:00
parent 1fdc7e710c
commit edec07ad44
8 changed files with 27 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@ -75,7 +75,7 @@
- [TypeScript](https://www.typescriptlang.org/) - [TypeScript](https://www.typescriptlang.org/)
- [Vue TypeScript Plugin](https://github.com/znck/vue-developer-experience/tree/master/packages/typescript-plugin-vue) - better type support for Vue - [Vue TypeScript Plugin](https://github.com/znck/vue-developer-experience/tree/master/packages/typescript-plugin-vue) - better type support for Vue
- [pnpm](https://pnpm.js.org/) - fast, disk space efficient package manager - [pnpm](https://pnpm.js.org/) - fast, disk space efficient package manager
- [presite](https://github.com/egoist/presite) - Server-side generation - [vite-ssg](https://github.com/antfu/vite-ssg) - Server-side generation
- [Netlify](https://www.netlify.com/) - deploy - [Netlify](https://www.netlify.com/) - deploy
- [VS Code Extensions](./.vscode/extensions.json) - [VS Code Extensions](./.vscode/extensions.json)
- [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify) - [Iconify IntelliSense](https://marketplace.visualstudio.com/items?itemName=antfu.iconify)
@ -98,7 +98,7 @@ As this template is strongly opinionated, the following provides a curated list
### Clone to local ### Clone to local
If you prefer to do it manually with cleaner git history If you prefer to do it manually with the cleaner git history
```bash ```bash
npx degit antfu/vitesse my-vitesse-app npx degit antfu/vitesse my-vitesse-app

1
index.html
View File

@ -7,6 +7,7 @@
<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9"> <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
<meta name="msapplication-TileColor" content="#00aba9"> <meta name="msapplication-TileColor" content="#00aba9">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
<meta name="description" content="Opinionated Vite Starter Template">
<title>Vitesse</title> <title>Vitesse</title>
</head> </head>
<body> <body>

6
locales/en.json
View File

@ -1,7 +1,11 @@
{ {
"button": { "button": {
"about": "About",
"back": "Back", "back": "Back",
"go": "GO" "go": "GO",
"home": "Home",
"toggle_dark": "Toggle dark mode",
"toggle_langs": "Change languages"
}, },
"intro": { "intro": {
"desc": "Opinionated Vite Starter Template", "desc": "Opinionated Vite Starter Template",

4
src/App.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="px-4 py-10 text-center text-gray-700 dark:text-gray-200"> <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
<router-view /> <router-view />
<Footer /> <Footer />
</div> </main>
</template> </template>

18
src/components/Footer.vue
View File

@ -1,25 +1,25 @@
<template> <template>
<div class="text-xl mt-6"> <nav class="text-xl mt-6">
<router-link class="icon-btn mx-2" to="/"> <router-link class="icon-btn mx-2" to="/" :title="t('button.home')">
<Icon icon="carbon:campsite" class="inline-block" /> <Icon icon="carbon:campsite" class="inline-block" />
</router-link> </router-link>
<div class="icon-btn mx-2" @click="isDark = !isDark"> <a class="icon-btn mx-2" @click="isDark = !isDark" :title="t('button.toggle_dark')">
<Icon :icon="isDark ? 'carbon:moon' : 'carbon:sun'" class="inline-block" /> <Icon :icon="isDark ? 'carbon:moon' : 'carbon:sun'" class="inline-block" />
</div> </a>
<div class="icon-btn mx-2" @click="toggleLocales"> <a class="icon-btn mx-2" @click="toggleLocales" :title="t('button.toggle_langs')">
<Icon icon="carbon:language" class="inline-block" /> <Icon icon="carbon:language" class="inline-block" />
</div> </a>
<router-link class="icon-btn mx-2" to="/about"> <router-link class="icon-btn mx-2" to="/about" :title="t('button.about')">
<Icon icon="carbon:dicom-overlay" class="inline-block" /> <Icon icon="carbon:dicom-overlay" class="inline-block" />
</router-link> </router-link>
<a class="icon-btn mx-2" href="https://github.com/antfu/vitesse" target="_blank"> <a class="icon-btn mx-2" rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank" title="GitHub">
<Icon icon="carbon:logo-github" class="inline-block" /> <Icon icon="carbon:logo-github" class="inline-block" />
</a> </a>
</div> </nav>
</template> </template>
<script setup lang='ts'> <script setup lang='ts'>

9
src/pages/index.vue
View File

@ -4,12 +4,12 @@
<Icon class="iconify inline-block" icon="carbon:campsite" /> <Icon class="iconify inline-block" icon="carbon:campsite" />
</p> </p>
<p> <p>
<a href="https://github.com/antfu/vitesse" target="_blank"> <a rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank">
Vitesse Vitesse
</a> </a>
</p> </p>
<p class="text-sm opacity-50"> <p>
<em>{{ t('intro.desc') }}</em> <em class="text-sm opacity-50">{{ t('intro.desc') }}</em>
</p> </p>
<div class="py-4" /> <div class="py-4" />
@ -17,6 +17,9 @@
<input <input
v-model="name" v-model="name"
:placeholder="t('intro.whats-your-name')" :placeholder="t('intro.whats-your-name')"
type="text"
autocomplete="false"
autofocus
class="px-4 py-2 border border-gray-200 rounded text-center text-sm outline-none active:outline-none bg-transparent dark:border-gray-700" class="px-4 py-2 border border-gray-200 rounded text-center text-sm outline-none active:outline-none bg-transparent dark:border-gray-700"
style="width: 250px" style="width: 250px"
@keydown.enter="go" @keydown.enter="go"

1
tailwind.config.js
View File

@ -32,6 +32,7 @@ module.exports = {
}, },
opacity: { opacity: {
10: '0.1', 10: '0.1',
50: '0.5',
85: '0.85', 85: '0.85',
}, },
typography: { typography: {

1
vite.config.ts
View File

@ -62,6 +62,7 @@ const config: UserConfig = {
manifest: { manifest: {
name: 'Vitesse', name: 'Vitesse',
short_name: 'Vitesse', short_name: 'Vitesse',
theme_color: '#ffffff',
icons: [ icons: [
{ {
src: '/pwa-192x192.png', src: '/pwa-192x192.png',