kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-06-18 10:32:04 +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`