Add GitHubEditLink component

This component links to the notebook in GitHub. Currently it assumes
we're referencing the "main" branch; to fix that we'd have to store the
default branch in Times Square to serve from its API.

.changeset/smart-pandas-deny.md

@@ -0,0 +1,5 @@
+---
+'squareone': minor
+---
+
+Times Square notebook pages show a link to the source notebook on GitHub.

apps/squareone/src/components/TimesSquareGitHubPagePanel/GitHubEditLink.js

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export default function GitHubEditLink({ owner, repository, sourcePath }) {
+  if (!owner || !repository || !sourcePath) {
+    return null;
+  }
+
+  const editUrl = `https://github.com/${owner}/${repository}/blob/main/${sourcePath}`;
+
+  return (
+    <p>
+      Edit in{' '}
+      <a href={editUrl}>
+        <StyledFontAwesomeIcon icon="fa-brands fa-github" />
+        {owner}/{repository}
+      </a>
+    </p>
+  );
+}
+
+const StyledFontAwesomeIcon = styled(FontAwesomeIcon)`
+  margin-right: 0.2em;
+  font-size: 1em;
+  color: ${(props) => props.color || 'inherit'};
+`;

apps/squareone/src/components/TimesSquareGitHubPagePanel/GitHubEditLink.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import GitHubEditLink from './GitHubEditLink';
+
+export default {
+  component: GitHubEditLink,
+  title: 'Components/TimesSquare/GitHubEditLink',
+  parameters: {
+    viewport: {
+      viewports: {
+        sidebar: {
+          name: 'Sidebar',
+          styles: {
+            width: '280px',
+            height: '900px',
+          },
+        },
+      },
+    },
+    defaultViewport: 'sidebar',
+  },
+};
+
+const Template = (args) => <GitHubEditLink {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+  owner: 'lsst-sqre',
+  repository: 'times-square-demo',
+  sourcePath: 'demo.ipynb',
+};

apps/squareone/src/components/TimesSquareGitHubPagePanel/TimesSquareGitHubPagePanel.js

@@ -13,6 +13,7 @@ import Error from 'next/error';
 import useTimesSquarePage from '../../hooks/useTimesSquarePage';
 import TimesSquareParameters from '../TimesSquareParameters';
 import ExecStats from './ExecStats';
+import GitHubEditLink from './GitHubEditLink';
 
 export default function TimesSquareGitHubPagePanel({}) {
   const { publicRuntimeConfig } = getConfig();
@@ -37,6 +38,12 @@ export default function TimesSquareGitHubPagePanel({}) {
         {description && (
           <div dangerouslySetInnerHTML={{ __html: description.html }}></div>
         )}
+        <GitHubEditLink
+          owner={pageData.github.owner}
+          repo={pageData.github.repository}
+          sourcePath={pageData.github.sourcePath}
+        />
+
         <TimesSquareParameters />
 
         <ExecStats />