chore: init

src/App.vue

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

src/components/Footer.vue

@@ -0,0 +1,31 @@
+
+<template>
+  <div
+    class="text-xl mt-4"
+  >
+    <div
+      class="inline-block mx-2 cursor-pointer select-none"
+      @click="isDark = !isDark"
+    >
+      <Icon
+        class="inline-block"
+        :icon="isDark ? 'carbon:moon' : 'carbon:sun'"
+      />
+    </div>
+
+    <a
+      class="mx-2"
+      href="https://github.com/antfu/vitesse"
+      target="_blank"
+    >
+      <Icon
+        class="inline-block"
+        icon="carbon:code"
+      />
+    </a>
+  </div>
+</template>
+
+<script setup lang='ts'>
+export { isDark } from '../utils/dark'
+</script>

src/components/Icon.vue

@@ -0,0 +1,49 @@
+<template>
+  <div ref="el" :class="$attrs.class" style="vertical-align: text-bottom" />
+</template>
+
+<script setup="props" lang="ts">
+import { watch, ref, onMounted, nextTick } from 'vue'
+
+declare const props: {
+  icon: string
+}
+
+export const el = ref<HTMLElement | null>(null)
+
+const update = async() => {
+  if (el.value) {
+    await nextTick()
+    // @ts-ignore
+    const data = window.Iconify.getSVGObject(props.icon)
+    if (data) {
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+      for (const key of Object.keys(data.attributes))
+        svg.setAttribute(key, data.attributes[key])
+      svg.innerHTML = data ? data.body : null
+      el.value.textContent = ''
+      el.value.appendChild(svg)
+    }
+    else {
+      const span = document.createElement('span')
+      span.className = 'iconify'
+      span.dataset.icon = props.icon
+      el.value.textContent = ''
+      el.value.appendChild(span)
+    }
+  }
+}
+
+watch(() => props.icon, update, { flush: 'post' })
+
+onMounted(update)
+</script>
+
+<style>
+span.iconify {
+  background: #5551;
+  border-radius: 100%;
+  min-width: 10px;
+  min-height: 1em;
+}
+</style>

src/components/Modal.vue

@@ -0,0 +1,56 @@
+<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>

src/components/index.ts

@@ -0,0 +1,12 @@
+import { Plugin } from 'vue'
+import Modal from './Modal.vue'
+import Icon from './Icon.vue'
+import Footer from './Footer.vue'
+
+export const registerComponents: Plugin = {
+  install(app) {
+    app.component('Modal', Modal)
+    app.component('Icon', Icon)
+    app.component('Footer', Footer)
+  },
+}

src/main.postcss

@@ -0,0 +1,26 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
+
+html, body, #app {
+  height: 100vh;
+  width: 100vw;
+  margin: 0;
+  padding: 0;
+}
+
+.schema-dark {
+  background: #222;
+}
+
+.btn {
+  @apply px-4 py-1 rounded bg-teal-600 inline-block text-white cursor-pointer;
+}
+
+.btn:hover {
+  @apply bg-teal-700;
+}
+
+.btn[disabled] {
+  @apply cursor-default bg-gray-600 opacity-50;
+}

src/main.ts

@@ -0,0 +1,18 @@
+import './main.postcss'
+import { createApp } from 'vue'
+import { createRouter, createWebHistory } from 'vue-router'
+// @ts-ignore
+import routes from '/@voie/pages'
+import { registerComponents } from './components'
+import App from './App.vue'
+
+const app = createApp(App)
+const router = createRouter({
+  history: createWebHistory(),
+  routes,
+})
+
+app.use(router)
+app.use(registerComponents)
+
+app.mount('#app')

src/pages/hi/[name].vue

@@ -0,0 +1,31 @@
+
+<template>
+  <div>
+    <p class="text-4xl">
+      <Icon class="iconify inline-block" icon="carbon:pedestrian" />
+    </p>
+    <p>
+      Hi, {{ name }}!
+    </p>
+
+    <div>
+      <button
+        class="btn m-3 text-sm mt-8"
+        @click="back"
+      >
+        Back
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup='props' lang='ts'>
+import { useRouter } from 'vue-router'
+
+declare const props: {
+  name: string
+}
+
+const router = useRouter()
+export const back = () => router.push('/')
+</script>

src/pages/index.vue

@@ -0,0 +1,43 @@
+
+<template>
+  <div>
+    <p class="text-4xl">
+      <Icon class="iconify inline-block" icon="carbon:campsite" />
+    </p>
+    <p>
+      Vitesse
+    </p>
+
+    <div class="py-4" />
+
+    <input
+      v-model="name"
+      placeholder="What's your name?"
+      class="px-4 py-2 border border-gray-200 rounded text-center outline-none active:outline-none bg-transparent dark:border-gray-700"
+      @keydown.enter="go"
+    >
+
+    <div>
+      <button
+        class="btn m-3 text-sm"
+        :disabled="!name"
+        @click="go"
+      >
+        GO
+      </button>
+    </div>
+  </div>
+</template>
+
+<script setup='props' lang='ts'>
+import { ref } from 'vue'
+import { useRouter } from 'vue-router'
+
+export const name = ref('')
+
+const router = useRouter()
+export const go = () => {
+  if (name.value)
+    router.push(`/hi/${name.value}`)
+}
+</script>

src/shims-vue.d.ts

@@ -0,0 +1,5 @@
+declare module '*.vue' {
+  import { defineComponent } from 'vue'
+  const Component: ReturnType<typeof defineComponent>
+  export default Component
+}

src/utils/dark.ts

@@ -0,0 +1,26 @@
+import { watch, computed, Ref } from 'vue'
+import { useStorage, usePreferredDark } from '@vueuse/core'
+
+const preferredDark = usePreferredDark()
+const schema = useStorage('vitesse-schema', 'auto') as Ref<'auto' | 'dark' | 'light'>
+
+export const isDark = computed({
+  get() {
+    return schema.value === 'auto' ? preferredDark.value : schema.value === 'dark'
+  },
+  set(v: boolean) {
+    if (v === preferredDark.value)
+      schema.value = 'auto'
+    else
+      schema.value = v ? 'dark' : 'light'
+  },
+})
+
+watch(
+  isDark,
+  (v) => {
+    const html = document.getElementsByTagName('html')[0]
+    html.classList.toggle('schema-dark', v)
+  },
+  { immediate: true },
+)

src/window.d.ts

@@ -0,0 +1,3 @@
+declare interface Window {
+  // extend the window
+}