How to link localized MDX author data by ID in blog posts?

[nibtime]

I am currently working on a page with i18n requirements that will have multiple authors involved.

What I like to achieve is the same thing as described in this blog post: https://www.lekoarts.de/en/blog/adding-support-for-multiple-authors-in-gatsby

But I want to do it with MDX and the linking needs to be locale-aware.

I also read the docs about createSchemaCustomization and I believe it will involve createTypes and @link, but I am not really able to get it together myself.

I would appreciate any help with this very much!

My MDX data model for authors

To maintain author data I have a folder content/data/authors

Within the folder I have a subfolder per author, e.g. content/data/authors/john where I store localized mdx files to describe the author: content/data/authors/john/en.mdx, content/data/authors/john/de.mdx, etc.

en.mdx

---
authorId: john
localeCode: en
avatar: ./avatar.jpg
name: John Doe
shortBio:  My short biography in English
---

## About me

My long biography in English

de.mdx

---
authorId: john
localeCode: de
avatar: ./avatar.jpg
name: John Doe
shortBio:  Meine Kurzbiografie auf Deutsch

---

## Über mich

Meine ausführliche Biografie auf Deutsch

My MDX data model for blog posts

My blog posts have the usual metadata + a collectionId and pageId to identify the posts across locales. The crucial part of this problem is the list of author IDs that I want to pass to the authors field.

---
collectionId: blog
pageId: post-1
localeCode: en
title: My awesome blog post
description: My awesome blog post's description
datePublished: 2021-04-28
authors:
  - "john"
  - "jane"
---

The page query I'd like to use (but don't know how)

This page query works perfectly as intended with my site setup, except for the authors part. In frontmatter, it is just a list of type String (the author IDs). What I want it to be, is an array of the actual localized author data, dependent on $localeCode from pageContext.

export const query = graphql`
  query BlogPost($collectionId: String!, $pageId: String!, $localeCode: String!) {
     mdx(
      frontmatter: { collectionId: { eq: $collectionId }, pageId: { eq: $pageId }, localeCode: { eq: $localeCode } }
    ) {
      frontmatter {
        title
        description
        datePublished
        authors {
          name
          shortBio
          avatar {
            childImageSharp {
              gatsbyImageData
            }
          }
        }
      }
      body
    }
  }
`

[LekoArts]

Is the project open source or can you create a small reproduction of it so that one can clone it and try some things?

[nibtime]

Hello @LekoArts,

it's not open source and I make heavy use of Tailwind UI components in this project, so I can't, unfortunately, share it as is.
But I can create a reproduction of this once I find some time.

Are the problem and the goal I like to achieve understandable to you?

[LekoArts]

Yeah, it is! I sadly just don't have the time to set up a boilerplate project (with the exact setup as yours) to try some things out.

[nibtime]

I will set up that project, of course. I am glad you are ready to help me out.

I could just strip the Tailwind UI components, but the actual setup of the site would be too complicated to follow and draw too much attention from this problem.

Can you recommend me a starter, that would be a particularly good fit for this problem?

[LekoArts]

You could run npm init gatsby or yarn create gatsby, go through the steps and choose MDX at the end. Then you'll have a starter with MDX set up.