Switch to textblocks for multi-language-texts

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}