Add donation module

config.js

@@ -2,6 +2,7 @@ module.exports = {
     "siteName": "KevinK.dev",
     "siteAuthor": "@Unkn0wnKevin",
     "siteURL": "https://kevink.dev",
+    "payPalMail": "kevin@1in9.net",
     "siteKeywords": "Kevin Kandlbinder, Kevin, Kandlbinder, Web, Web Developer, Developer, JavaScript, PHP, Java, Photos, Fotos",
     "iconPath": "src/images/fullbglogo@10x.png",
     "languages": ["en", "de"]

gatsby-config.js

@@ -5,7 +5,8 @@ module.exports = {
         title: extConfig.siteName,
         author: extConfig.siteAuthor,
         siteUrl: extConfig.siteURL,
-        keywords: extConfig.siteKeywords
+        keywords: extConfig.siteKeywords,
+        payPalMail: extConfig.payPalMail
       },
     assetPrefix: "/assets",
     plugins: [
@@ -13,6 +14,7 @@ module.exports = {
             resolve: "gatsby-plugin-asset-path"
         },
         `gatsby-plugin-sharp`,
+        `gatsby-transformer-sharp`,
         `gatsby-transformer-json`,
         {
             resolve: `gatsby-source-filesystem`,

locales/en/translation.json

@@ -25,5 +25,7 @@
   "socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!",
   "socialDescription": "Find me on other platforms!",
   "friends": "Friends",
-    "friendsDescription": "In this list you can find friends of mine and this site. Feel free to check them out for more interesting projects."
+  "friendsDescription": "In this list you can find friends of mine and this site. Feel free to check them out for more interesting projects.",
+  "donate": "Donate",
+  "donateDescription": "Hey! It looks like you're thinking about donating to me. That's nice of you! If you want your donation to go towards a specific project, feel free to write your wishes into the donation comment."
 }

package-lock.json

@@ -10990,6 +10990,54 @@
         "bluebird": "^3.7.2"
       }
     },
+    "gatsby-transformer-sharp": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/gatsby-transformer-sharp/-/gatsby-transformer-sharp-2.9.0.tgz",
+      "integrity": "sha512-v8kKgySAZtO7ko+XKbSFLXM0JUPP5s08PI7S8krBPsrhclSY9plRGOqtef1dNG7LIxbGCggy58fGTaD3aad12g==",
+      "requires": {
+        "@babel/runtime": "^7.12.5",
+        "bluebird": "^3.7.2",
+        "fs-extra": "^9.0.1",
+        "potrace": "^2.1.8",
+        "probe-image-size": "^5.0.0",
+        "semver": "^7.3.2",
+        "sharp": "^0.26.3"
+      },
+      "dependencies": {
+        "fs-extra": {
+          "version": "9.0.1",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.0.1.tgz",
+          "integrity": "sha512-h2iAoN838FqAFJY2/qVpzFXy+EBxfVE220PalAqQLDVsFOHLJrZvut5puAbCdNv6WJk+B8ihI+k0c7JK5erwqQ==",
+          "requires": {
+            "at-least-node": "^1.0.0",
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^1.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          },
+          "dependencies": {
+            "universalify": {
+              "version": "2.0.0",
+              "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+              "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
+            }
+          }
+        },
+        "universalify": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz",
+          "integrity": "sha512-rb6X1W158d7pRQBg5gkR8uPaSfiids68LTJQYOtEUhoJUWBdaQHsuT/EUduxXYxcrt4r5PJ4fuHW1MHT6p0qug=="
+        }
+      }
+    },
     "gauge": {
       "version": "2.7.4",
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",

package.json

@@ -34,6 +34,7 @@
     "gatsby-plugin-sitemap": "^2.9.0",
     "gatsby-source-filesystem": "^2.8.0",
     "gatsby-transformer-json": "^2.8.0",
+    "gatsby-transformer-sharp": "^2.9.0",
     "i18next": "^19.8.4",
     "jquery": "^3.5.1",
     "locale": "^0.1.0",

src/_mixins.scss

@@ -34,6 +34,11 @@
     text-decoration: none;
 }
 
+@mixin button {
+    @include buttonBasic;
+    border-radius: 5px;
+}
+
 @mixin homeBanner {
     background: #10141e;
     cursor: pointer;

src/pages/donate.js

@@ -0,0 +1,48 @@
+import React, {useState} from "react"
+import Layout from "../layouts/default";
+import {useStaticQuery, graphql} from "gatsby";
+import { Trans, Link, useI18next, I18nextContext } from "gatsby-plugin-react-i18next"
+
+import styles from "./donate.module.scss";
+
+import logo from "../images/roundedbglogo@10x.png";
+
+export default function DonatePage() {
+    const [amount, setAmount] = useState(5);
+    const {t} = useI18next();
+    const {language, path} = React.useContext(I18nextContext);
+
+    const { site } = useStaticQuery(
+        graphql`
+          query {
+            site {
+              siteMetadata {
+                title
+                siteUrl
+                payPalMail
+              }
+            }
+          }
+        `
+      )
+
+    return (
+        <Layout module="donate" title={t("donate")} description={t("donationCatchphrase")}>
+            <section>
+                <article>
+                    <h1><Trans>donate</Trans></h1>
+
+                    <p><Trans>donateDescription</Trans></p>
+
+                    <div className={styles.priceAmount}>
+                        <label for="priceInput" className={styles.sronly}>Amount</label>
+                        <input type="number" min="1" placeholder="10.00" step="1" value={amount} onChange={(ev) => {setAmount(ev.target.value)}} id="priceInput" />
+                        <div>€</div>
+                    </div>
+
+                    <a className={styles.donateButton} rel="noopener" id="payPalBtn" href={"https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business="+encodeURIComponent(site.siteMetadata.payPalMail)+"&item_name="+encodeURIComponent(site.siteMetadata.title)+"&currency_code=EUR&image_url="+(encodeURIComponent(site.siteMetadata.siteUrl+logo))+"&return="+(encodeURIComponent(site.siteMetadata.siteUrl+"/"+path+"thank-you/"))+"&rm=0&cancel_return="+(encodeURIComponent(site.siteMetadata.siteUrl+"/"+path))+"&amount="+amount}><span>Donate using PayPal</span><i class="fas fa-fw fa-chevron-right" aria-hidden="true"></i></a>
+                </article>
+            </section>
+        </Layout>
+    );
+}

src/pages/donate.module.scss

@@ -0,0 +1,41 @@
+@import "../variables";
+@import "../mixins";
+
+.priceAmount {
+    display: flex;
+    width: 150px;
+    margin: 20px auto;
+    border: thin solid rgba(0,0,0,.25);
+    border-radius: 5px;
+    overflow: hidden;
+    line-height: 40px;
+
+    input {
+        flex-grow: 1;
+        border: none;
+        padding-left: 10px;
+        width: 1px;
+        border-right: thin solid rgba(0,0,0,.25);
+    }
+
+    div {
+        width: 20px;
+        text-align: center;
+    }
+}
+
+.donateButton {
+    @include button;
+}
+
+.sronly {
+    border: 0;
+    clip: rect(0,0,0,0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+

src/pages/donate/thank-you.js

@@ -0,0 +1,19 @@
+import React from "react"
+import Layout from "../../layouts/default";
+import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
+
+export default function ImprintPage() {
+    
+    const {t} = useI18next();
+    return (
+        <Layout module="donate" title={t("donate")}>
+            <section>
+                <article>
+                    <h1><Trans>donateThanks</Trans></h1>
+
+                    <p></p>
+                </article>
+            </section>
+        </Layout>
+    );
+}

src/pages/index.js

@@ -41,12 +41,12 @@ class IndexPage extends React.Component {
             <i className="fas fa-fw fa-chevron-right"></i>
           </div>
         </a>
-        <a className={styles.section + " " + styles.donationSection} href="TODO: Path">
+        <Link className={styles.section + " " + styles.donationSection} to="/donate">
           <div>
             <span><Trans>donationCatchphrase</Trans></span>
             <i className="fas fa-fw fa-chevron-right"></i>
           </div>
-        </a>
+        </Link>
       </Layout>
     )
   }

src/pages/index.module.scss

@@ -21,10 +21,6 @@
         max-height: 400px;
         transform: translate(-50%, 0%);
 
-
-
-    
-
         &:hover .profileImage {
             transform: translate(4px, -4px);
         }