mirror of
https://github.com/Unkn0wnCat/KevinK.dev.js.git
synced 2025-04-30 10:46:57 +02:00
Add full blogging functionality
This commit is contained in:
GitHub
parent
bb7486635c
commit
c8e8351b43
14 changed files with 557 additions and 178 deletions
|
|
@ -1,9 +1,13 @@
|
|||
---
|
||||
section: scambox
|
||||
language: en
|
||||
title: Harry Potter and the Toaster-Investment
|
||||
url: harry-potter-and-the-toaster
|
||||
platform: telegram
|
||||
tags: [crypto]
|
||||
published: 2021-11-05 22:00:00
|
||||
author:
|
||||
name: Kevin Kandlbinder
|
||||
---
|
||||
|
||||
I've recently been contacted by Hermine on Telegram with a big business opportunity,
|
||||
|
|
@ -69,8 +69,8 @@ module.exports = {
|
|||
{
|
||||
resolve: `gatsby-source-filesystem`,
|
||||
options: {
|
||||
path: `${__dirname}/content/scambox`,
|
||||
name: `scamboxContent`,
|
||||
path: `${__dirname}/content/blog`,
|
||||
name: `blogContent`,
|
||||
},
|
||||
},
|
||||
"gatsby-plugin-mdx",
|
||||
|
|
@ -128,8 +128,8 @@ module.exports = {
|
|||
interpolation: {
|
||||
escapeValue: false, // not needed for react as it escapes by default
|
||||
},
|
||||
keySeparator: false,
|
||||
nsSeparator: false,
|
||||
keySeparator: ".",
|
||||
nsSeparator: ":",
|
||||
},
|
||||
pages: [
|
||||
{
|
||||
|
|
@ -137,8 +137,14 @@ module.exports = {
|
|||
getLanguageFromPath: true,
|
||||
excludeLanguages: extConfig.languages,
|
||||
},
|
||||
{
|
||||
matchPath: "/:lang/blog/:urlname*",
|
||||
getLanguageFromPath: true,
|
||||
excludeLanguages: extConfig.languages,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
`gatsby-plugin-netlify`,
|
||||
],
|
||||
};
|
||||
|
|
|
|||
120
gatsby-node.js
120
gatsby-node.js
|
|
@ -1,12 +1,12 @@
|
|||
/* eslint-disable no-undef */
|
||||
const path = require(`path`);
|
||||
const fs = require("fs");
|
||||
const { paginate } = require("gatsby-awesome-pagination");
|
||||
|
||||
exports.createPages = async ({ actions, graphql, reporter }) => {
|
||||
const { createPage } = actions;
|
||||
const { createPage, createRedirect } = actions;
|
||||
|
||||
const projectTemplate = path.resolve(`src/templates/project.js`);
|
||||
const scamboxTemplate = path.resolve(`src/templates/scamboxPost.js`);
|
||||
|
||||
const result = await graphql(`
|
||||
query AllPagesQuery {
|
||||
|
|
@ -17,8 +17,8 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
|
|||
}
|
||||
}
|
||||
|
||||
scambox: allFile(
|
||||
filter: { sourceInstanceName: { eq: "scamboxContent" } }
|
||||
blog: allFile(
|
||||
filter: { sourceInstanceName: { eq: "blogContent" } }
|
||||
) {
|
||||
nodes {
|
||||
childMdx {
|
||||
|
|
@ -29,6 +29,9 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
|
|||
tags
|
||||
title
|
||||
url
|
||||
section
|
||||
language
|
||||
published(formatString: "YYYY/MM")
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -59,24 +62,121 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
|
|||
});
|
||||
});
|
||||
|
||||
result.data.scambox.nodes.forEach((node) => {
|
||||
const blogListingTemplate = path.resolve(`src/templates/blogListing.js`);
|
||||
const blogTemplate = path.resolve(`src/templates/blogPost.js`);
|
||||
|
||||
console.log("Creating blog listing...");
|
||||
|
||||
["en", "de"].forEach((lang) =>
|
||||
paginate({
|
||||
createPage,
|
||||
items: result.data.blog.nodes,
|
||||
itemsPerPage: 10,
|
||||
pathPrefix: `/${lang}/blog`,
|
||||
component: blogListingTemplate,
|
||||
context: {
|
||||
lang,
|
||||
},
|
||||
})
|
||||
);
|
||||
|
||||
let processedSections = ["blog"];
|
||||
|
||||
result.data.blog.nodes.forEach((node) => {
|
||||
if (!node.childMdx) return;
|
||||
|
||||
if (
|
||||
!processedSections.includes(
|
||||
node.childMdx.frontmatter.section ?? "blog"
|
||||
)
|
||||
) {
|
||||
processedSections.push(node.childMdx.frontmatter.section);
|
||||
|
||||
console.log(
|
||||
"Creating section listing for " +
|
||||
node.childMdx.frontmatter.section +
|
||||
"..."
|
||||
);
|
||||
|
||||
["en", "de"].forEach((lang) =>
|
||||
paginate({
|
||||
createPage,
|
||||
items: result.data.blog.nodes.filter(
|
||||
(e) =>
|
||||
e.childMdx.frontmatter.section ===
|
||||
node.childMdx.frontmatter.section
|
||||
),
|
||||
itemsPerPage: 10,
|
||||
pathPrefix: `/${lang}/blog/${node.childMdx.frontmatter.section}`,
|
||||
component: blogListingTemplate,
|
||||
context: {
|
||||
lang,
|
||||
section: node.childMdx.frontmatter.section,
|
||||
},
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-undef
|
||||
console.log(
|
||||
"Creating Page: ",
|
||||
`/*/scambox/${node.childMdx.frontmatter.url}`
|
||||
`/${node.childMdx.frontmatter.language}/blog/${
|
||||
node.childMdx.frontmatter.section ?? "blog"
|
||||
}/${node.childMdx.frontmatter.url}`
|
||||
);
|
||||
|
||||
//["en", "de"].forEach((lang) => {
|
||||
createPage({
|
||||
path: `/scambox/${node.childMdx.frontmatter.url}`,
|
||||
component: scamboxTemplate,
|
||||
path: `/${node.childMdx.frontmatter.language}/blog/${
|
||||
node.childMdx.frontmatter.section
|
||||
? node.childMdx.frontmatter.section + "/"
|
||||
: ""
|
||||
}${node.childMdx.frontmatter.published}/${
|
||||
node.childMdx.frontmatter.url
|
||||
}`,
|
||||
component: blogTemplate,
|
||||
context: {
|
||||
mdxId: node.childMdx.id,
|
||||
lang: node.childMdx.frontmatter.language,
|
||||
},
|
||||
});
|
||||
//})
|
||||
|
||||
["en", "de"].forEach((lang) => {
|
||||
if (lang === node.childMdx.frontmatter.language) return;
|
||||
|
||||
createRedirect({
|
||||
fromPath: `/${lang}/blog/${
|
||||
node.childMdx.frontmatter.section
|
||||
? node.childMdx.frontmatter.section + "/"
|
||||
: ""
|
||||
}${node.childMdx.frontmatter.published}/${
|
||||
node.childMdx.frontmatter.url
|
||||
}`,
|
||||
toPath: `/${node.childMdx.frontmatter.language}/blog/${
|
||||
node.childMdx.frontmatter.section
|
||||
? node.childMdx.frontmatter.section + "/"
|
||||
: ""
|
||||
}${node.childMdx.frontmatter.published}/${
|
||||
node.childMdx.frontmatter.url
|
||||
}`,
|
||||
redirectInBrowser: true,
|
||||
permanent: true,
|
||||
});
|
||||
|
||||
if (node.childMdx.frontmatter.section === "scambox") {
|
||||
createRedirect({
|
||||
fromPath: `/${lang}/scambox/${node.childMdx.frontmatter.url}`,
|
||||
toPath: `/${node.childMdx.frontmatter.language}/blog/${
|
||||
node.childMdx.frontmatter.section
|
||||
? node.childMdx.frontmatter.section + "/"
|
||||
: ""
|
||||
}${node.childMdx.frontmatter.published}/${
|
||||
node.childMdx.frontmatter.url
|
||||
}`,
|
||||
redirectInBrowser: true,
|
||||
permanent: true,
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -48,5 +48,31 @@
|
|||
"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"
|
||||
"moreSoon": "More to come",
|
||||
"language": {
|
||||
"en": {
|
||||
"name": "English"
|
||||
},
|
||||
"de": {
|
||||
"name": "German"
|
||||
}
|
||||
},
|
||||
"blog": {
|
||||
"title": "Blog",
|
||||
"readFull": "Read full post »",
|
||||
"meta": "Posted on {{date}} by {{author}}",
|
||||
"page": "Page {{page}}/{{maxPage}}",
|
||||
"previous": "Previous",
|
||||
"next": "Next",
|
||||
"section": {
|
||||
"blog": {
|
||||
"name": "Blog",
|
||||
"description": "Read all about my exciting life!"
|
||||
},
|
||||
"scambox": {
|
||||
"name": "Scambox",
|
||||
"description": "Take a dive with me into all of the scams I get on the daily, and maybe laugh at them a little!"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,11 +27,13 @@
|
|||
"animejs": "3.2.1",
|
||||
"babel-plugin-i18next-extract": "0.8.3",
|
||||
"gatsby": "4.1.0",
|
||||
"gatsby-awesome-pagination": "^0.3.8",
|
||||
"gatsby-cli": "4.1.0",
|
||||
"gatsby-plugin-asset-path": "3.0.4",
|
||||
"gatsby-plugin-image": "2.1.0",
|
||||
"gatsby-plugin-manifest": "4.1.0",
|
||||
"gatsby-plugin-mdx": "3.1.0",
|
||||
"gatsby-plugin-netlify": "^3.14.0",
|
||||
"gatsby-plugin-offline": "5.1.0",
|
||||
"gatsby-plugin-portal": "1.0.7",
|
||||
"gatsby-plugin-react-helmet": "5.1.0",
|
||||
|
|
|
|||
|
|
@ -105,11 +105,11 @@ const Navigation = ({ isHome }) => {
|
|||
<Trans>social</Trans>
|
||||
</Link>
|
||||
<Link
|
||||
id="navBtnScambox"
|
||||
to="/scambox"
|
||||
id="navBtnBlog"
|
||||
to="/blog"
|
||||
activeClassName={styles.active}
|
||||
>
|
||||
<Trans>scambox</Trans>
|
||||
<Trans>blog.title</Trans>
|
||||
</Link>
|
||||
<div className={styles.hamburger}>
|
||||
<Hamburger
|
||||
|
|
|
|||
|
|
@ -48,11 +48,11 @@ const OffScreenNav = ({ active, close }) => {
|
|||
<Trans>social</Trans>
|
||||
</Link>
|
||||
<Link
|
||||
id="osnavBtnScambox"
|
||||
to="/scambox"
|
||||
id="osnavBtnBlog"
|
||||
to="/blog"
|
||||
activeClassName={styles.active}
|
||||
>
|
||||
<Trans>scambox</Trans>
|
||||
<Trans>blog.title</Trans>
|
||||
</Link>
|
||||
</div>
|
||||
</div>,
|
||||
|
|
|
|||
|
|
@ -1,87 +0,0 @@
|
|||
/* 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;
|
||||
|
|
@ -1,45 +0,0 @@
|
|||
@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;
|
||||
}
|
||||
187
src/templates/blogListing.js
Normal file
187
src/templates/blogListing.js
Normal file
|
|
@ -0,0 +1,187 @@
|
|||
/* eslint-disable react/prop-types */
|
||||
import { graphql, Link as Link2 } from "gatsby";
|
||||
import { StaticImage } from "gatsby-plugin-image";
|
||||
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 "./blogListing.module.scss";
|
||||
|
||||
const BlogListing = ({ data, pageContext }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const title = t(`blog.section.${pageContext.section ?? "blog"}.name`);
|
||||
const description = t(
|
||||
`blog.section.${pageContext.section ?? "blog"}.description`
|
||||
);
|
||||
|
||||
const hasSection = typeof pageContext.section !== "undefined";
|
||||
|
||||
return (
|
||||
<Layout title={title} description={description}>
|
||||
<section>
|
||||
<article>
|
||||
{hasSection && (
|
||||
<Link to={"/blog"} className={styles.sectionBacklink}>
|
||||
{t("blog.title")} /
|
||||
</Link>
|
||||
)}
|
||||
<h1>{title}</h1>
|
||||
|
||||
<p>{description}</p>
|
||||
|
||||
{!hasSection && (
|
||||
<>
|
||||
<h2>Sections</h2>
|
||||
|
||||
<div className={styles.sectionList}>
|
||||
<Link
|
||||
className={styles.sectionCard}
|
||||
to={"/blog/scambox"}
|
||||
>
|
||||
<div className={styles.sectionImage}>
|
||||
<div className={styles.sectionBg}>
|
||||
<StaticImage src="https://source.unsplash.com/gf8e6XvG_3E/300x150"></StaticImage>
|
||||
</div>
|
||||
<span className={styles.sectionName}>
|
||||
Scambox
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
<h2>Posts</h2>
|
||||
|
||||
<div className={styles.list}>
|
||||
{data.posts.nodes.map((post) => {
|
||||
return (
|
||||
<Link2
|
||||
to={`/${
|
||||
post.childMdx.frontmatter.language
|
||||
}/blog/${
|
||||
post.childMdx.frontmatter.section
|
||||
? post.childMdx.frontmatter
|
||||
.section + "/"
|
||||
: ""
|
||||
}${
|
||||
post.childMdx.frontmatter.urlPublished
|
||||
}/${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("blog.meta", {
|
||||
date: post.childMdx.frontmatter
|
||||
.published,
|
||||
author: post.childMdx.frontmatter
|
||||
.author.name,
|
||||
})}
|
||||
|
||||
{post.childMdx.frontmatter.section &&
|
||||
!hasSection && (
|
||||
<>
|
||||
{" | "}
|
||||
<Link
|
||||
to={`/blog/${post.childMdx.frontmatter.section}`}
|
||||
>
|
||||
{t(
|
||||
`blog.section.${post.childMdx.frontmatter.section}.name`
|
||||
)}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
|
||||
{" | "}
|
||||
{t(
|
||||
`language.${post.childMdx.frontmatter.language}.name`
|
||||
)}
|
||||
</span>
|
||||
|
||||
<span className={styles.excerpt}>
|
||||
{post.childMdx.excerpt}{" "}
|
||||
<span>{t("blog.readFull")}</span>
|
||||
</span>
|
||||
</Link2>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
<div className={styles.pageSwitcher}>
|
||||
{pageContext.pageNumber > 0 ? (
|
||||
<Link to={pageContext.previousPagePath}>
|
||||
{t("blog.previous")}
|
||||
</Link>
|
||||
) : (
|
||||
<span></span>
|
||||
)}
|
||||
<span>
|
||||
{t("blog.page", {
|
||||
page: pageContext.humanPageNumber,
|
||||
maxPage: pageContext.numberOfPages,
|
||||
})}
|
||||
</span>
|
||||
{pageContext.humanPageNumber <
|
||||
pageContext.numberOfPages ? (
|
||||
<Link to={pageContext.nextPagePath}>
|
||||
{t("blog.next")}
|
||||
</Link>
|
||||
) : (
|
||||
<span></span>
|
||||
)}
|
||||
</div>
|
||||
</article>
|
||||
</section>
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export const query = graphql`
|
||||
query ($language: String!, $skip: Int!, $limit: Int!, $section: String) {
|
||||
posts: allFile(
|
||||
filter: {
|
||||
sourceInstanceName: { eq: "blogContent" }
|
||||
childMdx: { frontmatter: { section: { eq: $section } } }
|
||||
}
|
||||
sort: { fields: childMdx___frontmatter___published, order: DESC }
|
||||
limit: $limit
|
||||
skip: $skip
|
||||
) {
|
||||
nodes {
|
||||
childMdx {
|
||||
frontmatter {
|
||||
platform
|
||||
tags
|
||||
title
|
||||
url
|
||||
published(formatString: "DD.MM.YYYY")
|
||||
urlPublished: published(formatString: "YYYY/MM")
|
||||
section
|
||||
language
|
||||
author {
|
||||
name
|
||||
}
|
||||
}
|
||||
excerpt
|
||||
}
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
edges {
|
||||
node {
|
||||
ns
|
||||
data
|
||||
language
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default BlogListing;
|
||||
109
src/templates/blogListing.module.scss
Normal file
109
src/templates/blogListing.module.scss
Normal file
|
|
@ -0,0 +1,109 @@
|
|||
@import "../variables";
|
||||
@import "../mixins";
|
||||
|
||||
.sectionBacklink {
|
||||
display: block;
|
||||
margin-top: 2rem;
|
||||
margin-bottom: -2rem;
|
||||
font-size: .8em;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.sectionList {
|
||||
@include flexList;
|
||||
|
||||
.sectionCard {
|
||||
@include cardGeneric;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
.sectionImage {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
flex-direction: column-reverse;
|
||||
text-shadow: 0 0 10px black, 0 0 10px black, 0 0 20px black;
|
||||
color: white;
|
||||
position: relative;
|
||||
|
||||
.sectionBg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.sectionName {
|
||||
font-size: 2em;
|
||||
margin-top: -5px;
|
||||
z-index: 100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.pageSwitcher {
|
||||
display: flex;
|
||||
margin-top: $layoutPadding;
|
||||
|
||||
>* {
|
||||
width: 33%;
|
||||
}
|
||||
|
||||
:nth-child(2) {
|
||||
text-align: center;
|
||||
}
|
||||
:nth-child(3) {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
|
@ -8,14 +8,15 @@ import Utterances from "utterances-react";
|
|||
|
||||
import Layout from "../layouts/default";
|
||||
|
||||
import * as styles from "./scamboxPost.module.scss";
|
||||
import * as styles from "./blogPost.module.scss";
|
||||
import { Link } from "gatsby-plugin-react-i18next";
|
||||
|
||||
const ScamBoxPost = ({ data }) => {
|
||||
const { t, i18n } = useTranslation();
|
||||
const BlogPost = ({ data }) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<Layout
|
||||
title={`${data.mdx.frontmatter.title} | ${t("scambox")}`}
|
||||
title={`${data.mdx.frontmatter.title}`}
|
||||
description={data.mdx.excerpt}
|
||||
seoAdditional={
|
||||
<script type="application/ld+json">
|
||||
|
|
@ -28,13 +29,12 @@ const ScamBoxPost = ({ data }) => {
|
|||
"https://example.com/photos/4x3/photo.jpg",
|
||||
"https://example.com/photos/16x9/photo.jpg"
|
||||
],*/
|
||||
datePublished: data.mdx.publishedIso,
|
||||
dateModified: data.mdx.publishedIso,
|
||||
datePublished: data.mdx.frontmatter.publishedIso,
|
||||
dateModified: data.mdx.frontmatter.publishedIso,
|
||||
author: [
|
||||
{
|
||||
"@type": "Person",
|
||||
name: "Kevin Kandlbinder",
|
||||
url: "https://kevink.dev",
|
||||
name: data.mdx.frontmatter.author.name,
|
||||
},
|
||||
],
|
||||
})}
|
||||
|
|
@ -47,11 +47,15 @@ const ScamBoxPost = ({ data }) => {
|
|||
},
|
||||
{
|
||||
name: "article:published_time",
|
||||
content: data.mdx.publishedIso,
|
||||
content: data.mdx.frontmatter.publishedIso,
|
||||
},
|
||||
{
|
||||
name: "article:section",
|
||||
content: "Scambox",
|
||||
content: t(
|
||||
`blog.section.${
|
||||
data.mdx.frontmatter.section ?? "blog"
|
||||
}.name`
|
||||
),
|
||||
},
|
||||
{
|
||||
name: "keywords",
|
||||
|
|
@ -63,17 +67,24 @@ const ScamBoxPost = ({ data }) => {
|
|||
<article>
|
||||
<h1>{data.mdx.frontmatter.title}</h1>
|
||||
<span className={styles.meta}>
|
||||
{t("scamboxPosted", {
|
||||
{t("blog.meta", {
|
||||
date: data.mdx.frontmatter.published,
|
||||
author: data.mdx.frontmatter.author.name,
|
||||
})}
|
||||
</span>
|
||||
|
||||
{i18n.language !== "en" && (
|
||||
<div className={styles.noticeBox}>
|
||||
<b>{t("scamboxNotice")}</b>
|
||||
<p>{t("scamboxLanguage")}</p>
|
||||
</div>
|
||||
)}
|
||||
{data.mdx.frontmatter.section && (
|
||||
<>
|
||||
{" | "}
|
||||
<Link
|
||||
to={`/blog/${data.mdx.frontmatter.section}`}
|
||||
>
|
||||
{t(
|
||||
`blog.section.${data.mdx.frontmatter.section}.name`
|
||||
)}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</span>
|
||||
|
||||
<MDXProvider components={{ Chat }}>
|
||||
<MDXRenderer>{data.mdx.body}</MDXRenderer>
|
||||
|
|
@ -81,7 +92,7 @@ const ScamBoxPost = ({ data }) => {
|
|||
|
||||
<Utterances
|
||||
repo="Unkn0wnCat/KevinK.dev.js"
|
||||
issueTerm={`Scambox-Comments: ${data.mdx.frontmatter.title}`}
|
||||
issueTerm={`Blog-Comments: ${data.mdx.frontmatter.title}`}
|
||||
theme="preferred-color-scheme"
|
||||
label="comments"
|
||||
style={{
|
||||
|
|
@ -114,6 +125,10 @@ export const query = graphql`
|
|||
title
|
||||
published(formatString: "DD.MM.YYYY")
|
||||
publishedIso: published(formatString: "")
|
||||
author {
|
||||
name
|
||||
}
|
||||
section
|
||||
}
|
||||
}
|
||||
locales: allLocale(filter: { language: { eq: $language } }) {
|
||||
|
|
@ -128,4 +143,4 @@ export const query = graphql`
|
|||
}
|
||||
`;
|
||||
|
||||
export default ScamBoxPost;
|
||||
export default BlogPost;
|
||||
72
yarn.lock
72
yarn.lock
|
|
@ -1186,6 +1186,13 @@
|
|||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/runtime@^7.14.8":
|
||||
version "7.16.0"
|
||||
resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.16.0.tgz#e27b977f2e2088ba24748bf99b5e1dece64e4f0b"
|
||||
integrity sha512-Nht8L0O8YCktmsDV6FqFue7vQLRx3Hb0B37lS5y0jDRqRxlBG4wIJHnf9/bgSE2UyipKFA01YtS+npRdTWBUyw==
|
||||
dependencies:
|
||||
regenerator-runtime "^0.13.4"
|
||||
|
||||
"@babel/standalone@^7.15.5":
|
||||
version "7.15.7"
|
||||
resolved "https://registry.yarnpkg.com/@babel/standalone/-/standalone-7.15.7.tgz#97c04d0dda7c3b2b8d2679957d619ac581471d4d"
|
||||
|
|
@ -3593,7 +3600,7 @@ chalk@^3.0.0:
|
|||
ansi-styles "^4.1.0"
|
||||
supports-color "^7.1.0"
|
||||
|
||||
chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
|
||||
chalk@^4.0, chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.2:
|
||||
version "4.1.2"
|
||||
resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
|
||||
integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
|
||||
|
|
@ -4514,7 +4521,7 @@ deep-is@^0.1.3:
|
|||
resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
|
||||
integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
|
||||
|
||||
deepmerge@^4.0.0, deepmerge@^4.2.2:
|
||||
deepmerge@^4.0, deepmerge@^4.0.0, deepmerge@^4.2.2:
|
||||
version "4.2.2"
|
||||
resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
|
||||
integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
|
||||
|
|
@ -5899,6 +5906,13 @@ functional-red-black-tree@^1.0.1:
|
|||
resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
|
||||
integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
|
||||
|
||||
gatsby-awesome-pagination@^0.3.8:
|
||||
version "0.3.8"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-awesome-pagination/-/gatsby-awesome-pagination-0.3.8.tgz#e50f048ed9b25aecf5e2cd7269cdbd77f168301f"
|
||||
integrity sha512-Bnf2rncqjyhQeye8w+OVK8wmgu/Y77HI8Po05oEqbCSd+fMd0uGDv6ZhKH7UU/xcTv2cbJm7ie+Px9t41ngAxg==
|
||||
dependencies:
|
||||
lodash "^4.17.21"
|
||||
|
||||
gatsby-cli@4.1.0, gatsby-cli@^4.1.0:
|
||||
version "4.1.0"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-cli/-/gatsby-cli-4.1.0.tgz#6e0e3ed5a7abc2f8499fd7c7ab43fab56703d0bd"
|
||||
|
|
@ -6103,6 +6117,17 @@ gatsby-plugin-mdx@3.1.0:
|
|||
unist-util-remove "^1.0.3"
|
||||
unist-util-visit "^1.4.1"
|
||||
|
||||
gatsby-plugin-netlify@^3.14.0:
|
||||
version "3.14.0"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-plugin-netlify/-/gatsby-plugin-netlify-3.14.0.tgz#fa1b2441531d958a26b378c76753c5d24bd428d5"
|
||||
integrity sha512-+lv5i0IhtIHFecP3uL6u/vF0DzDBGlkGzPyPIhgM1krZqlLy2LzKos1nyCMoi7aHm54/B8DENl4J+hMCkC0wjQ==
|
||||
dependencies:
|
||||
"@babel/runtime" "^7.14.8"
|
||||
fs-extra "^10.0.0"
|
||||
kebab-hash "^0.1.2"
|
||||
lodash "^4.17.21"
|
||||
webpack-assets-manifest "^5.0.6"
|
||||
|
||||
gatsby-plugin-offline@5.1.0:
|
||||
version "5.1.0"
|
||||
resolved "https://registry.yarnpkg.com/gatsby-plugin-offline/-/gatsby-plugin-offline-5.1.0.tgz#bccd6224dcd71443dee277b79dcec15d696d92e9"
|
||||
|
|
@ -8063,6 +8088,13 @@ jsonify@~0.0.0:
|
|||
array-includes "^3.1.3"
|
||||
object.assign "^4.1.2"
|
||||
|
||||
kebab-hash@^0.1.2:
|
||||
version "0.1.2"
|
||||
resolved "https://registry.yarnpkg.com/kebab-hash/-/kebab-hash-0.1.2.tgz#dfb7949ba34d8e70114ea7d83e266e5e2a4abaac"
|
||||
integrity sha512-BTZpq3xgISmQmAVzkISy4eUutsUA7s4IEFlCwOBJjvSFOwyR7I+fza+tBc/rzYWK/NrmFHjfU1IhO3lu29Ib/w==
|
||||
dependencies:
|
||||
lodash.kebabcase "^4.1.1"
|
||||
|
||||
keyv@^3.0.0:
|
||||
version "3.1.0"
|
||||
resolved "https://registry.yarnpkg.com/keyv/-/keyv-3.1.0.tgz#ecc228486f69991e49e9476485a5be1e8fc5c4d9"
|
||||
|
|
@ -8282,6 +8314,13 @@ lock@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/lock/-/lock-1.1.0.tgz#53157499d1653b136ca66451071fca615703fa55"
|
||||
integrity sha1-UxV0mdFlOxNspmRRBx/KYVcD+lU=
|
||||
|
||||
lockfile@^1.0:
|
||||
version "1.0.4"
|
||||
resolved "https://registry.yarnpkg.com/lockfile/-/lockfile-1.0.4.tgz#07f819d25ae48f87e538e6578b6964a4981a5609"
|
||||
integrity sha512-cvbTwETRfsFh4nHsL1eGWapU1XFi5Ot9E85sWAwia7Y7EgB7vfqcZhTKZ+l7hCGxSPoushMv5GKhT5PdLv03WA==
|
||||
dependencies:
|
||||
signal-exit "^3.0.2"
|
||||
|
||||
lodash._reinterpolate@^3.0.0:
|
||||
version "3.0.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
|
||||
|
|
@ -8342,16 +8381,26 @@ lodash.foreach@^4.3.0, lodash.foreach@^4.5.0:
|
|||
resolved "https://registry.yarnpkg.com/lodash.foreach/-/lodash.foreach-4.5.0.tgz#1a6a35eace401280c7f06dddec35165ab27e3e53"
|
||||
integrity sha1-Gmo16s5AEoDH8G3d7DUWWrJ+PlM=
|
||||
|
||||
lodash.get@^4:
|
||||
lodash.get@^4, lodash.get@^4.0:
|
||||
version "4.4.2"
|
||||
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
|
||||
integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
|
||||
|
||||
lodash.has@^4.0:
|
||||
version "4.5.2"
|
||||
resolved "https://registry.yarnpkg.com/lodash.has/-/lodash.has-4.5.2.tgz#d19f4dc1095058cccbe2b0cdf4ee0fe4aa37c862"
|
||||
integrity sha1-0Z9NwQlQWMzL4rDN9O4P5Ko3yGI=
|
||||
|
||||
lodash.isplainobject@^4.0.6:
|
||||
version "4.0.6"
|
||||
resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
|
||||
integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
|
||||
|
||||
lodash.kebabcase@^4.1.1:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/lodash.kebabcase/-/lodash.kebabcase-4.1.1.tgz#8489b1cb0d29ff88195cceca448ff6d6cc295c36"
|
||||
integrity sha1-hImxyw0p/4gZXM7KRI/21swpXDY=
|
||||
|
||||
lodash.map@^4.4.0, lodash.map@^4.6.0:
|
||||
version "4.6.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.map/-/lodash.map-4.6.0.tgz#771ec7839e3473d9c4cde28b19394c3562f4f6d3"
|
||||
|
|
@ -11270,7 +11319,7 @@ schema-utils@^2.6.5:
|
|||
ajv "^6.12.4"
|
||||
ajv-keywords "^3.5.2"
|
||||
|
||||
schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
|
||||
schema-utils@^3.0, schema-utils@^3.0.0, schema-utils@^3.1.0, schema-utils@^3.1.1:
|
||||
version "3.1.1"
|
||||
resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-3.1.1.tgz#bc74c4b6b6995c1d88f76a8b77bea7219e0c8281"
|
||||
integrity sha512-Y5PQxS4ITlC+EahLuXaY86TXfR7Dc5lw294alXOq86JAHCihAIZfqv8nNCWvaEJvaC51uN9hbLGeV0cFBdH+Fw==
|
||||
|
|
@ -12182,7 +12231,7 @@ tapable@^1.0.0:
|
|||
resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
|
||||
integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
|
||||
|
||||
tapable@^2.1.1, tapable@^2.2.0:
|
||||
tapable@^2.0, tapable@^2.1.1, tapable@^2.2.0:
|
||||
version "2.2.1"
|
||||
resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
|
||||
integrity sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==
|
||||
|
|
@ -13038,6 +13087,19 @@ webidl-conversions@^3.0.0:
|
|||
resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-3.0.1.tgz#24534275e2a7bc6be7bc86611cc16ae0a5654871"
|
||||
integrity sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=
|
||||
|
||||
webpack-assets-manifest@^5.0.6:
|
||||
version "5.0.6"
|
||||
resolved "https://registry.yarnpkg.com/webpack-assets-manifest/-/webpack-assets-manifest-5.0.6.tgz#1fe7baf9b57f2d28ff09fcaef3d678cc15912b88"
|
||||
integrity sha512-CW94ylPHurZTmxnYajSFA8763Cv/QFIKNgBwqBLaIOnBjH1EbDUAf8Eq1/i+o8qaKyKXJ3aX7r4/jtpXD88ldg==
|
||||
dependencies:
|
||||
chalk "^4.0"
|
||||
deepmerge "^4.0"
|
||||
lockfile "^1.0"
|
||||
lodash.get "^4.0"
|
||||
lodash.has "^4.0"
|
||||
schema-utils "^3.0"
|
||||
tapable "^2.0"
|
||||
|
||||
webpack-dev-middleware@^4.3.0:
|
||||
version "4.3.0"
|
||||
resolved "https://registry.yarnpkg.com/webpack-dev-middleware/-/webpack-dev-middleware-4.3.0.tgz#179cc40795882cae510b1aa7f3710cbe93c9333e"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue