Add GitHub Sponsor Button to Donate Page

src/pages/donate.js

@@ -3,6 +3,7 @@ import Layout from "../layouts/default";
 import { graphql } from "gatsby";
 import { Trans, useI18next, I18nextContext } from "gatsby-plugin-react-i18next"
 import PropTypes from "prop-types"
+import GitHubButton from 'react-github-btn'
 
 import * as styles from "./donate.module.scss";
 
@@ -13,6 +14,7 @@ query ($language: String!) {
       title
       siteUrl
       payPalMail
+      contactGitHub
     }
   }
   file(relativePath: {eq: "images/pplogo.png"}) {
@@ -49,6 +51,12 @@ function DonatePage(props) {
 
           <p><Trans>donateDescription</Trans></p>
 
+          <p><Trans>donateGitHub</Trans></p>
+
+          <p style={{display: "block", textAlign: "center"}}><GitHubButton href={"https://github.com/sponsors/"+site.siteMetadata.contactGitHub} data-color-scheme="no-preference: light; light: dark; dark: dark;" data-icon="octicon-heart" data-size="large" aria-label="Sponsor @Unkn0wnCat on GitHub"><Trans>sponsorGitHub</Trans></GitHubButton></p>
+
+          <p><Trans>donatePayPal</Trans></p>
+
           <div className={styles.priceAmount}>
             <label htmlFor="priceInput" className={styles.sronly}>Amount</label>
             <input type="number" min="1" placeholder="10.00" step="1" value={amount} onChange={(ev) => { setAmount(ev.target.value) }} name="priceInput" id="priceInput" />