From edec07ad444de488fac8981458c10803719b60a7 Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Mon, 21 Dec 2020 17:48:15 +0800
Subject: [PATCH] chore: improve lighthouse

---
 README.md                 |  4 ++--
 index.html                |  1 +
 locales/en.json           |  6 +++++-
 src/App.vue               |  4 ++--
 src/components/Footer.vue | 18 +++++++++---------
 src/pages/index.vue       |  9 ++++++---
 tailwind.config.js        |  1 +
 vite.config.ts            |  1 +
 8 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index ead6307..4752782 100644
--- a/README.md
+++ b/README.md
@@ -75,7 +75,7 @@
 - [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
 - [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
 - [VS Code Extensions](./.vscode/extensions.json)
   - [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
 
-If you prefer to do it manually with cleaner git history
+If you prefer to do it manually with the cleaner git history
 
 ```bash
 npx degit antfu/vitesse my-vitesse-app
diff --git a/index.html b/index.html
index ce4a960..2842981 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
   <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#00aba9">
   <meta name="msapplication-TileColor" content="#00aba9">
   <meta name="theme-color" content="#ffffff">
+  <meta name="description" content="Opinionated Vite Starter Template">
   <title>Vitesse</title>
 </head>
 <body>
diff --git a/locales/en.json b/locales/en.json
index 35d15d2..5b0bcb4 100644
--- a/locales/en.json
+++ b/locales/en.json
@@ -1,7 +1,11 @@
 {
   "button": {
+    "about": "About",
     "back": "Back",
-    "go": "GO"
+    "go": "GO",
+    "home": "Home",
+    "toggle_dark": "Toggle dark mode",
+    "toggle_langs": "Change languages"
   },
   "intro": {
     "desc": "Opinionated Vite Starter Template",
diff --git a/src/App.vue b/src/App.vue
index e8ad2ba..95bd371 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,6 +1,6 @@
 <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 />
     <Footer />
-  </div>
+  </main>
 </template>
diff --git a/src/components/Footer.vue b/src/components/Footer.vue
index 2f237d7..17ef4e0 100644
--- a/src/components/Footer.vue
+++ b/src/components/Footer.vue
@@ -1,25 +1,25 @@
 <template>
-  <div class="text-xl mt-6">
-    <router-link class="icon-btn mx-2" to="/">
+  <nav class="text-xl mt-6">
+    <router-link class="icon-btn mx-2" to="/" :title="t('button.home')">
       <Icon icon="carbon:campsite" class="inline-block" />
     </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" />
-    </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" />
-    </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" />
     </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" />
     </a>
-  </div>
+  </nav>
 </template>
 
 <script setup lang='ts'>
diff --git a/src/pages/index.vue b/src/pages/index.vue
index d7e9813..b6d1a53 100644
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@@ -4,12 +4,12 @@
       <Icon class="iconify inline-block" icon="carbon:campsite" />
     </p>
     <p>
-      <a href="https://github.com/antfu/vitesse" target="_blank">
+      <a rel="noreferrer" href="https://github.com/antfu/vitesse" target="_blank">
         Vitesse
       </a>
     </p>
-    <p class="text-sm opacity-50">
-      <em>{{ t('intro.desc') }}</em>
+    <p>
+      <em class="text-sm opacity-50">{{ t('intro.desc') }}</em>
     </p>
 
     <div class="py-4" />
@@ -17,6 +17,9 @@
     <input
       v-model="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"
       style="width: 250px"
       @keydown.enter="go"
diff --git a/tailwind.config.js b/tailwind.config.js
index cd1f0ab..5af0784 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -32,6 +32,7 @@ module.exports = {
       },
       opacity: {
         10: '0.1',
+        50: '0.5',
         85: '0.85',
       },
       typography: {
diff --git a/vite.config.ts b/vite.config.ts
index 19c887e..490ff8a 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -62,6 +62,7 @@ const config: UserConfig = {
       manifest: {
         name: 'Vitesse',
         short_name: 'Vitesse',
+        theme_color: '#ffffff',
         icons: [
           {
             src: '/pwa-192x192.png',