mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-06-19 02:52:01 +02:00
Run prettier
This commit is contained in:
parent
b50b7d83c3
commit
0b5a905ae6
20 changed files with 452 additions and 352 deletions
|
|
@ -7,7 +7,11 @@ export default function LanguageSwitcher() {
|
|||
const { languages, originalPath } = useI18next();
|
||||
|
||||
return (
|
||||
<div className={styles.languageModal} id="languageChooser" role="dialog">
|
||||
<div
|
||||
className={styles.languageModal}
|
||||
id="languageChooser"
|
||||
role="dialog"
|
||||
>
|
||||
<div className={styles.languageModalInner}>
|
||||
<h2>
|
||||
Languages (
|
||||
|
|
|
|||
|
|
@ -7,44 +7,55 @@ import { createPortal } from "react-dom";
|
|||
|
||||
import * as styles from "./navigation.module.scss";
|
||||
import { X } from "lucide-react";
|
||||
import { Fade as Hamburger } from 'hamburger-react';
|
||||
import { Fade as Hamburger } from "hamburger-react";
|
||||
|
||||
const OffScreenNav = ({active, close}) => {
|
||||
if(typeof window === "undefined") {
|
||||
const OffScreenNav = ({ active, close }) => {
|
||||
if (typeof window === "undefined") {
|
||||
return null;
|
||||
}
|
||||
|
||||
return createPortal(<div className={styles.offscreenNav + " " + (active ? styles.active : "")}>
|
||||
<div className={styles.inner}>
|
||||
<button className={styles.close} onClick={close}><X/></button>
|
||||
<span><Trans>menu</Trans></span>
|
||||
<Link to="/" activeClassName={styles.active}>
|
||||
<Trans>home</Trans>
|
||||
</Link>
|
||||
<Link
|
||||
id="navBtnProjects"
|
||||
to="/about"
|
||||
activeClassName={styles.active}
|
||||
>
|
||||
<Trans>about</Trans>
|
||||
</Link>
|
||||
<Link
|
||||
id="navBtnProjects"
|
||||
to="/projects"
|
||||
activeClassName={styles.active}
|
||||
>
|
||||
<Trans>projects</Trans>
|
||||
</Link>
|
||||
<Link
|
||||
id="navBtnSocial"
|
||||
to="/social"
|
||||
activeClassName={styles.active}
|
||||
>
|
||||
<Trans>social</Trans>
|
||||
</Link>
|
||||
</div>
|
||||
</div>, window.document.body)
|
||||
}
|
||||
return createPortal(
|
||||
<div
|
||||
className={
|
||||
styles.offscreenNav + " " + (active ? styles.active : "")
|
||||
}
|
||||
>
|
||||
<div className={styles.inner}>
|
||||
<button className={styles.close} onClick={close}>
|
||||
<X />
|
||||
</button>
|
||||
<span>
|
||||
<Trans>menu</Trans>
|
||||
</span>
|
||||
<Link to="/" activeClassName={styles.active}>
|
||||
<Trans>home</Trans>
|
||||
</Link>
|
||||
<Link
|
||||
id="navBtnProjects"
|
||||
to="/about"
|
||||
activeClassName={styles.active}
|
||||
>
|
||||
<Trans>about</Trans>
|
||||
</Link>
|
||||
<Link
|
||||
id="navBtnProjects"
|
||||
to="/projects"
|
||||
activeClassName={styles.active}
|
||||
>
|
||||
<Trans>projects</Trans>
|
||||
</Link>
|
||||
<Link
|
||||
id="navBtnSocial"
|
||||
to="/social"
|
||||
activeClassName={styles.active}
|
||||
>
|
||||
<Trans>social</Trans>
|
||||
</Link>
|
||||
</div>
|
||||
</div>,
|
||||
window.document.body
|
||||
);
|
||||
};
|
||||
|
||||
const Navigation = ({ isHome }) => {
|
||||
let [atTop, setAtTop] = useState(false);
|
||||
|
|
@ -96,7 +107,10 @@ const Navigation = ({ isHome }) => {
|
|||
}
|
||||
>
|
||||
<nav className={styles.topBarInner}>
|
||||
<OffScreenNav active={offscreenNavActive} close={closeOffscreenNav} />
|
||||
<OffScreenNav
|
||||
active={offscreenNavActive}
|
||||
close={closeOffscreenNav}
|
||||
/>
|
||||
<StaticQuery
|
||||
query={graphql`
|
||||
query {
|
||||
|
|
@ -108,7 +122,11 @@ const Navigation = ({ isHome }) => {
|
|||
}
|
||||
`}
|
||||
render={(data) => (
|
||||
<Link to="/" activeClassName={styles.active} className={styles.logo}>
|
||||
<Link
|
||||
to="/"
|
||||
activeClassName={styles.active}
|
||||
className={styles.logo}
|
||||
>
|
||||
{data.site.siteMetadata.title}
|
||||
</Link>
|
||||
)}
|
||||
|
|
@ -135,7 +153,14 @@ const Navigation = ({ isHome }) => {
|
|||
>
|
||||
<Trans>social</Trans>
|
||||
</Link>
|
||||
<div className={styles.hamburger}><Hamburger toggle={setOffscreenNavActive} toggled={offscreenNavActive} rounded size={30} /></div>
|
||||
<div className={styles.hamburger}>
|
||||
<Hamburger
|
||||
toggle={setOffscreenNavActive}
|
||||
toggled={offscreenNavActive}
|
||||
rounded
|
||||
size={30}
|
||||
/>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
color: white;
|
||||
overflow: auto;
|
||||
opacity: 0;
|
||||
transition: opacity .25s, left .25s;
|
||||
transition: opacity 0.25s, left 0.25s;
|
||||
pointer-events: none;
|
||||
overscroll-behavior: contain;
|
||||
|
||||
|
|
@ -23,7 +23,7 @@
|
|||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
@media (prefers-color-scheme: light) {
|
||||
background-color: rgba($lightBackground, 0.9);
|
||||
color: black;
|
||||
}
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
border-left: 3px solid white;
|
||||
border-right: 3px solid white;
|
||||
|
||||
@media(prefers-color-scheme: light) {
|
||||
@media (prefers-color-scheme: light) {
|
||||
border-left: 3px solid black;
|
||||
border-right: 3px solid black;
|
||||
}
|
||||
|
|
@ -113,7 +113,7 @@
|
|||
display: none;
|
||||
height: 43px;
|
||||
|
||||
@media(max-width: 500px) {
|
||||
@media (max-width: 500px) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -139,7 +139,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media(max-width: 500px) {
|
||||
@media (max-width: 500px) {
|
||||
&:not(.logo) {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@ import React from "react";
|
|||
import PropTypes from "prop-types";
|
||||
import { Helmet } from "gatsby-plugin-react-i18next";
|
||||
import { useStaticQuery, graphql } from "gatsby";
|
||||
import { useLocation } from "@reach/router"
|
||||
import { useLocation } from "@reach/router";
|
||||
import { useTranslation } from "gatsby-plugin-react-i18next";
|
||||
import useSiteMetadata from "../helpers/useSiteMetadata";
|
||||
|
||||
|
|
@ -27,58 +27,60 @@ function SEO({ description, meta, title, speakable, image, children }) {
|
|||
const siteMeta = useSiteMetadata();
|
||||
const location = useLocation();
|
||||
|
||||
|
||||
return (
|
||||
<Helmet
|
||||
title={title}
|
||||
titleTemplate={`%s | ${site.siteMetadata.title}`}
|
||||
>
|
||||
<Helmet title={title} titleTemplate={`%s | ${site.siteMetadata.title}`}>
|
||||
<meta
|
||||
name="battery-savings"
|
||||
content="allow-reduced-framerate"
|
||||
></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).map((m) => {
|
||||
return <meta key={m.name} name={m.name} content={m.content}></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)
|
||||
.map((m) => {
|
||||
return (
|
||||
<meta
|
||||
key={m.name}
|
||||
name={m.name}
|
||||
content={m.content}
|
||||
></meta>
|
||||
);
|
||||
})}
|
||||
<script
|
||||
async
|
||||
defer
|
||||
|
|
@ -86,40 +88,45 @@ function SEO({ description, meta, title, speakable, image, children }) {
|
|||
src="https://analytics.kevink.dev/js/plausible.js"
|
||||
></script>
|
||||
|
||||
{
|
||||
image && [
|
||||
<meta name="twitter:image" content={siteMeta.siteUrl + image} key="twimg"/>,
|
||||
<meta name="og:image" content={siteMeta.siteUrl + image} key="ogimg"/>,
|
||||
]
|
||||
}
|
||||
|
||||
{image && [
|
||||
<meta
|
||||
name="twitter:image"
|
||||
content={siteMeta.siteUrl + image}
|
||||
key="twimg"
|
||||
/>,
|
||||
<meta
|
||||
name="og:image"
|
||||
content={siteMeta.siteUrl + image}
|
||||
key="ogimg"
|
||||
/>,
|
||||
]}
|
||||
|
||||
<script type="application/ld+json">
|
||||
{JSON.stringify({
|
||||
"@context": "https://schema.org/",
|
||||
"@type": "WebPage",
|
||||
"name": title,
|
||||
"url": siteMeta.siteUrl+location.pathname,
|
||||
"speakable": speakable,
|
||||
"image": siteMeta.siteUrl + image,
|
||||
"about": {
|
||||
name: title,
|
||||
url: siteMeta.siteUrl + location.pathname,
|
||||
speakable: speakable,
|
||||
image: siteMeta.siteUrl + image,
|
||||
about: {
|
||||
"@type": "Person",
|
||||
"name": siteMeta.givenName + " " + siteMeta.familyName,
|
||||
"givenName": siteMeta.givenName,
|
||||
"familyName": siteMeta.familyName,
|
||||
"birthDate": siteMeta.birthDate,
|
||||
"address": siteMeta.address,
|
||||
"email": siteMeta.contactEmail,
|
||||
"telephone": siteMeta.contactPhone,
|
||||
"gender": siteMeta.gender,
|
||||
"height": siteMeta.height,
|
||||
"nationality": {
|
||||
name: siteMeta.givenName + " " + siteMeta.familyName,
|
||||
givenName: siteMeta.givenName,
|
||||
familyName: siteMeta.familyName,
|
||||
birthDate: siteMeta.birthDate,
|
||||
address: siteMeta.address,
|
||||
email: siteMeta.contactEmail,
|
||||
telephone: siteMeta.contactPhone,
|
||||
gender: siteMeta.gender,
|
||||
height: siteMeta.height,
|
||||
nationality: {
|
||||
"@type": "Country",
|
||||
"name": siteMeta.nationality
|
||||
name: siteMeta.nationality,
|
||||
},
|
||||
"image": siteMeta.siteUrl + "/owner.jpg",
|
||||
"sameAs": siteMeta.sameAs
|
||||
}
|
||||
image: siteMeta.siteUrl + "/owner.jpg",
|
||||
sameAs: siteMeta.sameAs,
|
||||
},
|
||||
})}
|
||||
</script>
|
||||
|
||||
|
|
@ -139,7 +146,7 @@ SEO.propTypes = {
|
|||
title: PropTypes.string.isRequired,
|
||||
speakable: PropTypes.any,
|
||||
image: PropTypes.string,
|
||||
children: PropTypes.any
|
||||
children: PropTypes.any,
|
||||
};
|
||||
|
||||
export default SEO;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue