From 144996e42ae2e2b240d2afaabb942731531cb3bf Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Fri, 5 Nov 2021 13:30:31 +0800
Subject: [PATCH] chore: update readme

---
 README.md               | 29 +++++++++++++++++++----------
 components/Logos.vue    |  4 ++--
 components/PageView.vue |  6 ++++--
 pages/index.vue         |  4 ++--
 4 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index b0a508d..a18ce89 100644
--- a/README.md
+++ b/README.md
@@ -1,14 +1,21 @@
 <p align="center">
-<img src="https://user-images.githubusercontent.com/11247099/140190314-14c4e434-9608-4f4b-b378-4403b13dcc18.png" width="500"/>
+<img src="https://user-images.githubusercontent.com/11247099/140462375-7b7ac4db-35b7-453c-8a05-13d8d20282c4.png" width="600"/>
 </p>
 
-<p align="center">
+<h2 align="center">
 <a href="https://github.com/antfu/vitesse">Vitesse</a> for Nuxt 3
-</p><br>
+</h2><br>
 
-> 🧪 Working in Progress
+<pre align="center">
+🧪 Working in Progress
+</pre>
 
-[Nuxt 2 version](https://github.com/antfu/vitesse-nuxt-bridge)
+<p align="center">
+<br>
+<a href="https://vitesse-nuxt3.netlify.app/">🖥 Online Preview</a>
+<br><br>
+<a href="https://sli.dev/new"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt=""></a>
+</p>
 
 ## Features
 
@@ -16,13 +23,15 @@
 
 - ⚡️ Vite - Instant HMR
 
-- 🎨 [UnoCSS](https://github.com/antfu/unocss) -  The instant on-demand atomic CSS engine.
+- 🎨 [UnoCSS](https://github.com/antfu/unocss) - The instant on-demand atomic CSS engine.
 
 - 😃 Use icons from any icon sets in Pure CSS, powered by [UnoCSS](https://github.com/antfu/unocss)
 
-- 🔥 Use the new `<script setup>` syntax in Vue 2
+- 🔥 The `<script setup>` syntax
 
-- 📥 APIs auto importing - use Composition API and others directly
+- 📥 APIs auto importing - for Composition API and VueUse
+
+- 🏎 Zero-config cloud functions and deploy
 
 - 🦾 TypeScript, of course
 
@@ -30,9 +39,9 @@
 
 ### Nuxt Modules
 
-- [VueUse](https://github.com/antfu/vueuse) - collection of useful composition APIs
+- [VueUse](https://github.com/vueuse/vueuse) - collection of useful composition APIs
 - [UnoCSS](https://github.com/antfu/unocss) - on-demand atomic CSS engine - powers pure CSS Icons!
 
-## IDE Integration
+## IDE
 
 We recommend using [VS Code](https://code.visualstudio.com/) with [Volar](https://github.com/johnsoncodehk/volar) to get the best experience (You might want to disable Vetur if you have it).
diff --git a/components/Logos.vue b/components/Logos.vue
index 3d27a17..9952532 100644
--- a/components/Logos.vue
+++ b/components/Logos.vue
@@ -1,7 +1,7 @@
 <template>
   <div inline-flex text-2xl font-300 cursor-default>
     <div flex flex-col children:mx-auto>
-      <img w-18 inline-block src="/nuxt.png" />
+      <img w-18 h-18 inline-block src="/nuxt.png" />
       <span text-green5 mt--2>Nuxt 3</span>
     </div>
     <div
@@ -13,7 +13,7 @@
       i-carbon-add
     />
     <div flex flex-col children:mx-auto>
-      <img w-18 inline-block src="/vite.png" />
+      <img w-18 h-18 inline-block src="/vite.png" />
       <span text-purple5 mt--2>Vitesse</span>
     </div>
   </div>
diff --git a/components/PageView.vue b/components/PageView.vue
index 1b0c690..874f753 100644
--- a/components/PageView.vue
+++ b/components/PageView.vue
@@ -5,7 +5,9 @@ const time = useTimeAgo(computed(() => data.value.startAt))
 </script>
 
 <template>
-  <div text-gray:50>
-    <span font-500 text-gray>{{ data.pageview }}</span> page views since <span text-gray>{{ time }}</span>
+  <div text-gray:80>
+    <span font-500 text-gray>{{ data.pageview }}</span>
+    page views since
+    <span text-gray>{{ time }}</span>
   </div>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
index ff17e67..b081d09 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -4,8 +4,8 @@
     <Suspense>
       <PageView />
       <template #fallback>
-        <div op50 italic animate-pulse>
-          Loading...
+        <div op50 italic>
+          <span animate-pulse>Loading...</span>
         </div>
       </template>
     </Suspense>