mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-07-30 06:38:57 +02:00
Run prettier on code
This commit is contained in:
GitHub
parent
d542206091
commit
b8057f0e25
51 changed files with 28270 additions and 26529 deletions
|
|
@ -1,40 +1,42 @@
|
|||
import React from "react"
|
||||
import { graphql } from "gatsby"
|
||||
import { Trans, useTranslation } from 'gatsby-plugin-react-i18next';
|
||||
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 PropTypes from "prop-types";
|
||||
|
||||
import * as styles from "./project.module.scss";
|
||||
|
||||
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
|
||||
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
|
||||
}
|
||||
longDescription
|
||||
shortDescription
|
||||
}
|
||||
image {
|
||||
publicURL
|
||||
}
|
||||
longDescription
|
||||
shortDescription
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: {language: {eq: $language}}) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
`;
|
||||
|
||||
const ProjectTemplate = ({ data }) => {
|
||||
const { t } = useTranslation();
|
||||
|
|
@ -42,45 +44,74 @@ const ProjectTemplate = ({ data }) => {
|
|||
let projectName = project.name;
|
||||
|
||||
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}>
|
||||
<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>
|
||||
<div className={styles.headerInner}>
|
||||
<h1><Trans>project</Trans>: {projectName}</h1>
|
||||
<h1>
|
||||
<Trans>project</Trans>: {projectName}
|
||||
</h1>
|
||||
<span>{project.shortDescription}</span>
|
||||
</div>
|
||||
</header>
|
||||
<div className={styles.headerPlaceholder}></div>
|
||||
</div>
|
||||
</section>
|
||||
{project.longDescription != null ?
|
||||
{project.longDescription != null ? (
|
||||
<section className={styles.projectAbout}>
|
||||
<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>
|
||||
</article>
|
||||
</section>
|
||||
: null}
|
||||
{project.links !== null ?
|
||||
) : 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}
|
||||
|
||||
{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}
|
||||
) : null}
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
ProjectTemplate.propTypes = {
|
||||
data: PropTypes.object.isRequired
|
||||
}
|
||||
data: PropTypes.object.isRequired,
|
||||
};
|
||||
|
||||
export default ProjectTemplate;
|
||||
export default ProjectTemplate;
|
||||
|
|
|
|||
|
|
@ -1,92 +1,99 @@
|
|||
@import "../variables";
|
||||
|
||||
.projectHeader {
|
||||
>div {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.headerBackground {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background: linear-gradient(to bottom, rgba($background, .95), rgba($background, .25) 20%, rgba($background, .35) 80%, rgba($background, 1) 100%);
|
||||
|
||||
.headerInner {
|
||||
max-width: $layoutWidth;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-shadow: 0 0 10px black, 0 0 20px black;
|
||||
padding: 10px 20px;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.headerPlaceholder {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.projectAbout, .projectLinks {
|
||||
&:nth-of-type(2) {
|
||||
> div, > article {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.projectAbout {
|
||||
background: #060606;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.projectLinks {
|
||||
.linkList {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
border: thin solid rgb(200, 200, 200);
|
||||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
margin: 5px;
|
||||
color: $textColor;
|
||||
text-decoration-skip: none;
|
||||
text-decoration: underline dotted currentColor;
|
||||
|
||||
i.fab,
|
||||
i.fas,
|
||||
i.fa,
|
||||
i.far,
|
||||
i.fal {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
@import "../variables";
|
||||
|
||||
.projectHeader {
|
||||
> div {
|
||||
padding-bottom: 0 !important;
|
||||
}
|
||||
|
||||
.headerBackground {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
header {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
background: linear-gradient(
|
||||
to bottom,
|
||||
rgba($background, 0.95),
|
||||
rgba($background, 0.25) 20%,
|
||||
rgba($background, 0.35) 80%,
|
||||
rgba($background, 1) 100%
|
||||
);
|
||||
|
||||
.headerInner {
|
||||
max-width: $layoutWidth;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
text-shadow: 0 0 10px black, 0 0 20px black;
|
||||
padding: 10px 20px;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
color: white;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.2em;
|
||||
margin-top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.headerPlaceholder {
|
||||
width: 100%;
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
|
||||
.projectAbout,
|
||||
.projectLinks {
|
||||
&:nth-of-type(2) {
|
||||
> div,
|
||||
> article {
|
||||
padding-top: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.projectAbout {
|
||||
background: #060606;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.projectLinks {
|
||||
.linkList {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
border: thin solid rgb(200, 200, 200);
|
||||
border-radius: 5px;
|
||||
padding: 10px 15px;
|
||||
margin: 5px;
|
||||
color: $textColor;
|
||||
text-decoration-skip: none;
|
||||
text-decoration: underline dotted currentColor;
|
||||
|
||||
i.fab,
|
||||
i.fas,
|
||||
i.fa,
|
||||
i.far,
|
||||
i.fal {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue