mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-05-12 08:26:56 +02:00
Add donation module
This commit is contained in:
parent
45ed006faf
commit
bcfc8817ec
12 changed files with 198 additions and 35 deletions
|
|
@ -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"]
|
||||
|
|
|
|||
|
|
@ -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`,
|
||||
|
|
|
|||
|
|
@ -1,29 +1,31 @@
|
|||
{
|
||||
"siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.",
|
||||
"imprint": "Imprint",
|
||||
"datasec": "Data Protection",
|
||||
"disclaimer": "Disclaimer",
|
||||
"projects": "Projects",
|
||||
"project": "Project",
|
||||
"social": "Social",
|
||||
"homeHello": "Hello, I am",
|
||||
"homeMe": "I am",
|
||||
"homeWebDeveloper": "a web developer",
|
||||
"homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
|
||||
"homeAboutMe": "About me",
|
||||
"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.",
|
||||
"donationCatchphrase": "Like what you're seeing? Consider donating.",
|
||||
"homeImageCredit": "Portrait taken by Jannik Kiel",
|
||||
"de": "German",
|
||||
"en": "English",
|
||||
"projectAboutHeader": "About {{projectName}}",
|
||||
"projectViewGitHub": "View on GitHub",
|
||||
"projectViewWebsite": "View Project-Website",
|
||||
"projectsDescription": "This is what I am working on or have worked on.",
|
||||
"projectView": "View",
|
||||
"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."
|
||||
}
|
||||
"siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.",
|
||||
"imprint": "Imprint",
|
||||
"datasec": "Data Protection",
|
||||
"disclaimer": "Disclaimer",
|
||||
"projects": "Projects",
|
||||
"project": "Project",
|
||||
"social": "Social",
|
||||
"homeHello": "Hello, I am",
|
||||
"homeMe": "I am",
|
||||
"homeWebDeveloper": "a web developer",
|
||||
"homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
|
||||
"homeAboutMe": "About me",
|
||||
"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.",
|
||||
"donationCatchphrase": "Like what you're seeing? Consider donating.",
|
||||
"homeImageCredit": "Portrait taken by Jannik Kiel",
|
||||
"de": "German",
|
||||
"en": "English",
|
||||
"projectAboutHeader": "About {{projectName}}",
|
||||
"projectViewGitHub": "View on GitHub",
|
||||
"projectViewWebsite": "View Project-Website",
|
||||
"projectsDescription": "This is what I am working on or have worked on.",
|
||||
"projectView": "View",
|
||||
"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.",
|
||||
"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."
|
||||
}
|
||||
|
|
|
|||
48
package-lock.json
generated
48
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -34,6 +34,11 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
|
||||
@mixin button {
|
||||
@include buttonBasic;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
@mixin homeBanner {
|
||||
background: #10141e;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
48
src/pages/donate.js
Normal file
48
src/pages/donate.js
Normal file
|
|
@ -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)+"¤cy_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>
|
||||
);
|
||||
}
|
||||
41
src/pages/donate.module.scss
Normal file
41
src/pages/donate.module.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
|
||||
19
src/pages/donate/thank-you.js
Normal file
19
src/pages/donate/thank-you.js
Normal file
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
|
@ -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>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -21,10 +21,6 @@
|
|||
max-height: 400px;
|
||||
transform: translate(-50%, 0%);
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
&:hover .profileImage {
|
||||
transform: translate(4px, -4px);
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue