Add tabs

docs/contribute/locally.md

@@ -30,8 +30,6 @@ This guide uses option one. If you'd like to clone the repository and build from
 
 :::{tab-item} macOS
 
-### macOS
-
 1. **Download the Binary:**
    Download the latest macOS binary from [releases](https://github.com/elastic/docs-builder/releases/latest/):
    ```sh
@@ -54,8 +52,6 @@ This guide uses option one. If you'd like to clone the repository and build from
 
 :::{tab-item} Windows
 
-### Windows
-
 1. **Download the Binary:**
    Download the latest Windows binary from [releases](https://github.com/elastic/docs-builder/releases/latest/):
    ```sh
@@ -78,8 +74,6 @@ This guide uses option one. If you'd like to clone the repository and build from
 
 :::{tab-item} Linux
 
-### Linux
-
 1. **Download the Binary:**
    Download the latest Linux binary from [releases](https://github.com/elastic/docs-builder/releases/latest/):
    ```sh
@@ -147,4 +141,4 @@ After you've made your changes locally,
 
 ## Step 5: View on elastic.co/docs
 
-soon...
+soon...

src/Elastic.Markdown/Assets/main.ts

@@ -1,8 +1,12 @@
 import {initNav} from "./pages-nav";
 import {initTocNav} from "./toc-nav";
-
 import {initHighlight} from "./hljs";
 
+
+
+console.log("WTF");
+
+
 initNav();
 initTocNav();
 initHighlight();

src/Elastic.Markdown/Assets/markdown/tabs.css

@@ -0,0 +1,36 @@
+@layer components {
+	.tabs {
+		@apply flex flex-wrap relative overflow-hidden;
+
+		.tabs-label {
+			@apply cursor-pointer px-6 py-2 z-20 text-ink-light flex items-center;
+
+			&:hover {
+				@apply border-b-1 border-b-black text-black bg-gray-100;
+			}
+		}
+
+		.tabs-input {
+			@apply opacity-0 absolute;
+		}
+
+		.tabs-content {
+			@apply w-full order-99 border-t-1 border-gray-300 pl-6 pt-4 z-0 hidden;
+			transform: translateY(-1px);
+		}
+
+		.tabs-input:checked+.tabs-label+.tabs-content {
+			@apply block;
+		}
+
+		.tabs-input:checked+.tabs-label, 
+		.tabs-label:active {
+			@apply border-b-1 border-b-blue-elastic text-blue-elastic;
+		}
+
+		.tabs-input:focus-visible+.tabs-label {
+			outline: var(--outline-size) var(--outline-style) var(--outline-color);
+			outline-offset: var(--outline-offset, var(--outline-size));
+		}
+	}
+}

src/Elastic.Markdown/Assets/styles.css

@@ -4,6 +4,7 @@
 @import "highlight.js/styles/atom-one-dark.css";
 @import "./markdown/typography.css";
 @import "./markdown/list.css";
+@import "./markdown/tabs.css";
 
 #default-search::-webkit-search-cancel-button {
 	padding-right: calc(var(--spacing) * 2);
@@ -84,3 +85,24 @@
 * {
 	scroll-margin-top: calc(var(--spacing) * 26);
 }
+
+:root {
+	--outline-size: max(2px, 0.08em);
+	--outline-style: auto;
+	--outline-color: var(--color-blue-elastic);
+	--outline-offset: 5;
+}
+
+:is(a, button, input, textarea, summary):focus {
+	outline: var(--outline-size) var(--outline-style) var(--outline-color);
+	outline-offset: var(--outline-offset, var(--outline-size));
+}
+
+:is(a, button, input, textarea, summary):focus-visible {
+	outline: var(--outline-size) var(--outline-style) var(--outline-color);
+	outline-offset: var(--outline-offset, var(--outline-size));
+}
+
+:is(a, button, input, textarea, summary):focus:not(:focus-visible) {
+	outline: none;
+}

src/Elastic.Markdown/Elastic.Markdown.csproj

@@ -40,10 +40,10 @@
 
   <Target Name="EmbedGeneratedAssets" AfterTargets="NpmRunBuild">
     <ItemGroup>
-      <EmbeddedResource Include="_static/*.js" />
-      <EmbeddedResource Include="_static/*.js.map" />
-      <EmbeddedResource Include="_static/*.css" />
-      <EmbeddedResource Include="_static/*.css.map" />
+      <EmbeddedResource Include="_static/*.js" Watch="false" />
+      <EmbeddedResource Include="_static/*.js.map" Watch="false" />
+      <EmbeddedResource Include="_static/*.css" Watch="false" />
+      <EmbeddedResource Include="_static/*.css.map" Watch="false" />
       <EmbeddedResource Include="_static/*.svg" Watch="false" />
       <EmbeddedResource Include="_static/*.woff2" Watch="false" />
     </ItemGroup>

src/Elastic.Markdown/Myst/Directives/DirectiveHtmlRenderer.cs

@@ -170,6 +170,19 @@ private void WriteTabSet(HtmlRenderer renderer, TabSetBlock block)
 		RenderRazorSlice(slice, renderer, block);
 	}
 
+	private void WriteTabItem(HtmlRenderer renderer, TabItemBlock block)
+	{
+		var slice = TabItem.Create(new TabItemViewModel
+		{
+			Index = block.Index,
+			Title = block.Title,
+			TabSetIndex = block.TabSetIndex,
+			SyncKey = block.SyncKey,
+			TabSetGroupKey = block.TabSetGroupKey
+		});
+		RenderRazorSlice(slice, renderer, block);
+	}
+
 	private void WriteMermaid(HtmlRenderer renderer, MermaidBlock block)
 	{
 		var slice = Mermaid.Create(new MermaidViewModel());
@@ -185,19 +198,6 @@ private void WriteApplies(HtmlRenderer renderer, AppliesBlock block)
 		RenderRazorSliceNoContent(slice, renderer);
 	}
 
-	private void WriteTabItem(HtmlRenderer renderer, TabItemBlock block)
-	{
-		var slice = TabItem.Create(new TabItemViewModel
-		{
-			Index = block.Index,
-			Title = block.Title,
-			TabSetIndex = block.TabSetIndex,
-			SyncKey = block.SyncKey,
-			TabSetGroupKey = block.TabSetGroupKey
-		});
-		RenderRazorSlice(slice, renderer, block);
-	}
-
 	private void WriteLiteralIncludeBlock(HtmlRenderer renderer, IncludeBlock block)
 	{
 		if (!block.Found || block.IncludePath is null)
@@ -286,6 +286,11 @@ private static void RenderRazorSlice<T>(RazorSlice<T> slice, HtmlRenderer render
 	private static void RenderRazorSlice<T>(RazorSlice<T> slice, HtmlRenderer renderer, DirectiveBlock obj)
 	{
 		var html = slice.RenderAsync().GetAwaiter().GetResult();
+		if (!html.Contains("[CONTENT]"))
+		{
+			renderer.Write(html);
+			return;
+		}
 		var blocks = html.Split("[CONTENT]", 2, StringSplitOptions.RemoveEmptyEntries);
 		renderer.Write(blocks[0]);
 		renderer.WriteChildren(obj);

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

@@ -1,6 +1,6 @@
 @inherits RazorSlice<TabItemViewModel>
-<input checked="@(Model.Index == 0 ? "checked" : "")" id="sd-tab-[email protected]@Model.Index" name="sd-tab-[email protected]" type="radio">
-<label class="sd-tab-label" data-sync-id="@Model.SyncKey" data-sync-group="@Model.TabSetGroupKey" for="sd-tab[email protected]@Model.Index">@Model.Title</label>
-<div class="sd-tab-content docutils">
+<input class="tabs-input" checked="@(Model.Index == 0 ? "checked" : "")" id="tabs-[email protected]@Model.Index" name="tabs-[email protected]" type="radio" tabindex="0">
+<label class="tabs-label" data-sync-id="@Model.SyncKey" data-sync-group="@Model.TabSetGroupKey" for="tabs[email protected]@Model.Index">@Model.Title</label>
+<div class="tabs-content" tabindex="0">
 	[CONTENT]
 </div>

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

@@ -1,4 +1,4 @@
 @inherits RazorSlice<TabSetViewModel>
-<div class="sd-tab-set docutils">
+<div class="tabs">
 	[CONTENT]
 </div>

src/Elastic.Markdown/Slices/Directives/_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 System.Text;
+using Elastic.Markdown.Myst.Directives;
 using Elastic.Markdown.Myst.Settings;
 
 namespace Elastic.Markdown.Slices.Directives;