refactor: Prefech & preload on touchstart events too (#1231)

Author: rschristian

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>

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} />;

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}

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}