We are adding support for Nextjs. Get in touch on Twitter to learn more.

Recipes

Helpful guides and code snippets to customize your blog.

Add Disqus

Step 1: Add disqus-react

npm i disqus-react

Step 2: Configure .env.

Copy .env.example to .env.
Add GATSBY_DISQUS_NAME=DISQUS_SITE_NAME

.env

GATSBY_DISQUS_NAME=DISQUS_SITE_NAME

Step 3: Update post.js

To add the DiscussionEmbed element to the blog post, shadow the post.js file and add it as follows (note the highlighted lines):

src/@reflexjs/gatsby-theme-post/post.js

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="900px" mt="20">
      <DiscussionEmbed
        shortname={process.env.GATSBY_DISQUS_NAME}
        config={{ identifier: slug, title }}
      />
    </Container>
  </Article>
)

Custom slug

Use the slugResolver option to override the generated slug.

gatsby-config.js

const { toSlug } = require("@reflexjs/gatsby-helpers") 
module.exports = {
  plugins: [
    `@reflexjs/gatsby-theme-base`,
    {
      resolve: `@reflexjs/gatsby-theme-post`,
      options: {
        slugResolver: (node, parent, basePath) =>
          `${toSlug(node.frontmatter.title)}.html`,
      },
    },
  ],
}

Author block

Add an author block to your post.js component.

Shadow post.js and use the useProfile hook to retrieve the post author.

src/@reflexjs/gatsby-theme-post/post.js

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 { useProfile } from "@reflexjs/gatsby-theme-profile" 
export const Post = ({
  title,
  excerpt,
  body,
  image,
  caption,
  date,
  datetime,
  author,
  timeToRead,
  tags,
}) => {
  const [authorProfile] = useProfile(author) 
  return (
    <Article py="8|12|14">
      <Div>
        <Image src={authorProfile.picture} />
        <H4>{authorProfile.name}</H4>
        <P>{authorProfile.excerpt}</P>
      </Div>
    </Article>
  )
}

The post-template automatically renders a post-header and a post-footer block. Theses blocks receive the same props as the post.js file.

We can use this to render a previous and next pager without having to shadow post.js.

Create a content/blocks/post-footer.mdx block with the following:

content/blocks/post-footer.mdx

export const PostFooter = ({ previous, next }) => (
  <Container maxW="null|null|null|900px">
    <Flexbox justifyContent="space-between">
      {previous && (
        <PagerLink href={previous.slug}>
          <Span d="flex" alignItems="center">
            <Icon name="arrow-left" mr="2" /> Previous
          </Span>
          <PagerTitle title={previous.title} />
        </PagerLink>
      )}
      {next && (
        <PagerLink
          href={next.slug}
          ml="auto"
          textAlign="right"
          alignItems="flex-end"
        >
          <Span d="flex" alignItems="center">
            Next <Icon name="arrow-right" ml="2" />
          </Span>
          <PagerTitle title={next.title} />
        </PagerLink>
      )}
    </Flexbox>
  </Container>
)
export const PagerLink = ({ children, ...props }) => (
  <ButtonLink
    d="flex"
    flexDirection="column"
    alignItems="flex-start"
    bg="transparent"
    rounded="md"
    border="0"
    p="4"
    w="40%"
    hoverBg="muted"
    {...props}
  >
    {children}
  </ButtonLink>
)
export const PagerTitle = ({ title }) => (
  <P
    d="none|none|block"
    mt="4"
    mb="0"
    fontWeight="semibold"
    lineHeight="normal"
  >
    {title}
  </P>
)

Custom blog page Video

Recipes

Add Disqus

Custom slug

Author block

Previous and Next Pager