Shadowing @reflexjs/gatsby-theme-post/post.js tags not visible

[benbehringer]

Hey,

I'm trying to shadow @reflexjs/gatsby-theme-post/post.js. I copied the original version and just changed the maximum width a bit:

import * as React from "react"
import { MDXRenderer, Link } from "@reflexjs/gatsby-theme-core"
import { Article, Container, H1, Div, P, Flexbox } from "@reflexjs/components"
import { Image } from "@reflexjs/gatsby-plugin-image"
import { PostMeta } from "@reflexjs/gatsby-theme-post"

export const Post = ({
  title,
  excerpt,
  body,
  image,
  caption,
  date,
  datetime,
  author,
  timeToRead,
  tags,
}) => (
  <Article py="8|12|16|24">
    <Container maxW="null|600px|900px|900px">
      <Div textAlign="center">
        {tags && (
          <Link to={tags[0].slug} textDecoration="none" color="text">
            {tags[0].name}
          </Link>
        )}
        {title && (
          <H1 my="0" fontWeight="extrabold">
            {title}
          </H1>
        )}
        {excerpt && (
          <P fontSize="2xl" maxW="700px" mx="auto">
            {excerpt}
          </P>
        )}

        <PostMeta
          author={author}
          timeToRead={timeToRead}
          date={date}
          datetime={datetime}
          alignItems="center"
          justifyContent="center"
          my="8"
        />
      </Div>
    </Container>

    {image && (
      <Container variant="lg">
        <Image
          src={image}
          title={title}
          alt={caption || title}
          caption={caption}
          mx="auto"
          my="4|8|10"
          overflow="hidden"
          sx={{
            img: {
              borderRadius: "md",
            },
          }}
        />
      </Container>
    )}

    <Container maxW="null|800px|900px|900px">
      <MDXRenderer>{body}</MDXRenderer>
      {tags && (
        <Flexbox alignItems="center" my="6" mx="auto">
          {tags.map(({ name, slug }, index) => (
            <Link
              key={name}
              to={slug}
              display="inline-block"
              bg="muted"
              px="2"
              py="1"
              rounded="md"
              color="text"
              textDecoration="none"
              fontSize="sm"
              ml={index !== 0 && 2}
              hoverBg="secondary"
              hoverColor="white"
            >
              {name}
            </Link>
          ))}
        </Flexbox>
      )}
    </Container>
  </Article>
);

Yet, the post tags are not visible anymore in the post page. Any ideas?

Thanks,
Ben!

[shadcn]

You mean the post tags? The one you set in the post mdx file?

[benbehringer]

Yes and I don't know why they disappear since the code is just copied and the corresponding code lines are included.

[shadcn]

I'll see if I can reproduce this. Not sure if this is related: #39

[benbehringer]

Ah, I see. I also receive the message:

[benbehringer]

I can also confirm that after gatsby clean && gatsby buildpost tags are available, but are missing after a gatsby build && gatsby build!