In this comprehensive guide, I will walk you through the step-by-step process of creating a Featured Article List using Sitecore's Headless Rendering. We'll explore how to leverage the flexibility and extensibility of the .NET SDK to fetch content from Sitecore, and we'll delve into the intricacies of the Content Resolver, empowering you to effortlessly retrieve and display curated articles in your application.

Let's create a new Article template first, and then we can easily add new article items.

Don't forget to pick an awesome icon and make the _Standard Values. It's always a good idea to follow best practices:

Now, you can easily make some new items with the Article template:

First item

Second item

Let's create a new Featured List data source template together, so we can pick some awesome articles to showcase.

Let's go ahead and make a new JSON Rendering so we can utilize the Featured List data source template:

You can add the Featured List JSON rendering to the jss-main placeholder at /sitecore/layout/Placeholder Settings/Project/MyProject/jss-main

Simply open your Platform project in Visual Studio and create a new class called FeaturedListContentsResolver and publish the project:

using Sitecore.Abstractions;
using Sitecore.Data.Fields;
using Sitecore.Data.Items;
using Sitecore.LayoutService.Configuration;
using Sitecore.LayoutService.ItemRendering.ContentsResolvers;
using Sitecore.Mvc.Presentation;
using Sitecore.Resources.Media;
using System.Linq;

namespace MyProject.ContentResolvers
{
    public class FeaturedListContentsResolver : RenderingContentsResolver
    {
        private readonly BaseLinkManager _linkManager;

        public FeaturedListContentsResolver(BaseLinkManager linkManager)
        {
            _linkManager = linkManager;
        }

        public override object ResolveContents(Rendering rendering, IRenderingConfiguration renderingConfig)
        {
            var contextItem = GetContextItem(rendering, renderingConfig);

            MultilistField articles = contextItem.Fields["Articles"];

            return new
            {
                Articles = articles.GetItems().Select(i =>
                {
                    ImageField imageField = i.Fields["image"];
                    var mediaUrl = "";

                    if (imageField != null && imageField.MediaItem != null)
                    {
                        MediaItem mediaItem = new MediaItem(imageField.MediaItem);
                        mediaUrl = MediaManager.GetMediaUrl(mediaItem);
                    }

                    DateField dateField = i.Fields["date"];
                    var date = dateField.DateTime;

                    return new
                    {
                        Title = i["Title"],
                        Url = _linkManager.GetItemUrl(i),
                        Summary = i["Summary"],
                        Image = mediaUrl,
                        Date = date
                    };
                })
            };
        }
    }
}

Add a new FeaturedListContentsResolver item in Sitecore and change the Type field to your class name:

Navigate to the Featured List JSON rendering (/sitecore/layout/Renderings/Project/MyProject/Featured List) and choose the Featured List Rendering Contents Resolver for this item:

In Visual Studio, open the RenderingHost project and add a new FeaturedListModel to the Models folder.

using Sitecore.AspNet.RenderingEngine.Binding.Attributes;
using System;
using System.Collections.Generic;

namespace MyProject.Models
{
    public class FeaturedListModel
    {
        [SitecoreComponentField(Name = "articles")]
        public IEnumerable<FeaturedListArticle> Articles { get; set; }
    }

    public class FeaturedListArticle
    {
        [SitecoreComponentField(Name = "title")]
        public string Title { get; set; }

        [SitecoreComponentField(Name = "url")]
        public string Url { get; set; }

        [SitecoreComponentField(Name = "summary")]
        public string Summary { get; set; }

        [SitecoreComponentField(Name = "image")]
        public string Image { get; set; }

        [SitecoreComponentField(Name = "date")]
        public DateTime Date { get; set; }
    }
}

Make a new file named Featured List in the Views folder. Use this simple HTML snippet code confidently:

@model MyProject.Models.FeaturedListModel

<style>
    .article-list {
        display: flex;
        flex-wrap: wrap;
    }

    .article {
        width: 100%;
        max-width: 400px;
        margin-bottom: 20px;
        border: 1px solid #ddd;
        padding: 10px;
    }

        .article a {
            text-decoration: none;
        }

        .article img {
            width: 100%;
            height: auto;
            margin-bottom: 10px;
        }

    .article-title {
        font-size: 18px;
        margin-bottom: 5px;
    }

    .article-date {
        font-size: 14px;
        color: #888;
        margin-bottom: 5px;
    }

    .article-summary {
        font-size: 14px;
        line-height: 1.4;
    }

</style>

@if (Model.Articles != null)
{
    <div class="article-list">
        @foreach (var article in Model.Articles)
        {
            <div class="article">
                <a href="@article.Url">
                    <img src="@article.Image" alt="@article.Title">
                </a>
                <div class="article-info">
                    <h2 class="article-title"><a href="@article.Url">@article.Title</a></h2>
                    <p class="article-date">Published on: <span>@article.Date</span></p>
                    <p class="article-summary">@article.Summary</p>
                </div>
            </div>
        }
    </div>
}

Open the Startup class and add this new model-bound view:

.AddModelBoundView<FeaturedListModel>("Featured List")

Now, open the Home page in the Experience Editor and simply add the Featured List JSON rendering to the jss-main placeholder:

When prompted, just go ahead and choose the articles you want to showcase as featured articles on the home page and publish the site:

In conclusion, mastering Sitecore Headless Rendering allows developers to create a Featured Article List with ease using the .NET SDK and Content Resolver. By following the steps outlined in this guide, you can leverage the power of Sitecore to fetch and display curated content, enhancing your application's user experience.