show commits in Github sidebar

src/web/src/components/Posts/Commits.tsx

@@ -0,0 +1,75 @@
+import { VscGitCommit } from 'react-icons/vsc';
+import { createStyles, makeStyles, Theme } from '@material-ui/core';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    link: {
+      textDecoration: 'none',
+      color: theme.palette.text.primary,
+      '&:hover': {
+        textDecorationLine: 'underline',
+      },
+    },
+    GitHubInfo: {
+      lineHeight: '2rem',
+      fontSize: '1.2rem',
+    },
+    GitHubLinkTitle: {
+      fontSize: '1.4rem',
+      margin: 0,
+      paddingTop: '1rem',
+    },
+    icon: {
+      fontSize: '2rem',
+      marginRight: '1rem',
+      verticalAlign: 'text-bottom',
+    },
+    commits: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      margin: 0,
+    },
+    commit: {
+      marginRight: '2rem',
+    },
+  })
+);
+
+const SHORT_SHA_LENGTH = 7;
+
+const getCommitNumber = (url: string, length?: number) =>
+  url.replace(/.+\/(commit|commits)\/(\w{40}).*/, '$2').substr(0, length);
+
+type Props = {
+  commitUrls: string[];
+};
+
+const Commits = ({ commitUrls }: Props) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.GitHubInfo}>
+      <h2 className={classes.GitHubLinkTitle}>
+        <VscGitCommit className={classes.icon}></VscGitCommit>
+        {commitUrls.length === 1 ? 'Commit' : 'Commits'}
+      </h2>
+      <p className={classes.commits}>
+        {commitUrls.map((url) => (
+          <p key={url} className={classes.commit}>
+            <a
+              href={`https://github.com${url}`}
+              rel="bookmark"
+              target="_blank"
+              title={'Commit ' + getCommitNumber(url)}
+              className={classes.link}
+            >
+              {getCommitNumber(url, SHORT_SHA_LENGTH)}
+            </a>
+          </p>
+        ))}
+      </p>
+    </div>
+  );
+};
+
+export default Commits;

src/web/src/components/Posts/GitHubInfo.tsx

@@ -2,6 +2,7 @@ import { createStyles, makeStyles, Theme, ListSubheader } from '@material-ui/cor
 import Repos from './Repos';
 import Issues from './Issues';
 import PullRequests from './PullRequests';
+import Commits from './Commits';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
@@ -37,11 +38,12 @@ const filterGitHubUrls = (urls: string[]) => {
     const { pathname } = url;
 
     // Match urls that start with /<user>/<repo>, and optionally end with /<anything-in-between>/<type>/<id>
+    // <id> can be number, or a mixed of 40 alphanumeric (commit id)
     // Ex: /Seneca-CDOT/telescope/pull/2367 ✅
     // Ex: /Seneca-CDOT/telescope ✅
-    // Ex: /Seneca-CDOT/telescope/pull/2367/commits/d3fag ✅
+    // Ex: /Seneca-CDOT/telescope/pull/2367/commits/d3fagd3fagd3fagd3fagd3fagd3fag4d41265748 ✅
     // Ex: /Seneca-CDOT/telescope/issues ✅
-    const matches = /^\/(?<user>[^\/]+)\/(?<repo>[^\/]+)((\/(.*))?\/(?<type>[^\/]+)\/(?<id>(\d+))\/?$)?/i.exec(
+    const matches = /^\/(?<user>[^\/]+)\/(?<repo>[^\/]+)((\/(.*))?\/(?<type>[^\/]+)\/(?<id>(\d+|\w{40}))\/?$)?/i.exec(
       pathname
     );
     if (matches?.groups === undefined) {
@@ -92,14 +94,15 @@ const parseGitHubUrl = (url: string): URL | null => {
 
 const GitHubInfo = ({ ghUrls }: Props) => {
   const classes = useStyles();
-  const { repos, issues, pullRequests } = filterGitHubUrls(ghUrls);
+  const { repos, issues, pullRequests, commits } = filterGitHubUrls(ghUrls);
 
   return (
     <ListSubheader className={classes.root}>
       <div className={classes.GitHubInfoContainer}>
         {!!repos.length && <Repos repoUrls={repos} />}
         {!!issues.length && <Issues issueUrls={issues} />}
         {!!pullRequests.length && <PullRequests prUrls={pullRequests} />}
+        {!!commits.length && <Commits commitUrls={commits} />}
       </div>
     </ListSubheader>
   );

src/web/src/components/Posts/Issues.tsx

@@ -26,6 +26,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     issues: {
       display: 'flex',
+      flexWrap: 'wrap',
       margin: 0,
     },
     issue: {

src/web/src/components/Posts/PullRequests.tsx

@@ -26,6 +26,7 @@ const useStyles = makeStyles((theme: Theme) =>
     },
     pullRequests: {
       display: 'flex',
+      flexWrap: 'wrap',
       margin: 0,
     },
     pullRequest: {