Convert child pages to widget content

{
  "MigrationProtocolSettings": {
    "ConvertClassesToContentHub": [
      "DancingGoatCore.AboutUsSection"
    ]
  }
}

using Migration.Tool.Source.Mappers.ContentItemMapperDirectives;
using Newtonsoft.Json.Linq;

namespace Migration.Tool.Extensions.CommunityMigrations;

public class AboutUsSectionsToWidgetsDirector : ContentItemDirectorBase
{
    public override void Direct(ContentItemSource source, IContentItemActionProvider options)
    {
        // Apply the conversions only to nodes under /About-Us (or your desired KX13 tree node)
        // The system will evaluate all following conditions for each tree node which node AliasPath starts with /About-Us
        // This includes the /About-Us node itself and all its child nodes (/About-Us/Our-philosophy, /About-Us/References, etc.)
        if (source.SourceNode!.NodeAliasPath.StartsWith("/About-Us"))
        {
            // Identify the KX13 tree node that will host the widget in XbyK
            if (source.SourceNode.NodeAliasPath == "/About-Us")
            {
                // Ensure this template exists in the XbyK target instance
                options.OverridePageTemplate("DancingGoat.LandingPageSingleColumn");
            }
            // Nodes to be converted to widgets. We will identify them by SourceClassName
            // In some cases we may have to specify more conditions here to match a specific node
            else if (source.SourceClassName == "DancingGoatCore.AboutUsSection")
            {
                // The widget identifier must match the one defined in the XbyK target project
                options.AsWidget("DancingGoat.Widgets.AboutUsSection", null, null, options =>
                {
                    // Determine where to embed the widget
                    options.Location
                        .OnAncestorPage(-1)
                        // The area has to match what's defined in the XbyK project template's view
                        .InEditableArea("top")
                        // The section name has to match what's defined in the XbyK project
                        .InSection("DancingGoat.SingleColumnSection")
                        .InFirstZone();

                    // Construct the widget's properties
                    options.Properties.Fill(true, (itemProps, reusableItemGuid, childGuids) =>
                    {
                        // Manual property configuration for more control
                        var widgetProps = new JObject();

                        // Link to the converted Content hub item
                        widgetProps["aboutUsSectionItem"] = LinkedItemPropertyValue(reusableItemGuid!.Value);
                        widgetProps["alignment"] = "ImageLeft"; 

                        return widgetProps;
                    });
                });
            }
            else
            {
                // Discard all other child nodes or handle them differently - based on your client's needs
                options.Drop();
            }
        }
        else
        {
            // Add any handling you want to apply to pages that are not under the /About-us node
        }
    }
}

...
public static class ServiceCollectionExtensions
{
    public static IServiceCollection UseCustomizations(this IServiceCollection services)
    {
        ...

        services.AddTransient<ContentItemDirectorBase, AboutUsSectionsToWidgetsDirector>();
        ...
        return services;
    }
}

dotnet run -- --kxp-codegen --type "ReusableContentTypes" --location "../DancingGoat.Entities/{type}/{name}" --include "DancingGoatCore.AboutUsSection"

using System.Collections.Generic;
using CMS.ContentEngine;
using DancingGoatCore;
using Kentico.Components.Web.Mvc.FormComponents;
using Kentico.Forms.Web.Mvc;
using Kentico.PageBuilder.Web.Mvc;
using Kentico.Xperience.Admin.Base.FormAnnotations;

namespace DancingGoat.Widgets
{
    /// <summary>
    /// About Us Section widget properties.
    /// </summary>
    public class AboutUsSectionWidgetProperties : IWidgetProperties
    {
        [ContentItemSelectorComponent(
            AboutUsSection.CONTENT_TYPE_NAME,
            Label = "About Us Section Item",
            ExplanationText = "Choose the About Us Section item to be displayed in the widget.",
            MaximumItems = 1,
            Order = 10)]
        public IEnumerable<ContentItemReference> AboutUsSectionItem { get; set; } = [];

        [DropDownComponent(
            Label = "Alignment",
            Options = "ImageLeft;Image Left\r\nImageRight;Image Right",
            Order = 20)]
        public string Alignment { get; set; } = "ImageLeft";
    }
}

using System.Linq;
using System.Threading.Tasks;
using DancingGoat.Widgets;
using DancingGoatCore;
using Kentico.Content.Web.Mvc;
using Kentico.PageBuilder.Web.Mvc;
using Microsoft.AspNetCore.Html;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.ViewComponents;

// Remember to register the new widget
[assembly: RegisterWidget(
    identifier: AboutUsSectionWidgetViewComponent.IDENTIFIER,
    viewComponentType: typeof(AboutUsSectionWidgetViewComponent),
    name: "About us section",
    propertiesType: typeof(AboutUsSectionWidgetProperties),
    Description = "Displays an About us section with heading, text, and image in different alignments.",
    IconClass = "icon-rectangle-o")]

namespace DancingGoat.Widgets
{
    /// <summary>
    /// View component for About Us Section widget
    /// </summary>
    public class AboutUsSectionWidgetViewComponent(IContentRetriever contentRetriever) : ViewComponent
    {
        /// <summary>
        /// Widget identifier.
        /// </summary>
        public const string IDENTIFIER = "DancingGoat.Widgets.AboutUsSection";

        public async Task<ViewViewComponentResult> InvokeAsync(AboutUsSectionWidgetProperties properties)
        {
            var model = new AboutUsSectionWidgetViewModel();

            if (properties.AboutUsSectionItem != null)
            {
                var parameters = new RetrieveContentParameters
                {
                    LinkedItemsMaxLevel = 3,
                };
                var aboutUsSection = (await contentRetriever.RetrieveContentByGuids<AboutUsSection>(
                    properties.AboutUsSectionItem
                        .Select(x => x.Identifier),
                    parameters)).FirstOrDefault();

                var image = (Attachment)aboutUsSection?.AboutUsSectionImage.FirstOrDefault();

                model = new AboutUsSectionWidgetViewModel
                {
                    Heading = aboutUsSection?.AboutUsSectionHeading ?? string.Empty,
                    Text = new HtmlString(aboutUsSection?.AboutUsSectionText ?? string.Empty),
                    ImagePath = image?.LegacyAttachmentAsset?.Url ?? string.Empty,
                    Alignment = properties.Alignment
                };
            }
            return View("~/Components/Widgets/AboutUsSectionWidget/_AboutUsSectionWidget.cshtml", model);
        }
    }
}

using Microsoft.AspNetCore.Html;

namespace DancingGoat.Widgets
{
    /// <summary>
    /// View model for About Us Section widget.
    /// </summary>
    public class AboutUsSectionWidgetViewModel
    {
        public string Heading { get; set; }
        public HtmlString Text { get; set; }
        public string ImagePath { get; set; }
        public string Alignment { get; set; }
    }
}

@using DancingGoat.Widgets

@model AboutUsSectionWidgetViewModel

@if (Model != null)
{
    <section class="row text-and-image">
        <h2 class="col-lg-12">@Model.Heading</h2>

        <div class="col-md-6 col-xl-8 @(Model.Alignment == "ImageRight" ? "col-md-push-6 col-xl-push-4" : "")">
            <div class="text-and-image-text @(Model.Alignment == "ImageRight" ? "text-right" : "")">
                @Model.Text
            </div>
        </div>
        <div class="col-md-6 col-xl-4 @(Model.Alignment == "ImageRight" ? "col-md-pull-6 col-xl-pull-8" : "")">
            @if (!string.IsNullOrEmpty(Model.ImagePath))
            {
                <img src="@Model.ImagePath" alt="@Model.Heading" title="@Model.Heading" class="img-responsive" />
            }
        </div>
    </section>
}