mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-06-18 10:32:04 +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,25 +1,31 @@
|
|||
import React from "react"
|
||||
import { Link, Trans, useI18next } from 'gatsby-plugin-react-i18next';
|
||||
import React from "react";
|
||||
import { Link, Trans, useI18next } from "gatsby-plugin-react-i18next";
|
||||
|
||||
import * as styles from "./languageSwitcher.module.scss";
|
||||
|
||||
export default function LanguageSwitcher() {
|
||||
const { languages, originalPath } = useI18next();
|
||||
const { languages, originalPath } = useI18next();
|
||||
|
||||
return (
|
||||
<div className={styles.languageModal} id="languageChooser">
|
||||
<div className={styles.languageModalInner}>
|
||||
<h2>Languages (<a href="#top" className={styles.modalCloseLink}>×</a>)</h2>
|
||||
<ul>
|
||||
{languages.map((lng) => (
|
||||
<li key={lng}>
|
||||
<Link to={originalPath} language={lng}>
|
||||
<Trans>{lng}</Trans>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div className={styles.languageModal} id="languageChooser">
|
||||
<div className={styles.languageModalInner}>
|
||||
<h2>
|
||||
Languages (
|
||||
<a href="#top" className={styles.modalCloseLink}>
|
||||
×
|
||||
</a>
|
||||
)
|
||||
</h2>
|
||||
<ul>
|
||||
{languages.map((lng) => (
|
||||
<li key={lng}>
|
||||
<Link to={originalPath} language={lng}>
|
||||
<Trans>{lng}</Trans>
|
||||
</Link>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,11 +7,11 @@
|
|||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, .7);
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
z-index: 1000;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .25s;
|
||||
transition: opacity 0.25s;
|
||||
|
||||
&:target {
|
||||
opacity: 1;
|
||||
|
|
@ -33,10 +33,9 @@
|
|||
color: white;
|
||||
text-decoration-style: dotted;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.modalCloseLink {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,26 +1,26 @@
|
|||
import React, { useEffect, useState } from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import { Trans, Link } from "gatsby-plugin-react-i18next"
|
||||
import { graphql, StaticQuery } from 'gatsby'
|
||||
import React, { useEffect, useState } from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { Trans, Link } from "gatsby-plugin-react-i18next";
|
||||
import { graphql, StaticQuery } from "gatsby";
|
||||
|
||||
import * as styles from './navigation.module.scss'
|
||||
import * as styles from "./navigation.module.scss";
|
||||
|
||||
const Navigation = ({ isHome }) => {
|
||||
let [atTop, setAtTop] = useState(false);
|
||||
|
||||
const updateTransparency = () => {
|
||||
if(typeof window === "undefined") return;
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
if (window.scrollY < 15) {
|
||||
if(!atTop) setAtTop(true);
|
||||
if (!atTop) setAtTop(true);
|
||||
} else {
|
||||
if(atTop) setAtTop(false);
|
||||
if (atTop) setAtTop(false);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if(typeof window === "undefined") return;
|
||||
if (typeof window === "undefined") return;
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
window.addEventListener("scroll", updateTransparency);
|
||||
|
|
@ -30,7 +30,7 @@ const Navigation = ({ isHome }) => {
|
|||
updateTransparency();
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
let int = window.setInterval(updateTransparency, 10000)
|
||||
let int = window.setInterval(updateTransparency, 10000);
|
||||
|
||||
return () => {
|
||||
// eslint-disable-next-line no-undef
|
||||
|
|
@ -40,33 +40,52 @@ const Navigation = ({ isHome }) => {
|
|||
|
||||
// eslint-disable-next-line no-undef
|
||||
window.clearInterval(int);
|
||||
}
|
||||
};
|
||||
});
|
||||
|
||||
return (
|
||||
<div className={styles.topBar + (isHome ? " "+styles.homeBar : "") + (atTop ? " "+styles.homeBarTransparent : "")}>
|
||||
<nav className={styles.topBarInner}>
|
||||
<StaticQuery query={graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
`} render={data => (
|
||||
<Link to="/" activeClassName={styles.active}>{data.site.siteMetadata.title}</Link>
|
||||
)} />
|
||||
<div className="flexSpacer"></div>
|
||||
<Link id="navBtnProjects" to="/projects" activeClassName={styles.active}><Trans>projects</Trans></Link>
|
||||
<Link id="navBtnSocial" to="/social" activeClassName={styles.active}><Trans>social</Trans></Link>
|
||||
</nav>
|
||||
</div>
|
||||
<div
|
||||
className={
|
||||
styles.topBar +
|
||||
(isHome ? " " + styles.homeBar : "") +
|
||||
(atTop ? " " + styles.homeBarTransparent : "")
|
||||
}
|
||||
>
|
||||
<nav className={styles.topBarInner}>
|
||||
<StaticQuery
|
||||
query={graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
}
|
||||
}
|
||||
}
|
||||
`}
|
||||
render={(data) => (
|
||||
<Link to="/" activeClassName={styles.active}>
|
||||
{data.site.siteMetadata.title}
|
||||
</Link>
|
||||
)}
|
||||
/>
|
||||
<div className="flexSpacer"></div>
|
||||
<Link
|
||||
id="navBtnProjects"
|
||||
to="/projects"
|
||||
activeClassName={styles.active}
|
||||
>
|
||||
<Trans>projects</Trans>
|
||||
</Link>
|
||||
<Link id="navBtnSocial" to="/social" activeClassName={styles.active}>
|
||||
<Trans>social</Trans>
|
||||
</Link>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
Navigation.propTypes = {
|
||||
isHome: PropTypes.bool.isRequired
|
||||
}
|
||||
isHome: PropTypes.bool.isRequired,
|
||||
};
|
||||
|
||||
export default Navigation;
|
||||
export default Navigation;
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@
|
|||
left: 0;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
background: rgba($background, .95);
|
||||
background: rgba($background, 0.95);
|
||||
backdrop-filter: blur(5px);
|
||||
z-index: 999;
|
||||
transition: background .25s;
|
||||
transition: background 0.25s;
|
||||
|
||||
@supports(backdrop-filter: blur(5px)) {
|
||||
background: rgba($background, .9);
|
||||
@supports (backdrop-filter: blur(5px)) {
|
||||
background: rgba($background, 0.9);
|
||||
}
|
||||
|
||||
.topBarInner {
|
||||
|
|
@ -38,7 +38,7 @@
|
|||
border-top: 2px solid transparent;
|
||||
|
||||
&:hover {
|
||||
border-color: rgba(255, 255, 255, .25);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
|
@ -53,9 +53,7 @@
|
|||
backdrop-filter: blur(0);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flexSpacer {
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,86 +1,92 @@
|
|||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import { Helmet } from "gatsby-plugin-react-i18next"
|
||||
import { useStaticQuery, graphql } from "gatsby"
|
||||
import { useTranslation } from 'gatsby-plugin-react-i18next';
|
||||
|
||||
function SEO({ description, meta, title }) {
|
||||
const { t } = useTranslation();
|
||||
const { site } = useStaticQuery(
|
||||
graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
author
|
||||
keywords
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
)
|
||||
|
||||
const metaDescription = description || t("siteDescription");
|
||||
|
||||
return (
|
||||
<Helmet
|
||||
title={title}
|
||||
titleTemplate={`%s | ${site.siteMetadata.title}`}
|
||||
meta={[
|
||||
{
|
||||
name: `description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
property: `og:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:type`,
|
||||
content: `website`,
|
||||
},
|
||||
{
|
||||
name: `twitter:card`,
|
||||
content: `summary`,
|
||||
},
|
||||
{
|
||||
name: `twitter:creator`,
|
||||
content: site.siteMetadata.author,
|
||||
},
|
||||
{
|
||||
name: `twitter:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
name: `twitter:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
name: "keywords",
|
||||
content: site.siteMetadata.keywords
|
||||
}
|
||||
].concat(meta)}
|
||||
>
|
||||
<script src="https://kit.fontawesome.com/1377f925e0.js" crossOrigin="anonymous"></script>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Roboto&display=swap" rel="stylesheet" />
|
||||
</Helmet>
|
||||
)
|
||||
}
|
||||
|
||||
SEO.defaultProps = {
|
||||
meta: [],
|
||||
description: ``,
|
||||
}
|
||||
|
||||
SEO.propTypes = {
|
||||
description: PropTypes.string,
|
||||
meta: PropTypes.arrayOf(PropTypes.object),
|
||||
title: PropTypes.string.isRequired,
|
||||
}
|
||||
|
||||
export default SEO
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { Helmet } from "gatsby-plugin-react-i18next";
|
||||
import { useStaticQuery, graphql } from "gatsby";
|
||||
import { useTranslation } from "gatsby-plugin-react-i18next";
|
||||
|
||||
function SEO({ description, meta, title }) {
|
||||
const { t } = useTranslation();
|
||||
const { site } = useStaticQuery(
|
||||
graphql`
|
||||
query {
|
||||
site {
|
||||
siteMetadata {
|
||||
title
|
||||
author
|
||||
keywords
|
||||
}
|
||||
}
|
||||
}
|
||||
`
|
||||
);
|
||||
|
||||
const metaDescription = description || t("siteDescription");
|
||||
|
||||
return (
|
||||
<Helmet
|
||||
title={title}
|
||||
titleTemplate={`%s | ${site.siteMetadata.title}`}
|
||||
meta={[
|
||||
{
|
||||
name: `description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
property: `og:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
property: `og:type`,
|
||||
content: `website`,
|
||||
},
|
||||
{
|
||||
name: `twitter:card`,
|
||||
content: `summary`,
|
||||
},
|
||||
{
|
||||
name: `twitter:creator`,
|
||||
content: site.siteMetadata.author,
|
||||
},
|
||||
{
|
||||
name: `twitter:title`,
|
||||
content: title,
|
||||
},
|
||||
{
|
||||
name: `twitter:description`,
|
||||
content: metaDescription,
|
||||
},
|
||||
{
|
||||
name: "keywords",
|
||||
content: site.siteMetadata.keywords,
|
||||
},
|
||||
].concat(meta)}
|
||||
>
|
||||
<script
|
||||
src="https://kit.fontawesome.com/1377f925e0.js"
|
||||
crossOrigin="anonymous"
|
||||
></script>
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Anonymous+Pro:wght@400;700&family=Roboto&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</Helmet>
|
||||
);
|
||||
}
|
||||
|
||||
SEO.defaultProps = {
|
||||
meta: [],
|
||||
description: ``,
|
||||
};
|
||||
|
||||
SEO.propTypes = {
|
||||
description: PropTypes.string,
|
||||
meta: PropTypes.arrayOf(PropTypes.object),
|
||||
title: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default SEO;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue