[docs] Fix versions page

CHANGELOG.md

@@ -1,4 +1,4 @@
-# [Versions](https://mui.com/versions/)
+# [Versions](https://mui.com/material-ui/getting-started/versions/)
 
 ## 9.0.0
 

docs/data/docs/pages.ts

@@ -2,7 +2,6 @@ import type { MuiPage } from '@mui/internal-core-docs/MuiPage';
 import { standardNavIcons } from '@mui/internal-core-docs/AppLayout';
 
 const pages: readonly MuiPage[] = [
-  { pathname: 'https://mui.com/versions/' },
   {
     pathname: 'https://mui.com/store/',
     title: 'Templates',

docs/data/material/components/about-the-lab/about-the-lab.md

@@ -2,7 +2,7 @@
 
 <p class="description">This package hosts the incubator components that are not yet ready to move to the core.</p>
 
-The main difference between the lab and the core is how the components are versioned. Having a separate lab package allows us to release breaking changes when necessary while the core package follows a [slower-moving policy](https://mui.com/versions/#release-frequency).
+The main difference between the lab and the core is how the components are versioned. Having a separate lab package allows us to release breaking changes when necessary while the core package follows a [slower-moving policy](/material-ui/getting-started/versions/#release-frequency).
 
 As developers use and test the components and report issues, the maintainers learn more about shortcomings of the components: missing features, accessibility issues, bugs, API design, etc. The older and more used a component is, the less likely it is that new issues will be found and subsequently need to introduce breaking changes.
 

docs/data/material/getting-started/support/support.md

@@ -54,7 +54,7 @@ If you can't find your answer, [ask a new question](https://stackoverflow.com/qu
 
 :::success
 If you're using an older version of Material UI, you may find answers on SO with links to content that no longer exists in the latest version of the documentation.
-Visit the [Material UI Versions](https://mui.com/versions/) page to find the archived documentation that corresponds to your version.
+Visit the [Material UI Versions](https://mui.com/material-ui/getting-started/versions/) page to find the archived documentation that corresponds to your version.
 :::
 
 ## Technical support

docs/data/material/getting-started/supported-platforms/supported-platforms.md

@@ -33,7 +33,7 @@ The objective is to support Node.js down to the [last version in maintenance mod
 <!-- #react-peer-version -->
 
 Material UI supports the most recent versions of React, starting with ^17.0.0 (the one with event delegation at the React root).
-Have a look at the older [versions](https://mui.com/versions/) for backward compatibility.
+Have a look at the older [versions](https://mui.com/material-ui/getting-started/versions/) for backward compatibility.
 
 ## TypeScript
 

docs/src/pages/versions/ReleasedVersions.js → docs/data/material/getting-started/versions/ReleasedVersions.js

@@ -6,12 +6,12 @@ import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import Typography from '@mui/material/Typography';
 import { Link } from '@mui/internal-core-docs/Link';
-import VersionsContext from 'docs/src/pages/versions/VersionsContext';
+import VersionsContext from 'docs/pages/material-ui/getting-started/VersionsContext';
 
 const GITHUB_RELEASE_BASE_URL = 'https://github.com/mui/material-ui/releases/tag/';
 
 function ReleasedVersions() {
-  const versions = React.useContext(VersionsContext);
+  const versions = React.useContext(VersionsContext) ?? [];
 
   return (
     <Box sx={{ minHeight: 33 * 11, overflow: 'auto', width: '100%' }}>

docs/src/pages/versions/versions.md → docs/data/material/getting-started/versions/versions.md

@@ -6,14 +6,14 @@
 
 The most recent stable version (✓) is recommended for use in production.
 
-{{"demo": "pages/versions/ReleasedVersions.js", "hideToolbar": true, "bg": "inline"}}
+{{"demo": "ReleasedVersions.js", "hideToolbar": true, "bg": "inline"}}
 
 ## Latest versions
 
 Here you can find the latest unreleased documentation and code.
 You can use it to see what changes are coming and provide better feedback to contributors.
 
-{{"demo": "pages/versions/LatestVersions.js", "hideToolbar": true, "bg": "inline"}}
+{{"demo": "LatestVersions.js", "hideToolbar": true, "bg": "inline"}}
 
 ## Versioning strategy
 
@@ -55,13 +55,14 @@ A regular schedule of releases helps you plan and coordinate your updates with t
 In general, you can expect the following release cycle:
 
 - A **major** release every 12 months.
-- 1-3 **minor** releases for each major release.
-- A **patch** release every week (anytime for an urgent bug fix).
+- A few **minor** releases for each major release.
+- A **patch** release every month (anytime for an urgent bug fix).
 
 ## Release schedule
 
 | Date           | Version | Status   |
 | :------------- | :------ | :------- |
+| April 2026     | v9.0.0  | Released |
 | March 2025     | v7.0.0  | Released |
 | August 2024    | v6.0.0  | Released |
 | September 2021 | v5.0.0  | Released |

docs/data/material/migration/migration-v3/migration-v3.md

@@ -2,7 +2,7 @@
 
 <p class="description">Yeah, v4 has been released!</p>
 
-Looking for the v3 docs? You can [find the latest version here](https://mui.com/versions/).
+Looking for the v3 docs? You can [find the latest version here](https://mui.com/material-ui/getting-started/versions/).
 
 :::info
 This document is a work in progress.

docs/data/material/pages.ts

@@ -20,6 +20,7 @@ const pages: MuiPage[] = [
       { pathname: '/material-ui/getting-started/supported-components' },
       { pathname: '/material-ui/getting-started/supported-platforms' },
       { pathname: '/material-ui/getting-started/support' },
+      { pathname: '/material-ui/getting-started/versions' },
     ],
   },
   {

docs/pages/_app.tsx

@@ -16,6 +16,7 @@ import findActivePage from '@mui/internal-core-docs/findActivePage';
 import { getProductInfoFromUrl } from '@mui/internal-core-docs/utils';
 import type { Translations } from '@mui/internal-core-docs/i18n';
 import type { MuiPage } from '@mui/internal-core-docs/MuiPage';
+import type { ProductVersion } from '@mui/internal-core-docs/PageContext';
 import materialPkgJson from '@mui/material/package.json';
 import systemPkgJson from '@mui/system/package.json';
 import { LicenseInfo } from '@mui/x-license';
@@ -42,6 +43,81 @@ LicenseInfo.setLicenseKey(process.env.NEXT_PUBLIC_MUI_LICENSE!);
 
 printConsoleBanner();
 
+type VersionEntry = { version: string; url: string };
+
+async function fetchVersions(): Promise<VersionEntry[]> {
+  if (process.env.NODE_ENV !== 'production') {
+    return (await import('../versions.json')).default;
+  }
+  // #target-branch-reference
+  const response = await fetch(
+    'https://raw.githubusercontent.com/mui/material-ui/master/docs/versions.json',
+  );
+  return response.json();
+}
+
+function useVersions(): VersionEntry[] {
+  const [versions, setVersions] = React.useState<VersionEntry[]>([]);
+  React.useEffect(() => {
+    fetchVersions().then(setVersions);
+  }, []);
+  return versions;
+}
+
+function getVersionedProductPath(version: string, productId: string): string {
+  const versionNumber = parseInt(version.replace('v', ''), 10);
+  if (productId === 'material-ui') {
+    if (versionNumber >= 6) {
+      return '/material-ui/getting-started/';
+    }
+    if (versionNumber >= 4) {
+      return '/getting-started/installation/';
+    }
+  }
+  if (productId === 'system') {
+    if (versionNumber >= 5) {
+      return '/system/getting-started/';
+    }
+    if (versionNumber === 4) {
+      return '/system/basics/';
+    }
+  }
+  return '/';
+}
+
+function buildProductVersions(
+  fetchedVersions: VersionEntry[],
+  productId: string,
+  currentVersion: string,
+  languagePrefix: string,
+): ProductVersion[] {
+  // Before the fetch resolves, show just the current version with no dropdown.
+  if (fetchedVersions.length === 0) {
+    return [{ text: currentVersion, current: true }];
+  }
+
+  const MIN_VERSION = 4;
+  const versions: ProductVersion[] = fetchedVersions
+    .filter((v) => {
+      const vNum = parseInt(v.version.replace('v', ''), 10);
+      return vNum >= MIN_VERSION;
+    })
+    .map((v) => {
+      if (v.url === 'https://mui.com') {
+        return { text: currentVersion, current: true };
+      }
+      const productPath = getVersionedProductPath(v.version, productId);
+      return { text: v.version, href: `${v.url}${languagePrefix}${productPath}` };
+    });
+
+  versions.push({
+    text: 'View all versions',
+    href: `/material-ui/getting-started/versions/`,
+  });
+
+  return versions;
+}
+
 /**
  * Generates root index template for Material UI demos.
  */
@@ -67,6 +143,7 @@ function useProductData(pageProps: DocsAppProps['pageProps']) {
   // We should use the productId field from the markdown and fallback to getProductInfoFromUrl()
   // if not present
   const { productId, productCategoryId } = getProductInfoFromUrl(router.asPath);
+  const fetchedVersions = useVersions();
 
   const productIdentifier = React.useMemo(() => {
     const languagePrefix = pageProps.userLanguage === 'en' ? '' : `/${pageProps.userLanguage}`;
@@ -78,29 +155,12 @@ function useProductData(pageProps: DocsAppProps['pageProps']) {
         logo: MuiLogomarkIcon,
         logoSvg: muiSvgLogoString,
         wordmarkSvg: muiSvgWordmarkString,
-        versions: [
-          { text: `v${materialPkgJson.version}`, current: true },
-          {
-            text: 'v7',
-            href: `https://v7.mui.com${languagePrefix}/material-ui/getting-started/`,
-          },
-          {
-            text: 'v6',
-            href: `https://v6.mui.com${languagePrefix}/material-ui/getting-started/`,
-          },
-          {
-            text: 'v5',
-            href: `https://v5.mui.com${languagePrefix}/getting-started/installation/`,
-          },
-          {
-            text: 'v4',
-            href: `https://v4.mui.com${languagePrefix}/getting-started/installation/`,
-          },
-          {
-            text: 'View all versions',
-            href: `https://mui.com${languagePrefix}/versions/`,
-          },
-        ],
+        versions: buildProductVersions(
+          fetchedVersions,
+          'material-ui',
+          `v${materialPkgJson.version}`,
+          languagePrefix,
+        ),
       };
     }
 
@@ -111,17 +171,12 @@ function useProductData(pageProps: DocsAppProps['pageProps']) {
         logo: MuiLogomarkIcon,
         logoSvg: muiSvgLogoString,
         wordmarkSvg: muiSvgWordmarkString,
-        versions: [
-          { text: `v${systemPkgJson.version}`, current: true },
-          { text: 'v7', href: `https://v7.mui.com${languagePrefix}/system/getting-started/` },
-          { text: 'v6', href: `https://v6.mui.com${languagePrefix}/system/getting-started/` },
-          { text: 'v5', href: `https://v5.mui.com${languagePrefix}/system/getting-started/` },
-          { text: 'v4', href: `https://v4.mui.com${languagePrefix}/system/basics/` },
-          {
-            text: 'View all versions',
-            href: `https://mui.com${languagePrefix}/versions/`,
-          },
-        ],
+        versions: buildProductVersions(
+          fetchedVersions,
+          'system',
+          `v${systemPkgJson.version}`,
+          languagePrefix,
+        ),
       };
     }
 
@@ -133,13 +188,12 @@ function useProductData(pageProps: DocsAppProps['pageProps']) {
         logo: MuiLogomarkIcon,
         logoSvg: muiSvgLogoString,
         wordmarkSvg: muiSvgWordmarkString,
-        versions: [
-          { text: `v${materialPkgJson.version}`, current: true },
-          {
-            text: 'View all versions',
-            href: `https://mui.com${languagePrefix}/versions/`,
-          },
-        ],
+        versions: buildProductVersions(
+          fetchedVersions,
+          'material-ui',
+          `v${materialPkgJson.version}`,
+          languagePrefix,
+        ),
       };
     }
 
@@ -176,7 +230,7 @@ function useProductData(pageProps: DocsAppProps['pageProps']) {
     }
 
     return null;
-  }, [pageProps.userLanguage, productId]);
+  }, [pageProps.userLanguage, productId, fetchedVersions]);
 
   return React.useMemo(() => {
     let pages: MuiPage[] = generalDocsPages as MuiPage[];
@@ -269,7 +323,7 @@ export default function MyApp(
 }
 
 MyApp.getInitialProps = createGetInitialProps({
-  translationsContext: require.context('docs/translations', false, /\.\/translations.*\.json$/),
+  translationsContext: require.context('../translations', false, /\.\/translations.*\.json$/),
 });
 
 export { reportWebVitals };

docs/pages/blog/2021.md

@@ -114,7 +114,7 @@ Here is a breakdown of our [roadmap](/material-ui/discover-more/roadmap/).
 ### MUI Core
 
 The release of v5 has introduced a significant API churn in the community.
-While our [versioning frequency](/versions/#release-frequency) aims for one major per year, we hope we can iterate on v5 during the whole year of 2022 without any breaking changes, for example taking full advantage of the new style engine.
+While our [versioning frequency](/material-ui/getting-started/versions/#release-frequency) aims for one major per year, we hope we can iterate on v5 during the whole year of 2022 without any breaking changes, for example taking full advantage of the new style engine.
 
 #### Base UI
 

docs/pages/blog/material-ui-v4-is-out.md

@@ -28,7 +28,7 @@ Material UI v4 has finally arrived. We are so excited about this release, as it
 
 Material UI v1 was [released](https://medium.com/material-ui/material-ui-v1-is-out-e73ce13463eb) one year ago. Version 4 is our most important major release since then. For those unfamiliar with the history of the project, we didn't release a v2, and v3 only introduced a slight browsers support change.
 
-This release happens within our [fixed frequency](https://mui.com/versions/#release-frequency) release strategy. We try to release a major at least every 12 months and at most every 6 months. The migration from v0 to v1 was painful, it almost felt like using two different UI libraries. We've done our best to minimize the time needed to migrate from v3 to v4. To help ease the transition, you can follow this [migration guide](/material-ui/migration/migration-v3/) 📚. It shouldn't take more than a few hours.
+This release happens within our [fixed frequency](https://mui.com/material-ui/getting-started/versions/#release-frequency) release strategy. We try to release a major at least every 12 months and at most every 6 months. The migration from v0 to v1 was painful, it almost felt like using two different UI libraries. We've done our best to minimize the time needed to migrate from v3 to v4. To help ease the transition, you can follow this [migration guide](/material-ui/migration/migration-v3/) 📚. It shouldn't take more than a few hours.
 
 This release is influenced by two major factors. First, following the Developer Survey we ran in March, we have [analyzed the results](/blog/2019-developer-survey-results/) and used them to change [our priorities](/material-ui/discover-more/roadmap/) for the coming year. Secondly, we needed to be up to date with the latest best practices in the React community and with the Material Design Specification.
 

docs/pages/blog/mui-core-v5.md

@@ -597,7 +597,7 @@ We have moved six components from the lab to the main component package, after o
 
 The lab hosts the incubator components that are not yet ready to move to the core.
 The main difference between the lab and the core is how the components are versioned.
-Having a separate lab package allows us to release breaking changes when necessary while the core package follows a [slower cadence](https://mui.com/versions/#release-frequency).
+Having a separate lab package allows us to release breaking changes when necessary while the core package follows a [slower cadence](https://mui.com/material-ui/getting-started/versions/#release-frequency).
 
 The following components are now available in the lab:
 

docs/src/pages/versions/VersionsContext.js → docs/pages/material-ui/getting-started/VersionsContext.js

@@ -5,7 +5,7 @@ import * as React from 'react';
  */
 
 /**
- * @type {React.Context<VersionsContextValue}
+ * @type {React.Context<VersionsContextValue>}
  */
 const VersionsContext = React.createContext(null);
 

docs/pages/material-ui/getting-started/versions.js

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { MarkdownDocs } from '@mui/internal-core-docs/MarkdownDocs';
+import VersionsContext from 'docs/pages/material-ui/getting-started/VersionsContext';
+import * as pageProps from 'docs/data/material/getting-started/versions/versions.md?muiMarkdown';
+
+async function fetchVersions() {
+  if (process.env.NODE_ENV !== 'production') {
+    return (await import('../../../versions.json')).default;
+  }
+  // #target-branch-reference
+  const response = await fetch(
+    'https://raw.githubusercontent.com/mui/material-ui/master/docs/versions.json',
+  );
+  return response.json();
+}
+
+export default function Page() {
+  const [versions, setVersions] = React.useState([]);
+
+  React.useEffect(() => {
+    fetchVersions().then(setVersions);
+  }, []);
+
+  return (
+    <VersionsContext.Provider value={versions}>
+      <MarkdownDocs {...pageProps} />
+    </VersionsContext.Provider>
+  );
+}