😇 prefetch intent (#406)

bradgarropy · Jan 17, 2024 · 09c53a7 · 09c53a7 · vercel · Jan 17, 2024
1 parent ac26c28
commit 09c53a7
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 17 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "bradgarropy.com",
-    "version": "7.3.1",
+    "version": "7.3.2",
     "description": "🏠 my home on the web",
     "type": "module",
     "keywords": [

diff --git a/src/components/FancyLink/FancyLink.tsx b/src/components/FancyLink/FancyLink.tsx
@@ -11,6 +11,7 @@ const FancyLink: FC<FancyLinkProps> = ({children, to}) => {
         <Link
             className="shadow-link transition duration-300 hover:shadow-link-hover"
             to={to}
+            prefetch="intent"
         >
             {children}
         </Link>

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -14,7 +14,7 @@ const Header: FC = () => {
     return (
         <header className="grid grid-flow-col items-center justify-between p-5">
             <div className="grid grid-flow-col items-center gap-x-8">
-                <Link to="/" aria-label="bg">
+                <Link prefetch="intent" to="/" aria-label="bg">
                     <Logo />
                 </Link>
 

diff --git a/src/components/LinkButton/LinkButton.tsx b/src/components/LinkButton/LinkButton.tsx
@@ -31,7 +31,7 @@ const LinkButton: FC<LinkButtonProps> = ({
     }
 
     return (
-        <Link to={to} className={classes}>
+        <Link prefetch="intent" to={to} className={classes}>
             {props.children}
         </Link>
     )

diff --git a/src/components/MobileNavigation/MobileNavigation.tsx b/src/components/MobileNavigation/MobileNavigation.tsx
@@ -21,23 +21,43 @@ const MobileNavigation: FC = () => {
             />
 
             <div className="grid grid-flow-row content-center justify-center gap-y-4">
-                <Link className="hover:text-purple-400" to="/blog">
+                <Link
+                    prefetch="intent"
+                    className="hover:text-purple-400"
+                    to="/blog"
+                >
                     blog
                 </Link>
 
-                <Link className="hover:text-purple-400" to="/now">
+                <Link
+                    prefetch="intent"
+                    className="hover:text-purple-400"
+                    to="/now"
+                >
                     now
                 </Link>
 
-                <Link className="hover:text-purple-400" to="/uses">
+                <Link
+                    prefetch="intent"
+                    className="hover:text-purple-400"
+                    to="/uses"
+                >
                     uses
                 </Link>
 
-                <Link className="hover:text-purple-400" to="/hire-me">
+                <Link
+                    prefetch="intent"
+                    className="hover:text-purple-400"
+                    to="/hire-me"
+                >
                     hire me
                 </Link>
 
-                <Link className="hover:text-purple-400" to="/contact">
+                <Link
+                    prefetch="intent"
+                    className="hover:text-purple-400"
+                    to="/contact"
+                >
                     contact
                 </Link>
             </div>

diff --git a/src/components/Navigation/Navigation.tsx b/src/components/Navigation/Navigation.tsx
@@ -4,31 +4,51 @@ import type {FC} from "react"
 const Navigation: FC = () => {
     return (
         <nav className="grid grid-flow-col gap-x-5 max-[800px]:hidden">
-            <Link className="duration-300 hover:text-purple-400" to="/blog">
+            <Link
+                prefetch="intent"
+                className="duration-300 hover:text-purple-400"
+                to="/blog"
+            >
                 blog
             </Link>
 
             <span>|</span>
 
-            <Link className="duration-300 hover:text-purple-400" to="/now">
+            <Link
+                prefetch="intent"
+                className="duration-300 hover:text-purple-400"
+                to="/now"
+            >
                 now
             </Link>
 
             <span>|</span>
 
-            <Link className="duration-300 hover:text-purple-400" to="/uses">
+            <Link
+                prefetch="intent"
+                className="duration-300 hover:text-purple-400"
+                to="/uses"
+            >
                 uses
             </Link>
 
             <span>|</span>
 
-            <Link className="duration-300 hover:text-purple-400" to="/hire-me">
+            <Link
+                prefetch="intent"
+                className="duration-300 hover:text-purple-400"
+                to="/hire-me"
+            >
                 hire me
             </Link>
 
             <span>|</span>
 
-            <Link className="duration-300 hover:text-purple-400" to="/contact">
+            <Link
+                prefetch="intent"
+                className="duration-300 hover:text-purple-400"
+                to="/contact"
+            >
                 contact
             </Link>
         </nav>

diff --git a/src/components/PostCard/PostCard.tsx b/src/components/PostCard/PostCard.tsx
@@ -20,6 +20,7 @@ const PostCard: FC<PostCardProps> = ({post, className}) => {
         >
             <h1 className="mb-10 font-heading text-3xl font-semibold max-[750px]:text-2xl">
                 <Link
+                    prefetch="intent"
                     to={`/blog/${post.slug}`}
                     className="transition duration-300 hover:text-purple-400"
                 >

diff --git a/src/components/PostMeta/PostMeta.tsx b/src/components/PostMeta/PostMeta.tsx
@@ -12,6 +12,7 @@ const PostMeta: FC<PostMetaProps> = ({date, tags, topic}) => {
             <span className="lowercase">
                 {formatDate(date)} in{" "}
                 <Link
+                    prefetch="intent"
                     to={`/topic/${topic}`}
                     className="transition duration-300 hover:text-purple-400"
                 >
@@ -26,6 +27,7 @@ const PostMeta: FC<PostMetaProps> = ({date, tags, topic}) => {
                             key={tag}
                             className="rounded bg-black px-2 font-heading text-sm font-bold text-white duration-300 hover:bg-purple-400 dark:bg-white dark:text-black dark:hover:bg-purple-400"
                             to={`/tag/${tag}`}
+                            prefetch="intent"
                         >
                             {tag}
                         </Link>

diff --git a/src/components/Section/Section.tsx b/src/components/Section/Section.tsx
@@ -22,7 +22,11 @@ const Section: FC<SectionProps> = ({title, link, children, ...props}) => {
     return (
         <section {...props}>
             {link ? (
-                <Link className="m-0 mb-7 inline-block" to={link}>
+                <Link
+                    className="m-0 mb-7 inline-block"
+                    to={link}
+                    prefetch="intent"
+                >
                     <Title title={title} />
                 </Link>
             ) : (

diff --git a/src/hooks/useMarkdown/useMarkdown.tsx b/src/hooks/useMarkdown/useMarkdown.tsx
@@ -29,7 +29,7 @@ const useMarkdown = (html: string) => {
                     props: Record<string, unknown>
                 }) => {
                     return (
-                        <Link to={href} {...props}>
+                        <Link prefetch="intent" to={href} {...props}>
                             {children}
                         </Link>
                     )
-Original file line number
+Diff line change
@@ Expand Up / @@ -11,6 +11,7 @@ const FancyLink: FC<FancyLinkProps> = ({children, to}) => { @@
             <Link
                 className="shadow-link transition duration-300 hover:shadow-link-hover"
                 to={to}
+                prefetch="intent"
             >
                 {children}
             </Link>
@@ Expand Down @@