Add new blog components and post

content/blog/scambox/002-crypto-ideas.mdx

@@ -0,0 +1,128 @@
+---
+section: scambox
+language: en
+title: Kevins Great Crypto Ideas
+url: crypto-ideas
+platform: telegram
+tags: [crypto]
+published: 2022-02-05 15:00:00
+author:
+    name: Kevin Kandlbinder
+---
+
+import Chatbox from "../../../src/components/scambox/Chatbox.tsx";
+import Chatmsg from "../../../src/components/scambox/Chatmsg.tsx";
+import Chatnotice from "../../../src/components/scambox/Chatnotice.tsx";
+import Chatblah from "../../../src/components/scambox/Chatblah.tsx";
+
+Today I want to tell you the story of a business investor, amazing ideas, unregulated organ trading and ghosting.
+So put on your seatbelts, grab your popcorn, we're jumping right into the chat-log!
+
+<Chatbox open="bottom">
+    <Chatmsg name="Megan">
+        Hello
+    </Chatmsg>
+    <Chatmsg dir="out" name="Kevin">
+        Hi
+    </Chatmsg>
+    <Chatmsg name="Megan">
+        How's it going?
+    </Chatmsg>
+    <Chatmsg dir="out" name="Kevin">
+        Can't complain, how about you?
+    </Chatmsg>
+</Chatbox>
+
+I love when scammers do small talk. You can always notice how forced and fake it feels. 
+Wasting time here is the most fun, because they just want to get to their scammy part, but have to warm you up first.
+
+<Chatbox open="both">
+    <Chatmsg name="Megan">
+        I'm doing great too. I'm from New Jersey, where are you from?
+    </Chatmsg>
+    <Chatmsg dir="out" name="Kevin">
+        Oh I'm from Germany, but I've got family in NJ!
+    </Chatmsg>
+</Chatbox>
+
+It's not immoral to lie to scammer... right?
+
+<Chatbox open="both">
+    <Chatmsg name="Megan">
+        Where does your family live?
+    </Chatmsg>
+    <Chatmsg dir="out" name="Kevin">
+        Just south of Philly
+    </Chatmsg>
+    <Chatmsg name="Megan">
+        I work at the coca cola company, but I'm also investing in crypto. What about you?
+    </Chatmsg>
+    <Chatmsg dir="out" name="Kevin">
+        I do not work at the coca cola company.
+    </Chatmsg>
+    <Chatmsg name="Megan">
+        Where do you work?
+    </Chatmsg>
+    <Chatmsg dir="out" name="Kevin">
+        I work at a nightclub as a barkeeper
+    </Chatmsg>
+    <Chatmsg name="Megan">
+        Do you make good money with that?
+    </Chatmsg>
+    <Chatmsg dir="out" name="Kevin">
+        Can't complain, I recently inherited a huge sum of money
+    </Chatmsg>
+    <Chatmsg name="Megan">
+        Have you thought about any business?
+    </Chatmsg>
+</Chatbox>
+
+Oh Megan, you would not *believe* just how many amazing business ideas I have...
+
+<Chatbox open="both">
+    <Chatmsg dir="out" name="Kevin">
+        Ok, hear me out...
+        <hr/>
+        Vapes, but cats and dogs can use them!
+    </Chatmsg>
+    <Chatmsg name="Megan">
+        That sounds like a great idea.
+    </Chatmsg>
+</Chatbox>
+
+No it absolutely does not, but she can't say that because she still wants me to invest in her crypto scam. 🙂
+
+<Chatbox open="both">
+    <Chatmsg name="Megan">
+        Have you ever thought about crypto?
+    </Chatmsg>
+    <Chatmsg dir="out" name="Kevin">
+        Actually I have. That is another business idea of mine
+        <hr/>
+        Organs, but they're NFTs! Right now there's the legal donation system, illegal black markets, everything is not very transparent.
+        Now imagine every organ was an NFT!<br/><br/>
+        Democratizing the Organ market one transaction at a time.
+    </Chatmsg>
+</Chatbox>
+
+At this point Megan was ready to launch into her whole crypto spiel, and I just kinda tuned out. 
+But appearently my idea would work perfectly with her investment opportunity!
+
+<Chatbox open="top">
+    <Chatmsg name="Megan">
+        <Chatblah/><Chatblah/><Chatblah/>crypto investment<Chatblah/><Chatblah/> and I love NFTs <Chatblah/> looking into minting some. <Chatblah/><Chatblah/><Chatblah/><Chatblah/> and your NFTs could work with that! <Chatblah/><Chatblah/><Chatblah/><Chatblah/><Chatblah/> with my investment company based in Denmark!
+    </Chatmsg>
+    <Chatmsg dir="out" name="Kevin">
+        Denmark? That's really close to where I live. Where exactly is the company, so I can go there and give them the money directly?
+    </Chatmsg>
+    <Chatmsg name="Megan">
+        What do you mean? There is no need to travel
+    </Chatmsg>
+    <Chatmsg dir="out" name="Kevin">
+        Oh it's no problem. It's really not far, and we can save on transaction fees if I bring the money directly!
+    </Chatmsg>
+    <Chatnotice>Megan has cleared the chat</Chatnotice>
+</Chatbox>
+
+Weird... Looks like Megan did not want me to visit her amazing investment company in Denmark... 😢
+

locales/de/translation.json

@@ -91,7 +91,16 @@
             }
         },
         "sections": "Rubriken",
-        "posts": "Beiträge"
+        "posts": "Beiträge",
+        "scambox": {
+            "chatbox": {
+                "begin": "Beginn der Chataufzeichnung",
+                "end": "Ende der Chataufzeichnung",
+                "interrupt": "Unterbrechung der Chataufzeichnung",
+                "resume": "Fortsetzung der Chataufzeichnung",
+                "says": "sagt:"
+            }
+        }
     },
     "not_found": {
         "title": "Nicht Gefunden",

locales/en/translation.json

@@ -91,7 +91,16 @@
             }
         },
         "sections": "Sections",
-        "posts": "Posts"
+        "posts": "Posts",
+        "scambox": {
+            "chatbox": {
+                "begin": "Begin of chat-log",
+                "resume": "Continuation of chat-log",
+                "interrupt": "Interruption of chat-log",
+                "end": "End of chat-log",
+                "says": "says:"
+            }
+        }
     },
     "not_found": {
         "title": "Not Found",

package.json

@@ -25,6 +25,8 @@
         "@icons-pack/react-simple-icons": "4.6.1",
         "@mdx-js/mdx": "1.6.22",
         "@mdx-js/react": "1.6.22",
+        "@react-hook/media-query": "^1.1.1",
+        "@types/animejs": "^3.1.4",
         "@types/node": "17.0.14",
         "@types/react": "17.0.39",
         "@types/react-dom": "17.0.11",
@@ -58,6 +60,7 @@
         "hamburger-react": "2.4.1",
         "i18next": "21.6.10",
         "locale": "0.1.0",
+        "lodash": "^4.17.21",
         "lucide-react": "0.16.29",
         "prop-types": "15.8.1",
         "react": "17.0.2",

src/_globals.scss

@@ -1,6 +1,6 @@
 @use "sass:map";
 
-$layoutWidth: 1200px;
+$layoutWidth: 1100px;
 $layoutPadding: 20px;
 
 $mainFont: "Fira Code", monospace;

src/components/scambox/Chatblah.tsx

@@ -0,0 +1,58 @@
+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 * as styles from "./Chatbox.module.scss";
+
+const Chatblah = () => {
+    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
+
+        const speed = 0.25;
+        const delay = anime.random(100/speed, 1000/speed);
+
+        animeRef.current = anime.timeline({
+            targets: "#chatblah-"+myId,
+            loop: true,
+            easing: "easeInOutSine"
+        })
+
+        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))
+
+        return () => {
+            if(animeRef.current) {
+                animeRef.current.pause();
+                animeRef.current = null;
+            }
+        }
+    }, [myId, reduceMotion])
+
+
+    return <div className={styles.chatBlah} id={"chatblah-"+myId}>
+        <span>blah</span>
+    </div>
+}
+
+export default Chatblah

src/components/scambox/Chatbox.module.scss

@@ -0,0 +1,138 @@
+@use "sass:math";
+@use "sass:map";
+@import "../../globals";
+
+.screenReader {
+    opacity: 0.001;
+    width: 1px;
+    height: 1px;
+    margin: -1px;
+    position: absolute;
+    overflow: hidden;
+    white-space: nowrap;
+    padding: 0;
+}
+
+.chatbox {
+    display: flex;
+    flex-direction: column;
+    padding: $layoutPadding;
+    margin: $layoutPadding (-$layoutPadding);
+    background-color: rgba(gray, 0.1);
+    border-radius: 10px;
+
+    &.openBottom {
+        border-radius: 10px 10px 0 0;
+        margin-bottom: 20px;
+        background-image: linear-gradient(
+            to top,
+            $background,
+            transparent 20px
+        );
+    }
+
+    &.openBoth {
+        border-radius: 0;
+        margin-top: 20px;
+        margin-bottom: 20px;
+        background-image: linear-gradient(to top, $background, transparent 20px),
+            linear-gradient(to bottom, $background, transparent 20px);
+    }
+
+    &.openTop {
+        border-radius: 0 0 10px 10px;
+        margin-top: 20px;
+        background-image: linear-gradient(
+            to bottom,
+            $background,
+            transparent 20px
+        );
+    }
+
+    @media (prefers-color-scheme: light) {
+        &.openBottom {
+            background-image: linear-gradient(
+                to top,
+                $lightBackground,
+                transparent 20px
+            );
+        }
+
+        &.openBoth {
+            background-image: linear-gradient(
+                    to top,
+                    $lightBackground,
+                    transparent 20px
+                ),
+                linear-gradient(to bottom, $lightBackground, transparent 20px);
+        }
+
+        &.openTop {
+            background-image: linear-gradient(
+                to bottom,
+                $lightBackground,
+                transparent 20px
+            );
+        }
+    }
+}
+
+.chatnotice {
+    display: flex;
+    justify-content: center;
+
+    margin: math.div($layoutPadding, 2) $layoutPadding;
+
+    > span {
+        max-width: 500px;
+        opacity: 0.75;
+        font-style: italic;
+        text-align: center;
+    }
+}
+
+.chatmsg {
+    display: flex;
+    flex-direction: column;
+
+    margin: 0 $layoutPadding;
+
+    align-items: flex-start;
+
+    --msg-color: #{map.get($theme, "blue")};
+
+    &.alignRight {
+        align-items: flex-end;
+
+        --msg-color: #{$accentColor};
+    }
+
+    .name {
+        margin: 5px;
+    }
+
+    .chatbubble {
+        position: relative;
+        padding: math.div($layoutPadding, 2) $layoutPadding;
+        border-radius: 10px;
+        border: thin solid var(--msg-color);
+        max-width: 700px;
+
+        hr {
+            display: block;
+            margin: math.div($layoutPadding, 2) (-$layoutPadding);
+            border: none;
+            border-top: thin solid var(--msg-color);
+        }
+    }
+}
+
+.chatBlah {
+    display: inline-block;
+    margin: 0 5px;
+    opacity: 0.25;
+
+    &:first-child {
+        margin-left: 0;
+    }
+}

src/components/scambox/Chatbox.module.scss.d.ts

@@ -0,0 +1,11 @@
+export const alignRight: string;
+export const chatBlah: string;
+export const chatbox: string;
+export const chatbubble: string;
+export const chatmsg: string;
+export const chatnotice: string;
+export const name: string;
+export const openBoth: string;
+export const openBottom: string;
+export const openTop: string;
+export const screenReader: string;

src/components/scambox/Chatbox.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import * as styles from "./Chatbox.module.scss";
+
+type ChatboxProps = {
+    open?: string
+}
+
+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>
+}
+
+export default Chatbox

src/components/scambox/Chatmsg.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import { useTranslation } from "react-i18next";
+
+import * as styles from "./Chatbox.module.scss"
+
+type ChatmsgProps = {
+    name?: string,
+    timestamp?: string,
+    color?: string,
+    dir: string
+}
+
+const Chatmsg = (props: React.PropsWithChildren<ChatmsgProps>) => {
+    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}
+            </div>
+            {props.timestamp && <span>{props.timestamp}</span>}
+        </div>
+    </div>
+}
+
+export default Chatmsg

src/components/scambox/Chatnotice.tsx

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

src/layouts/default.scss

@@ -4,6 +4,11 @@
 
 * {
     box-sizing: border-box;
+
+    @media (prefers-reduced-motion: reduce) {
+        animation: none !important;
+        transition: none !important;
+    }
 }
 
 body,

src/pages/index.tsx

@@ -20,6 +20,7 @@ import {
     Phone,
 } from "lucide-react";
 import { useTranslation } from "react-i18next";
+import { useMediaQuery } from "@react-hook/media-query";
 //import * as particleConfig from "./index.particles.json";
 
 export const query = graphql`
@@ -62,9 +63,11 @@ export const query = graphql`
 
 const IndexPage = (props) => {
     const { t } = useTranslation();
+    const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)")
 
     React.useEffect(() => {
         if (typeof window === "undefined") return;
+        if (reduceMotion) return;
 
         anime({
             targets: [
@@ -95,7 +98,7 @@ const IndexPage = (props) => {
         /*if (typeof window !== "undefined")
             // eslint-disable-next-line no-undef
             window.setTimeout(loadTsParticles, 1000);*/
-    }, []);
+    }, [reduceMotion]);
 
     let meta = props.data.site.siteMetadata;
 

src/templates/blogPost.module.scss

@@ -2,6 +2,8 @@
 
 .postSection {
     flex-grow: 1;
+    max-width: 1000px;
+    margin: 0 auto;
 
     > article {
         img {

src/templates/blogPost.tsx

@@ -22,7 +22,7 @@ const BlogPost = ({ data }) => {
                 <script type="application/ld+json">
                     {JSON.stringify({
                         "@context": "https://schema.org",
-                        "@type": "NewsArticle",
+                        "@type": "BlogPosting",
                         headline: data.mdx.frontmatter.title,
                         datePublished: data.mdx.frontmatter.publishedIso,
                         dateModified: data.mdx.frontmatter.publishedIso,
@@ -30,6 +30,7 @@ const BlogPost = ({ data }) => {
                             {
                                 "@type": "Person",
                                 name: data.mdx.frontmatter.author.name,
+                                url: "https://kevink.dev/blog/"
                             },
                         ],
                     })}

yarn.lock

@@ -1997,6 +1997,11 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
+"@react-hook/media-query@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@react-hook/media-query/-/media-query-1.1.1.tgz#7fc4e52591784a39be924b62b4270ae3e18ec578"
+  integrity sha512-VM14wDOX5CW5Dn6b2lTiMd79BFMTut9AZj2+vIRT3LCKgMCYmdqruTtzDPSnIVDQdtxdPgtOzvU9oK20LopuOw==
+
 "@sideway/address@^4.1.0":
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.2.tgz#811b84333a335739d3969cfc434736268170cad1"
@@ -2076,6 +2081,11 @@
   resolved "https://registry.yarnpkg.com/@turist/time/-/time-0.0.2.tgz#32fe0ce708ea0f4512776bd313409f1459976dda"
   integrity sha512-qLOvfmlG2vCVw5fo/oz8WAZYlpe5a5OurgTj3diIxJCdjRHpapC+vQCz3er9LV79Vcat+DifBjeAhOAdmndtDQ==
 
+"@types/animejs@^3.1.4":
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/@types/animejs/-/animejs-3.1.4.tgz#92f90d1c800b9041b64a7da9da0e68e690146b0e"
+  integrity sha512-WUjeFT2SXd6intfE6cg6eL1jk/JL88JqM2gC4WqO4iHLmbCvHUq6aoLK13lGpDWs4FtS2PHoYraJZ0dEx99Dyg==
+
 "@types/cacheable-request@^6.0.1":
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/@types/cacheable-request/-/cacheable-request-6.0.2.tgz#c324da0197de0a98a2312156536ae262429ff6b9"