Add scambox

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 (
+        <Layout
+            title={`${data.mdx.frontmatter.title} | ${t("scambox")}`}
+            description={data.mdx.excerpt}
+        >
+            <section className={styles.scamboxSection}>
+                <article>
+                    <h1>{data.mdx.frontmatter.title}</h1>
+                    <span className={styles.meta}>
+                        {t("scamboxPosted", {
+                            date: data.mdx.frontmatter.published,
+                        })}
+                    </span>
+
+                    {i18n.language !== "en" && (
+                        <div className={styles.noticeBox}>
+                            <b>{t("scamboxNotice")}</b>
+                            <p>{t("scamboxLanguage")}</p>
+                        </div>
+                    )}
+
+                    <MDXProvider components={{ Chat }}>
+                        <MDXRenderer>{data.mdx.body}</MDXRenderer>
+                    </MDXProvider>
+
+                    <Utterances
+                        repo="Unkn0wnCat/KevinK.dev.js"
+                        issueTerm={`Scambox-Comments: ${data.mdx.frontmatter.title}`}
+                        theme="preferred-color-scheme"
+                        label="comments"
+                        style={{
+                            marginTop: "50px",
+                        }}
+                    />
+                </article>
+            </section>
+        </Layout>
+    );
+};
+
+const Chat = ({ src, type }) => {
+    return (
+        <div className={styles.chatBox}>
+            {type == "telegram" && <span>Telegram-Chat</span>}
+            <iframe src={src} />
+        </div>
+    );
+};
+
+export const query = graphql`
+    query ($language: String!, $mdxId: String!) {
+        mdx(id: { eq: $mdxId }) {
+            body
+            excerpt
+            frontmatter {
+                platform
+                tags
+                title
+                published(formatString: "DD.MM.YYYY")
+            }
+        }
+        locales: allLocale(filter: { language: { eq: $language } }) {
+            edges {
+                node {
+                    ns
+                    data
+                    language
+                }
+            }
+        }
+    }
+`;
+
+export default ScamBoxPost;

src/templates/scamboxPost.module.scss

@@ -0,0 +1,67 @@
+@import "../variables";
+@import "../mixins";
+
+.scamboxSection {
+    flex-grow: 1;
+}
+
+.noticeBox {
+    background-color: $noticeColor;
+    padding: $layoutPadding;
+    border-radius: 10px;
+
+    > p {
+        margin-bottom: 0;
+    }
+}
+
+.meta {
+    display: block;
+    margin-top: -25px;
+    margin-bottom: $layoutPadding*2;
+}
+
+.chatBox {
+    width: 100%;
+    min-height: 600px;
+    border-radius: 10px;
+    position: relative;
+    margin-top: 20px;
+
+    > span {
+        position: relative;
+        top: 0;
+        left: 20px;
+        display: flex;
+        justify-content: left;
+        align-items: center;
+        text-shadow: 0 0 10px black;
+        z-index: 20;
+        //color: $accentColor;
+        font-size: 1.5em;
+
+        > svg {
+            margin-right: 10px;
+        }
+    }
+
+
+    > iframe {
+        position: absolute;
+        top: 25px;
+        left: 0;
+        width: 100%;
+        height: calc(100% - 25px);
+        border: none;
+        outline: none;
+        border-radius: 10px;
+        box-shadow: -1px 11px 33px -10px rgba(127, 127, 127, 0.2),
+            -1px 11px 33px -10px rgba($accentColor, 0.25);
+
+        @media (prefers-color-scheme: light) {
+            box-shadow: -1px 11px 33px -10px rgba(29, 29, 29, 0.2),
+                -1px 11px 33px -10px rgba($accentColor, 0.25);
+        }
+    }
+
+}