feat(site): prefetch links that require redirects

site/src/components/Footer.astro

@@ -9,10 +9,12 @@ type NavLink = {
   href: string;
   label: string;
   external?: boolean;
+  prefetch?: boolean;
 };
 const navLinks: NavLink[] = [
   { href: '/', label: 'Home' },
-  { href: '/docs', label: 'Docs' },
+  // docs require a redirect, so, let's prefetch them to hide that latency
+  { href: '/docs', label: 'Docs', prefetch: true },
   // { href: '/blog', label: 'Blog' },
   { href: '/privacy', label: 'Privacy' },
 ];
@@ -29,7 +31,11 @@ const { class: className } = Astro.props;
       <div class="flex justify-center sm:justify-start">
         {
           navLinks.map((link) => (
-            <a href={link.href} class="intent:underline px-3 py-2 inline-flex gap-1 items-center">
+            <a
+              href={link.href}
+              class="intent:underline px-3 py-2 inline-flex gap-1 items-center"
+              data-astro-prefetch={link.prefetch ? '' : undefined}
+            >
               {link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
             </a>
           ))

site/src/components/NavBar/MobileNav.tsx

@@ -1,15 +1,9 @@
+import type { NavLink } from './NavBar.astro';
 import { Dialog } from '@base-ui-components/react/dialog';
 import clsx from 'clsx';
 import { ArrowUpRight, Menu, X } from 'lucide-react';
 import { DISCORD_INVITE_URL, GITHUB_REPO_URL } from '@/consts';
 
-interface NavLink {
-  href: string;
-  label: string;
-  matchPath: string | null;
-  external?: boolean;
-}
-
 export interface MobileNavProps {
   navLinks: NavLink[];
   currentPath: string;
@@ -58,6 +52,7 @@ export default function MobileNav({ navLinks, currentPath, dark = false, childre
                 href={link.href}
                 className={clsx('text-lg px-6 py-3', link.matchPath && currentPath.startsWith(link.matchPath) ? 'underline' : 'intent:underline')}
                 aria-current={link.matchPath && currentPath.startsWith(link.matchPath) ? 'page' : undefined}
+                data-astro-prefetch={link.prefetch ? '' : undefined}
               >
                 {link.label}
                 {' '}

site/src/components/NavBar/NavBar.astro

@@ -10,14 +10,16 @@ export interface Props {
   class?: string;
 }
 
-type NavLink = {
+export type NavLink = {
   href: string;
   label: string;
   matchPath: string | null;
   external?: boolean;
+  prefetch?: boolean;
 };
 const navLinks: NavLink[] = [
-  { href: '/docs', label: 'Docs', matchPath: '/docs' },
+  // docs require a redirect, so, let's prefetch them to hide that latency
+  { href: '/docs', label: 'Docs', matchPath: '/docs', prefetch: true },
   // { href: '/blog', label: 'Blog', matchPath: '/blog' },
 ];
 
@@ -51,6 +53,7 @@ const { class: className, dark = false } = Astro.props;
               : 'border-transparent intent:border-current',
           ]}
           aria-current={link.matchPath && currentPath.startsWith(link.matchPath) ? 'page' : undefined}
+          data-astro-prefetch={link.prefetch ? '' : undefined}
         >
           {link.label} {link.external ? <ArrowUpRight size="1em" /> : null}
         </a>

site/src/components/docs/DocsLink.astro

@@ -24,6 +24,6 @@ const { url: href } = resolveDocsLinkUrl({
 });
 ---
 
-<A href={href}>
+<A href={href} data-astro-prefetch>
   <slot />
 </A>