Add versions page and nav version (#6814)

* Add versions page and nav version

* Move version to siteConfig.js

* Fix typo

* Set to 18.3.1, use siteConfig in reference sidebar

* Redirect 18.react.dev to react.dev for now

* Fix stray bullet

Author: rickhanlonii

src/components/Layout/Sidebar/SidebarRouteTree.tsx

@@ -10,6 +10,7 @@ import {SidebarLink} from './SidebarLink';
 import {useCollapse} from 'react-collapsed';
 import usePendingRoute from 'hooks/usePendingRoute';
 import type {RouteItem} from 'components/Layout/getRouteMeta';
+import {siteConfig} from 'siteConfig';
 
 interface SidebarRouteTreeProps {
   isForceExpanded: boolean;
@@ -150,8 +151,12 @@ export function SidebarRouteTree({
             );
           }
           if (hasSectionHeader) {
+            let sectionHeaderText =
+              sectionHeader != null
+                ? sectionHeader.replace('{{version}}', siteConfig.version)
+                : '';
             return (
-              <Fragment key={`${sectionHeader}-${level}-separator`}>
+              <Fragment key={`${sectionHeaderText}-${level}-separator`}>
                 {index !== 0 && (
                   <li
                     role="separator"
@@ -163,7 +168,7 @@ export function SidebarRouteTree({
                     'mb-1 text-sm font-bold ms-5 text-tertiary dark:text-tertiary-dark',
                     index !== 0 && 'mt-2'
                   )}>
-                  {sectionHeader}
+                  {sectionHeaderText}
                 </h3>
               </Fragment>
             );

src/components/Layout/TopNav/TopNav.tsx

@@ -24,6 +24,7 @@ import {Logo} from '../../Logo';
 import {Feedback} from '../Feedback';
 import {SidebarRouteTree} from '../Sidebar';
 import type {RouteItem} from '../getRouteMeta';
+import {siteConfig} from 'siteConfig';
 
 declare global {
   interface Window {
@@ -247,7 +248,7 @@ export default function TopNav({
                 )}>
                 {isMenuOpen ? <IconClose /> : <IconHamburger />}
               </button>
-              <div className="flex 3xl:flex-1 align-center">
+              <div className="f">
                 <NextLink
                   href="/"
                   className={`active:scale-95 overflow-hidden transition-transform relative items-center text-primary dark:text-primary-dark p-1 whitespace-nowrap outline-link rounded-full 3xl:rounded-xl inline-flex text-lg font-normal gap-2`}>
@@ -259,6 +260,13 @@ export default function TopNav({
                   <span className="sr-only 3xl:not-sr-only">React</span>
                 </NextLink>
               </div>
+              <div className="flex flex-column justify-center items-center">
+                <NextLink
+                  href="/versions"
+                  className=" flex py-2 flex-column justify-center items-center text-gray-50 dark:text-gray-30 hover:text-link hover:dark:text-link-dark hover:underline text-sm ms-1 cursor-pointer">
+                  v{siteConfig.version}
+                </NextLink>
+              </div>
             </div>
             <div className="items-center justify-center flex-1 hidden w-full md:flex 3xl:w-auto 3xl:shrink-0 3xl:justify-center">
               <button

src/content/community/versioning-policy.md

@@ -8,6 +8,8 @@ All stable builds of React go through a high level of testing and follow semanti
 
 </Intro>
 
+For a list of previous releases, see the [Versions](/versions) page.
+
 ## Stable releases {/*stable-releases*/}
 
 Stable React releases (also known as "Latest" release channel) follow [semantic versioning (semver)](https://semver.org/) principles.

src/content/versions.md

@@ -4,7 +4,7 @@
   "routes": [
     {
       "hasSectionHeader": true,
-      "sectionHeader": "react@18.2.0"
+      "sectionHeader": "react@{{version}}"
     },
     {
       "title": "Overview",
@@ -156,7 +156,7 @@
     },
     {
       "hasSectionHeader": true,
-      "sectionHeader": "react-dom@18.2.0"
+      "sectionHeader": "react-dom@{{version}}"
     },
     {
       "title": "Hooks",

src/sidebarReference.json

@@ -3,6 +3,7 @@
  */
 
 exports.siteConfig = {
+  version: '18.3.1',
   // --------------------------------------
   // Translations should replace these lines:
   languageCode: 'en',

src/siteConfig.js

@@ -4,6 +4,50 @@
   },
   "trailingSlash": false,
   "redirects": [
+    {
+      "source": "/",
+      "has": [
+        {
+          "type": "host",
+          "value": "18.react.dev"
+        }
+      ],
+      "permanent": false,
+      "destination": "https://react.dev/"
+    },
+    {
+      "source": "/",
+      "has": [
+        {
+          "type": "host",
+          "value": "17.react.dev"
+        }
+      ],
+      "permanent": true,
+      "destination": "https://17.reactjs.org/"
+    },
+    {
+      "source": "/",
+      "has": [
+        {
+          "type": "host",
+          "value": "16.react.dev"
+        }
+      ],
+      "permanent": true,
+      "destination": "https://17.reactjs.org/"
+    },
+    {
+      "source": "/",
+      "has": [
+        {
+          "type": "host",
+          "value": "15.react.dev"
+        }
+      ],
+      "permanent": true,
+      "destination": "https://react-legacy.netlify.app/"
+    },
     {
       "source": "/reference",
       "destination": "/reference/react",