Add a featured posts section

Create a featured posts block using the usePost hook.

July 15, 2020

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" />