The Blog

The Blog Starter Kit comes with a page builder template, a set of blog templates, header and footer navs and a collection of composable content blocks.

All our starter kits follow a similar setup, so if you've followed the setup guide using the Minimal kit so far, you should be able to switch to this one without much hassle.

Given the only difference between this kit and the Minimal kit is the addition of a set of blog templates we will only cover those differences here. Read the Minimal kit guide for more info on the rest of the codebase.

Blog landing page

The Blog Landing Page is the home for all your blog content. It uses the blog_landing content type which has fields for title and text that will be displayed at the top of the page.

About the code

getBlogPosts

export async function getBlogPosts(): Promise<ContentData[]> {
  return await createClient()
    .getContentByType({
      contentType: 'blog_post',
    })
    .then((response: ContentAPIResponse) => {
      return response.content
    })
    .catch(() => {
      return []
    })
}

getBlogCategoryLinks

export async function getBlogCategoryLinks(): Promise<ContentData[]> {
  return await createClient()
    .getContentByType({
      contentType: 'blog_category',
      sortBy: 'name',
      sortDirection: 'asc',
      limit: 10,
    })
    .then((response: ContentAPIResponse) => {
      return response.content
    })
    .catch(() => {
      return []
    })
}

In the app > blog > page.tsx file we fetch the data required for the blog landing page. The content variable stores the response of an API call that requests the data from any pages that match the slug “blog” and are of content type blog_landing.

The posts and categoryLinks variables are then using the helper functions from the /lib/contento.ts file to get all the blog post and category link data.

This set of data is then passed into the <BlogLandingPage/> component to be rendered on the front end.

export default async function page() {
  const content = await createClient(draftMode().isEnabled)
    .getContentBySlug('blog', 'blog_landing')
    .catch(() => {
      notFound()
    })

  const posts = await getBlogPosts()

  const categoryLinks = await getBlogCategoryLinks()

  return (
    <BlogLandingPage
      initialContent={content}
      posts={posts}
      categoryLinks={categoryLinks}
    />
  )
}

<BlogCard />

The <BlogCard /> component is an example of how this data is used within the <BlogLandingPage /> component. The posts data received is an array of blog_post objects. The <BlogLandingPage /> then uses a map function to automatically output a <BlogCard /> component for each post.

{posts.map((post, index) => (
    <BlogCard key={`blog-post-${index}`} post={post} />
))}

Blog post

This is where you will write your content for each individual blog. It uses the blog_post content type and is split into two field groups: “Main” and “Post Body”.

Main section

The Main section includes fields for all the information about the post. The blog title, an excerpt / summary for the post, a cover image, the author of the blog and the blog category. This information is pulled through automatically to be displayed on the card list in the landing page, as well as shown on the post detail page.

Post Body section

The blog_post content type has a post_body long text field that allows you to use rich text to write your blog post content.

If you wish to expand the types of content that can be added to your blog posts please check out our BlockMatcher component to see our method of creating rich page builders.

Categories

The category content type can be used to filter blog posts by their chosen category. The category is a page content type as it requires its own unique url and is displayed in the route /blog/category/{slug}. We only need the one title field for this kit, but sometimes you might want to add more info like some intro text or an image.

There are example categories that have been created in the site that comes with this kit, please replace these with categories that make sense for your site.

Authors

The author content type can also be used to filter blog posts by their author. The author is also a page content type as it requires its own unique url and is displayed in the route /blog/author/{slug}. This time we have more fields for name, role, image, bio, twitter and linkedin.

Again there are example authors that have been created in the site that comes with this kit, please replace these with your own authors.