Add ToC sidebar + some fixes and refactoring

Author: reakaleek

.github/workflows/preview-build.yml

@@ -53,6 +53,7 @@ jobs:
         if: github.event_name == 'push' || steps.check-files.outputs.any_changed == 'true'
         uses: actions/checkout@v4
         with: 
+          repository: '${{ github.event.pull_request.head.repo.full_name || github.repository }}'
           ref: ${{ github.event.pull_request.head.sha || github.ref }}
           persist-credentials: false
 
@@ -147,7 +148,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: steps.s3-upload.outcome == 'success'
         uses: elastic/docs-builder/actions/update-link-index@main
 
       - name: Update deployment status

docs/contribute/index.md

@@ -10,29 +10,20 @@ Whether you're a technical writer or you've only edited Elastic docs once or twi
 
 ## Contribute to the docs [#contribute]
 
-The version of the docs you want to contribute to determines the tool and syntax you must use to update the docs.
-
-### Contribute to Elastic Stack version 8.x docs and earlier
-
-To contribute to earlier versions of the Elastic Stack, you must work with our [legacy documentation build system](https://github.com/elastic/docs). This system uses AsciiDoc as it's authoring format.
-
-* For **simple bugfixes and enhancements** --> [Contribute on the web](on-the-web.md)
-* For **complex or multi-page updates** --> See the [legacy documentation build guide](https://github.com/elastic/docs?tab=readme-ov-file#building-documentation)
-
-### Contribute to Elastic Stack version 9.0 docs and later
-
-* For **simple bugfixes and enhancements** --> [contribute on the web](on-the-web.md)
-* For **complex or multi-page updates** --> [Contribute locally](locally.md)
+* Simple bugs and enhancements --> [Contribute on the web](on-the-web.md)
+* Complex or multi-page updates --> [Contribute locally](locally.md)
+* Test migrated content --> [Migration guide](../migration/guide/index.md)
 
 ## Report a bug
 
 * It's a **documentation** problem --> [Open a docs issue](https://github.com/elastic/docs-content/issues/new?template=internal-request.yaml) *or* [Fix it myself](locally.md)
 * It's a **build tool (docs-builder)** problem --> [Open a bug report](https://github.com/elastic/docs-builder/issues/new?template=bug-report.yaml)
+* It's a **migration tooling** problem --> [Open a bug report](https://github.com/elastic/docs-builder/issues/new?template=bug-report.yaml)
 
 ## Request an enhancement
 
 * Make the **documentation** better --> [Open a docs issue](https://github.com/elastic/docs-content/issues/new?template=internal-request.yaml)
-* Make our **build tool (docs-builder)** better --> [Start a docs-builder discussion](https://github.com/elastic/docs-builder/discussions)
+* Make our **build tool (docs-builder)** better --> [Open a docs-builder issue](https://github.com/elastic/docs-builder/issues/new?template=enhancement.yaml)
 
 ## Work on docs-builder
 

docs/contribute/locally.md

@@ -1,31 +1,13 @@
 # Contribute locally
 
 Follow these steps to contribute to Elastic docs.
-
-* [Prerequisites](#prerequisites)
 * [Step 1: Install `docs-builder`](#step-one)
-* [Step 2: Clone a content repository](#step-two)
+* [Step 2: Clone the `docs-content` repository](#step-two)
 * [Step 3: Serve the Documentation](#step-three)
-* [Step 4: Write docs!](#step-four)
-* [Step 5: Push your changes](#step-five)
-
-## Prerequisites
-
-To write and push updates to Elastic documentation, you need the following:
-
-1. **A code editor**: we recommend [Visual Studio Code](https://code.visualstudio.com/download)
-1. **Git installed on your machine**: learn how [here](https://github.com/git-guides/install-git)
-1. **A GitHub account**: sign up [here](https://github.com/)
+* [Step 4: Open a PR](#step-three)
 
 ## Step 1: Install `docs-builder` [#step-one]
 
-There are two different ways to install and run `docs-builder`:
-
-1. Download, extract, and run the binary (recommended)
-1. Clone the repository and build the binary from source
-
-This guide uses option one. If you'd like to clone the repository and build from source, learn how in the [project readme](https://github.com/elastic/docs-builder?tab=readme-ov-file#docs-builder).
-
 ::::{tab-set}
 
 :::{tab-item} macOS
@@ -45,7 +27,7 @@ This guide uses option one. If you'd like to clone the repository and build from
    ```
 
 3. **Run the Binary:**
-   Use the `serve` command to start serving the documentation at http://localhost:3000. The path to the `docset.yml` file that you want to build can be specified with `-p`:
+   Use the `serve` command to start serving the documentation at http://localhost:3000. The path to the docset.yml file that you want to build can be specified with `-p`:
    ```sh
    ./docs-builder serve -p ./path/to/docs
    ```
@@ -69,7 +51,7 @@ This guide uses option one. If you'd like to clone the repository and build from
    ```
 
 3. **Run the Binary:**
-   Use the `serve` command to start serving the documentation at http://localhost:3000. The path to the `docset.yml` file that you want to build can be specified with `-p`:
+   Use the `serve` command to start serving the documentation at http://localhost:3000. The path to the docset.yml file that you want to build can be specified with `-p`:
    ```sh
    .\docs-builder serve -p ./path/to/docs
    ```
@@ -93,7 +75,7 @@ This guide uses option one. If you'd like to clone the repository and build from
    ```
 
 3. **Run the Binary:**
-   Use the `serve` command to start serving the documentation at http://localhost:3000. The path to the `docset.yml` file that you want to build can be specified with `-p`:
+   Use the `serve` command to start serving the documentation at http://localhost:3000. The path to the docset.yml file that you want to build can be specified with `-p`:
    ```sh
    ./docs-builder serve -p ./path/to/docs
    ```
@@ -102,28 +84,22 @@ This guide uses option one. If you'd like to clone the repository and build from
 
 ::::
 
-## Clone a content repository [#step-two]
-
-:::{tip}
-Documentation lives in many repositories across Elastic. If you're unsure which repository to clone, you can use the "Edit this page" link on any documentation page to determine where the source file lives.
-:::
+## Clone the `docs-content` Repository  [#step-two]
 
-In this guide, we'll clone the [`docs-content`](https://github.com/elastic/docs-content) repository. The `docs-content` repository is the home for narrative documentation at Elastic. Clone this repo to a directory of your choice:
+Clone the `docs-content` repository to a directory of your choice:
 ```sh
 git clone https://github.com/elastic/docs-content.git
 ```
 
 ## Serve the Documentation [#step-three]
 
-1. **Navigate to the `docs-builder` clone location:**
+1. **Navigate to the cloned repository:**
    ```sh
    cd docs-content
    ```
 
-1. **Run the Binary:**
-   Run the binary with the `serve` command to build and serve the content set to http://localhost:3000. Specify the path to the `docset.yml` file that you want to build with `-p`.
-
-   For example, if `docs-builder` and `docs-content` are in the same top-level directory, you would run:
+2. **Run the Binary:**
+   Use the `serve` command to start serving the documentation at http://localhost:3000. The path to the `docset.yml` file that you want to build can be specified with `-p`:
    ```sh
    # macOS/Linux
    ./docs-builder serve -p ./migration-test
@@ -134,16 +110,9 @@ git clone https://github.com/elastic/docs-content.git
 
 Now you should be able to view the documentation locally by navigating to http://localhost:3000.
 
-## Step 4: Write docs [#step-four]
-
-We write docs in markdown. See our [syntax](../syntax/index.md) guide for the flavor of markdown that we support and all of our custom directives that enable you to add a little extra pizazz to your docs.
-
-## Step 5: Push your changes [#step-five]
-
-After you've made your changes locally,
+## Step 4: Open a PR [#step-four]
 
-* [Push your commits](https://docs.github.com/en/get-started/using-git/pushing-commits-to-a-remote-repository)
-* [Open a Pull Request](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/proposing-changes-to-your-work-with-pull-requests/creating-a-pull-request)
+Open a PR. Good luck.
 
 ## Step 5: View on elastic.co/docs
 

docs/docset.yml

@@ -21,7 +21,6 @@ external_hosts:
   - github.io
   - github.com
   - elastic.dev
-  - visualstudio.com
 exclude:
   - '_*.md'
 subs:

docs/versions/_snippets/content-patterns-list.md

@@ -4,7 +4,7 @@
 | [Section/heading-level `applies` tags](/versions/content-patterns.md#sectionheading-level-applies-tags) | Provide signals about a section’s scope so a user can choose to read or skip it as needed. |
 | [Tabs](/versions/content-patterns.md#tabs) | Provide two sets of procedures when one or more steps in a process differs between contexts or versions. |
 | [Callouts](/versions/content-patterns.md#callouts) | Draw attention to happy differences and basic clarifications. |
-| [Prose](/versions/content-patterns.md#prose) | - Identify features in a list of features that are exclusive to a specific context, or that were introduced in a specific version<br>- List differing requirements, limits, and other simple, mirrored facts<br>- Provide clarifying or secondary information<br>- Explain differences with a "why" (e.g. comparative overviews) |
+| [Prose](/versions/content-patterns.md#prose) | Provide clarifying or secondary information, explain differences with a "why". |
 | [Sibling pages](/versions/content-patterns.md#sibling-pages) | When the information is too complex to be addressed with only the other content patterns. See specific examples in the sibling pages section. |
 
 % | [List item suffixes](/versions/content-patterns.md#list-item-suffixes) | Identify features in a **list of features** that are exclusive to a specific context, or that were introduced in a specific version. |

docs/versions/content-patterns.md

@@ -208,12 +208,12 @@ If there’s a terminology change or other minor change (especially where x equa
 
 ## Prose
 
-**Use cases:**
-* When features in a list of features are exclusive to a specific context, or were introduced in a specific version
-* Requirements, limits, other simple, mirrored facts
+**Use case**: Clarifying or secondary information, differences with a "why"
+
+**When to use:** 
 * Cases where the information isn’t wildly important, but nice to know, or to add basic terminology change info to overviews
 * Comparative overviews
-* Differences that are small enough or not significant enough to warrant an admonition or tabs or separate sections with front matter
+* Differences that are small enough or not significant enough to warrant an admonition or tabs or separate sections with frontmatter.
 
 In some cases, you might want to add a paragraph specific to one version or another in prose to clarify behavior or terminology. 
 
@@ -223,44 +223,12 @@ In cases where there are significant differences between contexts, close explana
 
 ### Examples
 
+* In {{stack}} 9.1.0 and earlier, **Spaces** were referred to as **Places**. 
 
 ::::{tab-set}
-:group: five-six-four-one-three
-
-:::{tab-item} Unique features
-:sync: five
-
-* Each space has its own saved objects.
-* Users can only access the spaces that they have been granted access to. This access is based on user roles, and a given role can have different permissions per space.
-* In {{stack}} 9.0.0+, each space has its own navigation.
-
-:::
-
-:::{tab-item} Unique reqs / limits
-:sync: six
-
-* In serverless, use `Admin` or equivalent
-* In {{stack}} 9.0.0+, use `kibana_admin` or equivalent
-
-OR 
-
-The maximum number of spaces that you can have differs by [what do we call this]: 
-
-* In serverless, you can have a maximum of 100 spaces.
-* In {{stack}} 9.0.0+, the maximum is controlled by the `xpack.spaces.maxSpaces` setting. Default is 1000.
-:::
+:group: one-two-three
 
-:::{tab-item} Nice-to-know
-:sync: four
-
-In {{stack}} 9.1.0 and earlier, **Spaces** were referred to as **Places**. 
-
-OR
-
-If you're managing a {{stack}} v9 deployment, then you can also assign roles and define permissions for a space from the **Permissions** tab of the space settings. 
-:::
-
-:::{tab-item} Comparative overviews
+:::{tab-item} One
 :sync: one
 
 The way that TLS certificates are managed depends on your deployment type:
@@ -272,7 +240,12 @@ In {{eck}}, you can manage certificates for the HTTP layer. Certificates for the
 In {{ece}}, you can use one or more proxy certificates to secure the HTTP layer. These certificates are managed at the ECE installation level. Transport-level encryption is managed by ECE and certificates can’t be changed.
 :::
 
-:::{tab-item} Comparative overviews II
+:::{tab-item} Two
+:sync: two
+If you're managing a {{stack}} v9 deployment, then you can also assign roles and define permissions for a space from the **Permissions** tab of the space settings. 
+:::
+
+:::{tab-item} Three
 :sync: three
 
 **Managed security in Elastic Cloud**
@@ -291,7 +264,6 @@ You can augment Elastic Cloud security features in the following ways:
 :::
 ::::
 
-
 ## Sibling pages
 
 **Use case:**

src/Elastic.Markdown/Assets/main.ts

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

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

@@ -0,0 +1,25 @@
+#elastic-docs-v3 {
+	ol,ul {
+		font-family: "Inter", sans-serif;
+		@apply text-base text-body mb-6;
+		line-height: 1.5em;
+		letter-spacing: 0;
+		margin-left: 1.5em;
+	}
+	
+	ol {
+		list-style-type: decimal;
+	}
+	
+	ul {
+		list-style-type: disc;
+	}
+
+	li {
+		margin-bottom: calc(var(--spacing) * 3);
+
+		p {
+			margin-bottom: 0;
+		}
+	}
+}

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

@@ -1,34 +1,35 @@
 #elastic-docs-v3 {
+
 	h1 {
 		font-family: "Mier B", "Inter", sans-serif;
-		@apply text-4xl text-ink font-bold mb-6;
+		@apply text-4xl text-black mb-6 mt-4;
 		line-height: 1.2em;
 		letter-spacing: -0.04em;
 	}
 
 	h2 {
 		font-family: "Mier B", "Inter", sans-serif;
-		@apply text-2xl text-ink mb-6;
+		@apply text-2xl text-black mb-6 mt-4;
 		line-height: 1.2em;
 		letter-spacing: -0.02em;
 	}
 
 	h3 {
 		font-family: "Mier B", "Inter", sans-serif;
-		@apply text-xl text-ink font-bold mb-6;
+		@apply text-xl text-black font-bold mb-6 mt-4;
 		line-height: 1.2em;
 		letter-spacing: -0.02em;
 	}
 
 	p {
 		font-family: "Inter", sans-serif;
-		@apply text-base text-body mb-6;
+		@apply text-base text-ink text-body mb-6;
 		line-height: 1.5em;
 		letter-spacing: 0;
 	}
 
 	a {
 		font-family: "Inter", sans-serif;
-		@apply text-blue-elastic hover:underline underline-offset-4;
+		@apply text-blue-elastic underline hover:text-blue-800;
 	}
 }

src/Elastic.Markdown/Assets/pages-nav.ts

@@ -1,8 +1,8 @@
-import {$, $$} from "select-dom/strict";
+import {$, $$} from "select-dom";
 
 type NavExpandState = { [key: string]: boolean };
 const PAGE_NAV_EXPAND_STATE_KEY = 'pagesNavState';
-const navState = JSON.parse(sessionStorage.getItem(PAGE_NAV_EXPAND_STATE_KEY)) as NavExpandState
+const navState = JSON.parse(sessionStorage.getItem(PAGE_NAV_EXPAND_STATE_KEY) ?? "{}") as NavExpandState
 
 // Initialize the nav state from the session storage
 // Return a function to keep the nav state in the session storage that should be called before the page is unloaded
@@ -14,7 +14,9 @@ function keepNavState(nav: HTMLElement): () => void {
 			if ('shouldExpand' in input.dataset && input.dataset['shouldExpand'] === 'true') {
 				input.checked = true;
 			} else {
-				input.checked = navState[key];
+				if (key in navState) {
+					input.checked = navState[key];
+				}
 			}
 		});
 	}
@@ -68,6 +70,9 @@ function isElementInViewport(el: HTMLElement): boolean {
 
 export function initNav() {
 	const pagesNav = $('#pages-nav');
+	if (!pagesNav) {
+		return;
+	}
 	const keepNavStateCallback = keepNavState(pagesNav);
 	const keepNavPositionCallback = keepNavPosition(pagesNav);
 	scrollCurrentNaviItemIntoView(pagesNav, 100);