Reflex
  • Blocks
    • Header
    • Hero
    • Features
    • Call to action
    • Forms
    • Pricing
    • Team
    • Testimonials
    • Cards
    • Footer
    • Posts
    • Videos
  • Examples
  • Learn
  • Videos
  • Docs
  • Theme

    Theme reference

    • Colors
    • Font family
    • Font size
    • Font weight
    • Line height
    • Box shadow
    Create a theme Extend base
arshadcnv0.5.3
Reflex
Reflex

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.

  1. Copy .env.example to .env.
  2. 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>
)
}

Previous and Next Pager

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 pageVideo

© 2020 Reflex

  • Blocks
  • Examples
  • Learn
  • Docs
  • Github