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

Featured posts

Add a featured posts section to a page.

The @reflexjs/gatsby-theme-post provides a usePost hook to easily retrieve, filter and render posts.

Let's use this hook to get a list of featured posts in a block and use the block on the home page.

Create a block

content/blocks/featured-posts

import { usePost } from "@reflexjs/gatsby-theme-post" 
export const FeaturedPosts = () => {
  // This will return an array of all featured posts.
  const featuredPosts = usePost({ featured: true })
}

Render the posts in a list

content/blocks/featured-posts

import { usePost } from "@reflexjs/gatsby-theme-post"
export const FeaturedPosts = () => {
  const featuredPosts = usePost({ featured: true })
  return featuredPosts
    ? featuredPosts.map((post) => <A href={post.slug}>{post.title}</A>)
    : null
}

Place block on page

content/pages/about.mdx

---
title: Welcome to Reflex
excerpt: Description for this page. This is mostly used for the description meta tag.
---
<Block src="featured-posts" />

Make block configurable

Let's add a limit props to the block so that we can set how many featured posts to show.

content/blocks/featured-posts

import { usePost } from "@reflexjs/gatsby-theme-post"
export const FeaturedPosts = ({ limit = 5 }) => {
  const featuredPosts = usePost({ featured: true })
  return featuredPosts
    ? featuredPosts
        .slice(0, limit) 
        .map((post) => <A href={post.slug}>{post.title}</A>)
    : null
}

content/pages/about.mdx

---
title: Welcome to Reflex
excerpt: Description for this page. This is mostly used for the description meta tag.
---
<Block src="featured-posts" limit="3" />

Meta tags Custom blog page