diff --git a/package.json b/package.json index b7060ddc12b..8ef171ec3c5 100644 --- a/package.json +++ b/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", diff --git a/public/fonts/AmazonEmberDisplay_Bd.ttf b/public/fonts/AmazonEmberDisplay_Bd.ttf new file mode 100644 index 00000000000..18d2fec4ee8 Binary files /dev/null and b/public/fonts/AmazonEmberDisplay_Bd.ttf differ diff --git a/public/fonts/AmazonEmberDisplay_BdIt.ttf b/public/fonts/AmazonEmberDisplay_BdIt.ttf new file mode 100644 index 00000000000..b9758e17a84 Binary files /dev/null and b/public/fonts/AmazonEmberDisplay_BdIt.ttf differ diff --git a/public/fonts/AmazonEmberDisplay_Rg.ttf b/public/fonts/AmazonEmberDisplay_Rg.ttf new file mode 100644 index 00000000000..b5b38fe0de9 Binary files /dev/null and b/public/fonts/AmazonEmberDisplay_Rg.ttf differ diff --git a/public/fonts/AmazonEmberDisplay_RgIt.ttf b/public/fonts/AmazonEmberDisplay_RgIt.ttf new file mode 100644 index 00000000000..0e01f86b7ea Binary files /dev/null and b/public/fonts/AmazonEmberDisplay_RgIt.ttf differ diff --git a/public/fonts/AmazonEmberMono_Bd.ttf b/public/fonts/AmazonEmberMono_Bd.ttf new file mode 100644 index 00000000000..7a4c2742071 Binary files /dev/null and b/public/fonts/AmazonEmberMono_Bd.ttf differ diff --git a/public/fonts/AmazonEmber_Bd.ttf b/public/fonts/AmazonEmber_Bd.ttf new file mode 100644 index 00000000000..eb6eb4e30fa Binary files /dev/null and b/public/fonts/AmazonEmber_Bd.ttf differ diff --git a/public/images/contribute/contributor-bash-og-image.png b/public/images/contribute/contributor-bash-og-image.png new file mode 100644 index 00000000000..aeba2e5b0af Binary files /dev/null and b/public/images/contribute/contributor-bash-og-image.png differ diff --git a/public/images/contribute/open-pr.png b/public/images/contribute/open-pr.png new file mode 100644 index 00000000000..247ec5f1d94 Binary files /dev/null and b/public/images/contribute/open-pr.png differ diff --git a/public/images/contribute/open-vs-code.png b/public/images/contribute/open-vs-code.png new file mode 100644 index 00000000000..9692d69fcf1 Binary files /dev/null and b/public/images/contribute/open-vs-code.png differ diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx index 59c6915c178..40e1cd09e61 100644 --- a/src/components/Footer/index.tsx +++ b/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.AMPLIFY.alt}

Amplify

- Getting Started + Getting Started Community Chat + Contribute
diff --git a/src/components/Layout/index.tsx b/src/components/Layout/index.tsx index 51e18b5c7d1..be9984265e1 100644 --- a/src/components/Layout/index.tsx +++ b/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} /> diff --git a/src/components/contribute/CardIssues.tsx b/src/components/contribute/CardIssues.tsx new file mode 100644 index 00000000000..895dcc42f83 --- /dev/null +++ b/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 ( + + + + {' '} + {title} + + + + {description} + + + {(item, index) => ( + + + + + + + {item.title} + + + good first issue + + + + + )} + + + + + + + + ); +} diff --git a/src/components/contribute/HowItWorks.tsx b/src/components/contribute/HowItWorks.tsx new file mode 100644 index 00000000000..e91e00eb395 --- /dev/null +++ b/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 ( + + + + Making a Contribution + + How it works + + + The steps below outline how to participate. Right now, only accepted PRs + will be considered. + + + + + + + {' '} + + + + Amplify Contributor Program is open to everyone in our Amplify + community! + + + + + + + + {' '} + + + + The Amplify team will label issues using{' '} + good first issue for contributors. + + + + + + + + {' '} + + + + The pull request must contain commits you made yourself. + + + + + + + + {' '} + + + The Amplify team will review the submitted PRs. + + + + + + + {' '} + + + Pull requests must be approved by the Amplify Team. + + + + + + + {' '} + + + + Receive a contributor role in the{' '} + + Amplify Community Discord server + + . + + + + + + ); +} diff --git a/src/components/contribute/Layout.tsx b/src/components/contribute/Layout.tsx new file mode 100644 index 00000000000..c78f573331c --- /dev/null +++ b/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 ( + <> + + AWS Amplify Contributor Program + + + + + + + + + + + + + + + + + + + + + + +
+ + {children} + +
+ + ); +} diff --git a/src/components/contribute/QuickstartResources.tsx b/src/components/contribute/QuickstartResources.tsx new file mode 100644 index 00000000000..32bec76a104 --- /dev/null +++ b/src/components/contribute/QuickstartResources.tsx @@ -0,0 +1,45 @@ +import { Heading, View, Text, Flex } from '@aws-amplify/ui-react'; + +export default function QuickstartResources() { + return ( + + + Quickstart videos + + Get your local environment set up quickly by following along with the + below videos. + + + + + + + + + + + + ); +} diff --git a/src/components/contribute/theme.ts b/src/components/contribute/theme.ts new file mode 100644 index 00000000000..61a17dd2d87 --- /dev/null +++ b/src/components/contribute/theme.ts @@ -0,0 +1,20 @@ +import { defaultTheme } from '@aws-amplify/ui-react'; + +export const theme = { + ...defaultTheme, + name: 'contributor', + tokens: { + colors: { + brand: { + squidInk: { value: '#232F3E' }, + anchor: { value: '#003181' }, + sky: { value: '#2074d5' }, + rind: { value: '#fbd8bf' }, + smile: { value: '#ff9900' }, + darkSquidInk: { value: '#161E2D' }, + stone: { value: '#d4dada ' }, + paper: { value: 'f1f3f3' } + } + } + } +}; diff --git a/src/constants/links.ts b/src/constants/links.ts index af56f705ba6..c8e58b16da1 100644 --- a/src/constants/links.ts +++ b/src/constants/links.ts @@ -1,6 +1,7 @@ export const DISCORD = 'https://discord.gg/amplify'; export const LEARN = 'https://amplify.aws/learn'; -export const CONTRIBUTE = 'https://contributetoamplify.com/'; +// export const CONTRIBUTE = 'https://docs.amplify.aws/contribute/'; +// export const CONTRIBUTE = 'https://contributetoamplify.com/'; export const TWITTER = 'https://twitter.com/AWSAmplify'; export const GITHUB = 'https://github.com/aws-amplify'; export const TERMS = 'https://aws.amazon.com/terms/'; diff --git a/src/directory/directory.js b/src/directory/directory.js index a4e41f99873..ee98bb2f56c 100644 --- a/src/directory/directory.js +++ b/src/directory/directory.js @@ -1,4 +1,11 @@ const directory = { + contribute: { + productRoot: { + title: 'Contribute', + route: '/contribute' + }, + items: {} + }, lib: { productRoot: { title: 'Amplify Libraries', @@ -790,7 +797,11 @@ const directory = { route: '/lib/utilities/serviceworker', filters: ['js'] }, - { title: 'Cache', route: '/lib/utilities/cache', filters: ['js', 'react-native'] }, + { + title: 'Cache', + route: '/lib/utilities/cache', + filters: ['js', 'react-native'] + }, { title: 'Hub', route: '/lib/utilities/hub', diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 48b7542d69a..f846a1671bc 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,5 +1,6 @@ import '@algolia/autocomplete-theme-classic'; import '../styles/styles.css'; +import '../styles/contribute-styles.css'; import Head from 'next/head'; function MyApp({ Component, pageProps }) { diff --git a/src/pages/contribute/getting-started.tsx b/src/pages/contribute/getting-started.tsx new file mode 100644 index 00000000000..505b5768d83 --- /dev/null +++ b/src/pages/contribute/getting-started.tsx @@ -0,0 +1,387 @@ +import { + Badge, + Heading, + Text, + Link, + Image, + View, + Flex, + Icon +} from '@aws-amplify/ui-react'; +import { FiExternalLink } from 'react-icons/fi'; +import { MdCheckCircle, MdOutlineInfo } from 'react-icons/md'; +import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; +import Layout from '../../components/contribute/Layout'; + +const _4a = ` +git status + +On branch main +Your branch is up to date with 'origin/main'. + +nothing to commit, working tree clean +`.trim(); + +const _6a = ` +git add . +git commit -m "A commit message" +git push -u origin +`.trim(); + +const _6b = ` +Enumerating objects: 5, done. +Counting objects: 100% (5/5), done. +Delta compression using up to 8 threads +Compressing objects: 100% (3/3), done. +Writing objects: 100% (3/3), 323 bytes | 323.00 KiB/s, done. +Total 3 (delta 2), reused 0 (delta 0), pack-reused 0 +remote: Resolving deltas: 100% (2/2), completed with 2 local objects. +remote: +remote: Create a pull request for on GitHub by visiting: +remote: https://github.com/offlineprogrammer/amplify-js/pull/new/feat/ +remote: +To https://github.com/offlineprogrammer/amplify-js.git + * [new branch] feat/my-amazing-branche -> feat/ +Branch 'feat/' set up to track remote branch 'feat/' from 'origin'. +`.trim(); + +const _5a = ` +git checkout -b "//" +# or +git checkout -b "/" +`.trim(); + +const Code = ({ children, color }) => { + return ( + + {children} + + ); +}; + +export default function ContributeGettingStartedPage() { + const meta = { + title: 'AWS Amplify Contributor Program - Getting Started', + description: + 'The steps below will help you get set up to open a pull request in the Amplify JS project. The Amplify Contributor Program is an open invitation for you to participate in the Amplify open source development journey.' + }; + return ( + + + + + Getting Started + + The steps below will help you get set up to open a pull request in + the Amplify JS project. Check out the CONTRIBUTING.md{' '} + in each project's repository for instructions on how to get + started with local environment set up. + + + The Amplify Contributor Program is an open invitation for you to + participate in the Amplify open source development journey. It is + a great way to learn more about the Amplify ecosystem and make + constructive, helpful pull requests. It builds your resume by + demonstrating that you can collaborate with others on code, and it + feels good to give back to a project you use! We're looking + forward to developing with you! + + + + Prerequisites + + + + A GitHub account. You can create one{' '} + + here . + + + + + IDE (e.g. VS Code) + + + + Amplify JS development environment. Follow the steps{' '} + + here + + {' '} + to get set up. + + + + Set up the Amplify Docs{' '} + + development environment + + .Optional + + + + + Steps to take to make your contribution + +
    +
  1. + + Start on the{' '} + + contributing page + {' '} + of the Amplify JS repo and find the right issue for you. + +
    2. +
  2. + + Fork the{' '} + + Amplify JS + {' '} + GitHub project. + +
    3. +
  3. + + Open VS Code and clone your fork down to your machine so you + can begin making changes.{' '} + + + VS Code + +
    4. +
  4. + + Run git status before you start coding to make + sure everything in the project files are updated with the{' '} + origin/main branch. + + {_4a} +
    5. +
  5. + + Use one of the commands below to create a new branch within + your fork. + + {_5a} + + + + {' '} + + Use the group-token to + indicate the category you are working on. e.g.{' '} + amplify-datastore. + + + + {' '} + + The short-token can be one + of the following: feat, chore, + or bug. + + + + {' '} + + The branch-name should be + representative of the feature or fix. + + +
    6. +
  6. + Make your contribution and then run git add,{' '} + git commit and push your branch. +
    + {_6a} +
    + + GitHub will process the push command and display a link to + create a pull request. + + {_6b} +
    7. +
  7. + + Click on the link to create a new pull request using the + Amplify JS PR template. + + + Open GitHub PR + +
    8. +
+ That's it! + + The Amplify team will review your PR and provide feedback if + needed. The review process might require API design & security + reviews. For such cases it might take up to 4 weeks to complete + the review. Make sure to address any automated check that fail + (such as linting, unit tests, etc. in the CI pipeline). Finally, + once your changes meet the requirements and checks, the team + will merge your changes into the Amplify JS repo. + + + + Well done and congrats! We're very excited about your + contribution! + + + + + Resources + + We've put together a few resources that can help you create + quality PRs. + + + + + Amplify JS Contributing Guidelines + + + + + Please read through these guidelines carefully before submitting + a PR. + + + + + Amplify Documentation + + + + + Learn more about AWS Amplify the the JS library. + + + + + Amplify Community Discord server + + + + + This is a great place to meet other developers using Amplify, + ask questions, and share what you're building with Amplify. + + + + + The contribute-to-javascript Discord channel + + + + + Meet other contributors and ask questions related to + contributing to Amplify JS. + + + + Amplify Discord Office Hours + + + + + + Join the weekly office hour in the Discord Voice channel where + you can ask questions, share what you're working on and get + feedback. + + + + + + + ); +} diff --git a/src/pages/contribute/index.tsx b/src/pages/contribute/index.tsx new file mode 100644 index 00000000000..46010fed43e --- /dev/null +++ b/src/pages/contribute/index.tsx @@ -0,0 +1,175 @@ +import NextLink from 'next/link'; +import { + Button, + Flex, + View, + Heading, + Text, + Link, + Card +} from '@aws-amplify/ui-react'; +import { FiExternalLink } from 'react-icons/fi'; +import Layout from '../../components/contribute/Layout'; +import Issues from '../../components/contribute/CardIssues'; +import HowItWorks from '../../components/contribute/HowItWorks'; +import QuickstartResources from '../../components/contribute/QuickstartResources'; + +import { Octokit } from '@octokit/rest'; +import { Endpoints } from '@octokit/types'; + +type listRepoIssuesResponse = Endpoints['GET /repos/{owner}/{repo}/issues']['response']; + +export async function getStaticProps() { + const octokit = new Octokit({}); + + const { + data: JsIssues + }: { + data: listRepoIssuesResponse['data']; + } = await octokit.rest.issues.listForRepo({ + owner: 'aws-amplify', + repo: 'amplify-js', + state: 'open', + labels: 'good first issue', + // eslint-disable-next-line @typescript-eslint/camelcase + per_page: 6 + }); + + const { + data: CLIissues + }: { + data: listRepoIssuesResponse['data']; + } = await octokit.rest.issues.listForRepo({ + owner: 'aws-amplify', + repo: 'amplify-cli', + state: 'open', + labels: 'good first issue', + // eslint-disable-next-line @typescript-eslint/camelcase + per_page: 6 + }); + + return { + props: { JsIssues, CLIissues }, + revalidate: 60 * 60 + }; +} + +export default function ContributorPage({ JsIssues, CLIissues }) { + const meta = { + title: 'AWS Amplify Contributor Program', + description: + 'The Amplify Contributor Program is an open invitation for you to participate in the Amplify open source development journey. Get involved with AWS Amplify by making open source contributions to the Amplify project!' + }; + return ( + <> + + {/* Nav - need to put in matching nav */} + {/*