Perform cleanup

config.js

@@ -5,5 +5,10 @@ module.exports = {
     "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"]
+    "languages": ["en", "de"],
+    "contactEmail": "kevin@kevink.dev",
+    "contactPhone": "+4941068068004",
+    "mapsLink": "https://goo.gl/maps/KVq9z1PVaVP2",
+    "contactTwitter": "Unkn0wnKevin",
+    "contactGitHub": "Unkn0wnCat"
 };

gatsby-config.js

@@ -6,7 +6,12 @@ module.exports = {
         author: extConfig.siteAuthor,
         siteUrl: extConfig.siteURL,
         keywords: extConfig.siteKeywords,
-        payPalMail: extConfig.payPalMail
+        payPalMail: extConfig.payPalMail,
+        contactEmail: extConfig.contactEmail,
+        contactPhone: extConfig.contactPhone,
+        mapsLink: extConfig.mapsLink,
+        contactTwitter: extConfig.contactTwitter,
+        contactGitHub: extConfig.contactGitHub
       },
     assetPrefix: "/assets",
     plugins: [

locales/en/translation.json

@@ -27,5 +27,7 @@
   "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.",
   "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."
+  "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.",
+  "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!"
 }

src/components/languageSwitcher.js

@@ -6,7 +6,7 @@ export default function LanguageSwitcher() {
 
     return (
         <div class="languageModalInner">
-            <h2>Languages (<a href="#" class="modalCloseLink">&times;</a>)</h2>
+            <h2>Languages (<a href="#top" class="modalCloseLink">&times;</a>)</h2>
             <ul>
                 {languages.map((lng) => (
                     <li key={lng}>

src/components/navigation.js

@@ -15,11 +15,11 @@ export default function Navigation({isHome, module}) {
                         }
                     }
                 `} render={data => (
-                    <Link to="/" className={"logo" + (module == "home" ? " active" : "")}>{data.site.siteMetadata.title}</Link>
+                    <Link to="/" className={"logo" + (module === "home" ? " active" : "")}>{data.site.siteMetadata.title}</Link>
                 )} />
                 <div className="flexSpacer"></div>
-                <Link id="navBtnProjects" to="/projects" className={(module == "projects" ? "active" : "")}><Trans>projects</Trans></Link>
+                <Link id="navBtnProjects" to="/projects" className={(module === "projects" ? "active" : "")}><Trans>projects</Trans></Link>
-                <Link id="navBtnSocial" to="/social" className={(module == "social" ? "active" : "")}><Trans>social</Trans></Link>
+                <Link id="navBtnSocial" to="/social" className={(module === "social" ? "active" : "")}><Trans>social</Trans></Link>
             </nav>
         </div>
     );

src/pages/donate.js

@@ -12,7 +12,7 @@ export default function DonatePage() {
     const {t} = useI18next();
     const {language, path} = React.useContext(I18nextContext);
 
-    const { site } = useStaticQuery(
+    const { site, file } = useStaticQuery(
         graphql`
           query {
             site {
@@ -22,6 +22,13 @@ export default function DonatePage() {
                 payPalMail
               }
             }
+            file(relativePath: {eq: "images/pplogo.png"}) {
+                childImageSharp {
+                    resize(width: 240, height: 240, fit: CONTAIN) {
+                        src
+                    }
+                }
+            }
           }
         `
       )
@@ -40,7 +47,7 @@ export default function DonatePage() {
                         <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>
+                    <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+file.childImageSharp.resize.src))+"&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/thank-you.js

@@ -1,9 +1,22 @@
 import React from "react"
 import Layout from "../../layouts/default";
 import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
+import {useStaticQuery, graphql} from "gatsby";
 
 export default function ImprintPage() {
+    const { site } = useStaticQuery(
+        graphql`
+          query {
+            site {
+              siteMetadata {
+                contactEmail
+              }
+            }
+          }
+        `
+      )
 
+    let contactEmail = site.siteMetadata.contactEmail;
     const {t} = useI18next();
     return (
         <Layout module="donate" title={t("donate")}>
@@ -11,7 +24,7 @@ export default function ImprintPage() {
                 <article>
                     <h1><Trans>donateThanks</Trans></h1>
 
-                    <p></p>
+                    <p><Trans contactEmail={contactEmail} i18nKey="donateThanksText">donateThanksText<a href={"mailto:"+contactEmail}>{{contactEmail}}</a></Trans></p>
                 </article>
             </section>
         </Layout>

src/pages/index.js

@@ -4,10 +4,27 @@ import Layout from "../layouts/default"
 import styles from "./index.module.scss"
 
 import { Trans, Link } from "gatsby-plugin-react-i18next"
+import {graphql} from "gatsby";
+
+
+export const query = graphql`
+  query {
+    site {
+      siteMetadata {
+        contactEmail
+        contactPhone
+        mapsLink
+        contactTwitter
+        contactGitHub
+      }
+    }
+  }
+`;
 
-// markup
 class IndexPage extends React.Component {
   render() {
+    let meta = this.props.data.site.siteMetadata;
+
     return (
       <Layout title="Kevin Kandlbinder" module="home">
         <section className={styles.heroSection}>
@@ -20,11 +37,11 @@ class IndexPage extends React.Component {
               <span className={styles.description}><Trans>homeMe</Trans> <span id="descriptionType"><Trans>homeWebDeveloper</Trans></span>.</span>
   
               <div className={styles.contactLinks}>
-                <a className={styles.contactLink} href="tel:+4941068068004"><i className="fas fa-fw fa-phone"></i>+49 4106 8068004</a>
+                <a className={styles.contactLink} href={"tel:"+meta.contactPhone}><i className="fas fa-fw fa-phone"></i>{meta.contactPhone}</a>
-                <a className={styles.contactLink} href="mailto:kevin@kevink.dev?subject=%5Bkevink.dev%5D%20"><i className="far fa-fw fa-envelope"></i>kevin@kevink.dev</a>
+                <a className={styles.contactLink} href={"mailto:"+meta.contactEmail}><i className="far fa-fw fa-envelope"></i>{meta.contactEmail}</a>
-                <a className={styles.contactLink} href="https://goo.gl/maps/KVq9z1PVaVP2" rel="noopener" target="_blank"><i className="fas fa-fw fa-map-marker-alt"></i><Trans>homeMyLocation</Trans></a>
+                <a className={styles.contactLink} href={meta.mapsLink} rel="noopener" target="_blank"><i className="fas fa-fw fa-map-marker-alt"></i><Trans>homeMyLocation</Trans></a>
-                <a className={styles.contactLink} href="https://twitter.com/unkn0wnkevin" rel="noopener" target="_blank"><i className="fab fa-fw fa-twitter"></i>@Unkn0wnKevin</a>
+                <a className={styles.contactLink} href={"https://twitter.com/"+meta.contactTwitter} rel="noopener" target="_blank"><i className="fab fa-fw fa-twitter"></i>@{meta.contactTwitter}</a>
-                <a className={styles.contactLink} href="https://github.com/unkn0wncat" rel="noopener" target="_blank"><i className="fab fa-fw fa-github"></i>Unkn0wnCat</a>
+                <a className={styles.contactLink} href={"https://github.com/"+meta.contactGitHub} rel="noopener" target="_blank"><i className="fab fa-fw fa-github"></i>{meta.contactGitHub}</a>
               </div>
             </div>
           </div>