Misc Footer fixes (#5777)

* Refactor Footer

* Fix grey line on dark homepage

This is a bit of a hack. Our sections are contain: 'content' so the background doesn't stretch far enough.

* Align horizontal lines

* Fix Quick Start not having Prev/Next

src/components/Layout/Footer.tsx

@@ -5,55 +5,15 @@
 import * as React from 'react';
 import NextLink from 'next/link';
 import cn from 'classnames';
-import ButtonLink from 'components/ButtonLink';
 import {ExternalLink} from 'components/ExternalLink';
 import {IconFacebookCircle} from 'components/Icon/IconFacebookCircle';
 import {IconTwitter} from 'components/Icon/IconTwitter';
 import {IconGitHub} from 'components/Icon/IconGitHub';
-import {IconNavArrow} from 'components/Icon/IconNavArrow';
 
-interface FooterProps {
+export function Footer() {
-  hideSurvey?: boolean;
-  hideBorder?: boolean;
-}
-
-export function Footer({hideSurvey = false, hideBorder = false}: FooterProps) {
   const socialLinkClasses = 'hover:text-primary dark:text-primary-dark';
   return (
-    <>
+    <footer className={cn('text-secondary dark:text-secondary-dark')}>
-      <div className="self-stretch w-full">
-        {!hideSurvey && (
-          <div className="mx-auto w-full px-5 sm:px-12 md:px-12 pt-10 md:pt-12 lg:pt-10">
-            <hr className="max-w-7xl mx-auto border-border dark:border-border-dark" />
-            <div className="flex flex-col items-center m-4 p-4">
-              <p className="font-bold text-primary dark:text-primary-dark text-lg mb-4">
-                How do you like these docs?
-              </p>
-              <div>
-                <ButtonLink
-                  href="https://www.surveymonkey.co.uk/r/PYRPF3X"
-                  className="mt-1"
-                  type="primary"
-                  size="md"
-                  target="_blank">
-                  Take our survey!
-                  <IconNavArrow
-                    displayDirection="right"
-                    className="inline ml-1"
-                  />
-                </ButtonLink>
-              </div>
-            </div>
-          </div>
-        )}
-        {!hideBorder && (
-          <hr className="max-w-7xl mx-auto border-border dark:border-border-dark" />
-        )}
-        <footer
-          className={cn(
-            'text-secondary dark:text-secondary-dark py-12 px-5 sm:px-12 md:px-12 sm:py-12 md:py-16 lg:py-14',
-            hideBorder && 'bg-wash dark:bg-gray-95 lg:pt-0'
-          )}>
       <div className="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-x-12 gap-y-8 max-w-7xl mx-auto">
         <div className="col-span-2 md:col-span-1 justify-items-start mt-3.5 text-left">
           <ExternalLink
@@ -336,21 +296,15 @@ export function Footer({hideSurvey = false, hideBorder = false}: FooterProps) {
           <FooterLink href="/learn/adding-interactivity">
             Adding Interactivity
           </FooterLink>
-              <FooterLink href="/learn/managing-state">
+          <FooterLink href="/learn/managing-state">Managing State</FooterLink>
-                Managing State
+          <FooterLink href="/learn/escape-hatches">Escape Hatches</FooterLink>
-              </FooterLink>
-              <FooterLink href="/learn/escape-hatches">
-                Escape Hatches
-              </FooterLink>
         </div>
         <div className="flex flex-col">
           <FooterLink href="/reference/react" isHeader={true}>
             API Reference
           </FooterLink>
           <FooterLink href="/reference/react">React APIs</FooterLink>
-              <FooterLink href="/reference/react-dom">
+          <FooterLink href="/reference/react-dom">React DOM APIs</FooterLink>
-                React DOM APIs
-              </FooterLink>
         </div>
         <div className="md:col-start-2 xl:col-start-4 flex flex-col">
           <FooterLink href="/community" isHeader={true}>
@@ -370,9 +324,7 @@ export function Footer({hideSurvey = false, hideBorder = false}: FooterProps) {
         <div className="flex flex-col">
           <FooterLink isHeader={true}>More</FooterLink>
           <FooterLink href="/blog">Blog</FooterLink>
-              <FooterLink href="https://reactnative.dev/">
+          <FooterLink href="https://reactnative.dev/">React Native</FooterLink>
-                React Native
-              </FooterLink>
           <FooterLink href="https://opensource.facebook.com/legal/privacy">
             Privacy
           </FooterLink>
@@ -402,8 +354,6 @@ export function Footer({hideSurvey = false, hideBorder = false}: FooterProps) {
         </div>
       </div>
     </footer>
-      </div>
-    </>
   );
 }
 

src/components/Layout/Page.tsx

@@ -11,6 +11,8 @@ import {Toc} from './Toc';
 import SocialBanner from '../SocialBanner';
 import {DocsPageFooter} from 'components/DocsFooter';
 import {Seo} from 'components/Seo';
+import ButtonLink from 'components/ButtonLink';
+import {IconNavArrow} from 'components/Icon/IconNavArrow';
 import PageHeading from 'components/PageHeading';
 import {getRouteMeta} from './getRouteMeta';
 import {TocContext} from '../MDX/TocContext';
@@ -67,11 +69,11 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
             )}>
             <TocContext.Provider value={toc}>{children}</TocContext.Provider>
           </div>
-          <DocsPageFooter
+          {!isBlogIndex && <DocsPageFooter
             route={route}
             nextRoute={nextRoute}
             prevRoute={prevRoute}
-          />
+          />}
         </div>
       </div>
     );
@@ -80,10 +82,12 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
   let hasColumns = true;
   let showSidebar = true;
   let showToc = true;
+  let showSurvey = true;
   if (isHomePage || isBlogIndex) {
     hasColumns = false;
     showSidebar = false;
     showToc = false;
+    showSurvey = false;
   } else if (section === 'blog') {
     showToc = false;
     hasColumns = false;
@@ -125,10 +129,50 @@ export function Page({children, toc, routeTree, meta, section}: PageProps) {
             <article className="break-words" key={asPath}>
               {content}
             </article>
-            <Footer
+            <div
-              hideSurvey={isHomePage || isBlogIndex}
+              className={cn(
-              hideBorder={isHomePage}
+                'self-stretch w-full',
+                isHomePage && 'bg-wash dark:bg-gray-95 mt-[-1px]'
+              )}>
+              {!isHomePage && (
+                <div className="mx-auto w-full px-5 sm:px-12 md:px-12 pt-10 md:pt-12 lg:pt-10">
+                  {
+                    <hr className="max-w-7xl mx-auto border-border dark:border-border-dark" />
+                  }
+                  {showSurvey && (
+                    <>
+                      <div className="flex flex-col items-center m-4 p-4">
+                        <p className="font-bold text-primary dark:text-primary-dark text-lg mb-4">
+                          How do you like these docs?
+                        </p>
+                        <div>
+                          <ButtonLink
+                            href="https://www.surveymonkey.co.uk/r/PYRPF3X"
+                            className="mt-1"
+                            type="primary"
+                            size="md"
+                            target="_blank">
+                            Take our survey!
+                            <IconNavArrow
+                              displayDirection="right"
+                              className="inline ml-1"
                             />
+                          </ButtonLink>
+                        </div>
+                      </div>
+                      <hr className="max-w-7xl mx-auto border-border dark:border-border-dark" />
+                    </>
+                  )}
+                </div>
+              )}
+              <div
+                className={cn(
+                  'py-12 px-5 sm:px-12 md:px-12 sm:py-12 md:py-16 lg:py-14',
+                  isHomePage && 'lg:pt-0'
+                )}>
+                <Footer />
+              </div>
+            </div>
           </main>
         </Suspense>
         <div className="-mt-16 hidden lg:max-w-xs 2xl:block">

src/components/Layout/getRouteMeta.tsx

@@ -78,6 +78,10 @@ function buildRouteMeta(
 
   if (currentRoute.path === searchPath) {
     ctx.route = currentRoute;
+    // If we've found a deeper match, reset the previously stored next route.
+    // TODO: this only works reliably if deeper matches are first in the tree.
+    // We should revamp all of this to be more explicit.
+    ctx.nextRoute = undefined;
   }
 
   if (!ctx.route) {