docs: landing page (#611)

Co-authored-by: Sébastien Chopin <seb@nuxt.com>

docs/components/content/examples/CommandPaletteExampleGroups.vue

@@ -1,34 +1,34 @@
 <script setup>
 const router = useRouter()
+const toast = useToast()
 
 const commandPaletteRef = ref()
 
 const users = [
-  { id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/739984?v=4' } },
-  { id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/904724?v=4' } },
-  { id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://avatars.githubusercontent.com/u/7547335?v=4' } }
+  { id: 'benjamincanac', label: 'benjamincanac', href: 'https://github.com/benjamincanac', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x' } },
+  { id: 'Atinux', label: 'Atinux', href: 'https://github.com/Atinux', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x' } },
+  { id: 'smarroufin', label: 'smarroufin', href: 'https://github.com/smarroufin', target: '_blank', avatar: { src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin', srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x' } }
 ]
 
 const actions = [
-  { id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => alert('New file'), shortcuts: ['⌘', 'N'] },
-  { id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => alert('New folder'), shortcuts: ['⌘', 'F'] },
-  { id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => alert('Add hashtag'), shortcuts: ['⌘', 'H'] },
-  { id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => alert('Add label'), shortcuts: ['⌘', 'L'] }
+  { id: 'new-file', label: 'Add new file', icon: 'i-heroicons-document-plus', click: () => toast.add({ title: 'New file added!' }), shortcuts: ['⌘', 'N'] },
+  { id: 'new-folder', label: 'Add new folder', icon: 'i-heroicons-folder-plus', click: () => toast.add({ title: 'New folder added!' }), shortcuts: ['⌘', 'F'] },
+  { id: 'hashtag', label: 'Add hashtag', icon: 'i-heroicons-hashtag', click: () => toast.add({ title: 'Hashtag added!' }), shortcuts: ['⌘', 'H'] },
+  { id: 'label', label: 'Add label', icon: 'i-heroicons-tag', click: () => toast.add({ title: 'Label added!' }), shortcuts: ['⌘', 'L'] }
 ]
 
-const groups = computed(() => commandPaletteRef.value?.query
-  ? [{
+const groups = computed(() =>
+  [commandPaletteRef.value?.query ? {
     key: 'users',
     commands: users
-  }]
-  : [{
+  } : {
     key: 'recent',
     label: 'Recent searches',
     commands: users.slice(0, 1)
   }, {
     key: 'actions',
     commands: actions
-  }])
+  }].filter(Boolean))
 
 function onSelect (option) {
   if (option.click) {

docs/components/content/examples/InputExampleClearable.vue

@@ -1,5 +1,12 @@
 <template>
-  <UInput v-model="q" name="q" placeholder="Search..." icon="i-heroicons-magnifying-glass-20-solid" :ui="{ icon: { trailing: { pointer: '' } } }">
+  <UInput
+    v-model="q"
+    name="q"
+    placeholder="Search..."
+    icon="i-heroicons-magnifying-glass-20-solid"
+    autocomplete="off"
+    :ui="{ icon: { trailing: { pointer: '' } } }"
+  >
     <template #trailing>
       <UButton
         v-show="q !== ''"

docs/components/content/examples/TableExampleClickable.vue

@@ -29,12 +29,6 @@ const people = [{
   title: 'Senior Designer',
   email: 'leonard.krasner@example.com',
   role: 'Owner'
-}, {
-  id: 6,
-  name: 'Floyd Miles',
-  title: 'Principal Designer',
-  email: 'floyd.miles@example.com',
-  role: 'Member'
 }]
 
 function select (row) {

docs/components/content/examples/TabsExampleCard.vue

@@ -1,17 +0,0 @@
-<script setup>
-const items = [{
-  label: 'Tab1',
-  content: 'This is the content shown for Tab1'
-}, {
-  label: 'Tab2',
-  disabled: true,
-  content: 'And, this is the content for Tab2'
-}, {
-  label: 'Tab3',
-  content: 'Finally, this is the content for Tab3'
-}]
-</script>
-
-<template>
-  <UTabs :items="items" />
-</template>

docs/components/content/examples/VerticalNavigationExampleAvatarSlot.vue

@@ -1,11 +1,28 @@
 <script setup>
 const links = [{
   avatar: {
-    src: 'https://avatars.githubusercontent.com/u/739984?v=4'
+    src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/benjamincanac',
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/benjamincanac 2x'
   },
-  label: 'Benjamin Canac'
+  label: 'benjamincanac',
+  to: 'https://github.com/benjamincanac',
+  target: '_blank'
 }, {
-  label: 'KeJun'
+  avatar: {
+    src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/Atinux',
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/Atinux 2x'
+  },
+  label: 'Atinux',
+  to: 'https://github.com/Atinux',
+  target: '_blank'
+}, {
+  avatar: {
+    src: 'https://ipx.nuxt.com/s_16x16/gh_avatar/smarroufin',
+    srcset: 'https://ipx.nuxt.com/s_32x32/gh_avatar/smarroufin 2x'
+  },
+  label: 'smarroufin',
+  to: 'https://github.com/smarroufin',
+  target: '_blank'
 }]
 
 const { ui } = useAppConfig()