fix: replace depth with pathnames

This gives more control to the use of usePageRouter in nested layouts where
sub-pages do not have a pathname in common.

Author: satazor

www/shared/react/next-router/use-page-key.js

@@ -6,20 +6,15 @@ import { useRouter } from 'next/router'; // eslint-disable-line no-restricted-im
 // You may use `depth` to specify the depth of the URL you are interested in.
 // As an example, a depth of 1 for /foo/bar, will return /foo.
 
-const usePageKey = (depth = null) => {
+const usePageKey = () => {
     const { asPath } = useRouter();
 
     const pageKey = useMemo(() => {
         // Remove query string.
-        let pageKey = asPath.replace(/\?.+/, '');
-
-        // Handle depth.
-        if (depth != null) {
-            pageKey = pageKey.split('/').slice(0, depth + 1).join('/');
-        }
+        const pageKey = asPath.replace(/\?.+/, '');
 
         return pageKey;
-    }, [asPath, depth]);
+    }, [asPath]);
 
     return pageKey;
 };

www/shared/react/next-router/use-page-key.test.js

@@ -17,12 +17,3 @@ it('should return the correct page key', () => {
 
     screen.getByText('/blog/foo');
 });
-
-it('should return the correct page key with depth', () => {
-    Router.pathname = '/blog/[name]';
-    Router.asPath = '/blog/foo?baz=1';
-
-    render(<MyComponent depth={ 1 } />, { wrapper: undefined });
-
-    screen.getByText('/blog');
-});

www/shared/react/next-router/use-page-router.js

@@ -6,15 +6,16 @@ import usePageKey from './use-page-key';
 // returns the correct router even during page transitions. During the transition,
 // the old page will still be mounted when animating out, but the router has already changed.
 // This hook returns the same router your page started with.
+// Additionally, you may specify an `pathnames` array to allow the returned router to change only for these pages.
 
-const usePageRouter = (depth) => {
-    const pageKey = usePageKey(depth);
+const usePageRouter = (pathnames) => {
     const router = useRouter();
+    const pageKey = usePageKey();
 
-    const routerRef = useRef(router);
+    const routerRef = useRef(router.pathname);
     const pageKeyRef = useRef(pageKey);
 
-    if (pageKeyRef.current === pageKey) {
+    if (pageKeyRef.current === pageKey || pathnames?.includes(router.pathname)) {
         pageKeyRef.current = pageKey;
         routerRef.current = router;
     }

www/shared/react/next-router/use-page-router.test.js

@@ -60,11 +60,11 @@ it('should return the same router it started with', () => {
     });
 });
 
-it('should respect depth', () => {
+it('should respect pathnames', () => {
     let router;
 
     const MyComponent = () => {
-        router = usePageRouter(1);
+        router = usePageRouter(['/blog/[name]']);
 
         return null;
     };

www/shared/react/next-router/with-page-router.js

@@ -2,9 +2,9 @@ import React, { forwardRef } from 'react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import usePageRouter from './use-page-router';
 
-const withPageRouter = (depth) => (WrappedComponent) => {
+const withPageRouter = (pathnames) => (WrappedComponent) => {
     const WithPageRouter = forwardRef((props, ref) => {
-        const router = usePageRouter(depth);
+        const router = usePageRouter(pathnames);
 
         return (
             <WrappedComponent ref={ ref } pageRouter={ router } { ...props } />

www/shared/react/next-router/with-page-router.test.js

@@ -31,8 +31,8 @@ it('should inject pageRouter prop', () => {
     render(<MyComponent />, { wrapper: undefined });
 });
 
-it('should respect depth', () => {
-    const MyComponent = withPageRouter(1)(({ pageRouter }) => pageRouter.asPath);
+it('should respect pathnames', () => {
+    const MyComponent = withPageRouter(['/blog/[name]'])(({ pageRouter }) => pageRouter.asPath);
 
     const { rerender } = render(<MyComponent />, { wrapper: undefined });
 

www/shared/styles/imports/mixins/typography.css

@@ -265,9 +265,9 @@
     font-size: 1.4$(unit);
     line-height: 1.45;
 
-    @media (--gte-xl) {
-        font-size: 1.6$(unit);
-        line-height: 1.5;
+    @media (--gte-sm) {
+        font-size: 1.8$(unit);
+        line-height: 1.33;
     }
 }