Missing in the Guide

[titieo]

Hi there, I've tried to add like this in src/@reflexjs/gatsby-theme-post like this:

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" // highlight-line
import { DiscussionEmbed } from "disqus-react" // highlight-line

export const Post = ({
  title,
  excerpt,
  body,
  image,
  caption,
  date,
  datetime,
  author,
  timeToRead,
  tags,
  slug, // highlight-line
}) => (
  <Article py="8|12|14">
    <Container maxW="900px" mt="20">
      <DiscussionEmbed
        shortname={process.env.GATSBY_DISQUS_NAME}
        config={{ identifier: slug, title }}
      />
    </Container>
  </Article>
)

And my site become empty (it does have content). I don't know if you could fix this (may be update the guide I guess)

[shadcn]

Ah I see. So the snippet in the doc does not show the full code.

You need everything in https://github.com/reflexjs/reflex/blob/master/packages/gatsby-theme-post/src/post.js then add the DiscussionEmbed component after line 95.

I can see this being confusing. I'll update the doc.

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" 
import { DiscussionEmbed } from "disqus-react" 

export const Post = ({
  title,
  excerpt,
  body,
  image,
  caption,
  date,
  datetime,
  author,
  timeToRead,
  tags,
  slug
}) => (
  <Article py="8|12|14">
    <Container maxW="null|null|null|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|null|null|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>
    <Container maxW="900px" mt="20">
      <DiscussionEmbed
        shortname={process.env.GATSBY_DISQUS_NAME}
        config={{ identifier: slug, title }}
      />
    </Container>
  </Article>
)

[titieo]

Well, I've tried to follow this guide and adding like this but VSCode reported a problem

[shadcn]

Looks like a typo. Can you try import "typeface-inter"?

[shadcn]

Did this work?

[titieo]

Yes, It work really good. Thanks for helping me