From 5c172778176d85a46a7f34efeeb1e071acc268d2 Mon Sep 17 00:00:00 2001 From: Kevin Kandlbinder Date: Fri, 5 Nov 2021 22:29:08 +0000 Subject: [PATCH] Add scambox --- .eslintcache | 1 - content/scambox/001-hermine.mdx | 14 +++ gatsby-config.js | 7 ++ gatsby-node.js | 38 +++++++ locales/de/translation.json | 93 +++++++++-------- locales/en/translation.json | 93 +++++++++-------- package.json | 4 +- src/_variables.scss | 2 + src/components/navigation.js | 7 ++ src/components/navigation.module.scss | 4 +- src/components/offscreenNav.js | 13 ++- src/pages/scambox.js | 87 ++++++++++++++++ src/pages/scambox.module.scss | 45 ++++++++ src/templates/scamboxPost.js | 89 ++++++++++++++++ src/templates/scamboxPost.module.scss | 67 ++++++++++++ yarn.lock | 144 +++++++++++++++++++++++++- 16 files changed, 611 insertions(+), 97 deletions(-) delete mode 100644 .eslintcache create mode 100644 content/scambox/001-hermine.mdx create mode 100644 src/pages/scambox.js create mode 100644 src/pages/scambox.module.scss create mode 100644 src/templates/scamboxPost.js create mode 100644 src/templates/scamboxPost.module.scss diff --git a/.eslintcache b/.eslintcache deleted file mode 100644 index d1bd99c..0000000 --- a/.eslintcache +++ /dev/null @@ -1 +0,0 @@ -[{"/home/kevin/Projects/KevinK.dev.js/gatsby-config.js":"1","/home/kevin/Projects/KevinK.dev.js/src/components/navigation.js":"2","/home/kevin/Projects/KevinK.dev.js/src/components/offscreenNav.js":"3"},{"size":4343,"mtime":1634572076315,"results":"4","hashOfConfig":"5"},{"size":3988,"mtime":1634571747282,"results":"6","hashOfConfig":"5"},{"size":1834,"mtime":1634572087578,"results":"7","hashOfConfig":"5"},{"filePath":"8","messages":"9","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"zi1o5b",{"filePath":"10","messages":"11","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},{"filePath":"12","messages":"13","errorCount":0,"fatalErrorCount":0,"warningCount":0,"fixableErrorCount":0,"fixableWarningCount":0},"/home/kevin/Projects/KevinK.dev.js/gatsby-config.js",[],"/home/kevin/Projects/KevinK.dev.js/src/components/navigation.js",[],"/home/kevin/Projects/KevinK.dev.js/src/components/offscreenNav.js",[]] \ No newline at end of file diff --git a/content/scambox/001-hermine.mdx b/content/scambox/001-hermine.mdx new file mode 100644 index 0000000..cb0c104 --- /dev/null +++ b/content/scambox/001-hermine.mdx @@ -0,0 +1,14 @@ +--- +title: Harry Potter and the Toaster-Investment +url: harry-potter-and-the-toaster +platform: telegram +tags: [crypto] +published: 2021-11-05 +--- + +I've recently been contacted by Hermine on Telegram with a big business opportunity, +which was great because I, everyones favourite wizard-boy, need a new toaster! + +But how about you read it yourself? + + diff --git a/gatsby-config.js b/gatsby-config.js index 746d28c..213c95a 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -66,6 +66,13 @@ module.exports = { name: `projectTextblocks`, }, }, + { + resolve: `gatsby-source-filesystem`, + options: { + path: `${__dirname}/content/scambox`, + name: `scamboxContent`, + }, + }, "gatsby-plugin-mdx", { resolve: `gatsby-source-filesystem`, diff --git a/gatsby-node.js b/gatsby-node.js index 9d85976..6985ce3 100644 --- a/gatsby-node.js +++ b/gatsby-node.js @@ -6,6 +6,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => { const { createPage } = actions; const projectTemplate = path.resolve(`src/templates/project.js`); + const scamboxTemplate = path.resolve(`src/templates/scamboxPost.js`); const result = await graphql(` query AllPagesQuery { @@ -15,6 +16,23 @@ exports.createPages = async ({ actions, graphql, reporter }) => { urlname } } + + scambox: allFile( + filter: { sourceInstanceName: { eq: "scamboxContent" } } + ) { + nodes { + childMdx { + id + body + frontmatter { + platform + tags + title + url + } + } + } + } } `); @@ -40,6 +58,26 @@ exports.createPages = async ({ actions, graphql, reporter }) => { }, }); }); + + result.data.scambox.nodes.forEach((node) => { + if (!node.childMdx) return; + + // eslint-disable-next-line no-undef + console.log( + "Creating Page: ", + `/*/scambox/${node.childMdx.frontmatter.url}` + ); + + //["en", "de"].forEach((lang) => { + createPage({ + path: `/scambox/${node.childMdx.frontmatter.url}`, + component: scamboxTemplate, + context: { + mdxId: node.childMdx.id, + }, + }); + //}) + }); }; const config = require("./config.js"); diff --git a/locales/de/translation.json b/locales/de/translation.json index 9de77f7..2328655 100644 --- a/locales/de/translation.json +++ b/locales/de/translation.json @@ -1,45 +1,52 @@ { - "siteDescription": "Hallo, ich bin Kevin Kandlbinder, ein Entwickler und Hobby-Fotograf aus Norddeutschland.", - "imprint": "Impressum", - "datasec": "Datenschutz", - "disclaimer": "Disclaimer", - "projects": "Projekte", - "project": "Projekt", - "social": "Soziales", - "homeHello": "Hallo, ich bin", - "homeMe": "Ich bin", - "homeWebDeveloper": "Web Developer", - "homeMyLocation": "Quickborn, Schleswig-Holstein, Deutschland", - "donationCatchphrase": "Gefällt dir was du siehst? Spende doch etwas.", - "homeImageCredit": "Portrait aufgenommen von Jannik Kiel", - "de": "Deutsch", - "en": "Englisch", - "projectAboutHeader": "Über {{projectName}}", - "projectViewGitHub": "Auf GitHub anschauen", - "projectViewWebsite": "Projekt-Website anschauen", - "projectsDescription": "Das ist woran ich grade arbeite oder woran ich gearbeitet habe.", - "projectView": "Anschauen", - "socialDescriptionWithLink": "Finde mich auf anderen Plattformen oder <1>besuche meine Freunde!", - "socialDescription": "Finde mich auf anderen Plattformen!", - "friends": "Freunde", - "friendsDescription": "In dieser Liste stehen Freunde von mir und meiner Seite. Schau doch bei ihnen mal rein, wenn du mehr interessante Projekte sehen willst.", - "donateThanksText": "Ich finde es schön, dass du meine Arbeit schön findest und das zeigst! Sende mir gerne eine E-Mail an <1>{{contactEmail}} wenn du mit mir über irgendwas reden möchtest!", - "donateThanks": "Danke für die Spende!", - "donateDescription": "Hey! Es sieht so aus als würdest du über eine Spende nachdenken. Das ist nett! Wenn du ein bestimmtes Projekt unterstützen willst, schreibe deine Wünsche gerne in den Spendenkommentar.", - "donate": "Spenden", - "featuredProjects": "Vorgestellte Projekte", - "seeMore": "Mehr Projekte erkunden", - "donateGitHub": "Du kannst mich mit dem folgenden Button ganz einfach über GitHub Sponsors unterstützen!", - "donatePayPal": "Wenn du mich lieber über PayPal unterstützen willst ist hier der Button für dich:", - "sponsorGitHub": "Über GitHub unterstützen", - "mySkills": "Meine Fähigkeiten", - "about": "Über", - "explore": "Erkunde", - "myProjects": "meine Projekte", - "discover": "Entdecke", - "mySocials": "meine Accounts", - "learn": "Erfahre", - "moreAboutMe": "mehr über mich", - "home": "Home", - "menu": "Menü" + "siteDescription": "Hallo, ich bin Kevin Kandlbinder, ein Entwickler und Hobby-Fotograf aus Norddeutschland.", + "imprint": "Impressum", + "datasec": "Datenschutz", + "disclaimer": "Disclaimer", + "projects": "Projekte", + "project": "Projekt", + "social": "Soziales", + "homeHello": "Hallo, ich bin", + "homeMe": "Ich bin", + "homeWebDeveloper": "Web Developer", + "homeMyLocation": "Quickborn, Schleswig-Holstein, Deutschland", + "donationCatchphrase": "Gefällt dir was du siehst? Spende doch etwas.", + "homeImageCredit": "Portrait aufgenommen von Jannik Kiel", + "de": "Deutsch", + "en": "Englisch", + "projectAboutHeader": "Über {{projectName}}", + "projectViewGitHub": "Auf GitHub anschauen", + "projectViewWebsite": "Projekt-Website anschauen", + "projectsDescription": "Das ist woran ich grade arbeite oder woran ich gearbeitet habe.", + "projectView": "Anschauen", + "socialDescriptionWithLink": "Finde mich auf anderen Plattformen oder <1>besuche meine Freunde!", + "socialDescription": "Finde mich auf anderen Plattformen!", + "friends": "Freunde", + "friendsDescription": "In dieser Liste stehen Freunde von mir und meiner Seite. Schau doch bei ihnen mal rein, wenn du mehr interessante Projekte sehen willst.", + "donateThanksText": "Ich finde es schön, dass du meine Arbeit schön findest und das zeigst! Sende mir gerne eine E-Mail an <1>{{contactEmail}} wenn du mit mir über irgendwas reden möchtest!", + "donateThanks": "Danke für die Spende!", + "donateDescription": "Hey! Es sieht so aus als würdest du über eine Spende nachdenken. Das ist nett! Wenn du ein bestimmtes Projekt unterstützen willst, schreibe deine Wünsche gerne in den Spendenkommentar.", + "donate": "Spenden", + "featuredProjects": "Vorgestellte Projekte", + "seeMore": "Mehr Projekte erkunden", + "donateGitHub": "Du kannst mich mit dem folgenden Button ganz einfach über GitHub Sponsors unterstützen!", + "donatePayPal": "Wenn du mich lieber über PayPal unterstützen willst ist hier der Button für dich:", + "sponsorGitHub": "Über GitHub unterstützen", + "mySkills": "Meine Fähigkeiten", + "about": "Über", + "explore": "Erkunde", + "myProjects": "meine Projekte", + "discover": "Entdecke", + "mySocials": "meine Accounts", + "learn": "Erfahre", + "moreAboutMe": "mehr über mich", + "home": "Home", + "menu": "Menü", + "scambox": "Scambox", + "scamboxNotice": "Hinweis", + "scamboxLanguage": "Scambox ist nicht auf Deutsch verfügbar und wird auf Englisch angezeigt.", + "scamboxDescription": "Tauche mit mir ein in die Welt der Scams, die ich tagtäglich so bekomme, und lach ein bisschen mit mir!", + "scamboxReadFull": "Ganzen Post lesen »", + "scamboxPosted": "Gepostet am {{date}}", + "moreSoon": "Bald an dieser Stelle mehr" } diff --git a/locales/en/translation.json b/locales/en/translation.json index 20c7a49..aa1c999 100644 --- a/locales/en/translation.json +++ b/locales/en/translation.json @@ -1,45 +1,52 @@ { - "siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.", - "imprint": "Imprint", - "datasec": "Data Protection", - "disclaimer": "Disclaimer", - "projects": "Projects", - "project": "Project", - "social": "Social", - "homeHello": "Hello, I am", - "homeMe": "I am", - "homeWebDeveloper": "a web developer", - "homeMyLocation": "Quickborn, Schleswig-Holstein, Germany", - "donationCatchphrase": "Like what you're seeing? Consider donating.", - "homeImageCredit": "Portrait taken by Jannik Kiel", - "de": "German", - "en": "English", - "projectAboutHeader": "About {{projectName}}", - "projectViewGitHub": "View on GitHub", - "projectViewWebsite": "View Project-Website", - "projectsDescription": "This is what I am working on or have worked on.", - "projectView": "View", - "socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends!", - "socialDescription": "Find me on other platforms!", - "friends": "Friends", - "friendsDescription": "In this list you can find friends of mine and this site. Feel free to check them out for more interesting projects.", - "donate": "Donate", - "donateDescription": "Hey! It looks like you're thinking about donating to me. That's nice of you! If you want your donation to go towards a specific project, feel free to write your wishes into the donation comment.", - "donateThanks": "Thanks for donating!", - "donateThanksText": "I really appreciate you appreciating my work and showing it! Feel free to mail me at <1>{{contactEmail}} if you have anything you want to talk about!", - "featuredProjects": "Featured Projects", - "seeMore": "Explore more Projects", - "donateGitHub": "You can very easily support me via GitHub Sponsors using the following button!", - "donatePayPal": "If you'd rather support me via PayPal the following button is for you:", - "sponsorGitHub": "Sponsor using GitHub", - "mySkills": "My Skills", - "about": "About", - "explore": "Explore", - "myProjects": "my projects", - "discover": "Discover", - "mySocials": "my socials", - "learn": "Learn", - "moreAboutMe": "more about me", - "home": "Home", - "menu": "Menu" + "siteDescription": "Hello, I am Kevin Kandlbinder, a developer and hobby photographer from northern Germany.", + "imprint": "Imprint", + "datasec": "Data Protection", + "disclaimer": "Disclaimer", + "projects": "Projects", + "project": "Project", + "social": "Social", + "homeHello": "Hello, I am", + "homeMe": "I am", + "homeWebDeveloper": "a web developer", + "homeMyLocation": "Quickborn, Schleswig-Holstein, Germany", + "donationCatchphrase": "Like what you're seeing? Consider donating.", + "homeImageCredit": "Portrait taken by Jannik Kiel", + "de": "German", + "en": "English", + "projectAboutHeader": "About {{projectName}}", + "projectViewGitHub": "View on GitHub", + "projectViewWebsite": "View Project-Website", + "projectsDescription": "This is what I am working on or have worked on.", + "projectView": "View", + "socialDescriptionWithLink": "Find me on other platforms or <1>visit my friends!", + "socialDescription": "Find me on other platforms!", + "friends": "Friends", + "friendsDescription": "In this list you can find friends of mine and this site. Feel free to check them out for more interesting projects.", + "donate": "Donate", + "donateDescription": "Hey! It looks like you're thinking about donating to me. That's nice of you! If you want your donation to go towards a specific project, feel free to write your wishes into the donation comment.", + "donateThanks": "Thanks for donating!", + "donateThanksText": "I really appreciate you appreciating my work and showing it! Feel free to mail me at <1>{{contactEmail}} if you have anything you want to talk about!", + "featuredProjects": "Featured Projects", + "seeMore": "Explore more Projects", + "donateGitHub": "You can very easily support me via GitHub Sponsors using the following button!", + "donatePayPal": "If you'd rather support me via PayPal the following button is for you:", + "sponsorGitHub": "Sponsor using GitHub", + "mySkills": "My Skills", + "about": "About", + "explore": "Explore", + "myProjects": "my projects", + "discover": "Discover", + "mySocials": "my socials", + "learn": "Learn", + "moreAboutMe": "more about me", + "home": "Home", + "menu": "Menu", + "scambox": "Scambox", + "scamboxNotice": "Notice", + "scamboxLanguage": "Scambox is only available in English.", + "scamboxDescription": "Take a dive with me into all of the scams I get on the daily, and maybe laugh at them a little!", + "scamboxReadFull": "Read full post »", + "scamboxPosted": "Posted on {{date}}", + "moreSoon": "More to come" } diff --git a/package.json b/package.json index e1564f0..da45287 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@babel/cli": "7.16.0", "@babel/plugin-transform-typescript": "7.16.1", "@fontsource/fira-code": "4.5.1", + "@icons-pack/react-simple-icons": "^4.6.1", "@mdx-js/mdx": "1.6.22", "@mdx-js/react": "1.6.22", "animejs": "3.2.1", @@ -54,7 +55,8 @@ "react-helmet": "6.1.0", "react-i18next": "11.13.0", "sass": "1.43.4", - "tsparticles": "1.37.2" + "tsparticles": "1.37.2", + "utterances-react": "^0.1.3" }, "devDependencies": { "babel-eslint": "10.1.0", diff --git a/src/_variables.scss b/src/_variables.scss index 825650b..f6a4610 100644 --- a/src/_variables.scss +++ b/src/_variables.scss @@ -7,4 +7,6 @@ $textColor: white; $lightTextColor: black; $layoutPadding: 20px; +$noticeColor: rgba(#e52b3e, .15); + $mainFont: "Fira Code", monospace; diff --git a/src/components/navigation.js b/src/components/navigation.js index a6a2a54..358176e 100644 --- a/src/components/navigation.js +++ b/src/components/navigation.js @@ -104,6 +104,13 @@ const Navigation = ({ isHome }) => { > social + + scambox +
{ home about projects social + + scambox +
, document.getElementById("osnav") diff --git a/src/pages/scambox.js b/src/pages/scambox.js new file mode 100644 index 0000000..889001e --- /dev/null +++ b/src/pages/scambox.js @@ -0,0 +1,87 @@ +/* eslint-disable react/prop-types */ +import { graphql } from "gatsby"; +import { Link } from "gatsby-plugin-react-i18next"; +import React from "react"; +import { useTranslation } from "react-i18next"; + +import Layout from "../layouts/default"; + +import * as styles from "./scambox.module.scss"; + +const ScamBox = ({ data }) => { + const { t } = useTranslation(); + + return ( + +
+
+

{t("scambox")}

+ +

{t("scamboxDescription")}

+ +
+ {data.scambox.nodes.map((post) => { + return ( + + + {post.childMdx.frontmatter.title} + + + {t("scamboxPosted", { + date: post.childMdx.frontmatter + .published, + })} + + + + {post.childMdx.excerpt}{" "} + {t("scamboxReadFull")} + + + ); + })} +
+ + {t("moreSoon")} +
+
+ + ); +}; + +export const query = graphql` + query ($language: String!) { + scambox: allFile( + filter: { sourceInstanceName: { eq: "scamboxContent" } } + sort: { fields: childMdx___frontmatter___published, order: DESC } + ) { + nodes { + childMdx { + frontmatter { + platform + tags + title + url + published(formatString: "DD.MM.YYYY") + } + excerpt + } + } + } + locales: allLocale(filter: { language: { eq: $language } }) { + edges { + node { + ns + data + language + } + } + } + } +`; + +export default ScamBox; diff --git a/src/pages/scambox.module.scss b/src/pages/scambox.module.scss new file mode 100644 index 0000000..efcaef2 --- /dev/null +++ b/src/pages/scambox.module.scss @@ -0,0 +1,45 @@ +@import "../variables"; +@import "../mixins"; + +.list { + display: flex; + flex-direction: column; + margin-top: $layoutPadding; + + .post { + text-decoration: none; + display: flex; + flex-direction: column; + color: inherit; + padding: $layoutPadding; + + border-bottom: thin dotted grey; + + .title { + color: $accentColor; + font-size: 1.5em; + text-decoration: underline dotted currentColor; + } + + .meta { + margin-bottom: 10px; + opacity: .5; + } + + .excerpt { + margin-left: 10px; + + > span { + color: $accentColor; + text-decoration: underline dotted currentColor; + } + } + } +} + +.moreSoon { + display: block; + padding: $layoutPadding; + text-align: center; + opacity: .5; +} \ No newline at end of file diff --git a/src/templates/scamboxPost.js b/src/templates/scamboxPost.js new file mode 100644 index 0000000..20d6b5a --- /dev/null +++ b/src/templates/scamboxPost.js @@ -0,0 +1,89 @@ +/* eslint-disable react/prop-types */ +import { graphql } from "gatsby"; +import { MDXRenderer } from "gatsby-plugin-mdx"; +import { MDXProvider } from "@mdx-js/react"; +import React from "react"; +import { useTranslation } from "react-i18next"; +import Utterances from "utterances-react"; + +import Layout from "../layouts/default"; + +import * as styles from "./scamboxPost.module.scss"; + +const ScamBoxPost = ({ data }) => { + const { t, i18n } = useTranslation(); + + return ( + +
+
+

{data.mdx.frontmatter.title}

+ + {t("scamboxPosted", { + date: data.mdx.frontmatter.published, + })} + + + {i18n.language !== "en" && ( +
+ {t("scamboxNotice")} +

{t("scamboxLanguage")}

+
+ )} + + + {data.mdx.body} + + + +
+
+ + ); +}; + +const Chat = ({ src, type }) => { + return ( +
+ {type == "telegram" && Telegram-Chat} +