kevin/KevinK.dev.js
1
0
Fork 0
mirror of https://github.com/Unkn0wnCat/KevinK.dev.js.git synced 2025-05-19 11:56:32 +02:00
Code Issues Projects Releases Wiki Activity

Add scambox

Browse source
This commit is contained in:
Kevin Kandlbinder 2021-11-05 22:29:08 +00:00 • committed by GitHub
parent 31fd2e5755
commit 5c17277817
16 changed files with 611 additions and 97 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/_variables.scss
View file

@ -7,4 +7,6 @@ $textColor: white;
$lightTextColor: black;
$layoutPadding: 20px;
$noticeColor: rgba(#e52b3e, .15);
$mainFont: "Fira Code", monospace;

7
src/components/navigation.js
View file

@ -104,6 +104,13 @@ const Navigation = ({ isHome }) => {
>
<Trans>social</Trans>
</Link>
<Link
id="navBtnScambox"
to="/scambox"
activeClassName={styles.active}
>
<Trans>scambox</Trans>
</Link>
<div className={styles.hamburger}>
<Hamburger
toggle={setOffscreenNavActive}

4
src/components/navigation.module.scss
View file

@ -115,7 +115,7 @@
height: 43px;
margin-top: -3px;
@media (max-width: 500px) {
@media (max-width: 600px) {
display: block;
}
}
@ -141,7 +141,7 @@
}
}
@media (max-width: 500px) {
@media (max-width: 600px) {
&:not(.logo) {
display: none;
}

13
src/components/offscreenNav.js
View file

@ -27,26 +27,33 @@ const OffScreenNav = ({ active, close }) => {
<Trans>home</Trans>
</Link>
<Link
id="navBtnProjects"
id="osnavBtnProjects"
to="/about"
activeClassName={styles.active}
>
<Trans>about</Trans>
</Link>
<Link
id="navBtnProjects"
id="osnavBtnProjects"
to="/projects"
activeClassName={styles.active}
>
<Trans>projects</Trans>
</Link>
<Link
id="navBtnSocial"
id="osnavBtnSocial"
to="/social"
activeClassName={styles.active}
>
<Trans>social</Trans>
</Link>
<Link
id="osnavBtnScambox"
to="/scambox"
activeClassName={styles.active}
>
<Trans>scambox</Trans>
</Link>
</div>
</div>,
document.getElementById("osnav")

87
src/pages/scambox.js Normal file
View file

@ -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 (
<Layout title={t("scambox")} description={t("scamboxDescription")}>
<section>
<article>
<h1>{t("scambox")}</h1>
<p>{t("scamboxDescription")}</p>
<div className={styles.list}>
{data.scambox.nodes.map((post) => {
return (
<Link
to={`/scambox/${post.childMdx.frontmatter.url}`}
key={post.childMdx.slug}
className={styles.post}
>
<span className={styles.title}>
{post.childMdx.frontmatter.title}
</span>
<span className={styles.meta}>
{t("scamboxPosted", {
date: post.childMdx.frontmatter
.published,
})}
</span>
<span className={styles.excerpt}>
{post.childMdx.excerpt}{" "}
<span>{t("scamboxReadFull")}</span>
</span>
</Link>
);
})}
</div>
<span className={styles.moreSoon}>{t("moreSoon")}</span>
</article>
</section>
</Layout>
);
};
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;

45
src/pages/scambox.module.scss Normal file
View file

@ -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;
}

89
src/templates/scamboxPost.js Normal file
View file

@ -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;

67
src/templates/scamboxPost.module.scss Normal file
View file

@ -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);
}
}
}