For context, I'm running a gatsby site with MDX enabled and I can't for the life of me, figure out how to get the URL to a Lottie JSON animation in the same folder as the MDX file (different from /src/pages/).
I'm not using templates other than rendering every page in the same component using gatsby-browser. The is defined as part of the component and the lottie-player library is included as part of the head.
Here's what I've defined the MDX file as -
---
title: Sample file
slug: /sample
order: 3
type: work
published: true
lastUpdatedDate: September 29, 2022
currentVerion: v2.0.0
excerpt: Sample excerpt text
roles:
- Product Manager
- Product Designer
specialUrl: /blog/foo
coverUrl: ./hero.json
headshot: ./headshot.jpeg
---
export const Head = (props) => <title>{props.pageContext.frontmatter.title + `- Portfolio`}</title>
import { BodyText } from "../../../components/Type"
import { PrimaryButton } from "../../../components/Button"
import HeadshotImg from "./headshot.jpeg"
# Sample project file
<BodyText>{props.pageContext.frontmatter.coverUrl.publicURL}</BodyText>
<BodyText>{props.pageContext.frontmatter.excerpt}</BodyText>
<lottie-player src="/static/23c130bba09d98c90f21287dfc6a9b1c/hero.json" background="transparent" speed="0.5" loop autoplay></lottie-player>
<img src={HeadshotImg} />
<a href=""><PrimaryButton>Okay so this works</PrimaryButton></a>
Nihil accusantium aut assumenda est sed[^1]. Enim et eum corporis qui. Modi error laboriosam rerum recusandae impedit voluptate aut distinctio magni. Dolorem voluptatem sit non temporibus quibusdam ipsum. Accusantium voluptatem ut eaque numquam qui numquam est iste.
Voluptate consequatur soluta animi necessitatibus temporibus. Incidunt itaque magni. Eos quisquam similique dolorum occaecati accusantium. Quia voluptatum voluptatem laborum id odit est.
Cum ut non illum est nam ut magni totam. Voluptatibus voluptas magnam mollitia non ut est itaque harum. Et facilis at.
[^1]: Big note.
In the same folder as this MDX file, I've included hero.json. Using a graphQL query, I was able to determine the publicURL underneath the coverUrl object in the schema and included it explicitly here and the lottie renders correctly -
<lottie-player src="/static/23c130bba09d98c90f21287dfc6a9b1c/hero.json" background="transparent" speed="0.5" loop autoplay></lottie-player>
However, I'm not able to use props.pageContext.frontmatter.coverUrl.publicURL directly. This code doesn't display anything. Upon inspecting, there's nothing in between the <p> tags. (BodyText extends the p markup)
<BodyText>{props.pageContext.frontmatter.coverUrl.publicURL}</BodyText>
I tested the excerpt (next line between the <BodyText> tags) and it works correctly too.
What am I missing that the string response retrieved from the graphQL query is good enough for the Lottie src, but when used as a query directly as I do for other frontmatter objects, it doesn't render?
I feel I'm missing something really obvious, but it's taken me 4 hours of trying a lot of things but not getting anywhere. Many thanks in advance!
