diff --git a/content/blog/scambox/002-crypto-ideas.mdx b/content/blog/scambox/002-crypto-ideas.mdx new file mode 100644 index 0000000..8e6242b --- /dev/null +++ b/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! + + + + Hello + + + Hi + + + How's it going? + + + Can't complain, how about you? + + + +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. + + + + I'm doing great too. I'm from New Jersey, where are you from? + + + Oh I'm from Germany, but I've got family in NJ! + + + +It's not immoral to lie to scammer... right? + + + + Where does your family live? + + + Just south of Philly + + + I work at the coca cola company, but I'm also investing in crypto. What about you? + + + I do not work at the coca cola company. + + + Where do you work? + + + I work at a nightclub as a barkeeper + + + Do you make good money with that? + + + Can't complain, I recently inherited a huge sum of money + + + Have you thought about any business? + + + +Oh Megan, you would not *believe* just how many amazing business ideas I have... + + + + Ok, hear me out... +
+ Vapes, but cats and dogs can use them! + + + That sounds like a great idea. + + + +No it absolutely does not, but she can't say that because she still wants me to invest in her crypto scam. 🙂 + + + + Have you ever thought about crypto? + + + Actually I have. That is another business idea of mine +
+ 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!

+ Democratizing the Organ market one transaction at a time. + + + +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! + + + + crypto investment and I love NFTs looking into minting some. and your NFTs could work with that! with my investment company based in Denmark! + + + 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? + + + What do you mean? There is no need to travel + + + Oh it's no problem. It's really not far, and we can save on transaction fees if I bring the money directly! + + Megan has cleared the chat + + +Weird... Looks like Megan did not want me to visit her amazing investment company in Denmark... 😢 + diff --git a/locales/de/translation.json b/locales/de/translation.json index ea00368..0219c96 100644 --- a/locales/de/translation.json +++ b/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", diff --git a/locales/en/translation.json b/locales/en/translation.json index fed46a1..18208c6 100644 --- a/locales/en/translation.json +++ b/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", diff --git a/package.json b/package.json index 43138e5..c549ef8 100644 --- a/package.json +++ b/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", diff --git a/src/_globals.scss b/src/_globals.scss index 62586de..81c7395 100644 --- a/src/_globals.scss +++ b/src/_globals.scss @@ -1,6 +1,6 @@ @use "sass:map"; -$layoutWidth: 1200px; +$layoutWidth: 1100px; $layoutPadding: 20px; $mainFont: "Fira Code", monospace; diff --git a/src/components/scambox/Chatblah.tsx b/src/components/scambox/Chatblah.tsx new file mode 100644 index 0000000..9d09675 --- /dev/null +++ b/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(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
+ blah +
+} + +export default Chatblah \ No newline at end of file diff --git a/src/components/scambox/Chatbox.module.scss b/src/components/scambox/Chatbox.module.scss new file mode 100644 index 0000000..3bdb68d --- /dev/null +++ b/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; + } +} diff --git a/src/components/scambox/Chatbox.module.scss.d.ts b/src/components/scambox/Chatbox.module.scss.d.ts new file mode 100644 index 0000000..2a25171 --- /dev/null +++ b/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; diff --git a/src/components/scambox/Chatbox.tsx b/src/components/scambox/Chatbox.tsx new file mode 100644 index 0000000..665bc6b --- /dev/null +++ b/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) => { + const {t} = useTranslation(); + + return
+ -- {open === "top" || open === "both" ? t("blog.scambox.chatbox.resume") : t("blog.scambox.chatbox.begin")} -- + {children} + -- {open === "bottom" || open === "both" ? t("blog.scambox.chatbox.interrupt") : t("blog.scambox.chatbox.end")} -- +
+} + +export default Chatbox \ No newline at end of file diff --git a/src/components/scambox/Chatmsg.tsx b/src/components/scambox/Chatmsg.tsx new file mode 100644 index 0000000..b367502 --- /dev/null +++ b/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) => { + const {t} = useTranslation(); + + return
+ {props.name && {props.name} {t("blog.scambox.chatbox.says")}} +
+
+ {props.children} +
+ {props.timestamp && {props.timestamp}} +
+
+} + +export default Chatmsg \ No newline at end of file diff --git a/src/components/scambox/Chatnotice.tsx b/src/components/scambox/Chatnotice.tsx new file mode 100644 index 0000000..901b692 --- /dev/null +++ b/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
+ {props.children} +
+} + +export default Chatnotice \ No newline at end of file diff --git a/src/layouts/default.scss b/src/layouts/default.scss index 173ba09..f5d86cd 100644 --- a/src/layouts/default.scss +++ b/src/layouts/default.scss @@ -4,6 +4,11 @@ * { box-sizing: border-box; + + @media (prefers-reduced-motion: reduce) { + animation: none !important; + transition: none !important; + } } body, diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 7658b59..efb8c2a 100644 --- a/src/pages/index.tsx +++ b/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; diff --git a/src/templates/blogPost.module.scss b/src/templates/blogPost.module.scss index b664c8b..268b791 100644 --- a/src/templates/blogPost.module.scss +++ b/src/templates/blogPost.module.scss @@ -2,6 +2,8 @@ .postSection { flex-grow: 1; + max-width: 1000px; + margin: 0 auto; > article { img { diff --git a/src/templates/blogPost.tsx b/src/templates/blogPost.tsx index 11003cd..9f06dd0 100644 --- a/src/templates/blogPost.tsx +++ b/src/templates/blogPost.tsx @@ -22,7 +22,7 @@ const BlogPost = ({ data }) => {