valaxy-theme-hairy 0.2.2 → 1.0.0

package/components/{HairyTimelinePostItem.vue → parts/HairyTimelineContent.vue}

@@ -5,11 +5,12 @@ import { withDefaults } from 'vue'
 import { last } from 'lodash-es'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { toArr } from '../utils'
+import { toArray } from '../../utils'
+
 withDefaults(
   defineProps<{
     post: Post
-    format: string
+    format?: string
   }>(),
   {
     format: 'YYYY-MM-DD',
@@ -20,8 +21,8 @@ const i18n = useI18n()
 
 const router = useRouter()
 
-const displayCategory = (keys: string | string[] = []) => {
-  router.push({ path: `/categories/${toArr(keys).join('/')}` })
+function displayCategory(keys: string | string[] = []) {
+  router.push({ path: `/categories/${toArray(keys).join('/')}` })
 }
 </script>
 
@@ -30,11 +31,9 @@ const displayCategory = (keys: string | string[] = []) => {
     <div class="mr-2.2 dark:text-gray-500 text-gray-400">
       {{ dayjs(post.date).format(format) }}
     </div>
-    <HairyLink v-if="post.categories?.length" @click="displayCategory(post.categories)">
-      {{ i18n.t(last(toArr(post.categories)) || '') }}
+    <HairyLink v-if="post.categories?.length" bordered type="white" @click="displayCategory(post.categories)">
+      {{ i18n.t(last(toArray(post.categories)) || '') }}
     </HairyLink>
   </div>
   <a class="cursor-pointer text-size-4" @click="$router.push(post.path || '')">{{ post.title }}</a>
 </template>
-
-<style lang="scss" scoped></style>

package/components/parts/HairyUserNav.vue

@@ -0,0 +1,95 @@
+<script lang="ts" setup>
+import { usePostList, useTags } from 'valaxy'
+import { computed, nextTick } from 'vue'
+import { useRouter } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { toArray } from '../../utils'
+import { useGlobalStore } from '../../store'
+
+const posts = usePostList()
+const tags = useTags()
+const router = useRouter()
+const { showDrawer } = storeToRefs(useGlobalStore())
+
+const total = computed(() => {
+  const categories = posts.value.map(v => toArray(v.categories || [])).filter(v => v.length)
+  const maps: string[] = []
+  for (const category of categories) {
+    let caches: string[] = []
+    for (const iterator of category) {
+      caches.push(iterator)
+      maps.push(caches.join('-'))
+    }
+    caches = []
+  }
+  return new Set(maps).size
+})
+
+async function navigation(path: string) {
+  await router.push(path)
+  await nextTick()
+  showDrawer.value = false
+}
+</script>
+
+<template>
+  <div class="flex justify-center mt-2">
+    <HairyUserStats :count="posts.length" @click="navigation('/archives/')">
+      文章
+    </HairyUserStats>
+    <div class="w-1px bg-gray bg-opacity-50" />
+    <HairyUserStats :count="total" @click="navigation('/categories/')">
+      分类
+    </HairyUserStats>
+    <div class="w-1px bg-gray bg-opacity-50" />
+    <HairyUserStats :count="tags.size" @click="navigation('/tags/')">
+      标签
+    </HairyUserStats>
+  </div>
+  <HairySocialLinks class="mt-5" />
+  <HairyMenu class="HairyUserMenu mt-5 flex-col h-auto" />
+</template>
+
+<style lang="scss">
+  .HairyUserMenu {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+    .HairyMenuItem {
+      padding: 2px;
+      width: 100%;
+      border: 1px solid transparent;
+      > div {
+        justify-content: center;
+      }
+      border-radius: 10px;
+      transition: all 0.2s;
+      background-color: transparent;
+      user-select: none;
+    }
+
+    .HairyMenuItem:hover,
+    .HairyMenuItem.active {
+      background-color: #f4f4f5;
+    }
+    .HairyMenuItem:active {
+      background-color: #efefef;
+    }
+
+    .HairyMenuItem.active + .HairyMenuItem {
+      border-top-color: transparent;
+    }
+    .HairyMenuItem:hover + .HairyMenuItem {
+      border-top-color: transparent;
+    }
+  }
+  .dark .HairyUserMenu {
+    .HairyMenuItem:hover,
+    .HairyMenuItem.active {
+      background-color: #f4f4f50a;
+    }
+    .HairyMenuItem:active {
+      background-color: #f4f4f521;
+    }
+  }
+</style>

package/components/{article-layout → posts}/HairyArticleImage.vue

@@ -4,28 +4,27 @@ import { computed, defineProps } from 'vue'
 import dayjs from 'dayjs'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { last } from 'lodash-es'
-import { usePostLayout } from '../../hooks/usePostLayout'
-import { toArr } from '../../utils'
+import { removeTags, toArray } from '../../utils'
+import { useLayoutPost } from '../../composables'
 
 const props = defineProps<{
   post: Post
   reverse?: boolean
 }>()
+
 const router = useRouter()
-const layout = usePostLayout()
+const layout = useLayoutPost()
 const slice = computed(() => layout.value.includes('slice'))
-const image = computed(() => props.post.image)
-
+const image = computed(() => props.post.image?.toString())
+const text = computed(() => removeTags(props.post.excerpt))
 const i18n = useI18n()
-
-const onReadMore = () => {
+function onReadMore() {
   if (props.post.path)
     router.push(props.post.path)
 }
 
-const displayCategory = (keys: string | string[] = []) => {
-  router.push({ path: `/categories/${toArr(keys).join('/')}` })
+function displayCategory(keys: string | string[] = []) {
+  router.push({ path: `/categories/${toArray(keys).join('/')}` })
 }
 </script>
 
@@ -36,33 +35,33 @@ const displayCategory = (keys: string | string[] = []) => {
         <a class="text-size-2xl font-bold truncate cursor-pointer lt-sm:text-size-lg" :class="[reverse ? 'order-last' : 'order-first']" @click="onReadMore">{{ post.title }}</a>
         <div class="flex justify-end gap-2 text-size-sm lt-sm:text-size-xs">
           <span>{{ dayjs(post.date).format('YYYY-MM-DD') }}</span>
-          <span>{{ (post.length / 1000).toFixed(1) }}k字</span>
-          <span class="lt-sm:hidden">{{ post.durations.minutes.toFixed(2) }}分钟</span>
+          <span>{{ post.wordCount }}字</span>
+          <span class="lt-sm:hidden">{{ post.readingTime }}分钟</span>
         </div>
       </div>
-      <div class="h-200px lt-sm:h-150px flex bg-light-2 dark:bg-transparent rounded-5 duration-200" :class="[reverse ? 'pl-4' : 'pr-4']">
+      <div class="h-200px lt-sm:h-150px flex bg-light-2 dark:bg-transparent rounded-5" :class="[reverse ? 'pl-4' : 'pr-4']">
         <div class="flex-1 post-image-content" :class="[reverse ? 'order-last' : 'order-first']">
           <img
             class="post-image rounded-1 w-full h-full object-cover cursor-pointer" :src="image"
             @click="onReadMore"
-          />
+          >
         </div>
         <div class="flex-1 flex flex-col justify-between py-2 dark:py-0">
           <div class="flex-1 text-size-sm">
             <div class="line-clamp-text">
-              {{ post.text }}
+              {{ text }}
             </div>
           </div>
           <div class="flex justify-between items-center">
             <a class="cursor-pointer" :class="[reverse && 'order-1']">
               <span v-if="post.categories?.length" @click="displayCategory(post.categories)">
-                {{ i18n.t(last(toArr(post.categories)) || '') }}
+                {{ i18n.t(toArray(post.categories).at(-1) || '') }}
               </span>
             </a>
             <div class="text-base leading-6 font-medium">
               <a class="link cursor-pointer" aria-label="read more" @click="onReadMore">
                 <span v-if="reverse">←</span>
-                Read more
+                <span class="hidden md:block">Read more</span>
                 <span v-if="!reverse">→</span>
               </a>
             </div>
@@ -86,7 +85,7 @@ const displayCategory = (keys: string | string[] = []) => {
 
 .dark {
   .post-image {
-    @apply opacity-75 hover: opacity-90 duration-200;
+    @apply opacity-75 hover:opacity-90 ;
   }
 }
 
@@ -115,7 +114,7 @@ const displayCategory = (keys: string | string[] = []) => {
 
 .HairyArticleImage.slice {
   .post-image {
-    @apply transition-all;
+    // @apply transition-all;
   }
 
   &:hover {

package/components/{article-layout → posts}/HairyArticleSeries.vue

@@ -1,17 +1,20 @@
 <script lang="ts" setup>
+import type { PostFrontMatter } from 'valaxy'
 import { useFrontmatter } from 'valaxy'
 import { computed, inject, nextTick, ref } from 'vue'
 import { useRouter } from 'vue-router'
-import { toArr } from '../../utils'
-import { useCurrentCategory } from '../../hooks/useCategory'
+import { toArray } from '../../utils'
+import { useCategory } from '../../composables'
 
 const frontmatter = useFrontmatter()
-const paths = computed(() => toArr(frontmatter.value.categories).filter(Boolean) as string[])
-const category = useCurrentCategory(paths)
+const paths = computed(() => toArray(frontmatter.value.categories).filter(Boolean) as string[])
+const category = useCategory(paths)
+
 const posts = computed(() => {
-  const result = category.value.posts || []
+  const result = [...(category.value.children?.values() || [])] as PostFrontMatter[]
   return result.sort((a, b) => (a.date || 1) > (b.date || 1) ? 1 : -1)
 })
+
 const router = useRouter()
 
 const active = inject('HairyUserTab:active', ref(''))

package/components/{article-layout → posts}/HairyArticleText.vue

@@ -1,14 +1,18 @@
 <script lang="ts" setup>
 import type { Post } from 'valaxy'
 import { computed, defineProps } from 'vue'
-import { usePostLayout } from '../../hooks/usePostLayout'
+import { removeTags } from '../../utils'
+import { useLayoutPost } from '../../composables'
+
 const props = defineProps<{
   post: Post
 }>()
-const layout = usePostLayout()
+
+const layout = useLayoutPost()
+
 const text = computed(() => {
   if (layout.value === 'text')
-    return props.post.text
+    return removeTags(props.post.excerpt)
   return props.post.excerpt
 })
 </script>
@@ -28,7 +32,10 @@ const text = computed(() => {
           />
         </div>
         <div class="text-base leading-6 font-medium">
-          <a class="link" aria-label="read more" :href="post.path">Read more →</a>
+          <a class="link" aria-label="read more" :href="post.path">
+            <span class="hidden md:block">Read more</span>
+            <span> →</span>
+          </a>
         </div>
       </div>
     </article>

package/components/posts/HairyPostFooter.vue

@@ -0,0 +1,15 @@
+<script lang="ts" setup>
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+</script>
+
+<template>
+  <div class="mb-15">
+    <div class="border-t border-gray-200 dark:border-gray-600" />
+    <div class="flex items-center justify-end mt-2">
+      <div class="i-ri-eye-fill mr-2" />
+      阅读次数 <span class="waline-pageview-count mx-2" :data-path="route.path"> - </span> 次
+    </div>
+  </div>
+</template>

package/components/{article-layout → posts}/HairyPostImageList.vue

@@ -3,8 +3,7 @@ import type { Ref } from 'vue'
 import { computed } from 'vue'
 import type { Post } from 'valaxy'
 import { usePostList } from 'valaxy'
-
-import { usePostLayout } from '../../hooks/usePostLayout'
+import { useLayoutPost } from '../../composables'
 
 const props = withDefaults(defineProps<{
   type?: string
@@ -12,10 +11,11 @@ const props = withDefaults(defineProps<{
 }>(), {
 })
 
+const layout = useLayoutPost()
+const reverse = computed(() => layout.value.includes('reverse'))
+
 const routes = usePostList() as any as Ref<Post[]>
 const posts = computed(() => props.posts || routes.value)
-const layout = usePostLayout()
-const reverse = computed(() => layout.value.includes('reverse'))
 </script>
 
 <template>
@@ -25,4 +25,3 @@ const reverse = computed(() => layout.value.includes('reverse'))
     </Transition>
   </ul>
 </template>
-

package/components/{article-layout → posts}/HairyPostTextsList.vue

@@ -20,4 +20,3 @@ const posts = computed(() => props.posts || routes.value)
     </Transition>
   </ul>
 </template>
-

package/components/posts/HairyPostToggleLayout.vue

@@ -0,0 +1,36 @@
+<script lang="ts" setup>
+import { useElementSize, useScroll } from '@vueuse/core'
+import { computed } from 'vue'
+import { storeToRefs } from 'pinia'
+import { useGlobalStore } from '../../store'
+import { useLayoutPost } from '../../composables'
+
+const layout = useLayoutPost()
+
+const layouts = [
+  { layout: 'image:slice:reverse' as const, icon: 'i-fluent-text-align-distributed-24-filled' },
+  { layout: 'image:slice' as const, icon: 'i-fluent-text-align-left-16-filled' },
+  { layout: 'image' as const, icon: 'i-fluent-text-align-justify-20-filled' },
+  { layout: 'markdown' as const, icon: 'i-fluent-markdown-20-filled' },
+  { layout: 'text' as const, icon: 'i-fluent-code-text-16-filled' },
+]
+
+const globalStore = useGlobalStore()
+const { headerRef } = storeToRefs(globalStore)
+const { height: headerHeight } = useElementSize(headerRef)
+const scroll = useScroll(document)
+
+const show = computed(() => {
+  return scroll.y.value > headerHeight.value
+})
+</script>
+
+<template>
+  <div class="inline-flex gap-2 sticky top-15 inset-0 rounded-2" :class="[show && 'bg-white bg-opacity-85 dark:bg-black dark:bg-opacity-80 z-100']">
+    <div v-for="(item) in layouts" :key="item.layout" class="p-2 rounded-full cursor-pointer" :class="[layout === item.layout && 'text-primary']" @click="layout = item.layout">
+      <div class="text-size-xl" :class="item.icon" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/components/third/HairyAlgoliaSearch.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import * as addonAlgolia from 'valaxy-addon-algolia'
+import { isEmptyAddon } from 'valaxy'
+import { whenever } from '@vueuse/core'
+
+if (isEmptyAddon(addonAlgolia))
+  throw new Error('Algolia addon is not installed')
+
+const { loaded, load, dispatchEvent } = addonAlgolia.useAddonAlgolia()
+
+whenever(loaded, dispatchEvent)
+</script>
+
+<template>
+  <AlgoliaSearchBox v-if="loaded" class="VPNavBarSearch" />
+  <HairySearchBtnDisplay v-else @click="load()" />
+</template>

package/components/third/HairyFuseSearch.vue

@@ -0,0 +1,10 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const visible = ref(false)
+</script>
+
+<template>
+  <HairySearchBtnDisplay @click="visible = true" />
+  <HairyFuseSearchDialog v-model:visible="visible" />
+</template>

package/components/third/HairyFuseSearchDialog.vue

@@ -0,0 +1,32 @@
+<script lang="ts" setup>
+import { ref, useModel } from 'vue'
+import { onKeyDown, whenever } from '@vueuse/core'
+
+const props = defineProps<{
+  visible: boolean
+}>()
+const visible = useModel(props, 'visible')
+
+const text = ref('')
+
+onKeyDown('Escape', () => {
+  if (!visible.value)
+    return
+  visible.value = false
+})
+whenever(() => !visible.value, () => {
+  text.value = ''
+})
+</script>
+
+<template>
+  <div v-if="visible" role="button" class="DocSearch DocSearch-Container " @click="visible = false">
+    <div class="DocSearch-Modal" style="--docsearch-vh: 5.5200000000000005px;" @click.stop>
+      <HairyFuseSearchHeader v-model:text="text" v-model:visible="visible" />
+      <HairyFuseSearchDropdown v-model:visible="visible" :text="text" />
+      <HairyFuseSearchFooter />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped></style>

package/components/third/HairyFuseSearchDropdown.vue

@@ -0,0 +1,77 @@
+<script lang="ts" setup>
+import { ref, toRef, useModel, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { onKeyDown } from '@vueuse/core'
+import { useFuseParsed } from '../../composables'
+
+const props = defineProps<{
+  text: string
+  visible: boolean
+}>()
+const visible = useModel(props, 'visible')
+
+const router = useRouter()
+
+const input = toRef(props, 'text')
+
+const { results } = useFuseParsed(input)
+
+function navigation(link: string) {
+  router.push(link)
+  visible.value = false
+}
+const selected = ref(0)
+
+onKeyDown('ArrowDown', () => {
+  if (!results.value.length || selected.value === results.value.length - 1)
+    return
+  selected.value++
+})
+onKeyDown('ArrowUp', () => {
+  if (!results.value.length || selected.value === 0)
+    return
+  selected.value--
+})
+onKeyDown('Enter', () => {
+  if (!results.value.length)
+    return
+  navigation(results.value[selected.value].item.link)
+  visible.value = false
+})
+watch(results, () => selected.value = 0)
+</script>
+
+<template>
+  <div class="DocSearch-Dropdown">
+    <div class="DocSearch-Dropdown-Container">
+      <section v-if="results.length" class="DocSearch-Hits">
+        <div class="DocSearch-Hit-source">
+          Recent
+        </div>
+        <ul id="docsearch-list" role="listbox" aria-labelledby="docsearch-label">
+          <HairyFuseSearchHit
+            v-for="({ item }, index) of results" :key="index"
+            :title="item.title"
+            :selected="selected === index"
+            :excerpt="item.excerpt"
+            :path="item.link"
+            @click="navigation(item.link)"
+            @hover="selected = index"
+          />
+        </ul>
+      </section>
+      <div v-else-if="!text" class="DocSearch-StartScreen">
+        <p class="DocSearch-Help">
+          No recent searches
+        </p>
+      </div>
+      <div v-else class="DocSearch-NoResults">
+        <div class="DocSearch-Screen-Icon">
+          <svg width="40" height="40" viewBox="0 0 20 20" fill="none" fill-rule="evenodd" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path d="M15.5 4.8c2 3 1.7 7-1 9.7h0l4.3 4.3-4.3-4.3a7.8 7.8 0 01-9.8 1m-2.2-2.2A7.8 7.8 0 0113.2 2.4M2 18L18 2" /></svg>
+        </div><p class="DocSearch-Title">
+          No results for "<strong>{{ text }}</strong>"
+        </p>
+      </div>
+    </div>
+  </div>
+</template>

package/components/third/HairyFuseSearchFooter.vue

@@ -0,0 +1,28 @@
+<script lang="ts" setup>
+</script>
+
+<template>
+  <footer class="DocSearch-Footer">
+    <div class="DocSearch-Logo">
+      <a class="flex items-center text-black dark:text-white" target="_blank" href="https://www.fusejs.io/">
+        <span mr-2 class="DocSearch-Label">Search by</span>
+        <img mr-1 w-6 h-6 src="https://www.fusejs.io/assets/img/logo.png">
+        <span>Fuse.js</span>
+      </a>
+    </div>
+    <ul class="DocSearch-Commands">
+      <li><kbd class="DocSearch-Commands-Key"><svg width="15" height="15" aria-label="Enter key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M12 3.53088v3c0 1-1 2-2 2H4M7 11.53088l-3-3 3-3" /></g></svg></kbd><span class="DocSearch-Label">to select</span></li><li><kbd class="DocSearch-Commands-Key"><svg width="15" height="15" aria-label="Arrow down" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 3.5v8M10.5 8.5l-3 3-3-3" /></g></svg></kbd><kbd class="DocSearch-Commands-Key"><svg width="15" height="15" aria-label="Arrow up" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M7.5 11.5v-8M10.5 6.5l-3-3-3 3" /></g></svg></kbd><span class="DocSearch-Label">to navigate</span></li><li><kbd class="DocSearch-Commands-Key"><svg width="15" height="15" aria-label="Escape key" role="img"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.2"><path d="M13.6167 8.936c-.1065.3583-.6883.962-1.4875.962-.7993 0-1.653-.9165-1.653-2.1258v-.5678c0-1.2548.7896-2.1016 1.653-2.1016.8634 0 1.3601.4778 1.4875 1.0724M9 6c-.1352-.4735-.7506-.9219-1.46-.8972-.7092.0246-1.344.57-1.344 1.2166s.4198.8812 1.3445.9805C8.465 7.3992 8.968 7.9337 9 8.5c.032.5663-.454 1.398-1.4595 1.398C6.6593 9.898 6 9 5.963 8.4851m-1.4748.5368c-.2635.5941-.8099.876-1.5443.876s-1.7073-.6248-1.7073-2.204v-.4603c0-1.0416.721-2.131 1.7073-2.131.9864 0 1.6425 1.031 1.5443 2.2492h-2.956" /></g></svg></kbd><span class="DocSearch-Label">to close</span></li>
+    </ul>
+  </footer>
+</template>
+
+<style>
+.cls-1,
+.cls-2 {
+  fill: #003dff;
+}
+
+.cls-2 {
+  fill-rule: evenodd;
+}
+</style>

package/components/third/HairyFuseSearchHeader.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { useModel } from 'vue'
+
+const props = defineProps<{
+  text: string
+  visible: boolean
+}>()
+
+const text = useModel(props, 'text')
+const visible = useModel(props, 'visible')
+</script>
+
+<template>
+  <header class="DocSearch-SearchBar">
+    <div class="DocSearch-Form">
+      <label id="docsearch-label" class="DocSearch-MagnifierLabel" for="docsearch-input">
+        <svg width="20" height="20" class="DocSearch-Search-Icon" viewBox="0 0 20 20"><path d="M14.386 14.386l4.0877 4.0877-4.0877-4.0877c-2.9418 2.9419-7.7115 2.9419-10.6533 0-2.9419-2.9418-2.9419-7.7115 0-10.6533 2.9418-2.9419 7.7115-2.9419 10.6533 0 2.9419 2.9418 2.9419 7.7115 0 10.6533z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" /></svg>
+      </label>
+      <input id="docsearch-input" v-model="text" class="DocSearch-Input" aria-autocomplete="both" aria-labelledby="docsearch-label" autocomplete="off" autocorrect="off" autocapitalize="off" enterkeyhint="go" spellcheck="false" autofocus="true" placeholder="Search docs" maxlength="64" type="search" aria-activedescendant="docsearch-item-0" aria-controls="docsearch-list">
+      <button type="reset" title="Clear the query" class="DocSearch-Reset" aria-label="Clear the query" :hidden="!text" @click="text = ''">
+        <svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" /></svg>
+      </button>
+    </div>
+    <button class="DocSearch-Cancel" type="reset" aria-label="Cancel" @click="visible = false">
+      Cancel
+    </button>
+  </header>
+</template>
+
+<style lang="scss" scoped></style>

package/components/third/HairyFuseSearchHit.vue

@@ -0,0 +1,52 @@
+<script lang="ts" setup>
+import { defineEmits, ref } from 'vue'
+import { useElementHover, whenever } from '@vueuse/core'
+
+withDefaults(
+  defineProps<{
+    selected: boolean
+    title: string
+    excerpt: string
+    path: string
+    history?: boolean
+  }>(),
+  {
+    selected: false,
+  },
+)
+
+const emit = defineEmits(['hover'])
+
+const itemRef = ref()
+
+whenever(useElementHover(itemRef), () => emit('hover'))
+</script>
+
+<template>
+  <li id="docsearch-item-0" ref="itemRef" class="DocSearch-Hit" role="option" :aria-selected="selected">
+    <a :href="path" onclick="return false">
+      <div class="DocSearch-Hit-Container">
+        <div class="DocSearch-Hit-icon">
+          <svg v-if="history" width="20" height="20" viewBox="0 0 20 20"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M3.18 6.6a8.23 8.23 0 1112.93 9.94h0a8.23 8.23 0 01-11.63 0" /><path d="M6.44 7.25H2.55V3.36M10.45 6v5.6M10.45 11.6L13 13" /></g></svg>
+          <svg v-else width="20" height="20" viewBox="0 0 20 20"><path d="M17 5H3h14zm0 5H3h14zm0 5H3h14z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linejoin="round" /></svg>
+        </div>
+        <div class="DocSearch-Hit-content-wrapper">
+          <span class="DocSearch-Hit-title">{{ title }}</span>
+          <span class="DocSearch-Hit-path">{{ excerpt }}</span>
+        </div>
+        <div v-if="history" class="DocSearch-Hit-action">
+          <button class="DocSearch-Hit-action-button" title="Save this search" type="submit">
+            <svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 14.2L5 17l1-5.6-4-4 5.5-.7 2.5-5 2.5 5 5.6.8-4 4 .9 5.5z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linejoin="round" /></svg>
+          </button>
+        </div>
+        <div v-if="history" class="DocSearch-Hit-action">
+          <button class="DocSearch-Hit-action-button" title="Remove this search from history" type="submit"><svg width="20" height="20" viewBox="0 0 20 20"><path d="M10 10l5.09-5.09L10 10l5.09 5.09L10 10zm0 0L4.91 4.91 10 10l-5.09 5.09L10 10z" stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" /></svg>
+          </button>
+        </div>
+        <div class="DocSearch-Hit-action">
+          <svg class="DocSearch-Hit-Select-Icon" width="20" height="20" viewBox="0 0 20 20"><g stroke="currentColor" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3v4c0 2-2 4-4 4H2" /><path d="M8 17l-6-6 6-6" /></g></svg>
+        </div>
+      </div>
+    </a>
+  </li>
+</template>