chore: update readme

README.md

@@ -16,7 +16,7 @@
 
 ## Features
 
-- ⚡️ Vue3, Vite, pnpm, ESBuild - born with fastness
+- ⚡️ [Vue3](https://github.com/vuejs/vue-next), [Vite](https://github.com/vitejs/vite), [pnpm](https://pnpm.js.org/), [ESBuild](https://github.com/evanw/esbuild) - born with fastness
 
 - 🗂 [File based routing](./src/pages)
 
@@ -26,7 +26,7 @@
 
 - 😃 [Use icons from any icon sets, with no compromise](./src/components)
 
-- 🌍 i18n ready
+- 🌍 [i18n ready](./locales)
 
 - 🦾 TypeScript, of course
 
@@ -87,8 +87,45 @@ cd my-vitesse-app
 pnpm i # If you don't have pnpm installed, run: npm install -g pnpm
 ```
 
+## Checklist
+
+When you setup your clones, try follow the checklist to update info properly
+
+- [ ] Rename `name` field in `package.json`
+- [ ] Change the author name in `LICENSE`
+- [ ] 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
+
+And, enjoy :)
+
+## Usage
+
+### Development
+
+Just run and visit http://localhost:3000
+
+```bash
+pnpm dev
+```
+
+### Build
+
+To build the App, run
+
+```bash
+pnpm build
+```
+
+And you will see the genrated file in `dist` that ready to be served.
+
+### Deploy on Netlify
+
+Go to [Netlify](https://app.netlify.com/start) and select you clone, `OK` along the way, and your App will be live in a minute.
+
 ## Why
 
-I have created several Vite apps recently. Setting the configs up is kinda the bottleneck for me to make the idea simply comes true in 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.

locales/README.md

@@ -0,0 +1,7 @@
+## i18n
+
+This directory is to serve your locale translation files. Modify them to the locales you want, you might need to update `src/messages.ts` as well.
+
+For more details, check out [`vue-i18n`](https://github.com/intlify/vue-i18n-next).
+
+If you are using VS Code, [`i18n Ally`](https://github.com/antfu/i18n-ally) is recommended to make the better i18n experience.

src/components/Modal.vue

@@ -1,56 +0,0 @@
-<template>
-  <div
-    class="fixed top-0 bottom-0 left-0 right-0 z-40"
-    :class="value ? '': 'pointer-events-none'"
-  >
-    <div
-      class="bg-white bg-opacity-85 bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out"
-      :class="value ? '': 'opacity-0'"
-      @click="$emit('update:value', false)"
-    />
-    <div
-      class="bg-white absolute transition-all duration-200 ease-out border-gray-200"
-      :class="positionClass"
-      :style="value ? {}: {transform}"
-    >
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script setup="props" lang="ts">
-import { computed } from 'vue'
-
-declare const props: {
-  value?: boolean
-  direction?: 'bottom' | 'top' | 'left' | 'right'
-}
-
-const defaultDirection = 'bottom'
-
-export const positionClass = computed(() => {
-  switch (props.direction || defaultDirection) {
-    case 'bottom':
-      return 'bottom-0 left-0 right-0 border-t'
-    case 'top':
-      return 'top-0 left-0 right-0 border-b'
-    case 'left':
-      return 'bottom-0 left-0 top-0 border-r'
-    case 'right':
-      return 'bottom-0 top-0 right-0 border-l'
-  }
-})
-
-export const transform = computed(() => {
-  switch (props.direction || defaultDirection) {
-    case 'bottom':
-      return 'translateY(100%)'
-    case 'top':
-      return 'translateY(-100%)'
-    case 'left':
-      return 'translateX(-100%)'
-    case 'right':
-      return 'translateX(100%)'
-  }
-})
-</script>