main 🧊 update doc

Author: debabin

packages/docs/app/.vitepress/sections/HomeHooks/HomeHooks.data.ts

@@ -7,7 +7,7 @@ export default {
     const hooksWithLinks = await Promise.all(
       hooks.map(async (hook) => ({
         ...hook,
-        link: await getHookDocsLink(hook.name)
+        ...(await getHookDocsLink(hook.name))
       }))
     );
 

packages/docs/app/.vitepress/sections/HomeHooks/HomeHooks.vue

@@ -12,12 +12,16 @@ const filteredHooks = computed(() =>
         return {
           name: hook.name,
           link: hook.link,
+          rel: hook.rel,
+          target: hook.target,
           disabled: false
         };
 
       return {
         name: hook.name,
         link: hook.link,
+        rel: hook.rel,
+        target: hook.target,
         disabled: true
       };
     })
@@ -58,7 +62,12 @@ const filteredHooks = computed(() =>
 
     <div class="mt-10 flex w-[130%] flex-wrap justify-start gap-3">
       <div v-for="hook in filteredHooks.slice(0, 40)" :key="hook.name">
-        <a :href="hook.link" class="text-2xl text-[var(--vp-c-text-1)]! no-underline!">
+        <a
+          :href="hook.link"
+          :rel="hook.rel"
+          :target="hook.target"
+          class="text-2xl text-[var(--vp-c-text-1)]! no-underline!"
+        >
           <div
             class="items-center rounded-lg border-[1px] border-transparent bg-[var(--vp-c-default-soft)] px-6 py-2 transition-all duration-200 hover:border-[var(--vp-c-brand-1)]/80 hover:shadow-md"
             :class="{

packages/docs/src/utils/docs/getContentItems.ts

@@ -7,6 +7,8 @@ interface ContentItem {
   category: string;
   description: string;
   link: string;
+  rel?: string;
+  target?: string;
   text: string;
 }
 
@@ -35,11 +37,13 @@ export const getContentItems = async () => {
         return null;
       }
 
+      const navigation = await getHookDocsLink(item.name);
+
       return {
         text: item.name,
         description: jsdoc.description.description,
         category: jsdoc.category?.name,
-        link: await getHookDocsLink(item.name)
+        ...navigation
       };
     })
   );

packages/docs/src/utils/docs/getHookDocsLink.ts

@@ -2,6 +2,8 @@ import { readdir } from 'node:fs/promises';
 import path from 'node:path';
 import process from 'node:process';
 
+const SITE_ORIGIN = 'https://reactuse.org';
+
 let migratedHookNamesPromise: Promise<Set<string>> | null = null;
 
 const getMigratedHookNames = async () => {
@@ -22,12 +24,24 @@ const getMigratedHookNames = async () => {
   return migratedHookNamesPromise;
 };
 
-export const getHookDocsLink = async (name: string) => {
+export interface HookDocsNavigation {
+  link: string;
+  rel?: string;
+  target?: string;
+}
+
+export const getHookDocsLink = async (name: string): Promise<HookDocsNavigation> => {
   const migratedHookNames = await getMigratedHookNames();
 
   if (migratedHookNames.has(name)) {
-    return `/new/functions/hooks/${name}`;
+    return {
+      link: `${SITE_ORIGIN}/new/functions/hooks/${name}`,
+      rel: 'noreferrer',
+      target: '_self'
+    };
   }
 
-  return `/functions/hooks/${name}`;
+  return {
+    link: `/functions/hooks/${name}`
+  };
 };