It’s very common to display a list of top/latest posts as a blog home page. Our midnight-rush blog feature helps you to create your favorite blog posts list home page.

It’s very simple to create your top/latest featured posts using -- ds.posts which can be added inside -- ds.page.

Let’s learn how to create it.

-- import: fastn-community.github.io/midnight-rush as ds
-- import: fastn-community.github.io/midnight-rush/blog-articles/category-1/sample-post
-- import: fastn-community.github.io/midnight-rush/blog-articles/category-1/sample-post-2
-- import: fastn-community.github.io/midnight-rush/blog-articles/category-2/sample-post-3
-- import: fastn-community.github.io/midnight-rush/blog-articles/category-2/sample-post-4

-- ds.page:

-- ds.posts:

-- ds.featured-post:
post-data: $sample-post-2.meta

-- ds.image-first:
post-data: $sample-post.meta

-- ds.image-in-between:
post-data: $sample-post-3.meta

-- ds.without-image:
post-data: $sample-post-4.meta

-- ds.image-first:
post-data: $sample-post.meta

-- ds.image-in-between:
post-data: $sample-post-3.meta

-- end: ds.posts

-- end: ds.page

-- import: fastn-community.github.io/midnight-rush as ds : imports midnight-rush and all its components into your featured-post.ftd page.

\-- import: fastn-community.github.io/midnight-rush/blog-articles/category-1/sample-post : imports sample-post and its all details from /blog-articles/category-1/ folder. You can add more posts imports into featured-post.ftd like shown in above code snippet.

{ds.yellowmarker: e.g. – ds.page, — ds.posts} and all components mentioned in above components.

--- ds.posts: : This line imports the ds.posts component which helps to create featured list page ui.

--- ds.featured-post: : This line imports the ds.featured-post component which comes with featured post UI. see our blog page

--- ds.image-first: : The ds.image-first component shows your post image at the top then shows the title of the post and other post details. see our blog page

--- ds.image-in-between: : The ds.image-in-between component shows your post image after the title and post metadata then shows other post details. see our blog page

--- ds.without-image: : The ds.without-image component shows your post without image in case your post does not contain the featured image. It shows only the title and post metadata then shows other post details. see our blog page

Category pages are similar to the featured posts page. You can add category related details into the body part of the -- ds.page page.