kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-06-02 10:42:09 +02:00
Code Issues Projects Releases Wiki Activity

Configure & Run prettier

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-07-25 13:03:57 +00:00 • committed by GitHub
parent 79ab0bb9af
commit 420f8930fd
66 changed files with 31825 additions and 31500 deletions
Download patch file Download diff file Expand all files Collapse all files

250
src/templates/project.js
View file

@ -1,122 +1,128 @@
import React from "react";
import { graphql } from "gatsby";
import { Trans, useTranslation } from "gatsby-plugin-react-i18next";
import Layout from "../layouts/default";
import PropTypes from "prop-types";
import * as styles from "./project.module.scss";
import { MDXRenderer } from "gatsby-plugin-mdx";
export const query = graphql`
query GetProject($urlname: String!, $lang: String!, $language: String!) {
allProjectsJson(
filter: { urlname: { eq: $urlname }, lang: { eq: $lang } }
) {
nodes {
lang
urlname
name
links {
github
website
}
image {
publicURL
}
shortDescription
}
}
locales: allLocale(filter: { language: { eq: $language } }) {
edges {
node {
ns
data
language
}
}
}
file(
sourceInstanceName: {eq: "projectTextblocks"}, relativeDirectory: {eq: $urlname}, name: {eq: $language}
) {
id
childMdx {
body
}
name
}
}
`;
const ProjectTemplate = ({ data }) => {
const { t } = useTranslation();
let project = data.allProjectsJson.nodes[0];
let projectName = project.name;
let file = data.file;
return (
<Layout
description={project.shortDescription}
title={t("project") + ": " + projectName}
transparentTopbar={true}
>
<section className={styles.projectHeader}>
<div style={{ paddingTop: 0 }}>
<div
className={styles.headerBackground}
style={{ backgroundImage: "url(" + project.image.publicURL + ")" }}
></div>
<header>
<div className={styles.headerInner}>
<h1>
<Trans>project</Trans>: {projectName}
</h1>
<span>{project.shortDescription}</span>
</div>
</header>
<div className={styles.headerPlaceholder}></div>
</div>
</section>
{file != null && file.childMdx != null ? (
<section className={styles.projectAbout}>
<article>
<MDXRenderer>{file.childMdx.body}</MDXRenderer>
</article>
</section>
) : null}
{project.links !== null ? (
<section className={styles.projectLinks}>
<div>
<h1>Links</h1>
<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.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>
</section>
) : null}
</Layout>
);
};
ProjectTemplate.propTypes = {
data: PropTypes.object.isRequired,
};
export default ProjectTemplate;
import React from "react";
import { graphql } from "gatsby";
import { Trans, useTranslation } from "gatsby-plugin-react-i18next";
import Layout from "../layouts/default";
import PropTypes from "prop-types";
import * as styles from "./project.module.scss";
import { MDXRenderer } from "gatsby-plugin-mdx";
export const query = graphql`
query GetProject($urlname: String!, $lang: String!, $language: String!) {
allProjectsJson(
filter: { urlname: { eq: $urlname }, lang: { eq: $lang } }
) {
nodes {
lang
urlname
name
links {
github
website
}
image {
publicURL
}
shortDescription
}
}
locales: allLocale(filter: { language: { eq: $language } }) {
edges {
node {
ns
data
language
}
}
}
file(
sourceInstanceName: { eq: "projectTextblocks" }
relativeDirectory: { eq: $urlname }
name: { eq: $language }
) {
id
childMdx {
body
}
name
}
}
`;
const ProjectTemplate = ({ data }) => {
const { t } = useTranslation();
let project = data.allProjectsJson.nodes[0];
let projectName = project.name;
let file = data.file;
return (
<Layout
description={project.shortDescription}
title={t("project") + ": " + projectName}
transparentTopbar={true}>
<section className={styles.projectHeader}>
<div style={{ paddingTop: 0 }}>
<div
className={styles.headerBackground}
style={{
backgroundImage:
"url(" + project.image.publicURL + ")",
}}></div>
<header>
<div className={styles.headerInner}>
<h1>
<Trans>project</Trans>: {projectName}
</h1>
<span>{project.shortDescription}</span>
</div>
</header>
<div className={styles.headerPlaceholder}></div>
</div>
</section>
{file != null && file.childMdx != null ? (
<section className={styles.projectAbout}>
<article>
<MDXRenderer>{file.childMdx.body}</MDXRenderer>
</article>
</section>
) : null}
{project.links !== null ? (
<section className={styles.projectLinks}>
<div>
<h1>Links</h1>
<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.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>
</section>
) : null}
</Layout>
);
};
ProjectTemplate.propTypes = {
data: PropTypes.object.isRequired,
};
export default ProjectTemplate;