fix: scroll on page change

Author: gerardnico

apps/site/pages/components/avatar.md

@@ -3,7 +3,7 @@ title: Avatar
 description: An avatar is a component that renders an image as an Avatar 
 ---
 
-An `avatar` is a component that renders an [raster image](raster.md) as an `Avatar`.
+An `avatar` is a component that renders a [raster image](raster.md) as an `Avatar`.
 
 ## Styling Properties
 

apps/site/pages/index.mdx

@@ -1,5 +1,6 @@
 ---
-title: Create documentation that interacts with your reader
+title: Interactive documentation
+description: Create documentation that interacts with your reader
 layout: holy
 ---
 import {getPages} from "../../../src/resources/rsc/server/handler.tsx";

src/interact/config/configSchema.ts

@@ -21,15 +21,17 @@ const faviconImage = z.object({
     height: z.coerce.number<number>().describe("The intrinsic height of the image").optional(),
 }).describe("An image")
 type faviconImageType = z.output<typeof faviconImage>
-let relSchema = z.enum(['shortcut icon', 'icon', 'apple-touch-icon']).describe("The link rel (ie the type)");
+let relSchema = z.enum(['shortcut icon', 'icon', 'apple-touch-icon', 'preload']).describe("The link rel (ie the type)");
 type RelType = z.output<typeof relSchema>
 type FaviconType = {
     rel: RelType,
     image?: faviconImageType,
+    as?: string
 }
 const favicon: z.ZodType<FaviconType> = z.object({
     rel: relSchema,
-    image: faviconImage.describe("The image").optional()
+    image: faviconImage.describe("The image").optional(),
+    as: z.enum(['image']).optional(),
 }).describe("A favicon image")
 
 /**

src/resources/components/heads/LinkFavicons.tsx

@@ -13,11 +13,13 @@ export default function LinkFavicons() {
                     return;
                 }
                 return (
-                    <link key={index}
-                          rel={faviconProperties.rel}
-                          href={faviconProperties.image?.href ? faviconProperties.image.href : `/${faviconPath}`}
-                          type={faviconProperties.image?.type}
-                          sizes={faviconProperties.image?.width && faviconProperties.image?.height ? `${faviconProperties.image.width}x${faviconProperties.image.height}` : ''}
+                    <link
+                        key={index}
+                        rel={faviconProperties.rel}
+                        href={faviconProperties.image?.href ? faviconProperties.image.href : `/${faviconPath}`}
+                        {...(faviconProperties.image?.type && {type: faviconProperties.image.type})}
+                        {...(faviconProperties.image?.width && faviconProperties.image?.height && {sizes: `${faviconProperties.image.width}x${faviconProperties.image.height}`})}
+                        {...(faviconProperties?.as != null && {as: faviconProperties.as})}
                     />
                 )
             })}

src/resources/rsc/browser/entry.browser.tsx

@@ -84,6 +84,10 @@ async function main() {
     async function fetchRscPayload() {
         const renderRequest = createRscRenderRequest(window.location.href)
         const payload = await createFromFetch<RscPayload>(fetch(renderRequest))
+        // Go to the top if this is not a fragment navigation
+        if (!window.location.hash) {
+            window.scrollTo({top: 0, behavior: 'smooth'});
+        }
         setPayload(payload)
     }
 
@@ -138,37 +142,38 @@ async function main() {
     }
 }
 
+function isAnchorNavigation(link: HTMLAnchorElement) {
+    return link.href &&
+        link.origin === window.location.origin &&
+        link.pathname === window.location.pathname &&
+        link.hash !== '';
+}
+
 // Helper that set up events interception for client side navigation
-function listenNavigation(onNavigation: () => void) {
+function listenNavigation(fetchRsc: () => void) {
 
-    // When the user clicks the back button, navigate with RSC.
-    window.addEventListener('popstate', onNavigation)
 
+    // pushState is called to navigate to a new URL without a full page reload.
+    // called in the onClick function
     const oldPushState = window.history.pushState
     window.history.pushState = function (...args) {
-        const res = oldPushState.apply(this, args)
-        onNavigation()
-        return res
+        oldPushState.apply(this, args)
+        fetchRsc()
     }
 
+    // replaceState changes the current URL entry without adding a new history entry (used for redirects or URL cleanups).
     const oldReplaceState = window.history.replaceState
     window.history.replaceState = function (...args) {
-        const res = oldReplaceState.apply(this, args)
-        onNavigation()
-        return res
+        oldReplaceState.apply(this, args)
+        fetchRsc()
     }
 
     function onClick(e: MouseEvent) {
         let link = (e.target as Element).closest('a')
         if (!link) return;
 
         // Navigation in the same page
-        const isAnchorNav =
-            link.href &&
-            link.origin === window.location.origin &&
-            link.pathname === window.location.pathname &&
-            link.hash !== '';
-
+        const isAnchorNav = isAnchorNavigation(link);
         if (
             !isAnchorNav &&
             link instanceof HTMLAnchorElement &&
@@ -177,7 +182,7 @@ function listenNavigation(onNavigation: () => void) {
             link.origin === location.origin &&
             !link.hasAttribute('download') &&
             e.button === 0 && // left clicks only
-            !e.metaKey && // open in new tab (mac)
+            !e.metaKey && // open in new tab (Mac)
             !e.ctrlKey && // open in new tab (windows)
             !e.altKey && // download
             !e.shiftKey &&
@@ -188,11 +193,23 @@ function listenNavigation(onNavigation: () => void) {
         }
     }
 
+    // When the user clicks the back button, navigate with RSC.
+    // Fire on new URL (anchor link also)
+    window.addEventListener('popstate', (event) => {
+        // ignore change for hash-only changes
+        if ((event.target as Window)?.location.hash) return;
+        fetchRsc();
+    })
+
+    // On click
     document.addEventListener('click', onClick)
 
     return () => {
+        // click = mouse click
         document.removeEventListener('click', onClick)
-        window.removeEventListener('popstate', onNavigation)
+        // popstate = back button
+        window.removeEventListener('popstate', fetchRsc)
+        // restore initial state
         window.history.pushState = oldPushState
         window.history.replaceState = oldReplaceState
     }