Add releases page

packages/docs/content/community.json

@@ -2,6 +2,16 @@
   "title": "Help us build the CMS of the future",
   "subtitle": "Get support, give support and find out what's new through the channels below.",
   "sections": [
+    {
+      "title": "Contributing",
+      "links": [
+        {
+          "title": "Contributor Guide",
+          "description": "Contribute to the project",
+          "url": "/docs/contributor-guide"
+        }
+      ]
+    },
     {
       "title": "Support",
       "links": [

packages/docs/content/releases.json

@@ -1,5 +1,10 @@
 {
   "releases": [
+    {
+      "date": "2023-04-21T15:00:00.000Z",
+      "version": "v2.0.0",
+      "description": "New UI and Media Library enchancements."
+    },
     {
       "date": "2023-01-25T15:26:00.000Z",
       "version": "v1.2.0",

packages/docs/src/components/layout/Header.tsx

@@ -28,7 +28,7 @@ const StyledAppBar = styled(AppBar)(
 
 const StyledToolbar = styled(Toolbar)(
   ({ theme }) => `
-    gap: 16px;
+    gap: 12px;
     height: 72px;
 
     ${theme.breakpoints.down('lg')} {
@@ -90,6 +90,8 @@ const StyledDesktopGap = styled('div')(
 const StyledDesktopLink = styled(Button)(
   ({ theme }) => `
     color: white;
+    text-transform: none;
+    min-width: unset;
 
     &:hover {
       color: rgba(255, 255, 255, 0.6);
@@ -118,6 +120,10 @@ const Header = ({ mode, docsGroups, searchablePages, toggleColorMode }: HeaderPr
 
   const items: MenuItem[] = useMemo(
     () => [
+      {
+        title: 'v2.0.0',
+        url: '/releases',
+      },
       {
         title: 'Docs',
         path: '/docs',
@@ -130,10 +136,6 @@ const Header = ({ mode, docsGroups, searchablePages, toggleColorMode }: HeaderPr
           })),
         })),
       },
-      {
-        title: 'Contributing',
-        url: '/docs/contributor-guide',
-      },
       {
         title: 'Community',
         url: '/community',

packages/docs/src/pages/releases.tsx

@@ -0,0 +1,157 @@
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+import { styled } from '@mui/material/styles';
+import Link from 'next/link';
+
+import Container from '../components/layout/Container';
+import Page from '../components/layout/Page';
+import config from '../lib/config';
+import { getDocsMenuStaticProps } from '../lib/docs';
+import releaseData from '../lib/releases';
+
+import type { DocsMenuProps } from '../lib/docs';
+
+const StyledReleaseContent = styled('div')(
+  ({ theme }) => `
+    width: 100%;
+    padding-top: 72px;
+    min-height: calc(100vh - 72px);
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+
+    ${theme.breakpoints.between('md', 'lg')} {
+      padding-top: 48px;
+      gap: 16px
+    }
+
+    ${theme.breakpoints.down('md')} {
+      padding-top: 32px;
+      gap: 16px
+    }
+  `,
+);
+
+const StyledTitle = styled('div')(
+  ({ theme }) => `
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 8px;
+
+    ${theme.breakpoints.down('lg')} {
+      gap: 4px
+    }
+  `,
+);
+
+const StyledReleaseLinks = styled('section')(
+  ({ theme }) => `
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 24px 0 32px;
+    flex-grow: 1;
+
+    ${theme.breakpoints.between('md', 'lg')} {
+      padding: 24px 0 32px;
+    }
+
+    ${theme.breakpoints.down('md')} {
+      padding: 24px 0 32px;
+    }
+  `,
+);
+
+const StyledReleaseLinksContent = styled('div')`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+`;
+
+const StyledReleaseSection = styled('div')`
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+`;
+
+const StyledLink = styled(Link)(
+  ({ theme }) => `
+    color: ${theme.palette.text.primary};
+  `,
+);
+
+const Releases = ({ docsGroups, searchablePages }: DocsMenuProps) => {
+  return (
+    <Page url="/releases" docsGroups={docsGroups} searchablePages={searchablePages} fullWidth>
+      <StyledReleaseContent>
+        <Container>
+          <StyledTitle>
+            <Typography variant="h1" color="primary">
+              Static CMS Versions
+            </Typography>
+            <Typography variant="body2" color="text.primary" fontSize={16}>
+              A complete release history for Static CMS is available on GitHub.
+              <br />
+              <br />
+              Changelogs for recent major releases can also be found below.
+            </Typography>
+          </StyledTitle>
+        </Container>
+        <Container>
+          <Alert severity="warning" sx={{ alignSelf: 'flex-start' }}>
+            <AlertTitle>
+              <strong>Note</strong>
+            </AlertTitle>
+            <Typography variant="subtitle1" component="div" color="inherit">
+              <span>The current docs are for Static CMS v2. For Static CMS v1, see&nbsp;</span>
+              <StyledLink href="https://v1.staticcms.org">https://v1.staticcms.org</StyledLink>.
+            </Typography>
+          </Alert>
+        </Container>
+        <StyledReleaseLinks>
+          <Container>
+            <StyledReleaseLinksContent>
+              {releaseData.map(release => (
+                <StyledReleaseSection key={release.version}>
+                  <Typography variant="h3" color="primary.main">
+                    <strong>{release.version}</strong>
+                  </Typography>
+                  <Typography variant="body1" component="div" color="inherit">
+                    <Box
+                      component="ul"
+                      sx={{
+                        paddingLeft: '16px',
+                        margin: '4px 0',
+                      }}
+                    >
+                      <li>
+                        <StyledLink
+                          href={`${config.repo_url}/releases/tag/${release.version}`}
+                          target="_blank"
+                        >
+                          Changelog
+                        </StyledLink>
+                      </li>
+                    </Box>
+                  </Typography>
+                </StyledReleaseSection>
+              ))}
+            </StyledReleaseLinksContent>
+          </Container>
+        </StyledReleaseLinks>
+      </StyledReleaseContent>
+    </Page>
+  );
+};
+
+export default Releases;
+
+export const getStaticProps = getDocsMenuStaticProps;