What is working:
- The layout is correctly applied to each of my pages
- The MDX file correctly gets the Hero and section component and renders the HTML/CSS of the container correctly
- The data from MDX is loaded and displayed
What is NOT working:
- The MD within the Hero or the Section Shortcode is not being rendered! # is not transformed into H1 etc.
What i have tried:
- Using the MDXRender in Section & Hero => Error
- Use the component directly in the MDX file instead of shortcode
Question:
- Is it not possible to render the MD correctly within the shortcode? In other words, is the MDX not rendered recurisvely?
content/index.mdx:
---
title: Main Content English
slug: /main-content/
---
<Hero># This is a test, but never gets transformed</Hero>
<Section># In Section Headline</Section>
# ABC
Officia cillum _asdasd_ et duis dolor occaecat velit culpa. Cillum eu sint adipisicing labore incididunt nostrud tempor fugiat. Occaecat ex id fugiat laborum ullamco. Deserunt sint quis aliqua consequat ullamco Lorem dolor pariatur laboris. Laborum officia ut magna exercitation elit velit mollit do. Elit minim nostrud cillum reprehenderit deserunt consequat. Aliqua ex cillum sunt exercitation deserunt sit aliquip aliquip ea proident cillum quis.
My layout.js looks like this:
import React, {useEffect} from "react";
import "./Layout.css";
import { MDXProvider } from "@mdx-js/react";
import { MdxLink } from "gatsby-theme-i18n";
...
import Hero from "../Hero/HomepageHero/HomepageHero"
import Section from "../Section/Section"
const components = {
a: MdxLink,
Hero, Section
};
export default function Layout({ children }) {
...
return (
<div className="appGrid">
<Header />
<ScrollToTopButton />
<div className="cell contentCell">
<MDXProvider components={components}>{children}</MDXProvider>
</div>
<Footer />
<Copyright />
</div>
);
}
my index.js page (loaded automatically) looks like this:
import * as React from "react";
import { graphql } from "gatsby";
import Layout from "../components/Layout/layout";
import { MDXRenderer } from "gatsby-plugin-mdx";
const IndexPage = ({ data }) => {
return (
<Layout>
{data.allFile.nodes.map(({ childMdx: node }) => (
<div>
{node ? (
<MDXRenderer>{node.body}</MDXRenderer>
) : (
<div>This page has not been translated yet.</div>
)}
</div>
))}
</Layout>
);
};
export default IndexPage;
export const query = graphql`
query($locale: String!) {
allFile(
filter: {
sourceInstanceName: { eq: "content" }
childMdx: { fields: { locale: { eq: $locale } } }
}
) {
nodes {
childMdx {
body
}
}
}
}
`;
Gatsby Config:
module.exports = {
siteMetadata: {
siteUrl: "localhost:8000",
title: "app",
},
plugins: [
{
resolve: "gatsby-plugin-google-analytics",
options: {
trackingId: "",
},
},
"gatsby-plugin-sharp",
"gatsby-plugin-react-helmet",
"gatsby-plugin-sitemap",
"gatsby-plugin-offline",
{
resolve: "gatsby-plugin-manifest",
options: {
icon: "src/images/icon.png",
},
},
"gatsby-transformer-sharp",
{
resolve: "gatsby-source-filesystem",
options: {
name: "images",
path: "./src/images/",
},
__key: "images",
},
{
resolve: `gatsby-theme-i18n`,
options: {
defaultLang: `en`,
locales: `en el de`,
configPath: require.resolve(`${__dirname}/i18n/config.json`),
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `pages`,
path: `${__dirname}/src/pages/`,
},
},
{
resolve: `gatsby-source-filesystem`,
options: {
name: `content`,
path: `${__dirname}/src/content/`,
},
},
{
resolve: `gatsby-plugin-mdx`,
options: {
defaultLayouts: {
default: require.resolve(`./src/components/Layout/layout.js`),
},
},
},
],
};
Section.js Component
import React from "react";
import PropTypes from "prop-types";
import "./Section.css";
export default function Section(props) {
let content = props.children
if (props.centered) {
content = (
<div className="grid-container ">
{props.children}
</div>
);
}
return <div className="section">{content}</div>;
}
Section.propTypes = {
centered: PropTypes.bool,
children: PropTypes.element,
};