diff --git a/assets/css/v2/style.css b/assets/css/v2/style.css index d3b7980a..f922835d 100644 --- a/assets/css/v2/style.css +++ b/assets/css/v2/style.css @@ -83,11 +83,11 @@ --code-copy-icon-height: 1rem; --code-copy-icon-width: 1rem; --breadcrumb-max-height: 54px; - --sidebar-margin: 24px; + --sidebar-margin: 1.5rem; --sidebar-line-box-side-length: 8px; --sidebar-line-box-top: 6px; --sidebar-line-box-left: 12px; - --sidebar-width: 24rem; + --sidebar-width: 22rem; --sidebar-line-width: 11.5px; --side-gutter-width: 20rem; --table-top-bottom-spacing: 1rem; @@ -617,12 +617,18 @@ body:not(:has(.main-layout)) header atomic-search-interface { .sidebar { display: flex; flex-direction: column; - width: 24rem; + width: var(--sidebar-width); max-height: 100vh; position: sticky; top: 0; - margin-top: -1rem; - padding-top: 1rem; + padding: 1rem 1rem 0 1rem; +} + +/* reset */ +.sidebar ul, +.sidebar li { + margin: 0; + padding: 0; } .sidebar .product-selector-button { @@ -647,9 +653,9 @@ body:not(:has(.main-layout)) header atomic-search-interface { display: none; position: absolute; top: 0; - min-width: 80%; + min-width: 20rem; margin-top: 8.375rem; - margin-left: 44rem; + margin-left: calc(var(--sidebar-width) + 20rem); padding: 1rem 1.5rem; background-color: white; border: black 1px solid; @@ -688,19 +694,16 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon { .sidebar .scrollbar-container { width: 100%; max-height: 100vh; - overflow: scroll; + overflow: auto; scrollbar-gutter: stable; - scrollbar-width: none; + scrollbar-width: thin; + font-size: 0.875rem; } .sidebar .scrollbar-container:hover { overflow: auto; } -.sidebar .sidebar-navigation { - margin-left: var(--sidebar-margin); -} - /* removes the built in ul padding/margin */ .sidebar .sidebar-navigation ul { margin-left: 0; @@ -708,20 +711,12 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon { list-style-type: none; } -.sidebar ul :not(.sidebar-navigation) ul { - padding-left: 16px; -} - -.sidebar .sidebar-navigation li { - margin-bottom: 16px; -} - .sidebar .sidebar-navigation a { text-decoration: none; - color: black; } .sidebar .sidebar-navigation .collapsible-header { + display: block; cursor: pointer; } @@ -752,162 +747,38 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon { display: block; } -/* Every other Sidebar Partial Vertical Line */ -.toggle-checkbox:checked ~ .collapsible-content::before { - content: ""; - position: absolute; - border-left: black 1px solid; - left: -8.5px; - top: -22.5px; - height: calc(100% + 13.5px); -} - -/* Every other Sidebar Partial Horizontal Lines */ -.toggle-checkbox:checked ~ .collapsible-content li { - position: relative; -} - -.collapsible-content .box::after { - content: ""; - position: absolute; - border-top: black 1px solid; - left: -11.5px; - width: var(--sidebar-line-width); - top: 50%; -} - -.collapsible-content .opened::after { - content: ""; - position: absolute; - border-top: black 1px solid; - left: -12.5px; - width: var(--sidebar-line-width); - top: 50%; -} - -.collapsible-content .box-link::after { - content: ""; - position: absolute; - border-top: black 1px solid; - left: -11.5px; - width: var(--sidebar-line-width); - top: 50%; -} - -.selected { - font-weight: 800; +ul.collapsible-content { + padding: 0.25rem 0; } -.sidebar .sidebar-navigation li:first-child { - margin-top: 16px; -} - -.sidebar .sidebar-navigation ul li .parent-box-link { - content: ""; - background-color: black; - position: absolute; - width: 1px; - height: var(--sidebar-line-box-side-length); - margin-top: var(--sidebar-line-box-top); - left: calc(0px - var(--sidebar-line-box-left)); -} +li.parent-collapsible-content-item { + padding: 0.5rem 0 0.4rem 0; + font-weight: 450; -.sidebar .sidebar-navigation ul li .box-link { - content: ""; - background-color: black; - position: absolute; - width: 1px; - height: var(--sidebar-line-box-side-length); - margin-top: var(--sidebar-line-box-top); - left: var(--sidebar-line-box-left); -} - -.sidebar .sidebar-navigation ul li .parent-box { - content: ""; - display: inline-block; - width: var(--sidebar-line-box-side-length); - height: var(--sidebar-line-box-side-length); - vertical-align: middle; - margin-left: -12px; - margin-top: -4px; -} - -.sidebar .sidebar-navigation ul li .box { - content: ""; - position: absolute; - width: var(--sidebar-line-box-side-length); - height: var(--sidebar-line-box-side-length); - margin-top: var(--sidebar-line-box-top); - left: var(--sidebar-line-box-left); -} - -.sidebar .sidebar-navigation ul li .expand { - background-color: black; -} - -.sidebar .sidebar-navigation ul li .opened { - border: black 1px solid; -} - -.sidebar .sidebar-navigation ul li .current { - background-color: oklch(var(--color-brand)); -} - -.sidebar .sidebar-navigation ul li .partial-box { - margin-left: -24px; -} - -.sidebar .sidebar-navigation ul li .partial { - margin-top: 0; - top: 5px; - left: -13px; + a, + label { + color: black; + display: block; + } } -/* First Sidebar Nav Vertical Line */ -.sidebar .sidebar-navigation .parent-collapsible-content { - position: relative; -} +ul.collapsible-content > li > a, +#TableOfContents ul > li > a { + padding: 0.25rem 0.75rem; + margin: 2px 0.5rem 2px 0; + border-radius: 5px; -.sidebar .sidebar-navigation .parent-collapsible-content:first-child::before { - content: ""; - position: absolute; - border-left: black 1px solid; - left: -24px; - top: 10px; - height: calc(100% - 9px - 10px); -} - -.sidebar - .sidebar-navigation - .parent-collapsible-content - li:not(:only-child) - a - + :not(:has(#TableOfContents)) - li::before { - border: none; -} + color: oklch(0 0 0 / 0.75); -/* First Sidebar Nav Horizontal Lines */ -.sidebar - .sidebar-navigation - .parent-collapsible-content - li:not(:only-child) - .parent-box::before { - content: ""; - display: block; - border-top: black 1px solid; - margin-left: -12px; - margin-top: 50%; - width: var(--sidebar-line-width); + &.current { + color: oklch(var(--color-brand) / 1); + background-color: oklch(var(--color-brand) / 0.1); + } } -.parent-collapsible-content .parent-box-link::after { - content: ""; - position: absolute; - border-top: black 1px solid; - left: -11.5px; - width: var(--sidebar-line-width); - top: 50%; +ul.collapsible-content .current, +ul.parent-collapsible-content .current { + font-weight: 600; } .row { @@ -917,9 +788,8 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon { } /* Table of Contents */ -#TableOfContents { - /* Close all TOC on sidebar */ - display: none; +#TableOfContents ul { + padding: 0 0 0.5rem 0.75rem; } .collapsible-content li ul li:has(.current) > nav { @@ -928,8 +798,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon { } #TableOfContents li:not(:empty) { - position: relative; - list-style: square; + list-style: none; } /* MARK: Content @@ -937,7 +806,7 @@ button:has(~ .product-selector[style*="none"]) > .product-selector-button-icon { main { flex: 1; min-width: 20rem; - margin: 0 2rem 2rem 2rem; + margin: 0 2rem 2rem 0; } p { diff --git a/exampleSite/content/test-product/call-out/_index.md b/exampleSite/content/test-product/call-out/_index.md index c006a32a..48cd9b49 100644 --- a/exampleSite/content/test-product/call-out/_index.md +++ b/exampleSite/content/test-product/call-out/_index.md @@ -4,3 +4,5 @@ title: Call Out usages weight: 100 toc: true --- + +This is a landing page for callout usages. It replaces the default list page. \ No newline at end of file diff --git a/exampleSite/content/test-product/call-out/all-callouts.md b/exampleSite/content/test-product/call-out/all-callouts.md index db1bb522..b5acee93 100644 --- a/exampleSite/content/test-product/call-out/all-callouts.md +++ b/exampleSite/content/test-product/call-out/all-callouts.md @@ -3,6 +3,7 @@ description: All Callouts title: All Callouts weight: 100 +toc: true --- @@ -18,12 +19,12 @@ This is a plain callout with a title. It has a [link](#plain-callouts) to a head {{}} {{}} -This is a plain callout with a default title for its type. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is ``. +This is a plain `callout` with a default title for its type. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is ``. {{}} ## Side Callouts -Naturally, callouts should contain less text within them than the text it lives next to. We do this for several reasons. Firstly, it looks weird to have a big empty space in the primary content area. Secondly, if you have more text in the callout, then it stops being a callout. I have asked an LLM to lengthen this passage. +Naturally, callouts should `contain` less text within them than the text it lives next to. We do this for several reasons. Firstly, it looks `weird` to have a big empty space in the primary content area. Secondly, if you have more text in the callout, then it stops being a callout. I have asked an LLM to lengthen this passage. {{}} This is a plain side callout with no title. It has a [link](#plain-callouts) to a heading on this page. Its shortcode is `` with the `.side-callout` class. diff --git a/exampleSite/content/test-product/lists/_index.md b/exampleSite/content/test-product/lists/_index.md index 4a0f0124..da096622 100644 --- a/exampleSite/content/test-product/lists/_index.md +++ b/exampleSite/content/test-product/lists/_index.md @@ -1,4 +1,5 @@ --- description: Lists title: Lists +weight: 200 --- diff --git a/exampleSite/content/test-product/prose/_index.md b/exampleSite/content/test-product/prose/_index.md new file mode 100644 index 00000000..f4afea56 --- /dev/null +++ b/exampleSite/content/test-product/prose/_index.md @@ -0,0 +1,7 @@ +--- +description: Prose +title: Prose +weight: 400 +--- + +This is meant to be an overview of the different kinds of prose-heavy content we expect to find in our docs. \ No newline at end of file diff --git a/exampleSite/content/test-product/prose/howto.md b/exampleSite/content/test-product/prose/howto.md new file mode 100644 index 00000000..521739c3 --- /dev/null +++ b/exampleSite/content/test-product/prose/howto.md @@ -0,0 +1,73 @@ +--- +description: '' +title: Add an NGINX instance +# toc: true +weight: 100 +--- + +## Overview + +This guide explains how to add an F5 NGINX instance in F5 NGINX One Console. You can add an instance from the NGINX One Console individually, or as part of a [Config Sync Group](#). In either case, you need +to set up a data plane key to connect your instances to NGINX One. + +## Before you start + +Before you add an instance to NGINX One Console, ensure: + +- You have administrator access to NGINX One Console. +- You have configured instances of NGINX that you want to manage through NGINX One Console. +- You have or are ready to configure a data plane key. +- You have or are ready to set up managed certificates. + +{{< note >}}If this is the first time an instance is being added to a Config Sync Group, and you have not yet defined the configuration for that Config Sync Group, that instance provides the template for that group. For more information, see [Configuration management](#).{{< /note >}} + +## Add an instance + +You can add an instance to NGINX One Console in the following ways: + +- Directly, under **Instances** +- Indirectly, by selecting a Config Sync Group, and selecting **Add Instance to Config Sync Group** + +In either case, NGINX One Console gives you a choice for data plane keys: + +- Create a new key +- Use an existing key + +NGINX One Console takes the option you use, and adds the data plane key to a command that you'd use to register your target instance. You should see the command in the **Add Instance** screen in the console. + +Connect to the host where your NGINX instance is running. Run the provided command to [install NGINX Agent](#) dependencies and packages on that host. + +```bash +curl https://agent.connect.nginx.com/nginx-agent/install | DATA_PLANE_KEY="" sh -s -- -y +``` + +Once the process is complete, you can configure that instance in your NGINX One Console. + +## Managed and Unmanaged Certificates + +If you add an instance with SSL/TLS certificates, those certificates can match an existing managed SSL certificate/CA bundle. + +### If the certificate is already managed + +If you add an instance with a managed certificate, as described in [Add your NGINX instances to NGINX One](#), these certificates are added to your list of **Managed Certificates**. + +NGINX One Console can manage your instances along with those certificates. + +### If the certificate is not managed + +These certificates appear in the list of **Unmanaged Certificates**. + +To take full advantage of NGINX One, you can convert these to **Managed Certificates**. You can then manage, update, and deploy a certificate to all of your NGINX instances in a Config Sync Group. + +To convert these cerificates, start with the Certificates menu, and select **Unmanaged**. You should see a list of **Unmanaged Certificates or CA Bundles**. Then: + +- Select a certificate +- Select **Convert to Managed** +- In the window that appears, you can now include the same information as shown in the [Add a new certificate](#add-a-new-certificate) section + +Once you've completed the process, NGINX One reassigns this as a managed certificate, and assigns it to the associated instance or Config Sync Group. + +## Add an instance to a Config Sync Group + +When you [Manage Config Sync Group membership](#), you can add an existing or new instance to the group of your choice. +That instance inherits the setup of that Config Sync Group. diff --git a/exampleSite/content/test-product/short-page.md b/exampleSite/content/test-product/short-page.md index ec16a176..9600f3b9 100644 --- a/exampleSite/content/test-product/short-page.md +++ b/exampleSite/content/test-product/short-page.md @@ -1,7 +1,7 @@ --- title: Short Page description: "Short Page" -weight: 200 +weight: 500 --- See the NGINX Gateway Fabric technical specifications page: diff --git a/layouts/partials/sidebar-list-pages.html b/layouts/partials/sidebar-list-pages.html index 1fa864ea..835d2492 100644 --- a/layouts/partials/sidebar-list-pages.html +++ b/layouts/partials/sidebar-list-pages.html @@ -1,6 +1,17 @@ {{ $currentUrl := .currentUrl }} {{ $context := .context }}
    + + {{- with $context -}} + {{- if gt (.WordCount) 0 -}} +
  • + {{- if eq $currentUrl .Permalink -}} + + {{- end -}} + Overview +
    • + {{- end -}} + {{- end -}} {{ range $context.Pages.ByWeight }}
  • {{ if eq .Kind "section" }} @@ -15,11 +26,11 @@ {{ partial "sidebar-list-pages.html" (dict "context" . "currentUrl" $currentUrl) }} {{ else if eq .Kind "page" }} {{ if eq $currentUrl .Permalink }} - + {{ else }} {{ end }} - {{ .Title }} + {{ .Title }} {{ if eq $currentUrl .Permalink }} {{- with .TableOfContents -}} {{- . -}} diff --git a/layouts/partials/sidebar-v2.html b/layouts/partials/sidebar-v2.html index 5008508d..1fd9afd0 100644 --- a/layouts/partials/sidebar-v2.html +++ b/layouts/partials/sidebar-v2.html @@ -31,7 +31,7 @@
    - +
    @@ -63,13 +63,13 @@ {{ range .FirstSection.Pages.ByWeight }}
  • {{ if eq .Kind "section" }} - + {{ partial "sidebar-list-pages.html" (dict "context" . "currentUrl" $.Permalink) }} {{ else if eq .Kind "page" }} @@ -78,7 +78,7 @@ {{ else }} {{ end }} - {{ .Title }} + {{ .Title }} {{ end }}
    • {{ end }}