Add GitHub Sponsor Button to Donate Page

locales/de/translation.json

@@ -31,5 +31,8 @@
     "donateDescription": "Hey! Es sieht so aus als würdest du über eine Spende nachdenken. Das ist nett! Wenn du ein bestimmtes Projekt unterstützen willst, schreibe deine Wünsche gerne in den Spendenkommentar.",
     "donate": "Spenden",
     "featuredProjects": "Vorgestellte Projekte",
-    "seeMore": "Mehr erkunden"
+    "seeMore": "Mehr erkunden",
+    "donateGitHub": "Du kannst mich mit dem folgenden Button ganz einfach über GitHub Sponsors unterstützen!",
+    "donatePayPal": "Wenn du mich lieber über PayPal unterstützen willst ist hier der Button für dich:",
+    "sponsorGitHub": "Über GitHub unterstützen"
 }

locales/en/translation.json

@@ -31,5 +31,8 @@
   "donateThanks": "Thanks for donating!",
   "donateThanksText": "I really appreciate you appreciating my work and showing it! Feel free to mail me at <1>{{contactEmail}}</1> if you have anything you want to talk about!",
   "featuredProjects": "Featured Projects",
-  "seeMore": "See more"
+  "seeMore": "See more",
+  "donateGitHub": "You can very easily support me via GitHub Sponsors using the following button!",
+  "donatePayPal": "If you'd rather support me via PayPal the following button is for you:",
+  "sponsorGitHub": "Sponsor using GitHub"
 }

package-lock.json

@@ -13529,6 +13529,11 @@
         "parse-url": "^5.0.0"
       }
     },
+    "github-buttons": {
+      "version": "2.15.0",
+      "resolved": "https://registry.npmjs.org/github-buttons/-/github-buttons-2.15.0.tgz",
+      "integrity": "sha512-TqnLqrwYkYbbFmWcRa2LPyh6IRp0krnGkNrY/5LetxVnPYOHQzxmOZC25GtsHN7ay9Q5ZWY3zLWCKti+xz7w3Q=="
+    },
     "github-from-package": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/github-from-package/-/github-from-package-0.0.0.tgz",
@@ -20104,6 +20109,14 @@
       "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz",
       "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA=="
     },
+    "react-github-btn": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-github-btn/-/react-github-btn-1.2.0.tgz",
+      "integrity": "sha512-/b2TGTeek5Ky+KtuP5BxOaXgb1FGhbwgZNI6rkwkGk7+xtCtsNMkdchOcCnC3qU1JGTWPKzYZWpPBIouVhXAoQ==",
+      "requires": {
+        "github-buttons": "^2.8.0"
+      }
+    },
     "react-helmet": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",

package.json

@@ -44,6 +44,7 @@
     "prop-types": "15.7.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
+    "react-github-btn": "^1.2.0",
     "react-helmet": "6.1.0",
     "react-i18next": "11.8.12"
   },

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" />