Add releases page

docs/_constants.ts

@@ -1,6 +1,8 @@
 export const CODESANDBOX_EXAMPLE_ID = 'o7oojxx1pq';
 
-export const HOST_URL = 'https://material-ui-pickers.dev';
+export const DOMAIN = 'material-ui-pickers.dev';
+
+export const HOST_URL = 'https://' + DOMAIN;
 
 export const LOGO_URL = HOST_URL + '/static/meta-image.png';
 

docs/layout/Layout.tsx

@@ -52,7 +52,7 @@ const styles = (theme: Theme) =>
     },
     main: {
       padding: '20px',
-      paddingTop: 55,
+      paddingTop: 75,
       minHeight: 'calc(100vh - 55px)',
       [theme.breakpoints.up('md')]: {
         minHeight: 'calc(100vh - 64px)',

docs/layout/components/DrawerMenu.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import Link from 'next/link';
 import NavigationMenu from './NavigationMenu';
-import { GITHUB_URL } from '_constants';
 import { version } from '@material-ui/pickers/package.json';
 import { Divider, Toolbar, Typography, Theme } from '@material-ui/core';
 import { createStyles, withStyles, WithStyles } from '@material-ui/styles';
@@ -37,16 +36,11 @@ const DrawerMenu: React.SFC<WithStyles<typeof styles>> = ({ classes }) => (
         </Typography>
       </Link>
 
-      <a
-        target="_blank"
-        rel="noopener noreferrer"
-        style={{ textDecoration: 'none' }}
-        href={GITHUB_URL + '/releases'}
-      >
+      <Link href="/releases">
         <Typography variant="caption" color="textPrimary" className={classes.headerLink}>
-          {version}
+          v{version}
         </Typography>
-      </a>
+      </Link>
     </Toolbar>
 
     <Divider />

docs/package.json

@@ -25,6 +25,7 @@
     "@material-ui/pickers": "^3.0.0-alpha.1",
     "@material-ui/styles": "^4.0.0-alpha.7",
     "@types/fuzzy-search": "^2.1.0",
+    "@types/isomorphic-fetch": "^0.0.35",
     "@types/luxon": "^1.11.0",
     "@types/next": "^8.0.1",
     "@types/prismjs": "^1.9.1",
@@ -43,6 +44,7 @@
     "dayjs": "^1.8.6",
     "formik": "^1.5.1",
     "fuzzy-search": "^3.0.1",
+    "isomorphic-fetch": "^2.2.1",
     "jss": "^10.0.0-alpha.16",
     "jss-rtl": "^0.2.3",
     "luxon": "^1.11.2",

docs/pages/releases.tsx

@@ -0,0 +1,126 @@
+import * as React from 'react';
+import { NextFC } from 'next';
+import { PageMeta } from '_shared/PageMeta';
+import { fetchGithubData } from 'utils/github-api';
+import { DOMAIN, GITHUB_URL, HOST_URL } from '_constants';
+import {
+  Paper,
+  Table,
+  TableBody,
+  TableHead,
+  TableCell,
+  TableRow,
+  Typography,
+  makeStyles,
+} from '@material-ui/core';
+
+interface ReleasesProps {
+  tags: string[];
+}
+
+const ExternalLink: React.FC<React.HTMLProps<HTMLLinkElement>> = ({ href }) => {
+  return (
+    <a href={href} rel="noopener noreferrer">
+      {href}
+    </a>
+  );
+};
+
+const useStyles = makeStyles({
+  scrollableTable: {
+    overflowX: 'auto',
+  },
+});
+
+const Releases: NextFC<ReleasesProps> = ({ tags }) => {
+  const classes = useStyles();
+
+  return (
+    <>
+      <PageMeta
+        title="Releases - @material-ui/pickers"
+        description="List of @material-ui/pickers releases with a link to per-release documentation site."
+      />
+
+      <Typography variant="h2" gutterBottom>
+        Releases
+      </Typography>
+      <Typography gutterBottom>
+        We are using semver strategy for making releases. Here you can find documentation for some
+        of previous material-ui-picker's releases. Please note that our versions is not synced with
+        @material-ui/core versions
+      </Typography>
+
+      <Paper className={classes.scrollableTable}>
+        <Table>
+          <TableHead>
+            <TableRow>
+              <TableCell>Version</TableCell>
+              <TableCell>Documentation Url</TableCell>
+              <TableCell>Release notes</TableCell>
+            </TableRow>
+          </TableHead>
+
+          <TableBody>
+            <TableRow>
+              <TableCell>
+                <strong> Unpublished </strong>
+              </TableCell>
+              <TableCell>
+                <ExternalLink href="https://material-ui-pickers.mui-org.now.sh/" />
+              </TableCell>
+              <TableCell>
+                This is unpublished <b> future in-development </b> version.
+              </TableCell>
+            </TableRow>
+
+            <TableRow>
+              <TableCell>
+                <strong> Latest </strong>
+              </TableCell>
+              <TableCell>
+                <ExternalLink href={HOST_URL} />
+              </TableCell>
+              <TableCell>Latest stable published release</TableCell>
+            </TableRow>
+
+            {tags.map(version => {
+              const docsLink = `https://${version.replace(/\./g, '-')}.${DOMAIN}`;
+              const releaseNotesLink = `${GITHUB_URL}/releases/tag/${version}`;
+
+              return (
+                <TableRow>
+                  <TableCell>{version}</TableCell>
+                  <TableCell>
+                    <ExternalLink href={docsLink} />
+                  </TableCell>
+                  <TableCell>
+                    <ExternalLink href={releaseNotesLink} />
+                  </TableCell>
+                </TableRow>
+              );
+            })}
+
+            <TableRow>
+              <TableCell>v2</TableCell>
+              <TableCell>
+                <ExternalLink href="https://material-ui-pickers-v2.dmtr-kovalenko.now.sh/" />
+              </TableCell>
+              <TableCell>
+                <ExternalLink href="https://github.com/mui-org/material-ui-pickers/releases/tag/v2.2.4" />
+              </TableCell>
+            </TableRow>
+          </TableBody>
+        </Table>
+      </Paper>
+    </>
+  );
+};
+
+Releases.getInitialProps = () => {
+  return fetchGithubData('tags').then(data => ({
+    tags: data.map(tagObject => tagObject.name).filter(tag => Number(tag.charAt(1)) > 2),
+  }));
+};
+
+export default Releases;

docs/utils/github-api.ts

@@ -0,0 +1,36 @@
+import fetch from 'isomorphic-fetch';
+
+let cacheRemaining = 0;
+const cache = {
+  tags: null as { name: string }[] | null,
+};
+
+type CacheType = typeof cache;
+
+export function fetchGithubData<T extends keyof CacheType>(
+  path: T
+): Promise<NonNullable<CacheType[T]>> {
+  if (cache[path] && new Date().getTime() < cacheRemaining) {
+    return Promise.resolve(cache[path] || ([] as any));
+  }
+
+  return fetch('https://api.github.com/repos/mui-org/material-ui-pickers/' + path, {
+    headers: {
+      // just a super basic readonly token, that makes api rate limit = 5000/hour
+      Authorization: 'token 14ef125b9fbcf138ff9042b45f89f8b3c28f510a',
+    },
+  })
+    .then(res => {
+      cacheRemaining = Number(res.headers.get('X-RateLimit-Reset')) * 1000;
+      if (res.status > 400) {
+        // We cannot update the cache on this step
+        throw new Error('Could not fetch the data');
+      }
+
+      return res.json();
+    })
+    .then((data: NonNullable<CacheType[T]>) => {
+      cache[path] = data;
+      return data;
+    });
+}

yarn.lock

@@ -1777,6 +1777,11 @@
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
+"@types/isomorphic-fetch@^0.0.35":
+  version "0.0.35"
+  resolved "https://registry.yarnpkg.com/@types/isomorphic-fetch/-/isomorphic-fetch-0.0.35.tgz#c1c0d402daac324582b6186b91f8905340ea3361"
+  integrity sha512-DaZNUvLDCAnCTjgwxgiL1eQdxIKEpNLOlTNtAgnZc50bG2copGhRrFN9/PxPBuJe+tZVLCbQ7ls0xveXVRPkvw==
+
 "@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.1.tgz#42995b446db9a48a11a07ec083499a860e9138ff"