kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-05-29 16:56:35 +02:00
Code Issues Projects Releases Wiki Activity

Work around error intoduced in gatsby-plugin-sass@4.0.1

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-03-05 14:54:53 +00:00
parent f9014c7f83
commit 54bcb1b7a7
9 changed files with 551 additions and 548 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.vscode/settings.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"i18n-ally.localesPaths": "locales"
}

6
package-lock.json generated
View file

@ -12511,9 +12511,9 @@
} }
}, },
"gatsby-plugin-sass": { "gatsby-plugin-sass": {
"version": "4.0.1", "version": "4.0.0",
"resolved": "https://registry.npmjs.org/gatsby-plugin-sass/-/gatsby-plugin-sass-4.0.1.tgz", "resolved": "https://registry.npmjs.org/gatsby-plugin-sass/-/gatsby-plugin-sass-4.0.0.tgz",
"integrity": "sha512-QZiak/7eL58QUZy+y5zTlTWk+qiE/xtXa/eS+CvHP09hbxtGeVn2Ea3XQ9upHxM2TjKaWQJ00EjnKnoVKoxzVQ==", "integrity": "sha512-q2FIQFFU7FMgX8jMGUCsBMUcmdNdVertE1HnViiriB1x5FagUJUUJe9Z6Irq14h0LfSL2Z1Lg8iQzgxSX30djw==",
"requires": { "requires": {
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"resolve-url-loader": "^3.1.2", "resolve-url-loader": "^3.1.2",

2
package.json
View file

@ -31,7 +31,7 @@
"gatsby-plugin-react-helmet": "4.0.0", "gatsby-plugin-react-helmet": "4.0.0",
"gatsby-plugin-react-i18next": "1.0.4", "gatsby-plugin-react-i18next": "1.0.4",
"gatsby-plugin-robots-txt": "1.5.5", "gatsby-plugin-robots-txt": "1.5.5",
"gatsby-plugin-sass": "4.0.1", "gatsby-plugin-sass": "^4.0.0",
"gatsby-plugin-sharp": "3.0.0", "gatsby-plugin-sharp": "3.0.0",
"gatsby-plugin-sitemap": "3.0.0", "gatsby-plugin-sitemap": "3.0.0",
"gatsby-source-filesystem": "3.0.0", "gatsby-source-filesystem": "3.0.0",

136
src/pages/donate.js
View file

@ -1,69 +1,69 @@
import React, { useState } from "react" import React, { useState } from "react"
import Layout from "../layouts/default"; import Layout from "../layouts/default";
import { graphql } from "gatsby"; import { graphql } from "gatsby";
import { Trans, useI18next, I18nextContext } from "gatsby-plugin-react-i18next" import { Trans, useI18next, I18nextContext } from "gatsby-plugin-react-i18next"
import PropTypes from "prop-types" import PropTypes from "prop-types"
import styles from "./donate.module.scss"; import * as styles from "./donate.module.scss";
export const query = graphql` export const query = graphql`
query ($language: String!) { query ($language: String!) {
site { site {
siteMetadata { siteMetadata {
title title
siteUrl siteUrl
payPalMail payPalMail
} }
} }
file(relativePath: {eq: "images/pplogo.png"}) { file(relativePath: {eq: "images/pplogo.png"}) {
childImageSharp { childImageSharp {
resize(width: 240, height: 240, fit: CONTAIN) { resize(width: 240, height: 240, fit: CONTAIN) {
src src
} }
} }
} }
locales: allLocale(filter: {language: {eq: $language}}) { locales: allLocale(filter: {language: {eq: $language}}) {
edges { edges {
node { node {
ns ns
data data
language language
} }
} }
} }
} }
`; `;
function DonatePage(props) { function DonatePage(props) {
const [amount, setAmount] = useState(5); const [amount, setAmount] = useState(5);
const { t } = useI18next(); const { t } = useI18next();
const { path } = React.useContext(I18nextContext); const { path } = React.useContext(I18nextContext);
const { site, file } = props.data; const { site, file } = props.data;
return ( return (
<Layout module="donate" title={t("donate")} description={t("donationCatchphrase")}> <Layout module="donate" title={t("donate")} description={t("donationCatchphrase")}>
<section> <section>
<article> <article>
<h1><Trans>donate</Trans></h1> <h1><Trans>donate</Trans></h1>
<p><Trans>donateDescription</Trans></p> <p><Trans>donateDescription</Trans></p>
<div className={styles.priceAmount}> <div className={styles.priceAmount}>
<label htmlFor="priceInput" className={styles.sronly}>Amount</label> <label htmlFor="priceInput" className={styles.sronly}>Amount</label>
<input type="number" min="1" placeholder="10.00" step="1" value={amount} onChange={(ev) => { setAmount(ev.target.value) }} name="priceInput" id="priceInput" /> <input type="number" min="1" placeholder="10.00" step="1" value={amount} onChange={(ev) => { setAmount(ev.target.value) }} name="priceInput" id="priceInput" />
<div>€</div> <div>€</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 + 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 className="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 className="fas fa-fw fa-chevron-right" aria-hidden="true"></i></a>
</article> </article>
</section> </section>
</Layout> </Layout>
); );
} }
DonatePage.propTypes = { DonatePage.propTypes = {
data: PropTypes.object.isRequired data: PropTypes.object.isRequired
}; };
export default DonatePage; export default DonatePage;

164
src/pages/friends.js
View file

@ -1,83 +1,83 @@
import React from "react" import React from "react"
import Layout from "../layouts/default"; import Layout from "../layouts/default";
import { Trans, useI18next } from "gatsby-plugin-react-i18next" import { Trans, useI18next } from "gatsby-plugin-react-i18next"
import { graphql } from 'gatsby' import { graphql } from 'gatsby'
import PropTypes from "prop-types" import PropTypes from "prop-types"
import styles from "./friends.module.scss"; import * as styles from "./friends.module.scss";
export const query = graphql` export const query = graphql`
query AllFriendsQuery($language: String!) { query AllFriendsQuery($language: String!) {
allFriendsJson { allFriendsJson {
nodes { nodes {
name name
profession profession
url url
imageURL imageURL
} }
} }
locales: allLocale(filter: {language: {eq: $language}}) { locales: allLocale(filter: {language: {eq: $language}}) {
edges { edges {
node { node {
ns ns
data data
language language
} }
} }
} }
} }
` `
const FriendsPage = ({ data }) => { const FriendsPage = ({ data }) => {
const { t } = useI18next(); const { t } = useI18next();
function shuffle(a) { function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) { for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1)); const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]]; [a[i], a[j]] = [a[j], a[i]];
} }
return a; return a;
} }
return ( return (
<Layout module="social" title={t("friends")} description={t("friendsDescription")}> <Layout module="social" title={t("friends")} description={t("friendsDescription")}>
<section> <section>
<article> <article>
<h1><Trans>social</Trans></h1> <h1><Trans>social</Trans></h1>
<p><Trans>friendsDescription</Trans></p> <p><Trans>friendsDescription</Trans></p>
<div className={styles.friendsList}> <div className={styles.friendsList}>
{ {
shuffle(data.allFriendsJson.nodes).map((friend) => { shuffle(data.allFriendsJson.nodes).map((friend) => {
return ( return (
<div className={styles.friendProfile} key={friend.url + "#" + friend.name}> <div className={styles.friendProfile} key={friend.url + "#" + friend.name}>
<div className={styles.friendImage} style={{ backgroundImage: "url(" + friend.imageURL + ")" }}> <div className={styles.friendImage} style={{ backgroundImage: "url(" + friend.imageURL + ")" }}>
<span className={styles.friendName}>{friend.name}</span> <span className={styles.friendName}>{friend.name}</span>
<span className={styles.friendTitle}>{friend.profession}</span> <span className={styles.friendTitle}>{friend.profession}</span>
</div> </div>
{/*<span class="friendBio"></span>*/} {/*<span class="friendBio"></span>*/}
<div className={styles.contactLinks}> <div className={styles.contactLinks}>
<a className={styles.contactLink} href={friend.url} target="_blank" rel="noreferrer"><i className="fas fa-globe-europe" aria-hidden="true"></i> {friend.url}</a> <a className={styles.contactLink} href={friend.url} target="_blank" rel="noreferrer"><i className="fas fa-globe-europe" aria-hidden="true"></i> {friend.url}</a>
</div> </div>
</div> </div>
); );
}) })
} }
</div> </div>
{/*<pre>{JSON.stringify(data, null, 2)}</pre>*/} {/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
</article> </article>
</section> </section>
</Layout> </Layout>
); );
} }
FriendsPage.propTypes = { FriendsPage.propTypes = {
data: PropTypes.object.isRequired data: PropTypes.object.isRequired
}; };
export default FriendsPage; export default FriendsPage;

314
src/pages/index.js
View file

@ -1,157 +1,157 @@
import * as React from "react" import * as React from "react"
import Layout from "../layouts/default" import Layout from "../layouts/default"
import PropTypes from "prop-types" import PropTypes from "prop-types"
import styles from "./index.module.scss" import * as styles from "./index.module.scss"
import projectStyles from "./projects.module.scss" import * as projectStyles from "./projects.module.scss"
import { Trans, Link } from "gatsby-plugin-react-i18next" import { Trans, Link } from "gatsby-plugin-react-i18next"
import { graphql } from "gatsby"; import { graphql } from "gatsby";
import anime from "animejs"; import anime from "animejs";
export const query = graphql` export const query = graphql`
query GetMetaAndProjects($language: String) { query GetMetaAndProjects($language: String) {
site { site {
siteMetadata { siteMetadata {
contactEmail contactEmail
contactPhone contactPhone
mapsLink mapsLink
contactTwitter contactTwitter
contactGitHub contactGitHub
contactMastodon contactMastodon
contactMastodonHref contactMastodonHref
} }
} }
allProjectsJson(filter: {lang: {eq: $language}, featured: {gte: 0}}, sort: {fields: featured, order: ASC}) { allProjectsJson(filter: {lang: {eq: $language}, featured: {gte: 0}}, sort: {fields: featured, order: ASC}) {
nodes { nodes {
lang lang
urlname urlname
name name
image { image {
childImageSharp { childImageSharp {
resize(width: 400, quality: 90) { resize(width: 400, quality: 90) {
src src
} }
} }
} }
shortDescription shortDescription
featured featured
} }
} }
locales: allLocale(filter: {language: {eq: $language}}) { locales: allLocale(filter: {language: {eq: $language}}) {
edges { edges {
node { node {
ns ns
data data
language language
} }
} }
} }
} }
`; `;
class IndexPage extends React.Component { class IndexPage extends React.Component {
componentDidMount() { componentDidMount() {
anime({ anime({
targets: ["."+styles.profileCard+" > span", "."+styles.profileCard+" a"], targets: ["."+styles.profileCard+" > span", "."+styles.profileCard+" a"],
opacity: [0, 1], opacity: [0, 1],
translateX: [100, 0], translateX: [100, 0],
duration: 250, duration: 250,
delay: anime.stagger(20), delay: anime.stagger(20),
easing: 'easeInOutCirc' easing: 'easeInOutCirc'
}); });
anime({ anime({
targets: ["."+styles.profileImageDummy], targets: ["."+styles.profileImageDummy],
translateX: [0, -3], translateX: [0, -3],
translateY: [0, 3], translateY: [0, 3],
duration: 250, duration: 250,
easing: 'easeInOutCirc' easing: 'easeInOutCirc'
}); });
anime({ anime({
targets: ["."+styles.profileImage], targets: ["."+styles.profileImage],
translateX: [0, 4], translateX: [0, 4],
translateY: [0, -4], translateY: [0, -4],
duration: 250, duration: 250,
easing: 'easeInOutCirc' easing: 'easeInOutCirc'
}); });
} }
render() { render() {
let meta = this.props.data.site.siteMetadata; let meta = this.props.data.site.siteMetadata;
return ( return (
<Layout title="Kevin Kandlbinder" module="home" transparentTopbar={true}> <Layout title="Kevin Kandlbinder" module="home" transparentTopbar={true}>
<section className={styles.heroSection}> <section className={styles.heroSection}>
<div className={styles.profile + " profile"}> <div className={styles.profile + " profile"}>
<div data-bg="url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)" style={{ backgroundImage: "url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)" }} className={styles.profileImage + " lazy"}></div> <div data-bg="url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)" style={{ backgroundImage: "url(https://cdn.kevink.dev/images/kevin/kevin-kandlbinder-03.jpg)" }} className={styles.profileImage + " lazy"}></div>
<div className={styles.profileImageDummy}></div> <div className={styles.profileImageDummy}></div>
<div className={styles.profileCard}> <div className={styles.profileCard}>
<span className={styles.hello}><Trans>homeHello</Trans></span> <span className={styles.hello}><Trans>homeHello</Trans></span>
<span className={styles.name}>Kevin Kandlbinder</span> <span className={styles.name}>Kevin Kandlbinder</span>
<span className={styles.description}><Trans>homeMe</Trans> <span id="descriptionType"><Trans>homeWebDeveloper</Trans></span>.</span> <span className={styles.description}><Trans>homeMe</Trans> <span id="descriptionType"><Trans>homeWebDeveloper</Trans></span>.</span>
<div className={styles.contactLinks}> <div className={styles.contactLinks}>
<a className={styles.contactLink} href={"tel:" + meta.contactPhone} rel="me"><i className="fas fa-fw fa-phone"></i>{meta.contactPhone}</a> <a className={styles.contactLink} href={"tel:" + meta.contactPhone} rel="me"><i className="fas fa-fw fa-phone"></i>{meta.contactPhone}</a>
<a className={styles.contactLink} href={"mailto:" + meta.contactEmail} rel="me"><i className="far fa-fw fa-envelope"></i>{meta.contactEmail}</a> <a className={styles.contactLink} href={"mailto:" + meta.contactEmail} rel="me"><i className="far fa-fw fa-envelope"></i>{meta.contactEmail}</a>
<a className={styles.contactLink} href={meta.mapsLink} rel="noreferrer " target="_blank"><i className="fas fa-fw fa-map-marker-alt"></i><Trans>homeMyLocation</Trans></a> <a className={styles.contactLink} href={meta.mapsLink} rel="noreferrer " target="_blank"><i className="fas fa-fw fa-map-marker-alt"></i><Trans>homeMyLocation</Trans></a>
<a className={styles.contactLink} href={meta.contactMastodonHref} rel="noreferrer me" target="_blank"><i className="fab fa-fw fa-mastodon"></i>{meta.contactMastodon}</a> <a className={styles.contactLink} href={meta.contactMastodonHref} rel="noreferrer me" target="_blank"><i className="fab fa-fw fa-mastodon"></i>{meta.contactMastodon}</a>
<a className={styles.contactLink} href={"https://github.com/" + meta.contactGitHub} rel="noreferrer me" target="_blank"><i className="fab fa-fw fa-github"></i>{meta.contactGitHub}</a> <a className={styles.contactLink} href={"https://github.com/" + meta.contactGitHub} rel="noreferrer me" target="_blank"><i className="fab fa-fw fa-github"></i>{meta.contactGitHub}</a>
</div> </div>
</div> </div>
</div> </div>
</section> </section>
<section className="aboutSection"> <section className="aboutSection">
<article> <article>
<h1><Trans>homeAboutMe</Trans></h1> <h1><Trans>homeAboutMe</Trans></h1>
<p><Trans>homeAboutMeHello</Trans><br /><Trans>homeAboutMeText</Trans></p> <p><Trans>homeAboutMeHello</Trans><br /><Trans>homeAboutMeText</Trans></p>
</article> </article>
</section> </section>
<a className={styles.creditSection} href="https://unsplash.com/@jannikkiel" target="_blank" rel="noreferrer"> <a className={styles.creditSection} href="https://unsplash.com/@jannikkiel" target="_blank" rel="noreferrer">
<div> <div>
<span><i className="fas fa-fw fa-camera"></i> <Trans>homeImageCredit</Trans></span> <span><i className="fas fa-fw fa-camera"></i> <Trans>homeImageCredit</Trans></span>
<i className="fas fa-fw fa-chevron-right"></i> <i className="fas fa-fw fa-chevron-right"></i>
</div> </div>
</a> </a>
<section className="featuredSection"> <section className="featuredSection">
<article> <article>
<h1><Trans>featuredProjects</Trans></h1> <h1><Trans>featuredProjects</Trans></h1>
<div className={projectStyles.projectList}> <div className={projectStyles.projectList}>
{this.props.data.allProjectsJson.nodes.map((project) => { {this.props.data.allProjectsJson.nodes.map((project) => {
return ( return (
<Link className={projectStyles.projectCard} key={project.lang + "/" + project.urlname} to={"/projects/" + project.urlname}> <Link className={projectStyles.projectCard} key={project.lang + "/" + project.urlname} to={"/projects/" + project.urlname}>
{/*<div className="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/} {/*<div className="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/}
<div className={projectStyles.projectCardImage} style={{ backgroundImage: "url(" + project.image.childImageSharp.resize.src + ")" }}> <div className={projectStyles.projectCardImage} style={{ backgroundImage: "url(" + project.image.childImageSharp.resize.src + ")" }}>
<div className={projectStyles.projectCardMeta}> <div className={projectStyles.projectCardMeta}>
<span className={projectStyles.projectCardTitle}>{project.name}</span> <span className={projectStyles.projectCardTitle}>{project.name}</span>
<span className={projectStyles.projectCardTeaser}>{project.shortDescription}</span> <span className={projectStyles.projectCardTeaser}>{project.shortDescription}</span>
</div> </div>
</div> </div>
{/*<div className={projectStyles.projectCardCTAContainer}> {/*<div className={projectStyles.projectCardCTAContainer}>
<div className={projectStyles.projectCardCTA}><Link to={"/projects/" + project.urlname}><Trans>projectView</Trans></Link></div> <div className={projectStyles.projectCardCTA}><Link to={"/projects/" + project.urlname}><Trans>projectView</Trans></Link></div>
</div>*/} </div>*/}
</Link> </Link>
); );
})} })}
</div> </div>
<Link to="/projects" className={styles.seeMoreButton}><Trans>seeMore</Trans> <i className="fas fa-fw fa-chevron-right"></i></Link> <Link to="/projects" className={styles.seeMoreButton}><Trans>seeMore</Trans> <i className="fas fa-fw fa-chevron-right"></i></Link>
</article> </article>
</section> </section>
<Link className={styles.donationSection} to="/donate"> <Link className={styles.donationSection} to="/donate">
<div> <div>
<span><Trans>donationCatchphrase</Trans></span> <span><Trans>donationCatchphrase</Trans></span>
<i className="fas fa-fw fa-chevron-right"></i> <i className="fas fa-fw fa-chevron-right"></i>
</div> </div>
</Link> </Link>
</Layout> </Layout>
) )
} }
} }
IndexPage.propTypes = { IndexPage.propTypes = {
data: PropTypes.object.isRequired data: PropTypes.object.isRequired
} }
export default IndexPage export default IndexPage

158
src/pages/projects.js
View file

@ -1,80 +1,80 @@
import React from "react" import React from "react"
import Layout from "../layouts/default"; import Layout from "../layouts/default";
import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next" import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
import { graphql } from 'gatsby' import { graphql } from 'gatsby'
import PropTypes from "prop-types" import PropTypes from "prop-types"
import styles from "./projects.module.scss"; import * as styles from "./projects.module.scss";
export const query = graphql` export const query = graphql`
query GetProjects($language: String) { query GetProjects($language: String) {
allProjectsJson(filter: {lang: {eq: $language}}) { allProjectsJson(filter: {lang: {eq: $language}}) {
nodes { nodes {
lang lang
urlname urlname
name name
image { image {
childImageSharp { childImageSharp {
resize(width: 400, quality: 90) { resize(width: 400, quality: 90) {
src src
} }
} }
} }
shortDescription shortDescription
} }
} }
locales: allLocale(filter: {language: {eq: $language}}) { locales: allLocale(filter: {language: {eq: $language}}) {
edges { edges {
node { node {
ns ns
data data
language language
} }
} }
} }
} }
` `
const ProjectsPage = ({ data }) => { const ProjectsPage = ({ data }) => {
const { t } = useI18next(); const { t } = useI18next();
return ( return (
<Layout module="projects" title={t("projects")} description={t("projectsDescription")}> <Layout module="projects" title={t("projects")} description={t("projectsDescription")}>
<section> <section>
<article> <article>
<h1><Trans>projects</Trans></h1> <h1><Trans>projects</Trans></h1>
<p><Trans>projectsDescription</Trans></p> <p><Trans>projectsDescription</Trans></p>
<div className={styles.projectList}> <div className={styles.projectList}>
{data.allProjectsJson.nodes.map((project) => { {data.allProjectsJson.nodes.map((project) => {
return ( return (
<Link className={styles.projectCard} key={project.lang + project.urlname} to={"/projects/" + project.urlname}> <Link className={styles.projectCard} key={project.lang + project.urlname} to={"/projects/" + project.urlname}>
{/*<div className="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/} {/*<div className="projectCardActivityIndicator activityIndicatorBlue">Live</div>*/}
<div className={styles.projectCardImage} style={{ backgroundImage: "url(" + project.image.childImageSharp.resize.src + ")" }}> <div className={styles.projectCardImage} style={{ backgroundImage: "url(" + project.image.childImageSharp.resize.src + ")" }}>
<div className={styles.projectCardMeta}> <div className={styles.projectCardMeta}>
<span className={styles.projectCardTitle}>{project.name}</span> <span className={styles.projectCardTitle}>{project.name}</span>
<span className={styles.projectCardTeaser}>{project.shortDescription}</span> <span className={styles.projectCardTeaser}>{project.shortDescription}</span>
</div> </div>
</div> </div>
{/*<div className={styles.projectCardCTAContainer}> {/*<div className={styles.projectCardCTAContainer}>
<div className={styles.projectCardCTA}><Link to={"/projects/" + project.urlname}><Trans>projectView</Trans></Link></div> <div className={styles.projectCardCTA}><Link to={"/projects/" + project.urlname}><Trans>projectView</Trans></Link></div>
</div>*/} </div>*/}
</Link> </Link>
); );
})} })}
</div> </div>
{/*<pre>{JSON.stringify(data, null, 2)}</pre>*/} {/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
</article> </article>
</section> </section>
</Layout> </Layout>
); );
} }
ProjectsPage.propTypes = { ProjectsPage.propTypes = {
data: PropTypes.object data: PropTypes.object
} }
export default ProjectsPage; export default ProjectsPage;

134
src/pages/social.js
View file

@ -1,68 +1,68 @@
import React from "react" import React from "react"
import Layout from "../layouts/default"; import Layout from "../layouts/default";
import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next" import { Trans, Link, useI18next } from "gatsby-plugin-react-i18next"
import { graphql } from 'gatsby' import { graphql } from 'gatsby'
import PropTypes from "prop-types" import PropTypes from "prop-types"
import styles from "./social.module.scss"; import * as styles from "./social.module.scss";
export const query = graphql` export const query = graphql`
query AllSocialsQuery($language: String!) { query AllSocialsQuery($language: String!) {
allSocialsJson { allSocialsJson {
nodes { nodes {
image image
platformHandle platformHandle
platformName platformName
url url
} }
} }
locales: allLocale(filter: {language: {eq: $language}}) { locales: allLocale(filter: {language: {eq: $language}}) {
edges { edges {
node { node {
ns ns
data data
language language
} }
} }
} }
} }
` `
const SocialPage = ({ data }) => { const SocialPage = ({ data }) => {
const { t } = useI18next(); const { t } = useI18next();
return ( return (
<Layout module="social" title={t("social")} description={t("socialDescription")}> <Layout module="social" title={t("social")} description={t("socialDescription")}>
<section> <section>
<article> <article>
<h1><Trans>social</Trans></h1> <h1><Trans>social</Trans></h1>
<p><Trans i18nKey="socialDescriptionWithLink">socialDescriptionWith<Link to="/friends">Link</Link></Trans></p> <p><Trans i18nKey="socialDescriptionWithLink">socialDescriptionWith<Link to="/friends">Link</Link></Trans></p>
<div className={styles.socialList}> <div className={styles.socialList}>
{ {
data.allSocialsJson.nodes.map((social) => { data.allSocialsJson.nodes.map((social) => {
return ( return (
<a className={styles.socialCard} href={social.url} target="_blank" rel="noreferrer me" key={social.url}> <a className={styles.socialCard} href={social.url} target="_blank" rel="noreferrer me" key={social.url}>
<div className={styles.socialImage} style={{ backgroundImage: "url(" + social.image + ")" }}> <div className={styles.socialImage} style={{ backgroundImage: "url(" + social.image + ")" }}>
<span className={styles.socialName}>{social.platformName}</span> <span className={styles.socialName}>{social.platformName}</span>
<span className={styles.socialUsername}>{social.platformHandle}</span> <span className={styles.socialUsername}>{social.platformHandle}</span>
</div> </div>
</a> </a>
); );
}) })
} }
</div> </div>
{/*<pre>{JSON.stringify(data, null, 2)}</pre>*/} {/*<pre>{JSON.stringify(data, null, 2)}</pre>*/}
</article> </article>
</section> </section>
</Layout> </Layout>
); );
} }
SocialPage.propTypes = { SocialPage.propTypes = {
data: PropTypes.object.isRequired data: PropTypes.object.isRequired
}; };
export default SocialPage; export default SocialPage;

182
src/templates/project.js
View file

@ -1,92 +1,92 @@
import React from "react" import React from "react"
import { graphql } from "gatsby" import { graphql } from "gatsby"
import { Trans, useTranslation } from 'gatsby-plugin-react-i18next'; import { Trans, useTranslation } from 'gatsby-plugin-react-i18next';
import Layout from "../layouts/default"; import Layout from "../layouts/default";
import PropTypes from "prop-types" import PropTypes from "prop-types"
import styles from "./project.module.scss"; import * as styles from "./project.module.scss";
export const query = graphql` export const query = graphql`
query GetProject($urlname: String!, $lang: String!, $language: String!) { query GetProject($urlname: String!, $lang: String!, $language: String!) {
allProjectsJson(filter: {urlname: {eq: $urlname}, lang: {eq: $lang}}) { allProjectsJson(filter: {urlname: {eq: $urlname}, lang: {eq: $lang}}) {
nodes { nodes {
lang lang
urlname urlname
name name
links { links {
github github
website website
} }
image { image {
publicURL publicURL
} }
longDescription longDescription
shortDescription shortDescription
} }
} }
locales: allLocale(filter: {language: {eq: $language}}) { locales: allLocale(filter: {language: {eq: $language}}) {
edges { edges {
node { node {
ns ns
data data
language language
} }
} }
} }
} }
` `
const ProjectTemplate = ({ data }) => { const ProjectTemplate = ({ data }) => {
const { t } = useTranslation(); const { t } = useTranslation();
let project = data.allProjectsJson.nodes[0]; let project = data.allProjectsJson.nodes[0];
let projectName = project.name; let projectName = project.name;
return ( return (
<Layout description={project.shortDescription} title={t("project") + ": " + projectName} transparentTopbar={true}> <Layout description={project.shortDescription} title={t("project") + ": " + projectName} transparentTopbar={true}>
<section className={styles.projectHeader}> <section className={styles.projectHeader}>
<div style={{ paddingTop: 0 }}> <div style={{ paddingTop: 0 }}>
<div className={styles.headerBackground} style={{ backgroundImage: "url(" + project.image.publicURL + ")" }}></div> <div className={styles.headerBackground} style={{ backgroundImage: "url(" + project.image.publicURL + ")" }}></div>
<header> <header>
<div className={styles.headerInner}> <div className={styles.headerInner}>
<h1><Trans>project</Trans>: {projectName}</h1> <h1><Trans>project</Trans>: {projectName}</h1>
<span className={styles.postMeta}>{project.shortDescription}</span> <span className={styles.postMeta}>{project.shortDescription}</span>
</div> </div>
</header> </header>
<div className={styles.headerPlaceholder}></div> <div className={styles.headerPlaceholder}></div>
</div> </div>
</section> </section>
{project.longDescription != null ? {project.longDescription != null ?
<section className={styles.projectAbout}> <section className={styles.projectAbout}>
<article> <article>
<h1><Trans projectName={projectName} i18nKey="projectAboutHeader">projectAboutHeader{{ projectName }}</Trans></h1> <h1><Trans projectName={projectName} i18nKey="projectAboutHeader">projectAboutHeader{{ projectName }}</Trans></h1>
<p>{project.longDescription}</p> <p>{project.longDescription}</p>
</article> </article>
</section> </section>
: null} : null}
{project.links !== null ? {project.links !== null ?
<section className={styles.projectLinks}> <section className={styles.projectLinks}>
<div> <div>
<h1>Links</h1> <h1>Links</h1>
<div className={styles.linkList}> <div className={styles.linkList}>
{project.links.github !== null ? <a href={project.links.github} target="_blank" rel="noreferrer"><i className="fab fa-github" aria-hidden="true"></i> <Trans>projectViewGitHub</Trans></a> : null} {project.links.github !== null ? <a href={project.links.github} target="_blank" rel="noreferrer"><i className="fab fa-github" aria-hidden="true"></i> <Trans>projectViewGitHub</Trans></a> : null}
{project.links.website !== null ? <a href={project.links.website} target="_blank" rel="noreferrer"><i className="fas fa-external-link-alt" aria-hidden="true"></i> <Trans>projectViewWebsite</Trans></a> : null} {project.links.website !== null ? <a href={project.links.website} target="_blank" rel="noreferrer"><i className="fas fa-external-link-alt" aria-hidden="true"></i> <Trans>projectViewWebsite</Trans></a> : null}
</div> </div>
</div> </div>
</section> </section>
: null} : null}
{/*<section> {/*<section>
<div> <div>
<pre>{JSON.stringify(data, null, 2)}</pre> <pre>{JSON.stringify(data, null, 2)}</pre>
</div> </div>
</section>*/} </section>*/}
</Layout> </Layout>
); );
} }
ProjectTemplate.propTypes = { ProjectTemplate.propTypes = {
data: PropTypes.object.isRequired data: PropTypes.object.isRequired
} }
export default ProjectTemplate; export default ProjectTemplate;