progress on docs rewrite

docs/components/ApplicationHeader.vue

@@ -72,7 +72,7 @@ const isScrolled = computed(() => y.value !== 0)
           <path
             class="fill-current fill-[#000] dark:fill-sky-50"
             fill-rule="evenodd"
-            d="M43.7221 18.025a2.2806 2.2806 0 0 1 1.6124.6682l6.8419 6.8419a2.2807 2.2807 0 0 1-3.2248 3.2248l-5.2295-5.2295-5.2295 5.2295a2.2807 2.2807 0 0 1-3.2248-3.2248l6.8419-6.8419a2.2806 2.2806 0 0 1 1.6124-.6682Zm-8.4543 21.1938a2.281 2.281 0 0 1 3.2248 0l5.2295 5.2295 5.2295-5.2295a2.2807 2.2807 0 0 1 3.2248 3.2248l-6.8419 6.8419a2.2804 2.2804 0 0 1-3.2248 0l-6.8419-6.8419a2.2806 2.2806 0 0 1 0-3.2248Z"
+            d="M55.0064 22.7105a2.2807 2.2807 0 0 1 .6676 1.6127v9.6758a2.2808 2.2808 0 0 1-2.2803 2.241 2.2802 2.2802 0 0 1-2.2802-2.241v-7.3956h-7.3956a2.2804 2.2804 0 0 1-1.587-3.8788 2.2808 2.2808 0 0 1 1.587-.6817h9.6758a2.2805 2.2805 0 0 1 1.6127.6676ZM34.042 31.7188a2.2807 2.2807 0 0 1 2.2803 2.2802v7.3956h7.3956a2.2804 2.2804 0 0 1 2.241 2.2803 2.2806 2.2806 0 0 1-2.241 2.2803H34.042a2.2808 2.2808 0 0 1-2.2803-2.2803V33.999a2.2807 2.2807 0 0 1 2.2803-2.2802Z"
             clip-rule="evenodd"
           />
         </svg>

docs/components/Hero.vue

@@ -2,6 +2,11 @@
 import Button from '~/components/Button.vue'
 import TimelineSvg from '~/components/TimelineSvg.vue'
 import VueSelect from '~/components/VueSelect.vue'
+import {
+  SparklesIcon,
+  ArrowDownTrayIcon,
+  RocketLaunchIcon,
+} from '@heroicons/vue/20/solid'
 </script>
 
 <template>
@@ -15,6 +20,7 @@ import VueSelect from '~/components/VueSelect.vue'
         <div class="relative z-10 md:text-center lg:text-left">
           <img
             alt=""
+            aria-hidden="true"
             src="~/assets/img/blur-cyan.png"
             decoding="async"
             class="absolute bottom-full right-full -mr-72 -mb-56 opacity-50"
@@ -82,10 +88,29 @@ import VueSelect from '~/components/VueSelect.vue'
               <div
                 class="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-blue-400/0 via-blue-400 to-blue-400/0"
               ></div>
-              <div class="pl-4 pt-4">
-                <div class="mt-6 flex items-start px-1 text-sm">
-                  <VueSelect :options="['hello']" />
+              <div class="p-4 dark">
+                <div class="flex items-center space-x-4">
+                  <span
+                    class="inline-flex items-center rounded-md bg-slate-800 px-2.5 py-0.5 text-sm font-medium text-gray-400"
+                  >
+                    <ArrowDownTrayIcon class="w-3 h-3 mr-1" />
+                    960k installs/month
+                  </span>
+                  <span
+                    class="inline-flex items-center rounded-md bg-slate-800 px-2.5 py-0.5 text-sm font-medium text-gray-400"
+                  >
+                    <SparklesIcon class="w-3 h-3 mr-1" />
+                    4.5k stars
+                  </span>
+                  <span
+                    class="inline-flex items-center rounded-md bg-slate-800 px-2.5 py-0.5 text-sm font-medium text-gray-400"
+                  >
+                    <RocketLaunchIcon class="w-3 h-3 mr-1" />
+                    Vue 3
+                  </span>
                 </div>
+
+                <VueSelect class="w-full mt-4" :options="['hello']" />
               </div>
             </div>
           </div>
@@ -94,3 +119,10 @@ import VueSelect from '~/components/VueSelect.vue'
     </div>
   </div>
 </template>
+
+<style scoped>
+.v-select {
+  --vs-border-color: rgba(125, 211, 252, 0.3);
+  --vs-actions-padding: 0.25rem 0.5rem;
+}
+</style>

docs/components/content/Lead.vue

@@ -1,3 +1,3 @@
 <template>
-  <p class="lead"><Markdown :use="$slots.default" unwrap="p" /></p>
+  <p class="lead"><ContentSlot :use="$slots.default" unwrap="p" /></p>
 </template>

docs/components/content/QuickLink.vue

@@ -14,15 +14,15 @@ defineProps<{
       class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]"
     />
     <div class="relative overflow-hidden rounded-xl p-6">
-      <!--      <Icon :icon="icon" class="h-8 w-8" />-->
+      <slot name="icon" />
       <h2 class="mt-4 font-display text-base text-slate-900 dark:text-white">
-        <NuxtLink :href="href">
+        <NuxtLink :to="href">
           <span class="absolute -inset-px rounded-xl" />
           {{ title }}
         </NuxtLink>
       </h2>
       <p class="mt-1 text-sm text-slate-700 dark:text-slate-400">
-        <Markdown :use="$slots.default" unwrap="p" />
+        <ContentSlot :use="$slots.default" unwrap="p" />
       </p>
     </div>
   </div>