first stab at html for applies to yaml frontmatter

docs/source/markup/applies.md

@@ -0,0 +1,48 @@
+---
+title: Product Availability
+applies:
+  stack: ga 8.1
+  serverless: tech-preview
+  hosted: beta 8.1.1
+  eck: beta 3.0.2
+  ece: unavailable
+---
+
+
+Using yaml frontmatter pages can explicitly indicate to each deployment targets availability and lifecycle status
+
+
+```yaml
+applies:
+  stack: ga 8.1
+  serverless: tech-preview
+  hosted: beta 8.1.1
+  eck: beta 3.0.2
+  ece: unavailable
+```
+
+Its syntax is
+
+```
+ <product>: <lifecycle> [version]
+```
+
+Where version is optional.
+
+`all` and empty string mean generally available for all active versions
+
+```yaml
+applies:
+  stack: 
+  serverless: all
+```
+
+`all` and empty string can also be specified at a version level
+
+```yaml
+applies:
+  stack: beta all
+  serverless: beta
+```
+
+Are equivalent, note `all` just means we won't be rendering the version portion in the html.

src/Elastic.Markdown/Slices/Directives/Applies.cshtml

@@ -0,0 +1,96 @@
+@using Elastic.Markdown.Myst.FrontMatter
+@inherits RazorSlice<Elastic.Markdown.Myst.FrontMatter.Deployment>
+<p class="product-availability">
+	<span class="applies-to-label sd-badge sd-outline-transparent sd-text-black">
+		Applies To:
+	</span>
+	@if (Model.SelfManaged is not null)
+	{
+		if (Model.SelfManaged.Stack is not null)
+		{
+			@RenderProduct("Elastic Stack", Model.SelfManaged.Stack)
+		}
+		if (Model.SelfManaged.Ece is not null)
+		{
+			@RenderProduct("Elastic Cloud Enterprise", Model.SelfManaged.Ece)
+		}
+		if (Model.SelfManaged.Eck is not null)
+		{
+			@RenderProduct("Elastic Cloud Kubernetes", Model.SelfManaged.Eck)
+		}
+	}
+	@if (Model.Cloud is not null)
+	{
+		if (Model.Cloud.Hosted is not null)
+		{
+			@RenderProduct("Elastic Cloud Hosted", Model.Cloud.Hosted)
+		}
+		if (Model.Cloud.Serverless is not null)
+		{
+			@RenderProduct("Serverless", Model.Cloud.Serverless)
+		}
+	}
+</p>
+
+@functions {
+
+	private string GetLifeCycleClass(ProductLifecycle cycle)
+	{
+		switch (cycle)
+		{
+			case ProductLifecycle.Deprecated:
+			case ProductLifecycle.Coming:
+			case ProductLifecycle.Discontinued:
+			case ProductLifecycle.Unavailable:
+				return "muted";
+			case ProductLifecycle.GenerallyAvailable:
+			case ProductLifecycle.TechnicalPreview:
+			case ProductLifecycle.Beta:
+			case ProductLifecycle.Development:
+				return "primary";
+			default:
+				throw new ArgumentOutOfRangeException(nameof(cycle), cycle, null);
+		}
+	}
+	private string GetLifeCycleName(ProductLifecycle cycle)
+	{
+		switch (cycle)
+		{
+			case ProductLifecycle.TechnicalPreview:
+				return "Technical Preview";
+			case ProductLifecycle.Beta:
+				return "Beta";
+			case ProductLifecycle.Development:
+				return "Development";
+			case ProductLifecycle.Deprecated:
+				return "Deprecated";
+			case ProductLifecycle.Coming:
+				return "Coming";
+			case ProductLifecycle.Discontinued:
+				return "Discontinued";
+			case ProductLifecycle.Unavailable:
+				return "Unavailable";
+			case ProductLifecycle.GenerallyAvailable:
+				return "GA";
+			default:
+				throw new ArgumentOutOfRangeException(nameof(cycle), cycle, null);
+		}
+	}
+
+	private IHtmlContent RenderProduct(string name, ProductAvailability product)
+	{
+		var c = GetLifeCycleClass(product.Lifecycle);
+		<span class="sd-badge sd-outline-@c sd-text-@c applies-badge">
+			@name
+			@if (product.Lifecycle != ProductLifecycle.GenerallyAvailable)
+			{
+				<span class="sd-text-secondary">@GetLifeCycleName(product.Lifecycle)</span>
+			}
+			@if (product.Version is not null and not AllVersions)
+			{
+				<span class="sd-text-success">(@product.Version)</span>
+			}
+		</span>
+		return HtmlString.Empty;
+	}
+}

src/Elastic.Markdown/Slices/HtmlWriter.cs

@@ -52,7 +52,8 @@ public async Task<string> RenderLayout(MarkdownFile markdown, Cancel ctx = defau
 			Tree = DocumentationSet.Tree,
 			CurrentDocument = markdown,
 			NavigationHtml = navigationHtml,
-			UrlPathPrefix = markdown.UrlPathPrefix
+			UrlPathPrefix = markdown.UrlPathPrefix,
+			Applies = markdown.YamlFrontMatter?.AppliesTo
 		});
 		return await slice.RenderAsync(cancellationToken: ctx);
 	}

src/Elastic.Markdown/Slices/Index.cshtml

@@ -13,5 +13,9 @@
 }
 <section id="elastic-docs-v3">
 	<h1>@(Model.Title)</h1>
+	@if (Model.Applies is not null)
+	{
+		await RenderPartialAsync(Applies.Create(Model.Applies));
+	}
 	@(new HtmlString(Model.MarkdownHtml))
 </section>

src/Elastic.Markdown/Slices/_ViewModels.cs

@@ -2,6 +2,7 @@
 // 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 Elastic.Markdown.IO;
+using Elastic.Markdown.Myst.FrontMatter;
 
 namespace Elastic.Markdown.Slices;
 
@@ -14,6 +15,7 @@ public class IndexViewModel
 	public required MarkdownFile CurrentDocument { get; init; }
 	public required string NavigationHtml { get; init; }
 	public required string? UrlPathPrefix { get; init; }
+	public required Deployment? Applies { get; init; }
 }
 
 public class LayoutViewModel

src/Elastic.Markdown/_static/custom.css

@@ -30,4 +30,37 @@ body > footer > div > div > div.sy-foot-copyright > p:nth-child(2){
 .yue img {
   margin-top: 0;
   margin-bottom: 0;
+}
+
+.applies-badge {
+	font-size: 1em;
+	margin-top: 0.4em;
+}
+
+h1 {
+	padding-bottom: 0.4em;
+	border-bottom: 1px solid #dfdfdf;
+}
+.sd-outline-muted
+{
+	border: 1px solid #dfdfdf;
+}
+.product-availability {
+	padding-bottom: 0.8em;
+	border-bottom: 1px solid #dfdfdf;
+}
+
+h1:has(+ .product-availability) {
+	margin-bottom: 0.4em;
+	padding-bottom: 0;
+	border-bottom: none;
+}
+
+.applies-to-label {
+	font-size: 1em;
+	margin-top: 0.4em;
+	margin-left: 0;
+	font-weight: bold;
+	text-align: left;
+	padding-left: 0;
 }