feat: v4.0.0 (#1016)

Co-authored-by: Denys Konovalov <kontakt@denyskon.de>
Co-authored-by: Mathieu COSYNS <64072917+Mathieu-COSYNS@users.noreply.github.com>

packages/docs/src/pages/index.tsx

@@ -251,7 +251,10 @@ const StyledFeatureText = styled('div')`
 const Home = ({ docsGroups, searchablePages }: DocsMenuProps) => {
   const theme = useTheme();
 
-  const majorMinorThemes = useMemo(() => releases.filter(r => r.type !== 'patch'), []);
+  const majorMinorReleases = useMemo(
+    () => releases.filter(r => ['major', 'minor'].includes(r.type)),
+    [],
+  );
 
   return (
     <Page url="/" docsGroups={docsGroups} searchablePages={searchablePages} fullWidth>
@@ -328,11 +331,11 @@ const Home = ({ docsGroups, searchablePages }: DocsMenuProps) => {
           <Container>
             <StyledReleasesSectionContent>
               {[...Array(3)].map((_, index) => {
-                if (index >= majorMinorThemes.length) {
+                if (index >= majorMinorReleases.length) {
                   return null;
                 }
 
-                const release = majorMinorThemes[index];
+                const release = majorMinorReleases[index];
                 return (
                   <CardActionArea
                     key={release.version}

packages/docs/src/pages/releases.tsx

@@ -6,6 +6,7 @@ import { styled } from '@mui/material/styles';
 import format from 'date-fns/format';
 import parseISO from 'date-fns/parseISO';
 import Link from 'next/link';
+import { useMemo } from 'react';
 
 import Container from '../components/layout/Container';
 import Page from '../components/layout/Page';
@@ -94,7 +95,33 @@ const StyledLink = styled(Link)(
   `,
 );
 
+function getVersionNumber(version: string): number {
+  return +version.replace('v', '');
+}
+
+function isNextVersion(latestMajorVersionNumber: number, version: string): boolean {
+  if (getVersionNumber(version) > latestMajorVersionNumber) {
+    return true;
+  }
+
+  return false;
+}
+
+function getMajorVersion(version: string): string {
+  return version.split('.')[0];
+}
+
 const Releases = ({ docsGroups, searchablePages }: DocsMenuProps) => {
+  const latestMajorVersion = useMemo(
+    () => getMajorVersion((releaseData.find(r => r.type === 'major') ?? releaseData[0]).version),
+    [],
+  );
+
+  const latestMajorVersionNumber = useMemo(
+    () => getVersionNumber(latestMajorVersion),
+    [latestMajorVersion],
+  );
+
   return (
     <Page url="/releases" docsGroups={docsGroups} searchablePages={searchablePages} fullWidth>
       <StyledReleaseContent>
@@ -125,31 +152,50 @@ const Releases = ({ docsGroups, searchablePages }: DocsMenuProps) => {
           </Container>
           <Container>
             <StyledReleaseLinksContent>
-              {releaseData.map(release => (
-                <StyledReleaseSection key={release.version}>
-                  <Typography variant="h3" color="primary.main">
-                    <strong>{release.version}</strong>
-                    &nbsp;&nbsp;
-                    <Box component="small" sx={{ fontSize: '16px', opacity: 0.75 }}>
-                      {format(parseISO(release.date), 'MMM dd, yyyy')}
-                    </Box>
-                  </Typography>
-                  <Typography
-                    variant="body1"
-                    component="div"
-                    color="inherit"
-                    sx={{ display: 'flex', flexDirection: 'column' }}
-                  >
-                    {isNotEmpty(release.description) ? release.description : null}
-                    <StyledLink
-                      href={`${config.repo_url}/releases/tag/${release.version}`}
-                      target="_blank"
+              {releaseData.map(release => {
+                const majorVersion = getMajorVersion(release.version);
+                const isNext = isNextVersion(latestMajorVersionNumber, majorVersion);
+
+                return (
+                  <StyledReleaseSection key={release.version}>
+                    <Typography variant="h3" color="primary.main">
+                      <strong>{release.version}</strong>
+                      &nbsp;&nbsp;
+                      <Box component="small" sx={{ fontSize: '16px', opacity: 0.75 }}>
+                        {format(parseISO(release.date), 'MMM dd, yyyy')}
+                      </Box>
+                    </Typography>
+                    <Typography
+                      variant="body1"
+                      component="div"
+                      color="inherit"
+                      sx={{ display: 'flex', flexDirection: 'column' }}
                     >
-                      Changelog
-                    </StyledLink>
-                  </Typography>
-                </StyledReleaseSection>
-              ))}
+                      {isNotEmpty(release.description) ? release.description : null}
+                      <Box sx={{ display: 'flex', gap: '8px' }}>
+                        <StyledLink
+                          href={`${config.repo_url}/releases/tag/${release.version}`}
+                          target="_blank"
+                        >
+                          Changelog
+                        </StyledLink>
+                        <StyledLink
+                          href={`https://${
+                            isNext
+                              ? 'next'
+                              : majorVersion !== latestMajorVersion
+                              ? majorVersion
+                              : 'www'
+                          }.staticcms.org/docs`}
+                          target={majorVersion !== latestMajorVersion ? '_blank' : undefined}
+                        >
+                          Docs
+                        </StyledLink>
+                      </Box>
+                    </Typography>
+                  </StyledReleaseSection>
+                );
+              })}
             </StyledReleaseLinksContent>
           </Container>
         </StyledReleaseLinks>