Mein Wechsel zu JSX in Markdown

Hätte ich mich doch nur schon am Anfang dazu entschieden auf JSX in Markdown zu setzen, wäre mir einiges an Aufwand erspart geblieben 😅

Nun ja, wie dem auch sei. Ich habe ein kleines Refactoring vorgenommen und alle Markdown-Files (*.md) auf JSX in Markdown (*.mdx) ungezogen.

Was ist überhaupt JSX und warum will man es im Markdown haben?

Markdown ist zu der Auszeichungssprachen im Web geworden. Jedoch ist es eben nur eine Auszeichungssprache und bietet wenig Flexibilität. Hier kommt JSX ins Spiel. Es ermöglicht JavaScript Komponenten in Markdown zu verwenden.

Mein Beispiel

Ich wollte eine Möglichkeit schaffen, Bilder eines Verzeichnisses unkompliziert zu laden und auszugeben, ohne jedes Bild einzeln auzuwählen. In dem Blogbeitrag Schloss Burg in Solingen setzte ich diese Idee in die Tat um.

Ich schrieb eine Komponente, der mit einer Property namens path einen Ordner hereinreichen konnte:

import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import Img from 'gatsby-image'

export default function BlogGallery({ path }) {
    // GraphQL query
    const data = useStaticQuery(graphql`
        {
            allFile(sort: {fields: name, order: ASC}, filter: {base: {regex: "/(png|jp(g|eg))$/"}}) {
                nodes {
                    id
                    childImageSharp {
                        fluid(maxWidth: 730) {
                            src
                            ...GatsbyImageSharpFluid
                        }
                    }
                    relativeDirectory
                }
            }
        }
    `);

    // Filtere mir nur die Bilder heraus, dessen Pfad übereinstimmt
    const nodes = data?.allFile?.nodes.filter(node => node.relativeDirectory === path);

    return (
        <>
            {nodes.map((image) => {
                return (
                    <div key={image.id} className="my-3">
                        <Img
                            fluid={image.childImageSharp.fluid}
                            alt=""
                        />
                    </div>
                )
            })}
        </>
    );
};

Jetzt war es mir möglich, die Komponente ganz einfach in Markdown zu importieren:

---
title: "Schloss Burg in Solingen"
<!-- weitere Meta-Daten -->
---

import BlogGallery from '../../components/BlogGallery.jsx'

<BlogGallery path="pfad/zu/meinen/bildern" />

That's it 🥳

Der Umstieg von Md auf mdx

Der Wechsel von Md auf Mdx war mit einiger Arbeit verbunden. Viele Stellen im Code mussten angepasst werden. Am Ende zahlte es sich aber aus. Ich rate jeden, der ein Gatsby Projekt aufsetzt, direkt auf Mdx zu gehen. So bleibt die Seite aus im Markdown-Bereich flexibel und erweiterbar.

Sehr lesenswert ist der Gatsby Beitrag: How to convert an existing Gatsby blog to use MDX

Weitereführende Links

Diese Beiträge könnten dich auch interessieren