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

Run prettier

Browse source
This commit is contained in:
Kevin Kandlbinder 2022-02-13 18:34:38 +00:00 • committed by GitHub
parent 5ce412b622
commit 3ba289e1b1
15 changed files with 266 additions and 175 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/components/languageSwitcher.tsx
View file

@ -32,6 +32,6 @@ const LanguageSwitcher = () => {
</div>
</div>
);
}
};
export default LanguageSwitcher
export default LanguageSwitcher;

4
src/components/navigation.tsx
View file

@ -9,8 +9,8 @@ import OffScreenNav from "./offscreenNav";
import useSiteMetadata from "../helpers/useSiteMetadata";
type NavigationProps = {
isHome?: boolean
}
isHome?: boolean;
};
const Navigation = ({ isHome }: NavigationProps) => {
let [atTop, setAtTop] = useState(false);

6
src/components/offscreenNav.tsx
View file

@ -8,9 +8,9 @@ import { X } from "lucide-react";
import useSiteMetadata from "../helpers/useSiteMetadata";
type OffScreenNavProps = {
active: boolean,
close: () => void
}
active: boolean;
close: () => void;
};
const OffScreenNav = ({ active, close }: OffScreenNavProps) => {
const { t } = useTranslation();

86
src/components/scambox/Chatblah.tsx
View file

@ -1,58 +1,72 @@
import React, { useEffect, useRef, useState } from "react";
import anime, { AnimeTimelineInstance } from "animejs";
import _uniqueId from 'lodash/uniqueId';
import {useMediaQuery} from '@react-hook/media-query'
import _uniqueId from "lodash/uniqueId";
import { useMediaQuery } from "@react-hook/media-query";
import * as styles from "./Chatbox.module.scss";
const Chatblah = () => {
const animeRef = useRef<AnimeTimelineInstance>(null)
const [myId,] = useState(_uniqueId)
const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)")
const animeRef = useRef<AnimeTimelineInstance>(null);
const [myId] = useState(_uniqueId);
const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
useEffect(() => {
if(typeof window === "undefined") return; // Don't run on static build
if(reduceMotion) return; // Don't run the animation for users who prefer reduced motion
if (typeof window === "undefined") return; // Don't run on static build
if (reduceMotion) return; // Don't run the animation for users who prefer reduced motion
const speed = 0.25;
const delay = anime.random(100/speed, 1000/speed);
const delay = anime.random(100 / speed, 1000 / speed);
animeRef.current = anime.timeline({
targets: "#chatblah-"+myId,
targets: "#chatblah-" + myId,
loop: true,
easing: "easeInOutSine"
})
easing: "easeInOutSine",
});
const tl = animeRef.current
const tl = animeRef.current;
tl.add({
duration: 250/speed,
opacity: [0, .25],
easing: "linear"
}, delay).add({
duration: 1000/speed,
rotate: [anime.random(-5, 5)+"deg", anime.random(-10, 10)+"deg"],
translateY: [0, anime.random(0, -2)+"px"],
translateX: [0, anime.random(-2, 2)+"px"],
}, delay).add({
duration: 500/speed,
opacity: [.25, 0],
easing: "linear"
}, delay+(500/speed))
tl.add(
{
duration: 250 / speed,
opacity: [0, 0.25],
easing: "linear",
},
delay
)
.add(
{
duration: 1000 / speed,
rotate: [
anime.random(-5, 5) + "deg",
anime.random(-10, 10) + "deg",
],
translateY: [0, anime.random(0, -2) + "px"],
translateX: [0, anime.random(-2, 2) + "px"],
},
delay
)
.add(
{
duration: 500 / speed,
opacity: [0.25, 0],
easing: "linear",
},
delay + 500 / speed
);
return () => {
if(animeRef.current) {
if (animeRef.current) {
animeRef.current.pause();
animeRef.current = null;
}
}
}, [myId, reduceMotion])
};
}, [myId, reduceMotion]);
return (
<div className={styles.chatBlah} id={"chatblah-" + myId}>
<span>blah</span>
</div>
);
};
return <div className={styles.chatBlah} id={"chatblah-"+myId}>
<span>blah</span>
</div>
}
export default Chatblah
export default Chatblah;

43
src/components/scambox/Chatbox.tsx
View file

@ -4,17 +4,38 @@ import { useTranslation } from "react-i18next";
import * as styles from "./Chatbox.module.scss";
type ChatboxProps = {
open?: string
}
open?: string;
};
const Chatbox = ({children, open}: React.PropsWithChildren<ChatboxProps>) => {
const {t} = useTranslation();
const Chatbox = ({ children, open }: React.PropsWithChildren<ChatboxProps>) => {
const { t } = useTranslation();
return <div className={styles.chatbox + (open === "top" ? " " + styles.openTop : "") + (open === "bottom" ? " " + styles.openBottom : "") + (open === "both" ? " " + styles.openBoth : "")}>
<span className={styles.screenReader}>-- {open === "top" || open === "both" ? t("blog.scambox.chatbox.resume") : t("blog.scambox.chatbox.begin")} --</span>
{children}
<span className={styles.screenReader}>-- {open === "bottom" || open === "both" ? t("blog.scambox.chatbox.interrupt") : t("blog.scambox.chatbox.end")} --</span>
</div>
}
return (
<div
className={
styles.chatbox +
(open === "top" ? " " + styles.openTop : "") +
(open === "bottom" ? " " + styles.openBottom : "") +
(open === "both" ? " " + styles.openBoth : "")
}
>
<span className={styles.screenReader}>
--{" "}
{open === "top" || open === "both"
? t("blog.scambox.chatbox.resume")
: t("blog.scambox.chatbox.begin")}{" "}
--
</span>
{children}
<span className={styles.screenReader}>
--{" "}
{open === "bottom" || open === "both"
? t("blog.scambox.chatbox.interrupt")
: t("blog.scambox.chatbox.end")}{" "}
--
</span>
</div>
);
};
export default Chatbox
export default Chatbox;

45
src/components/scambox/Chatmsg.tsx
View file

@ -1,27 +1,40 @@
import React from "react";
import { useTranslation } from "react-i18next";
import * as styles from "./Chatbox.module.scss"
import * as styles from "./Chatbox.module.scss";
type ChatmsgProps = {
name?: string,
timestamp?: string,
color?: string,
dir: string
}
name?: string;
timestamp?: string;
color?: string;
dir: string;
};
const Chatmsg = (props: React.PropsWithChildren<ChatmsgProps>) => {
const {t} = useTranslation();
const { t } = useTranslation();
return <div className={styles.chatmsg + (props.dir === "out" ? " " + styles.alignRight : "")}>
{props.name && <span className={styles.name}>{props.name}<span className={styles.screenReader}> {t("blog.scambox.chatbox.says")}</span></span>}
<div className={styles.chatbubble}>
<div>
{props.children}
return (
<div
className={
styles.chatmsg +
(props.dir === "out" ? " " + styles.alignRight : "")
}
>
{props.name && (
<span className={styles.name}>
{props.name}
<span className={styles.screenReader}>
{" "}
{t("blog.scambox.chatbox.says")}
</span>
</span>
)}
<div className={styles.chatbubble}>
<div>{props.children}</div>
{props.timestamp && <span>{props.timestamp}</span>}
</div>
{props.timestamp && <span>{props.timestamp}</span>}
</div>
</div>
}
);
};
export default Chatmsg
export default Chatmsg;

14
src/components/scambox/Chatnotice.tsx
View file

@ -1,11 +1,13 @@
import React from "react";
import * as styles from "./Chatbox.module.scss"
import * as styles from "./Chatbox.module.scss";
const Chatnotice = (props: React.PropsWithChildren<{}>) => {
return <div className={styles.chatnotice}>
<span>{props.children}</span>
</div>
}
return (
<div className={styles.chatnotice}>
<span>{props.children}</span>
</div>
);
};
export default Chatnotice
export default Chatnotice;

21
src/components/seo.tsx
View file

@ -6,14 +6,21 @@ import { useTranslation } from "gatsby-plugin-react-i18next";
import useSiteMetadata from "../helpers/useSiteMetadata";
type SEOProps = {
description?: string,
meta?: any[],
title: string,
speakable?: any,
image?: string
}
description?: string;
meta?: any[];
title: string;
speakable?: any;
image?: string;
};
function SEO({ description, meta, title, speakable, image, children }: React.PropsWithChildren<SEOProps>) {
function SEO({
description,
meta,
title,
speakable,
image,
children,
}: React.PropsWithChildren<SEOProps>) {
const { t } = useTranslation();
const { site } = useStaticQuery(
graphql`

29
src/layouts/default.tsx
View file

@ -6,16 +6,25 @@ import { Link, Trans } from "gatsby-plugin-react-i18next";
import LanguageSwitcher from "../components/languageSwitcher";
type LayoutProps = {
description?: string,
meta?: any[],
title: string,
transparentTopbar?: boolean,
seoAdditional?: any,
image?: string,
speakable?: any
}
description?: string;
meta?: any[];
title: string;
transparentTopbar?: boolean;
seoAdditional?: any;
image?: string;
speakable?: any;
};
const Layout = ({description, meta, title, image, speakable, seoAdditional, transparentTopbar, children}: React.PropsWithChildren<LayoutProps>) => {
const Layout = ({
description,
meta,
title,
image,
speakable,
seoAdditional,
transparentTopbar,
children,
}: React.PropsWithChildren<LayoutProps>) => {
return (
<>
<SEO
@ -50,7 +59,7 @@ const Layout = ({description, meta, title, image, speakable, seoAdditional, tran
<LanguageSwitcher />
</>
);
}
};
Layout.defaultProps = {
module: `none`,

68
src/pages/donate.tsx
View file

@ -100,39 +100,41 @@ const DonatePage = (props) => {
/>
<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>
<Trans>donate.donatePayPal</Trans>
</span>
<ArrowRight />
</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>
<Trans>donate.donatePayPal</Trans>
</span>
<ArrowRight />
</a>
</div>
</article>
</section>

3
src/pages/social.tsx
View file

@ -49,7 +49,8 @@ const SocialPage = ({ data }) => {
<p>
<Trans i18nKey="social.descriptionWithLink">
socialDescriptionWith<Link to="/friends/">Link</Link>
socialDescriptionWith
<Link to="/friends/">Link</Link>
</Trans>
</p>

7
src/templates/blog/listing.tsx
View file

@ -43,7 +43,12 @@ const BlogListing = ({ data, pageContext }) => {
>
<div className={styles.sectionImage}>
<div className={styles.sectionBg}>
<StaticImage src="https://source.unsplash.com/gf8e6XvG_3E/300x150" alt={t("blog.section.scambox.name")}></StaticImage>
<StaticImage
src="https://source.unsplash.com/gf8e6XvG_3E/300x150"
alt={t(
"blog.section.scambox.name"
)}
></StaticImage>
</div>
<span className={styles.sectionName}>
{t("blog.section.scambox.name")}

2
src/templates/blog/post.tsx
View file

@ -30,7 +30,7 @@ const BlogPost = ({ data }) => {
{
"@type": "Person",
name: data.mdx.frontmatter.author.name,
url: "https://kevink.dev/blog/"
url: "https://kevink.dev/blog/",
},
],
})}