Switch to textblocks for multi-language-texts

content/projectTextblocks/kevink-dev/de.mdx

@@ -0,0 +1,3 @@
+# Über KevinK.dev
+
+Schon so lange ich im Internet unterwegs bin war ich fasziniert von der Idee eine eigene Website zu haben. Deshalb habe ich mich an diese Seite gesetzt um mich selbst und meine Projekte zu repräsentieren. Wenn du interessiert an dem Code hinter der Seite bist, schau doch gerne auf GitHub vorbei!

content/projectTextblocks/kevink-dev/en.mdx

@@ -0,0 +1,3 @@
+# About KevinK.dev
+
+For as long as I've been poking around the internet I've always been facinated by the idea to have my own website. This is why I've created this site to showcase myself and my projects. If you are interested in the code behind the scenes feel free to look at it on GitHub!

content/projectTextblocks/kreig/de.mdx

@@ -0,0 +1,3 @@
+# Über KREIG.de
+
+Videospiele sind ein wesentlicher Teil unserer heutigen Gesellschaft. Ob Kompetitiv oder einfach nur zum Spaß: Fast jeder hat irgendeine Erfahrnug mit Videospielen. Ich bin da keine Ausnahme und für meine Gaming-Gruppe habe ich diese Seite erstellt, bei der ich modernes Design mit dem Gefühl von klassischen Gaming-Websites vereint habe.

content/projectTextblocks/kreig/en.mdx

@@ -0,0 +1,3 @@
+# About KREIG.de
+
+Video games are a big part of today's society. Competitive or just for fun: Almost everyone has some contact with video games. I am no different to that and for my gaming clan I've created this site, which combines a modern design with the feeling of classical gaming sites on the early web.

content/projects/kevink-dev.de.json

@@ -3,7 +3,6 @@
     "lang": "de",
     "name": "KevinK.dev",
     "shortDescription": "Diese Seite und der Code dahinter.",
-    "longDescription": "Schon so lange ich im Internet unterwegs bin war ich fasziniert von der Idee eine eigene Website zu haben. Deshalb habe ich mich an diese Seite gesetzt um mich selbst und meine Projekte zu repräsentieren. Wenn du interessiert an dem Code hinter der Seite bist, schau doch gerne auf GitHub vorbei!",
     "links": {
         "website": "https://kevink.dev",
         "github": "https://github.com/Unkn0wnCat/KevinK.dev.js"

content/projects/kevink-dev.en.json

@@ -3,7 +3,6 @@
     "lang": "en",
     "name": "KevinK.dev",
     "shortDescription": "This site and the code behind the scenes.",
-    "longDescription": "For as long as I've been poking around the internet I've always been facinated by the idea to have my own website. This is why I've created this site to showcase myself and my projects. If you are interested in the code behind the scenes feel free to look at it on GitHub!",
     "links": {
         "website": "https://kevink.dev",
         "github": "https://github.com/Unkn0wnCat/KevinK.dev.js"

content/projects/kreig.de.json

@@ -2,8 +2,7 @@
     "urlname": "kreig",
     "lang": "de",
     "name": "KREIG.de",
-    "shortDescription": " Eine einfache aber schöne Gaming-Seite. ",
-    "longDescription": "Videospiele sind ein wesentlicher Teil unserer heutigen Gesellschaft. Ob Kompetitiv oder einfach nur zum Spaß: Fast jeder hat irgendeine Erfahrnug mit Videospielen. Ich bin da keine Ausnahme und für meine Gaming-Gruppe habe ich diese Seite erstellt, bei der ich modernes Design mit dem Gefühl von klassischen Gaming-Websites vereint habe.",
+    "shortDescription": "Eine einfache aber schöne Gaming-Seite.",
     "links": {
         "website": "https://kreig.de"
     },

content/projects/kreig.en.json

@@ -2,8 +2,7 @@
     "urlname": "kreig",
     "lang": "en",
     "name": "KREIG.de",
-    "shortDescription": " A simple but nice gaming website. ",
-    "longDescription": "Video games are a big part of today's society. Competitive or just for fun: Almost everyone has some contact with video games. I am no different to that and for my gaming clan I've created this site, which combines a modern design with the feeling of classical gaming sites on the early web.",
+    "shortDescription": "A simple but nice gaming website.",
     "links": {
         "website": "https://kreig.de"
     },

content/textblocks/home/about/de.mdx

@@ -0,0 +1,3 @@
+# Hallo 👋
+
+Ich bin Kevin Kandlbinder, ein Entwickler und Hobby-Fotograf aus Norddeutschland. Ich habe schon früh in meinem Leben gelernt mit Computern umzugehen, da mein Vater mir seinen alten Windows 2000-Tower überließ, als er sich einen neuen holte. Kontakt zur Entwicklung von Webseiten hatte ich einige Jahre darauf zum ersten Mal, als ich mir ein Buch zu HTML, CSS und PHP gekauft habe. Seitdem ist Web Development für mich gleichermaßen ein Hobby und ein Job.

content/textblocks/home/about/en.mdx

@@ -0,0 +1,3 @@
+# Hello 👋
+
+I am Kevin Kandlbinder, a developer and hobby photographer from northern germany. I've learned operating computers very early in my life with my father giving me his old Windows 2000 tower. Some years later I've had my first contact with web development a few years later when I bought a book about HTML, PHP, JavaScript and CSS from a sale at my local library. From this point onwards web development has been a job and a hobby equally.

gatsby-config.js

@@ -25,6 +25,21 @@ module.exports = {
     `gatsby-plugin-sharp`,
     `gatsby-transformer-sharp`,
     `gatsby-transformer-json`,
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/content/textblocks`,
+        name: `textblocks`,
+      },
+    },
+    {
+      resolve: `gatsby-source-filesystem`,
+      options: {
+        path: `${__dirname}/content/projectTextblocks`,
+        name: `projectTextblocks`,
+      },
+    },
+    "gatsby-plugin-mdx",
     {
       resolve: `gatsby-source-filesystem`,
       options: {

locales/de/translation.json

@@ -10,9 +10,6 @@
     "homeMe": "Ich bin",
     "homeWebDeveloper": "Web Developer",
     "homeMyLocation": "Quickborn, Schleswig-Holstein, Deutschland",
-    "homeAboutMe": "Über mich",
-    "homeAboutMeHello": "Hallo!",
-    "homeAboutMeText": "Ich bin Kevin Kandlbinder, ein Entwickler und Hobby-Fotograf aus Norddeutschland. Ich habe schon früh in meinem Leben gelernt mit Computern umzugehen, da mein Vater mir seinen alten Windows 2000-Tower überließ, als er sich einen neuen holte. Kontakt zur Entwicklung von Webseiten hatte ich einige Jahre darauf zum ersten Mal, als ich mir ein Buch zu HTML, CSS und PHP gekauft habe. Seitdem ist Web Development für mich gleichermaßen ein Hobby und ein Job.",
     "donationCatchphrase": "Gefällt dir was du siehst? Spende doch etwas.",
     "homeImageCredit": "Portrait aufgenommen von Jannik Kiel",
     "de": "Deutsch",

locales/en/translation.json

@@ -10,9 +10,6 @@
     "homeMe": "I am",
     "homeWebDeveloper": "a web developer",
     "homeMyLocation": "Quickborn, Schleswig-Holstein, Germany",
-    "homeAboutMe": "About me",
-    "homeAboutMeHello": "Hello!",
-    "homeAboutMeText": "I am Kevin Kandlbinder, a developer and hobby photographer from northern germany. I've learned operating computers very early in my life with my father giving me his old Windows 2000 tower. Some years later I've had my first contact with web development a few years later when I bought a book about HTML, PHP, JavaScript and CSS from a sale at my local library. From this point onwards web development has been a job and a hobby equally.",
     "donationCatchphrase": "Like what you're seeing? Consider donating.",
     "homeImageCredit": "Portrait taken by Jannik Kiel",
     "de": "German",

package.json

@@ -21,12 +21,15 @@
     "dependencies": {
         "@babel/cli": "7.14.3",
         "@babel/plugin-transform-typescript": "7.14.3",
+        "@mdx-js/mdx": "^1.6.22",
+        "@mdx-js/react": "^1.6.22",
         "animejs": "3.2.1",
         "babel-plugin-i18next-extract": "0.8.3",
         "gatsby": "3.5.0",
         "gatsby-cli": "3.5.0",
         "gatsby-plugin-asset-path": "3.0.3",
         "gatsby-plugin-manifest": "3.5.0",
+        "gatsby-plugin-mdx": "^2.5.0",
         "gatsby-plugin-offline": "4.5.0",
         "gatsby-plugin-react-helmet": "4.5.0",
         "gatsby-plugin-react-i18next": "1.1.1",

src/pages/index.js

@@ -7,10 +7,12 @@ import * as projectStyles from "./projects.module.scss";
 
 import { Trans, Link } from "gatsby-plugin-react-i18next";
 import { graphql } from "gatsby";
+import { MDXRenderer } from "gatsby-plugin-mdx";
 
 import anime from "animejs";
 import { tsParticles } from "tsparticles";
 
+
 import * as particleConfig from "./index.particles.json";
 
 export const query = graphql`
@@ -54,6 +56,15 @@ export const query = graphql`
         }
       }
     }
+    file(
+      sourceInstanceName: {eq: "textblocks"}, relativeDirectory: {eq: "home/about"}, name: {eq: $language}
+    ) {
+      id
+      childMdx {
+        body
+      }
+      name
+    }
   }
 `;
 
@@ -91,6 +102,7 @@ const IndexPage = (props) => {
   }, []);
 
   let meta = props.data.site.siteMetadata;
+  let file = props.data.file;
 
   return (
     <Layout title="Kevin Kandlbinder" transparentTopbar={true}>
@@ -170,14 +182,7 @@ const IndexPage = (props) => {
       </section>
       <section className="aboutSection">
         <article>
-          <h1>
-            <Trans>homeAboutMe</Trans>
-          </h1>
-          <p>
-            <Trans>homeAboutMeHello</Trans>
-            <br />
-            <Trans>homeAboutMeText</Trans>
-          </p>
+          <MDXRenderer>{file.childMdx.body}</MDXRenderer>
         </article>
       </section>
       <a

src/templates/project.js

@@ -5,6 +5,7 @@ import Layout from "../layouts/default";
 import PropTypes from "prop-types";
 
 import * as styles from "./project.module.scss";
+import { MDXRenderer } from "gatsby-plugin-mdx";
 
 export const query = graphql`
   query GetProject($urlname: String!, $lang: String!, $language: String!) {
@@ -22,7 +23,6 @@ export const query = graphql`
         image {
           publicURL
         }
-        longDescription
         shortDescription
       }
     }
@@ -35,6 +35,15 @@ export const query = graphql`
         }
       }
     }
+    file(
+      sourceInstanceName: {eq: "projectTextblocks"}, relativeDirectory: {eq: $urlname}, name: {eq: $language}
+    ) {
+      id
+      childMdx {
+        body
+      }
+      name
+    }
   }
 `;
 
@@ -42,6 +51,7 @@ const ProjectTemplate = ({ data }) => {
   const { t } = useTranslation();
   let project = data.allProjectsJson.nodes[0];
   let projectName = project.name;
+  let file = data.file;
 
   return (
     <Layout
@@ -66,15 +76,10 @@ const ProjectTemplate = ({ data }) => {
           <div className={styles.headerPlaceholder}></div>
         </div>
       </section>
-      {project.longDescription != null ? (
+      {file != null && file.childMdx != null ? (
         <section className={styles.projectAbout}>
           <article>
-            <h1>
-              <Trans projectName={projectName} i18nKey="projectAboutHeader">
-                projectAboutHeader{{ projectName }}
-              </Trans>
-            </h1>
-            <p>{project.longDescription}</p>
+            <MDXRenderer>{file.childMdx.body}</MDXRenderer>
           </article>
         </section>
       ) : null}