mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-05-22 13:26:31 +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`,
|
||||
|
|
|
@ -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."
|
||||
}
|
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 ![]() (image error) 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