Merge branch 'main' into fix/include-anchors-toc

Author: Mpdreamz

.github/workflows/preview-build.yml

@@ -1,7 +1,7 @@
 name: preview-build
 
 on:
-  pull_request_target: 
+  pull_request_target:
     types:
       - opened
       - synchronize
@@ -34,7 +34,7 @@ permissions:
 
 jobs:
   build:
-    concurrency: 
+    concurrency:
       group: ${{ github.workflow }}-${{ github.event.pull_request.head.ref || github.ref }}
       cancel-in-progress: ${{ github.event_name == 'pull_request_target' }}
     runs-on: ubuntu-latest
@@ -46,14 +46,19 @@ jobs:
         uses: tj-actions/changed-files@d6e91a2266cdb9d62096cebf1e8546899c6aa18f # v45.0.6
         with:
           files: ${{ inputs.path-pattern != '' && inputs.path-pattern || '**' }}
-            
+
+      - name: Free Disk Space
+        uses: jlumbroso/free-disk-space@main
+        with:
+          tool-cache: false
+
       - name: Checkout
         if: github.event_name == 'push' || steps.check-files.outputs.any_changed == 'true'
         uses: actions/checkout@v4
-        with: 
+        with:
           ref: ${{ github.event.pull_request.head.sha || github.ref }}
           persist-credentials: false
-        
+
       - name: Create Deployment
         if: github.event_name == 'push' || steps.check-files.outputs.any_changed == 'true'
         uses: actions/github-script@v7
@@ -86,7 +91,7 @@ jobs:
                 log_url: `https://github.com/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId}`,
             })
             return deployment.data.id
-            
+
       - name: Generate env.PATH_PREFIX
         if: steps.deployment.outputs.result
         env:
@@ -113,7 +118,7 @@ jobs:
       - name: Bootstrap Action Workspace
         if: github.repository == 'elastic/docs-builder' && steps.deployment.outputs.result
         uses: ./.github/actions/bootstrap
-        
+
       # we run our artifact directly please use the prebuild
       # elastic/docs-builder@main GitHub Action for all other repositories!
       - name: Build documentation
@@ -142,7 +147,7 @@ jobs:
             --paths "${PATH_PREFIX}" "${PATH_PREFIX}/*"
 
       - name: Update Link Index
-        if: github.event_name == 'push' && github.ref == 'refs/heads/main' && steps.s3-upload.outcome == 'success' 
+        if: github.event_name == 'push' && github.ref == 'refs/heads/main' && steps.s3-upload.outcome == 'success'
         uses: elastic/docs-builder/actions/update-link-index@main
 
       - name: Update deployment status

docs/_docset.yml

@@ -65,6 +65,7 @@ toc:
       - file: comments.md
       - file: conditionals.md
       - file: dropdowns.md
+      - file: definition-lists.md
       - file: example_blocks.md
       - file: file_inclusion.md
       - file: frontmatter.md

docs/syntax/definition-lists.md

@@ -0,0 +1,49 @@
+# Definition Lists
+
+
+A Definition List in Markdown is created by writing a term on one line, followed by a colon and at least one space (`: `) on the next line, followed by the definition. Multiple paragraphs in the definition should be indented with spaces to match the definition text.
+
+
+## Basic definition list
+
+::::{tab-set}
+
+:::{tab-item} Output
+
+Fruit
+:   A sweet and fleshy product of a tree or other plant that contains seed and can be eaten as food. Common examples include apples, oranges, and bananas. Most fruits are rich in vitamins, minerals and fiber.
+
+Vegetable
+:   Any edible part of a plant that is used in savory dishes. This includes roots, stems, leaves, flowers, and sometimes fruits that are used as vegetables.
+
+    Unlike fruits, vegetables are typically lower in sugar content and higher in fiber. Common examples include carrots, broccoli, spinach, potatoes, and tomatoes (which are technically fruits).
+
+Grain
+:   The edible seeds or fruit of grass-like plants belonging to the family Poaceae. These include wheat, rice, corn, oats, and barley. See [Types of Grains](https://en.wikipedia.org/wiki/Grain).
+
+Legume
+:   Plants in the family Fabaceae, or their fruit or seeds, such as peas, beans, lentils and peanuts. See [Common Legumes](https://en.wikipedia.org/wiki/Legume).
+
+:::
+
+:::{tab-item} Markdown
+
+```markdown
+Fruit
+:   A sweet and fleshy product of a tree or other plant that contains seed and can be eaten as food. Common examples include apples, oranges, and bananas. Most fruits are rich in vitamins, minerals and fiber.
+
+Vegetable
+:   Any edible part of a plant that is used in savory dishes. This includes roots, stems, leaves, flowers, and sometimes fruits that are used as vegetables.
+
+    Unlike fruits, vegetables are typically lower in sugar content and higher in fiber. Common examples include carrots, broccoli, spinach, potatoes, and tomatoes (which are technically fruits).
+
+Grain
+:   The edible seeds or fruit of grass-like plants belonging to the family Poaceae. These include wheat, rice, corn, oats, and barley. See [Types of Grains](https://en.wikipedia.org/wiki/Grain).
+
+Legume
+:   Plants in the family Fabaceae, or their fruit or seeds, such as peas, beans, lentils and peanuts. See [Common Legumes](https://en.wikipedia.org/wiki/Legume).
+```
+
+:::
+
+::::

docs/syntax/index.md

@@ -69,7 +69,7 @@ We support _some_ [GitHub Flavored Markdown (GFM) extensions](https://github.git
 
 ### Supported
 
-* [](tables.md#github-flavored-markdown-gfm-table)
+* [](tables.md#basic-table)
 * Strikethrough: ~~as seen here~~
 
 ### Not supported

docs/syntax/tables.md

@@ -6,24 +6,64 @@ A table is an arrangement of data with rows and columns. Each row consists of ce
 * a delimiter row separating the header from the data
 * zero or more data rows
 
-## Notes
+## Basic Table
 
-* A leading and trailing pipe is recommended for clarity of reading
-* Spaces between pipes and cell content are trimmed
-* Block-level elements cannot be inserted in a table
+::::{tab-set}
 
-## GitHub Flavored Markdown (GFM) Table
-
-You can use the GFM table syntax to create a table:
-
-```
+:::{tab-item} Output
 | Country | Capital         |
 | ------- | --------------- |
 | USA     | Washington D.C. |
 | Canada  | Ottawa          |
-```
+| Mexico  | Mexico City     |
+| Brazil  | Brasília        |
+| UK      | London          |
+:::
 
+:::{tab-item} Markdown
+```markdown
 | Country | Capital         |
 | ------- | --------------- |
 | USA     | Washington D.C. |
 | Canada  | Ottawa          |
+| Mexico  | Mexico City     |
+| Brazil  | Brasília        |
+| UK      | London          |
+:::
+
+::::
+
+:::{note}
+
+* A leading and trailing pipe is recommended for clarity of reading
+* Spaces between pipes and cell content are trimmed
+* Block-level elements cannot be inserted in a table
+
+:::
+
+
+## Responsive Table
+
+Every table is responsive by default. The table will automatically scroll horizontally when the content is wider than the viewport.
+
+::::{tab-set}
+
+:::{tab-item} Output
+| Product Name | Price ($) | Stock  | Category  | Rating  | Color    | Weight (kg) | Warranty (months) |
+|--------------|-----------|--------|-----------|---------|----------|-------------|-------------------|
+| Laptop Pro   | 1299.99   | 45     | Computer  | 4.5     | Silver   | 1.8         | 24                |
+| Smart Watch  | 299.99    | 120    | Wearable  | 4.2     | Black    | 0.045       | 12                |
+| Desk Chair   | 199.50    | 78     | Furniture | 4.8     | Gray     | 12.5        | 36                |
+:::
+
+:::{tab-item} Markdown
+```markdown
+| Product Name | Price ($) | Stock  | Category  | Rating  | Color    | Weight (kg) | Warranty (months) |
+|--------------|-----------|--------|-----------|---------|----------|-------------|-------------------|
+| Laptop Pro   | 1299.99   | 45     | Computer  | 4.5     | Silver   | 1.8         | 24                |
+| Smart Watch  | 299.99    | 120    | Wearable  | 4.2     | Black    | 0.045       | 12                |
+| Desk Chair   | 199.50    | 78     | Furniture | 4.8     | Gray     | 12.5        | 36                |
+:::
+```
+
+::::

docs/syntax/tabs.md

@@ -36,7 +36,6 @@ This is where the content for tab #2 goes.
 
 ::::
 
----
 
 ## Tab Groups
 

docs/testing/index.md

@@ -30,4 +30,4 @@ The files in this directory are used for testing purposes. Do not edit these fil
       {
         "key": "value"
       }
-      ```
+      ```

src/Elastic.Markdown/Assets/copybutton.ts

@@ -145,9 +145,13 @@ const addCopyButtonToCodeCells = () => {
   // happens because we load ClipboardJS asynchronously.
 
   // Add copybuttons to all of our code cells
-  const COPYBUTTON_SELECTOR = 'div.highlight pre';
+  const COPYBUTTON_SELECTOR = '.markdown-content div.highlight pre';
   const codeCells = document.querySelectorAll(COPYBUTTON_SELECTOR)
   codeCells.forEach((codeCell, index) => {
+	if (codeCell.id) {
+	  return
+	}
+  
     const id = codeCellId(index)
     codeCell.setAttribute('id', id)
 
@@ -256,6 +260,5 @@ var copyTargetText = (trigger) => {
 }
 
 export function initCopyButton() {
-	console.log("initCopyButton");
-	runWhenDOMLoaded(addCopyButtonToCodeCells)
+	addCopyButtonToCodeCells();
 }

src/Elastic.Markdown/Assets/hljs.ts

@@ -164,6 +164,7 @@ hljs.registerLanguage('esql', function() {
 
 hljs.addPlugin(mergeHTMLPlugin);
 export function initHighlight() {
-
-	hljs.highlightAll();
+	document.querySelectorAll('#markdown-content pre code:not(.hljs)').forEach((block) => {
+	  hljs.highlightElement(block);
+	});
 }

src/Elastic.Markdown/Assets/main.ts

@@ -1,9 +1,34 @@
+import "htmx.org"
+import "htmx-ext-preload"
 import {initTocNav} from "./toc-nav";
 import {initHighlight} from "./hljs";
 import {initTabs} from "./tabs";
 import {initCopyButton} from "./copybutton";
+import {initNav} from "./pages-nav";
+import {$$} from "select-dom"
 
-initTocNav();
-initHighlight();
-initCopyButton();
-initTabs();
+document.addEventListener('htmx:load', function() {
+	initTocNav();
+	initHighlight();
+	initCopyButton();
+	initTabs();
+	initNav();
+});
+
+document.body.addEventListener('htmx:oobAfterSwap', function(event) {
+	if (event.target.id === 'markdown-content') {
+		window.scrollTo(0, 0);
+	}
+});
+
+document.body.addEventListener('htmx:pushedIntoHistory', function(event) {
+	const currentNavItem = $$('.current');
+	currentNavItem.forEach(el => {
+		el.classList.remove('current');
+	})
+	// @ts-ignore
+	const navItems = $$('a[href="' + event.detail.path + '"]');
+	navItems.forEach(navItem => {
+		navItem.classList.add('current');
+	});
+});