chore: update readme

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).

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>

components/PageView.vue

@@ -5,7 +5,9 @@ const time = useTimeAgo(computed(() => data.value.startAt))
 </script>
 
 <template>
-  <div text-gray:50>
+  <div text-gray:80>
-    <span font-500 text-gray>{{ data.pageview }}</span> page views since <span text-gray>{{ time }}</span>
+    <span font-500 text-gray>{{ data.pageview }}</span>
+    page views since
+    <span text-gray>{{ time }}</span>
   </div>
 </template>

pages/index.vue

@@ -4,8 +4,8 @@
     <Suspense>
       <PageView />
       <template #fallback>
-        <div op50 italic animate-pulse>
+        <div op50 italic>
-          Loading...
+          <span animate-pulse>Loading...</span>
         </div>
       </template>
     </Suspense>