From 5527201c915a345841513b8d2539266ecaf66d7d Mon Sep 17 00:00:00 2001
From: Ryan Christian <rchristian@ryanchristian.dev>
Date: Thu, 6 Feb 2025 20:23:21 -0600
Subject: [PATCH] refactor: Prefech & preload on touchstart events too

---
 src/components/blog-overview/index.jsx  | 7 ++++---
 src/components/content-region/index.jsx | 5 ++++-
 src/components/header/index.jsx         | 5 +++--
 src/components/sidebar/sidebar-nav.jsx  | 1 +
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/components/blog-overview/index.jsx b/src/components/blog-overview/index.jsx
index fac5d6be1..28e496777 100644
--- a/src/components/blog-overview/index.jsx
+++ b/src/components/blog-overview/index.jsx
@@ -16,7 +16,8 @@ export default function BlogOverview() {
 				{config.blog.map(post => {
 					const name = getRouteName(post, lang);
 					const excerpt = post.excerpt[lang] || post.excerpt.en;
-					const onMouseOver = () => {
+
+					const prefetchAndPreload = () => {
 						BlogPage.preload();
 						prefetchContent(post.path);
 					};
@@ -27,10 +28,10 @@ export default function BlogOverview() {
 								<Time value={post.date} />
 							</div>
 							<h2 class={s.title}>
-								<a href={post.path} onMouseOver={onMouseOver}>{name}</a>
+								<a href={post.path} onMouseOver={prefetchAndPreload} onTouchStart={prefetchAndPreload}>{name}</a>
 							</h2>
 							<p class={s.excerpt}>{excerpt}</p>
-							<a href={post.path} onMouseOver={onMouseOver} class="btn-small">
+							<a href={post.path} onMouseOver={prefetchAndPreload} onTouchStart={prefetchAndPreload} class="btn-small">
 								{continueReading} &rarr;
 							</a>
 						</article>
diff --git a/src/components/content-region/index.jsx b/src/components/content-region/index.jsx
index 166a17cb3..812154301 100644
--- a/src/components/content-region/index.jsx
+++ b/src/components/content-region/index.jsx
@@ -14,7 +14,7 @@ const COMPONENTS = {
 		if (props.href && props.href.startsWith('/')) {
 			const url = new URL(props.href, location.origin);
 
-			props.onMouseOver = () => {
+			const prefetchAndPreload = () => {
 				if (props.href.startsWith('/repl?code')) {
 					ReplPage.preload();
 					preloadRepl();
@@ -25,6 +25,9 @@ const COMPONENTS = {
 
 				prefetchContent(url.pathname);
 			};
+
+			props.onMouseOver = prefetchAndPreload;
+			props.onTouchStart = prefetchAndPreload;
 		}
 
 		return <a {...props} />;
diff --git a/src/components/header/index.jsx b/src/components/header/index.jsx
index ae77b45c8..485f6d6d1 100644
--- a/src/components/header/index.jsx
+++ b/src/components/header/index.jsx
@@ -222,7 +222,7 @@ const NavLink = ({ to, isOpen, route, ...props }) => {
 		? { onContextMenu: BrandingRedirect, 'aria-label': 'Home' }
 		: {};
 
-	const onMouseOver = () => {
+	const prefetchAndPreload = () => {
 		if (prefetchHref.startsWith('/repl')) {
 			ReplPage.preload();
 			preloadRepl();
@@ -237,7 +237,8 @@ const NavLink = ({ to, isOpen, route, ...props }) => {
 	return (
 		<a
 			href={href}
-			onMouseOver={onMouseOver}
+			onMouseOver={prefetchAndPreload}
+			onTouchStart={prefetchAndPreload}
 			{...props}
 			data-route={route}
 			{...homeProps}
diff --git a/src/components/sidebar/sidebar-nav.jsx b/src/components/sidebar/sidebar-nav.jsx
index 8e1aad027..2eb7dd142 100644
--- a/src/components/sidebar/sidebar-nav.jsx
+++ b/src/components/sidebar/sidebar-nav.jsx
@@ -70,6 +70,7 @@ function SidebarNavLink(props) {
 			href={href}
 			onClick={onClick}
 			onMouseOver={() => prefetchContent(href)}
+			onTouchStart={() => prefetchContent(href)}
 			class={cx(style.link, activeCss, style['level-' + level])}
 		>
 			{children}