update styling

Author: Mpdreamz

docs/syntax/applies.md

@@ -153,3 +153,43 @@ stack: ga 9.1
 ````
 
 This will allow the yaml inside the `{applies-to}` directive to be fully highlighted.
+
+
+## Examples
+
+#### Stack only
+```yaml {applies_to}
+stack: ga 9.1
+```
+
+#### Stack with deployment
+```yaml {applies_to}
+stack: ga 9.1
+deployment:
+  eck: ga 9.0
+  ess: beta 9.1
+```
+
+#### Deployment only
+```yaml {applies_to}
+deployment:
+  ece: discontinued 9.2.0
+  self: unavailable 9.3.0
+```
+
+#### Serverless only
+```yaml {applies_to}
+serverless: ga 9.0.0
+```
+
+#### Serverless with project differences
+```yaml {applies_to}
+serverless:
+  security: ga 9.0.0
+  elasticsearch: beta 9.1.0
+  observability: discontinued 9.2.0
+```
+#### Stack with product
+```yaml {applies_to}
+stack: ga 9.1
+```

src/Elastic.Markdown/Assets/styles.css

@@ -87,6 +87,30 @@
 	.content-container {
 		@apply w-full max-w-[80ch];
 	}
+
+	.applies {
+		border-bottom: 1px solid var(--color-gray-300);
+		padding-bottom: calc(var(--spacing) * 3);
+		font-family: "Mier B", "Inter", sans-serif;
+
+		.applies-to-label {
+			display: block;
+			font-size: 1.5em;
+			font-weight: var(--font-weight-extrabold);
+			padding-bottom: calc(var(--spacing) * 3);
+		}
+		.applicable-info {
+			padding: calc(var(--spacing) * 0.5);
+			padding-left: calc(var(--spacing) * 2);
+			padding-right: calc(var(--spacing) * 2);
+			margin: calc(var(--spacing) * 0.5);
+			display: inline-block;
+			font-size: 0.8em;
+			border-radius: 0.4em;
+			background-color: var(--color-white);
+			border: 1px solid var(--color-gray-300);
+		}
+	}
 }
 
 * {

src/Elastic.Markdown/Myst/CodeBlocks/EnhancedCodeBlockParser.cs

@@ -111,8 +111,16 @@ private static void ProcessAppliesToDirective(AppliesToDirective appliesToDirect
 	{
 		var yaml = lines.ToSlice().AsSpan().ToString();
 
-		var applicableTo = YamlSerialization.Deserialize<ApplicableTo>(yaml);
-		appliesToDirective.AppliesTo = applicableTo;
+		try
+		{
+			var applicableTo = YamlSerialization.Deserialize<ApplicableTo>(yaml);
+			appliesToDirective.AppliesTo = applicableTo;
+
+		}
+		catch (Exception e)
+		{
+			appliesToDirective.EmitError($"Unable to parse applies_to directive: {yaml}", e);
+		}
 	}
 
 	private static void ProcessCallOuts(StringLineGroup lines, string language, EnhancedCodeBlock codeBlock,

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

@@ -1,14 +1,11 @@
 @using Elastic.Markdown.Myst.FrontMatter
 @inherits RazorSlice<Elastic.Markdown.Myst.FrontMatter.ApplicableTo>
-<p class="product-availability">
-	<span class="applies-to-label sd-badge sd-outline-transparent sd-text-black">
-		Applies To:
-	</span>
+<p class="applies">
+	<span class="applies-to-label"></span>
 	@if (Model.Stack is not null)
 	{
 		@RenderProduct("Elastic Stack", Model.Stack)
 	}
-
 	@if (Model.Deployment is not null)
 	{
 		if (Model.Deployment.Ece is not null)
@@ -108,15 +105,15 @@
 		foreach (var applicability in applications)
 		{
 			var c = GetLifeCycleClass(applicability.Lifecycle);
-			<span class="sd-badge sd-outline-@c sd-text-@c applies-badge">
+			<span class="applicable-info">
 				@name
 				@if (applicability.Lifecycle != ProductLifecycle.GenerallyAvailable)
 				{
-					<span class="sd-text-secondary">@GetLifeCycleName(applicability.Lifecycle)</span>
+					<span class="text-emerald-500">@GetLifeCycleName(applicability.Lifecycle)</span>
 				}
 				@if (applicability.Version is not null and not AllVersions)
 				{
-					<span class="sd-text-success">(@applicability.Version)</span>
+					<span class="text-red-70">(@applicability.Version)</span>
 				}
 			</span>
 		}