Fix breadcrumbs data (#1879)

* Fix breadcrumbs data

* Fixes

* Refactor

* Cleanup

* Also move comment

Author: reakaleek

src/Elastic.Markdown/BreadcrumbsList.cs

@@ -0,0 +1,35 @@
+// Licensed to Elasticsearch B.V under one or more agreements.
+// Elasticsearch B.V licenses this file to you under the Apache 2.0 License.
+// See the LICENSE file in the project root for more information
+
+using System.Text.Json.Serialization;
+
+namespace Elastic.Markdown;
+
+// Model structure based on https://developers.google.com/search/docs/appearance/structured-data/breadcrumb#json-ld
+public record BreadcrumbsList
+{
+	[JsonPropertyName("@context")]
+	public string Context => "https://schema.org";
+	[JsonPropertyName("@type")]
+	public string Type => "BreadcrumbList";
+	[JsonPropertyName("itemListElement")]
+	public required List<BreadcrumbListItem> ItemListElement { get; init; }
+}
+
+public record BreadcrumbListItem
+{
+	[JsonPropertyName("@type")]
+	public string Type => "ListItem";
+	[JsonPropertyName("position")]
+	public required int Position { get; init; }
+	[JsonPropertyName("name")]
+	public required string Name { get; init; }
+
+	[JsonPropertyName("item")]
+	public string? Item { get; init; }
+}
+
+[JsonSourceGenerationOptions(WriteIndented = true, PropertyNamingPolicy = JsonKnownNamingPolicy.CamelCase, DefaultIgnoreCondition = JsonIgnoreCondition.WhenWritingNull)]
+[JsonSerializable(typeof(BreadcrumbsList))]
+public sealed partial class BreadcrumbsContext : JsonSerializerContext;

src/Elastic.Markdown/HtmlWriter.cs

@@ -3,6 +3,7 @@
 // See the LICENSE file in the project root for more information
 
 using System.IO.Abstractions;
+using System.Text.Json;
 using Elastic.Documentation;
 using Elastic.Documentation.Configuration.Builder;
 using Elastic.Documentation.Legacy;
@@ -113,6 +114,11 @@ private async Task<RenderResult> RenderLayout(MarkdownFile markdown, MarkdownDoc
 			fullNavigationRenderResult
 		);
 
+		//TODO should we even distinctby
+		var breadcrumbs = parents.Reverse().DistinctBy(p => p.Url).ToArray();
+		var breadcrumbsList = CreateStructuredBreadcrumbsData(markdown, breadcrumbs);
+		var structuredBreadcrumbsJsonString = JsonSerializer.Serialize(breadcrumbsList, BreadcrumbsContext.Default.BreadcrumbsList);
+
 
 		var slice = Page.Index.Create(new IndexViewModel
 		{
@@ -124,12 +130,11 @@ private async Task<RenderResult> RenderLayout(MarkdownFile markdown, MarkdownDoc
 			TitleRaw = markdown.TitleRaw ?? "[TITLE NOT SET]",
 			MarkdownHtml = html,
 			PageTocItems = [.. markdown.PageTableOfContent.Values],
-			Tree = DocumentationSet.Tree,
 			CurrentDocument = markdown,
 			CurrentNavigationItem = current,
 			PreviousDocument = previous,
 			NextDocument = next,
-			Parents = parents,
+			Breadcrumbs = breadcrumbs,
 			NavigationHtml = navigationHtmlRenderResult.Html,
 			NavigationFileName = navigationFileName,
 			UrlPathPrefix = markdown.UrlPathPrefix,
@@ -147,7 +152,8 @@ private async Task<RenderResult> RenderLayout(MarkdownFile markdown, MarkdownDoc
 			LegacyPages = legacyPages?.Skip(1).ToArray(),
 			VersionDropdownItems = VersionDrownDownItemViewModel.FromLegacyPageMappings(legacyPages?.Skip(1).ToArray()),
 			Products = allProducts,
-			VersionsConfig = DocumentationSet.Context.VersionsConfiguration
+			VersionsConfig = DocumentationSet.Context.VersionsConfiguration,
+			StructuredBreadcrumbsJson = structuredBreadcrumbsJsonString
 		});
 
 		return new RenderResult
@@ -159,6 +165,31 @@ private async Task<RenderResult> RenderLayout(MarkdownFile markdown, MarkdownDoc
 
 	}
 
+	private BreadcrumbsList CreateStructuredBreadcrumbsData(MarkdownFile markdown, INavigationItem[] crumbs)
+	{
+		List<BreadcrumbListItem> breadcrumbItems = [];
+		var position = 1;
+		// Add parents
+		breadcrumbItems.AddRange(crumbs.Select(parent => new BreadcrumbListItem
+		{
+			Position = position++,
+			Name = parent.NavigationTitle,
+			Item = new Uri(DocumentationSet.Context.CanonicalBaseUrl ?? new Uri("http://localhost"), Path.Combine(DocumentationSet.Context.UrlPathPrefix ?? string.Empty, parent.Url)).ToString()
+		}));
+		// Add current page
+		breadcrumbItems.Add(new BreadcrumbListItem
+		{
+			Position = position,
+			Name = markdown.Title ?? markdown.NavigationTitle,
+			Item = null,
+		});
+		var breadcrumbsList = new BreadcrumbsList
+		{
+			ItemListElement = breadcrumbItems
+		};
+		return breadcrumbsList;
+	}
+
 	public async Task<MarkdownDocument> WriteAsync(IDirectoryInfo outBaseDir, IFileInfo outputFile, MarkdownFile markdown, IConversionCollector? collector, Cancel ctx = default)
 	{
 		if (outputFile.Directory is { Exists: false })
@@ -203,5 +234,4 @@ public record RenderResult
 	public required string Html { get; init; }
 	public required string FullNavigationPartialHtml { get; init; }
 	public required string NavigationFileName { get; init; }
-
 }

src/Elastic.Markdown/Layout/_Breadcrumbs.cshtml

@@ -2,54 +2,27 @@
 @{
 	var targets =
 		Model.Features.PrimaryNavEnabled
-			? Model.Parents.Reverse()
-			: Model.Parents.Reverse().Skip(1);
-
-	//TODO should we even distinctby
-	var parents = targets.DistinctBy(p => p.Url).ToList();
-	var firstCrumb = parents.FirstOrDefault();
-	var crumbs = parents.Skip(1).TakeLast(2).ToList();
+			? Model.Breadcrumbs
+			: Model.Breadcrumbs.Skip(1);
+	var crumbs = targets.ToList();
 }
 
-<ol id="breadcrumbs" class="block items-center w-full py-6" itemscope="" itemtype="https://schema.org/BreadcrumbList">
-	@if (firstCrumb != null)
-	{
-		<li class="inline text-ink-light text-sm leading-[1.2em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
-			<a
-				hx-disable="true"
-				itemprop="item"
-				href="@firstCrumb.Url"
-				@Htmx.GetHxAttributes( Model.CurrentNavigationItem?.NavigationRoot.Id == firstCrumb.NavigationRoot.Id)
-			>
-				<span itemprop="name" class="hover:text-black">@firstCrumb.NavigationTitle</span>
-			</a>
-			<meta itemprop="position" content="1">
-		</li>
-	}
-	@if (crumbs.Count > 0 && parents.Count > 3)
-	{
-		<li class="inline text-ink-light text-sm leading-[1.2em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
-			<span class="px-1">/</span>
-			…
-		</li>
-	}
-	
+<ol id="breadcrumbs" class="flex flex-wrap gap-1 items-center w-full py-6">
 	@for (var i = 0; i < crumbs.Count; i++)
 	{
-	    var item = crumbs[i];
-		<li class="inline text-ink-light text-sm leading-[1.2em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
-			<span class="px-1">/</span>
+		var item = crumbs[i];
+		<li class="text-ink-light text-sm leading-[1.2em]">
 			<a
-				itemprop="item" 
+				itemprop="item"
 				href="@item.Url"
 				@Htmx.GetHxAttributes(Model.CurrentNavigationItem?.NavigationRoot.Id == item.NavigationRoot.Id)
 			>
-				<span itemprop="name" class="hover:text-black">@item.NavigationTitle</span>
+				<span class="hover:text-black">@item.NavigationTitle</span>
 			</a>
-			<meta itemprop="position" content="@(i+2)">
+			@if (i < crumbs.Count - 1)
+			{
+				<span class="px-1">/</span>
+			}
 		</li>
 	}
-	<li class="inline text-ink-light text-sm leading-[1.2em]" itemprop="itemListElement" itemscope="" itemtype="https://schema.org/ListItem">
-		<span class="px-1">/</span>
-	</li>
 </ol>

src/Elastic.Markdown/MarkdownLayoutViewModel.cs

@@ -17,9 +17,7 @@ public record MarkdownLayoutViewModel : GlobalLayoutViewModel
 	public required bool HideEditThisPage { get; init; }
 	public required string? ReportIssueUrl { get; init; }
 
-	public required INavigationItem[] Parents { get; init; }
-
-	public required LegacyPageMapping[]? LegacyPages { get; init; }
+	public required INavigationItem[] Breadcrumbs { get; init; }
 
 	public required IReadOnlyCollection<PageTocItem> PageTocItems { get; init; }
 

src/Elastic.Markdown/Page/Index.cshtml

@@ -24,7 +24,6 @@
 		CurrentNavigationItem = Model.CurrentNavigationItem,
 		Previous = Model.PreviousDocument,
 		Next = Model.NextDocument,
-		Parents = Model.Parents,
 		NavigationHtml = Model.NavigationHtml,
 		NavigationFileName = Model.NavigationFileName,
 		UrlPathPrefix = Model.UrlPathPrefix,
@@ -37,7 +36,7 @@
 		Features = Model.Features,
 		StaticFileContentHashProvider = Model.StaticFileContentHashProvider,
 		ReportIssueUrl = Model.ReportIssueUrl,
-		LegacyPages = Model.LegacyPages,
+		Breadcrumbs = Model.Breadcrumbs,
 		CurrentVersion = Model.CurrentDocument.YamlFrontMatter?.Layout == MarkdownPageLayout.LandingPage ? Model.VersionsConfig.VersioningSystems[0].Current : Model.CurrentVersion,
 		AllVersionsUrl = Model.AllVersionsUrl,
 		VersionDropdownSerializedModel = JsonSerializer.Serialize(Model.VersionDropdownItems,
@@ -50,6 +49,9 @@
 			<meta class="elastic" name="product_version" content="@(new HtmlString(Model.CurrentVersion))"/>
 			<meta name="DC.identifier" content="@(new HtmlString(Model.CurrentVersion))"/>
 			<link rel="alternate" type="text/markdown" href="@(Model.MarkdownUrl)" title="Markdown export"/>
+			<script type="application/ld+json">
+	    	@(new HtmlString(Model.StructuredBreadcrumbsJson))
+	    	</script>
 		}
 		if (name == GlobalSections.Head && Model.Products is { Count: > 0 })
 		{

src/Elastic.Markdown/Page/IndexViewModel.cs

@@ -24,14 +24,13 @@ public class IndexViewModel
 	public required string Description { get; init; }
 	public required string TitleRaw { get; init; }
 	public required string MarkdownHtml { get; init; }
-	public required DocumentationGroup Tree { get; init; }
 	public required IReadOnlyCollection<PageTocItem> PageTocItems { get; init; }
 	public required MarkdownFile CurrentDocument { get; init; }
 
 	public required INavigationItem CurrentNavigationItem { get; init; }
 	public required INavigationItem? PreviousDocument { get; init; }
 	public required INavigationItem? NextDocument { get; init; }
-	public required INavigationItem[] Parents { get; init; }
+	public required INavigationItem[] Breadcrumbs { get; init; }
 
 	public required string NavigationHtml { get; init; }
 
@@ -57,6 +56,9 @@ public class IndexViewModel
 	public required HashSet<Product> Products { get; init; }
 
 	public required VersionsConfiguration VersionsConfig { get; init; }
+
+	// https://developers.google.com/search/docs/appearance/structured-data/breadcrumb#json-ld
+	public required string StructuredBreadcrumbsJson { get; init; }
 }
 
 public class VersionDrownDownItemViewModel