Add contributor page pr preview

package.json

@@ -23,6 +23,7 @@
     "@emotion/react": "^11.1.5",
     "@emotion/styled": "^11.3.0",
     "@mdx-js/mdx": "^2.0.0",
+    "@octokit/rest": "^19.0.7",
     "algoliasearch": "^4.12.1",
     "array-flatten": "^3.0.0",
     "aws-amplify": "^5.0.5",
@@ -40,6 +41,8 @@
     "ramda": "^0.28.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-icons": "^4.7.1",
+    "react-syntax-highlighter": "^15.5.0",
     "rehype": "^11.0.0",
     "remark": "^14.0.2",
     "remark-mdx": "^2.0.0",

src/components/Footer/index.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { Footer, RightFooter, LeftFooter, Social, Legal } from './styles';
 import { Container } from '../Container';
 import ExternalLink from '../ExternalLink';
@@ -12,8 +13,9 @@ export default function DocsFooter() {
           <img alt={img.AMPLIFY.alt} src={img.AMPLIFY.lightSrc} />
           <div>
             <h3>Amplify</h3>
-            <a href="/start">Getting Started</a>
+            <Link href="/start">Getting Started</Link>
             <ExternalLink href={links.DISCORD}>Community Chat</ExternalLink>
+            <Link href="/contribute">Contribute</Link>
           </div>
         </LeftFooter>
         <RightFooter>

src/components/Layout/index.tsx

@@ -42,6 +42,8 @@ export default function Layout({
         .filter((s) => s !== '')
         .join(' - ');
 
+  const current = meta.title.includes('Contribut') ? 'Contribute' : 'Docs';
+
   return (
     <>
       {meta && (
@@ -83,7 +85,7 @@ export default function Layout({
         leftLinks={LEFT_NAV_LINKS as NavMenuItem[]}
         rightLinks={RIGHT_NAV_LINKS as NavMenuItem[]}
         socialLinks={SOCIAL_LINKS as NavMenuItem[]}
-        currentSite={'Docs'}
+        currentSite={current}
       />
       <SecondaryNav />
       <Container backgroundColor="bg-color-tertiary">

src/components/contribute/CardIssues.tsx

@@ -0,0 +1,73 @@
+import {
+  Flex,
+  Collection,
+  Divider,
+  Button,
+  Text,
+  Link,
+  Heading,
+  Badge,
+  View
+} from '@aws-amplify/ui-react';
+import { FiExternalLink, FiGitPullRequest } from 'react-icons/fi';
+import { VscIssues } from 'react-icons/vsc';
+import { PropsWithChildren } from 'react';
+
+export type IssuesProps = PropsWithChildren<{
+  title: string;
+  issues: any[];
+  repo: string;
+  description: string;
+}>;
+
+export default function Issues({ title, issues, repo, description }) {
+  return (
+    <Flex direction="column" gap="2em">
+      <Flex>
+        <Heading level={3}>
+          {' '}
+          <FiGitPullRequest /> {title}
+        </Heading>
+      </Flex>
+
+      <Text fontSize="1.25em">{description}</Text>
+
+      <Collection
+        items={issues}
+        type="list"
+        direction="column"
+        // gap="20px"
+        wrap="nowrap"
+      >
+        {(item, index) => (
+          <View id={`${repo}-${index}`}>
+            <Link href={item.html_url} isExternal={true}>
+              <Flex alignItems="center" alignContent="center">
+                <Text as="span" fontSize="24px">
+                  <VscIssues />
+                </Text>
+                <Text>{item.title}</Text>
+              </Flex>
+              <Badge marginLeft={'2rem'} size="small" variation="info">
+                good first issue
+              </Badge>
+            </Link>
+            <Divider padding="xs" size="small" />
+          </View>
+        )}
+      </Collection>
+      <Flex justifyContent="center  ">
+        <Link
+          href={`https://github.com/aws-amplify/${repo}/issues`}
+          isExternal={true}
+        >
+          <Button variation="primary">
+            <Text>
+              Open a Pull Request <FiExternalLink />
+            </Text>
+          </Button>
+        </Link>
+      </Flex>
+    </Flex>
+  );
+}

src/components/contribute/HowItWorks.tsx

@@ -0,0 +1,169 @@
+import {
+  Divider,
+  Flex,
+  Heading,
+  Text,
+  Badge,
+  Card,
+  View,
+  Link
+} from '@aws-amplify/ui-react';
+import { MdOutlineBadge, MdLabelOutline, MdCelebration } from 'react-icons/md';
+import {
+  FiExternalLink,
+  FiGithub,
+  FiCheck,
+  FiGitPullRequest
+} from 'react-icons/fi';
+
+export default function HowItWorks() {
+  return (
+    <Flex
+      direction="column"
+      maxWidth="1024px"
+      margin="0 auto"
+      gap="2em"
+      width={{ base: '90%', large: '60%' }}
+    >
+      <View>
+        <Badge
+          textTransform="uppercase"
+          backgroundColor="brand.rind"
+          color="brand.squidInk"
+          marginBottom="1em"
+        >
+          Making a Contribution
+        </Badge>
+        <Heading level={2}>How it works</Heading>
+      </View>
+      <Text fontSize="large" color="font.secondary">
+        The steps below outline how to participate. Right now, only accepted PRs
+        will be considered.
+      </Text>
+
+      <View>
+        <Card>
+          <Flex direction="row" alignItems="center">
+            <Flex
+              backgroundColor="brand.rind"
+              color="brand.squidInk"
+              width="32px"
+              height="32px"
+              borderRadius="50%"
+              justifyContent="center"
+              alignItems="center"
+            >
+              {' '}
+              <FiGithub />
+            </Flex>
+            <Text>
+              Amplify Contributor Program is open to everyone in our Amplify
+              community!
+            </Text>
+          </Flex>
+        </Card>
+        <Divider size="small" />
+        <Card>
+          <Flex direction="row" alignItems="center">
+            <Flex
+              backgroundColor="brand.rind"
+              color="brand.squidInk"
+              width="32px"
+              height="32px"
+              borderRadius="50%"
+              justifyContent="center"
+              alignItems="center"
+            >
+              {' '}
+              <MdLabelOutline />
+            </Flex>
+            <Text>
+              The Amplify team will label issues using{' '}
+              <Badge variation="info">good first issue</Badge> for contributors.
+            </Text>
+          </Flex>
+        </Card>
+        <Divider size="small" />
+        <Card>
+          <Flex direction="row" alignItems="center">
+            <Flex
+              backgroundColor="brand.rind"
+              color="brand.squidInk"
+              width="32px"
+              height="32px"
+              borderRadius="50%"
+              justifyContent="center"
+              alignItems="center"
+            >
+              {' '}
+              <FiGitPullRequest />
+            </Flex>
+            <Text>
+              The pull request must contain commits you made yourself.
+            </Text>
+          </Flex>
+        </Card>
+        <Divider size="small" />
+        <Card>
+          <Flex direction="row" alignItems="center">
+            <Flex
+              backgroundColor="brand.rind"
+              color="brand.squidInk"
+              width="32px"
+              height="32px"
+              borderRadius="50%"
+              justifyContent="center"
+              alignItems="center"
+            >
+              {' '}
+              <FiCheck />
+            </Flex>
+            <Text>The Amplify team will review the submitted PRs.</Text>
+          </Flex>
+        </Card>
+        <Divider size="small" />
+        <Card>
+          <Flex direction="row" alignItems="center">
+            <Flex
+              backgroundColor="brand.rind"
+              color="brand.squidInk"
+              width="32px"
+              height="32px"
+              borderRadius="50%"
+              justifyContent="center"
+              alignItems="center"
+            >
+              {' '}
+              <MdCelebration />
+            </Flex>
+            <Text>Pull requests must be approved by the Amplify Team.</Text>
+          </Flex>
+        </Card>
+        <Divider size="small" />
+        <Card>
+          <Flex direction="row" alignItems="center">
+            <Flex
+              backgroundColor="brand.rind"
+              color="brand.squidInk"
+              width="32px"
+              height="32px"
+              borderRadius="50%"
+              justifyContent="center"
+              alignItems="center"
+            >
+              {' '}
+              <MdOutlineBadge />
+            </Flex>
+            <Text>
+              Receive a contributor role in the{' '}
+              <Link href="https://discord.com/invite/amplify" isExternal>
+                Amplify Community Discord server <FiExternalLink />
+              </Link>
+              .
+            </Text>
+          </Flex>
+        </Card>
+      </View>
+    </Flex>
+  );
+}

src/components/contribute/Layout.tsx

@@ -0,0 +1,54 @@
+import Head from 'next/head'
+import { ThemeProvider } from '@aws-amplify/ui-react';
+import { default as BaseLayout } from '../Layout';
+import { theme } from './theme';
+import type { PropsWithChildren } from 'react';
+
+export type LayoutProps = PropsWithChildren<{
+  // @todo use types from Layout component
+  meta: {
+    title: string;
+    description: string;
+  };
+}>;
+
+export default function Layout({ children, meta }: LayoutProps) {
+  const creator = '@AWSAmplify';
+  const url = 'https://docs.amplify.aws/contribute';
+  return (
+    <>
+    <Head>
+        <title>AWS Amplify Contributor Program</title>
+
+        <meta name="HandheldFriendly" content="True" />
+        <meta name="MobileOptimized" content="320" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+        <meta name="description" content={meta.description} />
+
+        <meta property="og:title" content={meta.title} key="title" />
+        <meta property="og:site_name" content="Amplify Contributor Program" />
+        <meta property="og:description" content={meta.description} />
+        <meta property="og:image:type" content="image/png" />
+        <meta property="og:url" content={url} />
+        <meta property="og:locale" content="en-us" />
+
+        <meta name="twitter:card" content="summary_large_image" />
+        <meta name="twitter:site" content={creator} />
+        <meta name="twitter:creator" content={creator} />
+        <meta name="twitter:title" content={meta.title} />
+        <meta name="twitter:description" content={meta.description} />
+        <meta
+          property="twitter:image"
+          content="/images/contribute/contributor-bash-og-image.png"
+        />
+        <meta name="twitter:domain" content={url} />
+      </Head>
+    <div id="contributor-page">
+      <ThemeProvider theme={theme}>
+        <BaseLayout meta={meta}>{children}</BaseLayout>
+      </ThemeProvider>
+    </div>
+    </>
+  );
+}

src/components/contribute/QuickstartResources.tsx

@@ -0,0 +1,45 @@
+import { Heading, View, Text, Flex } from '@aws-amplify/ui-react';
+
+export default function QuickstartResources() {
+  return (
+    <Flex
+      direction="row"
+      justifyContent="center"
+      alignItems="top"
+      gap="5em"
+      wrap={'wrap'}
+    >
+      <View width={{ base: '90%', large: '60%' }}>
+        <Heading level={2}>Quickstart videos</Heading>
+        <Text fontSize="large">
+          Get your local environment set up quickly by following along with the
+          below videos.
+        </Text>
+      </View>
+      <Flex wrap={'wrap'} justifyContent={'center'} width="100%" gap="2em">
+        <View width={{ base: '90%', large: '40%' }}>
+          <iframe
+            width="600"
+            height="350"
+            src="https://www.youtube-nocookie.com/embed/8BUSqSkhqtw"
+            title="YouTube video player"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          ></iframe>
+        </View>
+        <View width={{ base: '90%', large: '40%' }}>
+          <iframe
+            width="600"
+            height="350"
+            src="https://www.youtube-nocookie.com/embed/WMKVE98hEzE"
+            title="YouTube video player"
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          ></iframe>
+        </View>
+      </Flex>
+    </Flex>
+  );
+}