feature/api landing page

src/Elastic.ApiExplorer/Landing/LandingNavigationItem.cs

@@ -52,7 +52,7 @@ public LandingNavigationItem(string url)
 	}
 
 	/// <inheritdoc />
-	public bool IsUsingNavigationDropdown => NavigationItems.OfType<ClassificationNavigationItem>().Any();
+	public bool IsUsingNavigationDropdown => false;
 }
 
 public interface IApiGroupingNavigationItem<out TGroupingModel, out TNavigationItem> : INodeNavigationItem<TGroupingModel, TNavigationItem>
@@ -106,7 +106,7 @@ public class ClassificationNavigationItem(ApiClassification classification, Land
 	public override string Id { get; } = ShortId.Create(classification.Name);
 
 	/// <inheritdoc />
-	public bool IsUsingNavigationDropdown => true;
+	public bool IsUsingNavigationDropdown => false;
 }
 
 public class TagNavigationItem(ApiTag tag, IRootNavigationItem<IApiGroupingModel, INavigationItem> rootNavigation, INodeNavigationItem<INavigationModel, INavigationItem> parent)

src/Elastic.ApiExplorer/Landing/LandingView.cshtml

@@ -1,10 +1,92 @@
 @inherits RazorSliceHttpResult<Elastic.ApiExplorer.Landing.LandingViewModel>
+@using Elastic.ApiExplorer.Landing
+@using Elastic.ApiExplorer.Operations
+@using Elastic.Documentation.Site.Navigation
 @implements IUsesLayout<Elastic.ApiExplorer._Layout, GlobalLayoutViewModel>
 @functions {
 	public GlobalLayoutViewModel LayoutModel => Model.CreateGlobalLayoutModel();
+
+	private IHtmlContent RenderOp(IReadOnlyCollection<OperationNavigationItem> endpointOperations)
+	{
+		<ul class="api-url-listing">
+		@foreach (var overload in endpointOperations)
+		{
+			var method = overload.Model.OperationType.ToString().ToLowerInvariant();
+			<li class="api-url-list-item">
+				<a href="@overload.Url" class="current api-url-list-item-landing" hx-disable="true">
+					<span class="api-method api-method-@method">@method.ToUpperInvariant()</span>
+					<span class="api-url">@overload.Model.Route</span>
+				</a>
+			</li>
+		}
+		</ul>
+
+		return HtmlString.Empty;
+	}
+
+	private IHtmlContent RenderProduct(INavigationItem item)
+	{
+		if (item is INodeNavigationItem<INavigationModel, INavigationItem> node)
+		{
+			foreach (var navigationItem in node.NavigationItems)
+			{
+				if (navigationItem is ClassificationNavigationItem classification)
+				{
+					<tr>
+						<td colspan="2"><h2>@(classification.NavigationTitle)</h2></td>
+					</tr>
+					@RenderProduct(classification)
+				}
+				else if (navigationItem is TagNavigationItem tag)
+				{
+					<tr>
+						<td colspan="2"><h3>@(tag.NavigationTitle)</h3><td>
+					</tr>
+					@RenderProduct(tag)
+				}
+				else if (navigationItem is EndpointNavigationItem endpoint)
+				{
+					var endpointOperations =
+						endpoint is { NavigationItems.Count: > 0 } && endpoint.NavigationItems.All(n => n.Hidden)
+							? endpoint.NavigationItems
+							: [];
+						if (endpointOperations.Count > 0)
+						{
+							<tr>
+								<td class="api-name">@(endpoint.NavigationTitle)</td>
+								<td>@RenderOp(endpointOperations)</td>
+							</tr>
+						}
+						else
+						{
+							@RenderProduct(endpoint)
+						}
+				}
+				else if (navigationItem is OperationNavigationItem operation)
+				{
+					<tr>
+						<td class="api-name">@(operation.NavigationTitle)</td>
+						<td>@RenderOp([operation])</td>
+					</tr>
+				}
+				else
+				{
+					throw new Exception($"Unexpected type: {item.GetType().FullName}");
+				}
+			}
+		}
+
+		return HtmlString.Empty;
+
+	}
 }
 <section id="elastic-docs-v3">
 	<h1>@Model.ApiInfo.Title</h1>
-	<p>@Model.ApiInfo.Description</p>
-	<p>License: @Model.ApiInfo.License?.Identifier</p>
+	<p>@Model.RenderMarkdown(Model.ApiInfo.Description)</p>
+	<p>License: @Model.ApiInfo.License?.Name</p>
+	<div class="api-overview">
+		<table>
+			@RenderProduct(Model.CurrentNavigationItem.NavigationRoot)
+		</table>
+	</div>
 </section>

src/Elastic.ApiExplorer/Operations/OperationView.cshtml

@@ -7,10 +7,9 @@
 	public GlobalLayoutViewModel LayoutModel => Model.CreateGlobalLayoutModel();
 }
 @{
-	var parent = Model.CurrentNavigationItem.Parent as EndpointNavigationItem;
 	var self = Model.CurrentNavigationItem as OperationNavigationItem;
 	var allOperations =
-		parent is not null && parent.NavigationItems.Count > 0 && parent.NavigationItems.All(n => n.Hidden)
+		Model.CurrentNavigationItem.Parent is EndpointNavigationItem { NavigationItems.Count: > 0 } parent && parent.NavigationItems.All(n => n.Hidden)
 			? parent.NavigationItems
 			: self is not null
 				? [self]
@@ -87,4 +86,4 @@
 <aside>
 
 </aside>
-</div>
+</div>

src/Elastic.Documentation.Site/Assets/api-docs.css

@@ -42,6 +42,12 @@
 			@apply border-grey-30 text-grey-120 bg-white;
 			font-weight: bold;
 		}
+		a.api-url-list-item-landing {
+			font-weight: normal !important;
+		}
+		a.api-url-list-item-landing:hover {
+			font-weight: normal !important;
+		}
 	}
 	li:only-child {
 		a.current {
@@ -51,53 +57,108 @@
 			@apply border-grey-20 bg-white;
 		}
 	}
-	.api-method {
-		@apply rounded-sm border;
-		padding-left: var(--spacing);
-		padding-right: var(--spacing);
-		font-family: var(
-			--default-mono-font-family,
-			ui-monospace,
-			SFMono-Regular,
-			Menlo,
-			Monaco,
-			Consolas,
-			'Liberation Mono',
-			'Courier New',
-			monospace
-		);
-		font-feature-settings: var(
-			--default-mono-font-feature-settings,
-			normal
-		);
-		font-variation-settings: var(
-			--default-mono-font-variation-settings,
-			normal
-		);
-		font-size: 0.8em;
-		display: inline-block;
-		font-weight: bold;
-	}
-	.api-method-get {
-		@apply border-blue-elastic-30 bg-blue-elastic-10 text-blue-elastic;
-	}
-	.api-method-put {
-		@apply border-yellow-30 bg-yellow-10 text-yellow-90;
-	}
-	.api-method-post {
-		@apply border-green-30 bg-green-10 text-green-90;
-	}
-	.api-method-delete {
-		@apply border-red-30 bg-red-10 text-red-90;
-	}
-	.api-url {
-		margin-left: calc(var(--spacing) * 2);
-		display: inline-block;
-	}
 	.api-url-list-item {
 		@apply mt-4;
 	}
 }
+.api-overview {
+	.api-url-listing {
+		@apply mt-1;
+	}
+	.api-url-list-item {
+		@apply mt-1;
+	}
+	li {
+		a {
+			@apply text-grey-80 inline-block w-full p-2 pr-2 pl-2 no-underline;
+			@apply rounded-sm border border-white;
+		}
+		a:hover {
+			@apply bg-grey-10;
+			@apply border-grey-20;
+		}
+		a.current {
+			@apply text-grey-80 inline-block w-full p-2 pr-2 pl-2 no-underline;
+			@apply rounded-sm border border-white;
+		}
+		a.current:hover {
+			@apply bg-grey-10;
+			@apply border-grey-20;
+		}
+	}
+	li:only-child {
+		a.current {
+			@apply text-grey-80 inline-block w-full p-2 pr-2 pl-2 no-underline;
+			@apply rounded-sm border border-white;
+		}
+		a.current:hover {
+			@apply bg-grey-10;
+		}
+	}
+	table {
+		td {
+			text-align: left;
+			vertical-align: top;
+		}
+		td:has(h2) {
+		}
+		td:has(h3) {
+			@apply border-b-grey-20 mb-2 border-b-1 pb-2;
+		}
+		td.api-name {
+			@apply pr-2;
+			text-align: left;
+			font-weight: bold;
+		}
+		tr:has(td.api-name) {
+			@apply border-b-grey-10 border-b-1;
+		}
+		tr:has(td.api-name) td {
+			@apply mt-4 mb-4 pt-4 pb-4;
+		}
+	}
+}
+
+.api-method {
+	@apply rounded-sm border;
+	padding-left: var(--spacing);
+	padding-right: var(--spacing);
+	font-family: var(
+		--default-mono-font-family,
+		ui-monospace,
+		SFMono-Regular,
+		Menlo,
+		Monaco,
+		Consolas,
+		'Liberation Mono',
+		'Courier New',
+		monospace
+	);
+	font-feature-settings: var(--default-mono-font-feature-settings, normal);
+	font-variation-settings: var(
+		--default-mono-font-variation-settings,
+		normal
+	);
+	font-size: 0.8em;
+	display: inline-block;
+	font-weight: bold;
+}
+.api-method-get {
+	@apply border-blue-elastic-30 bg-blue-elastic-10 text-blue-elastic;
+}
+.api-method-put {
+	@apply border-yellow-30 bg-yellow-10 text-yellow-90;
+}
+.api-method-post {
+	@apply border-green-30 bg-green-10 text-green-90;
+}
+.api-method-delete {
+	@apply border-red-30 bg-red-10 text-red-90;
+}
+.api-url {
+	margin-left: calc(var(--spacing) * 2);
+	display: inline-block;
+}
 #elastic-api-v3 {
 	dt a {
 		@apply no-underline;