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

@@ -1,29 +1,31 @@
 {
-    "siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.",
+  "siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.",
-    "imprint": "Imprint",
+  "imprint": "Imprint",
-    "datasec": "Data Protection",
+  "datasec": "Data Protection",
-    "disclaimer": "Disclaimer",
+  "disclaimer": "Disclaimer",
-    "projects": "Projects",
+  "projects": "Projects",
-    "project": "Project",
+  "project": "Project",
-    "social": "Social",
+  "social": "Social",
-    "homeHello": "Hello, I am",
+  "homeHello": "Hello, I am",
-    "homeMe": "I am",
+  "homeMe": "I am",
-    "homeWebDeveloper": "a web developer",
+  "homeWebDeveloper": "a web developer",
-    "homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
+  "homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
-    "homeAboutMe": "About me",
+  "homeAboutMe": "About me",
-    "homeAboutMeHello": "Hello!",
+  "homeAboutMeHello": "Hello!",
-    "homeAboutMeText": "I am Kevin Kandlbinder, a developer and hobby photographer from northern germany. I've learned operating computers very early in my life with my father giving me his old Windows 2000 tower. Some years later I've had my first contact with web development a few years later when I bought a book about HTML, PHP, JavaScript and CSS from a sale at my local library. From this point onwards web development has been a job and a hobby equally.",
+  "homeAboutMeText": "I am Kevin Kandlbinder, a developer and hobby photographer from northern germany. I've learned operating computers very early in my life with my father giving me his old Windows 2000 tower. Some years later I've had my first contact with web development a few years later when I bought a book about HTML, PHP, JavaScript and CSS from a sale at my local library. From this point onwards web development has been a job and a hobby equally.",
-    "donationCatchphrase": "Like what you're seeing? Consider donating.",
+  "donationCatchphrase": "Like what you're seeing? Consider donating.",
-    "homeImageCredit": "Portrait taken by Jannik Kiel",
+  "homeImageCredit": "Portrait taken by Jannik Kiel",
-    "de": "German",
+  "de": "German",
-    "en": "English",
+  "en": "English",
-    "projectAboutHeader": "About {{projectName}}",
+  "projectAboutHeader": "About {{projectName}}",
-    "projectViewGitHub": "View on GitHub",
+  "projectViewGitHub": "View on GitHub",
-    "projectViewWebsite": "View Project-Website",
+  "projectViewWebsite": "View Project-Website",
-    "projectsDescription": "This is what I am working on or have worked on.",
+  "projectsDescription": "This is what I am working on or have worked on.",
-    "projectView": "View",
+  "projectView": "View",
-    "socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!",
+  "socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends</1>!",
-    "socialDescription": "Find me on other platforms!",
+  "socialDescription": "Find me on other platforms!",
-    "friends": "Friends",
+  "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);
         }