feat: refetch home page when click elk logo (#1129)

components/common/CommonPaginator.vue

@@ -43,8 +43,14 @@ defineSlots<{
 }>()
 
 const { t } = useI18n()
+const nuxtApp = useNuxtApp()
 
 const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, $$(stream), eventType, preprocess)
+
+nuxtApp.hook('elk-logo:click', () => {
+  update()
+  nuxtApp.$scrollToTop()
+})
 </script>
 
 <template>

components/nav/NavTitle.vue

@@ -2,6 +2,13 @@
 const { env } = useBuildInfo()
 const router = useRouter()
 const back = ref<any>('')
+
+const nuxtApp = useNuxtApp()
+
+const onClickLogo = () => {
+  nuxtApp.hooks.callHook('elk-logo:click')
+}
+
 onMounted(() => {
   back.value = router.options.history.state.back
 })
@@ -11,7 +18,6 @@ router.afterEach(() => {
 </script>
 
 <template>
-  <!-- Use external to force refresh page and jump to top of timeline -->
   <div flex justify-between>
     <NuxtLink
       flex items-end gap-4
@@ -19,8 +25,8 @@ router.afterEach(() => {
       text-2xl
       select-none
       focus-visible:ring="2 current"
-      to="/"
+      to="/home"
-      external
+      @click.prevent="onClickLogo"
     >
       <NavLogo shrink-0 aspect="1/1" sm:h-8 xl:h-10 class="rtl-flip" />
       <div hidden xl:block text-secondary>

nuxt.config.ts

@@ -211,3 +211,9 @@ declare global {
     }
   }
 }
+
+declare module 'nuxt/dist/app' {
+  interface RuntimeNuxtHooks {
+    'elk-logo:click': () => void
+  }
+}