Chore: Merge branch 'mainframe' into new-tests

Author: lamATnginx

.github/workflows/hugo-build-test.yml

@@ -131,9 +131,7 @@ textarea:not([rows]) {
 :root {
   /* webfonts */
   font-family: var(--font-family);
-  font-feature-settings:
-    "liga" on,
-    "calt" on;
+  font-feature-settings: "liga" on, "calt" on;
 
   /* fallback to slightly thinner font on browsers without variable 'wght' support */
   font-weight: 350;
@@ -143,9 +141,9 @@ textarea:not([rows]) {
 
   /* MARK: Variables
   */
-  --font-family:
-    "Inter var", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  --font-family: "Inter var", system-ui, -apple-system, BlinkMacSystemFont,
+    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
+    sans-serif;
   --color-brand: 56.6% 0.194 147.7;
   --color-brand-300: 0.84 0.0699 157.51;
   --color-brand-200: 0.91 0.0406 157.72;
@@ -263,10 +261,9 @@ textarea:not([rows]) {
 
 @supports (font-variation-settings: normal) {
   :root {
-    --font-family:
-      InterVariable, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-      Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
-      sans-serif;
+    --font-family: InterVariable, system-ui, -apple-system, BlinkMacSystemFont,
+      "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
+      "Helvetica Neue", sans-serif;
   }
 
   h1,
@@ -442,6 +439,7 @@ ol li:last-child {
     }
 
     .header__search {
+      display: block;
       width: 14rem;
       /* This is a horrible hack to stop coveo overflowing 3500px for no reason. :sad */
       transform: translateY(0);
@@ -569,6 +567,12 @@ ol li:last-child {
     display: flex;
     align-self: center;
   }
+
+  .header {
+    .header__logo-small {
+      display: unset;
+    }
+  }
 }
 
 /* sidebar layout */
@@ -633,6 +637,10 @@ ol li:last-child {
       scrollbar-gutter: stable;
     }
   }
+
+  .sidebar__search {
+    display: none;
+  }
 }
 
 /* This is our "mobile" or no sidebar breakpoint */
@@ -641,10 +649,24 @@ ol li:last-child {
     .sidebar {
       /* Above search */
       z-index: 11;
-      display: unset;
+      display: block;
       transform: translateX(0);
       border-bottom: 1px solid oklch(var(--color-divider));
-      height: fit-content;
+
+      position: fixed;
+      top: 0;
+      left: 0;
+
+      .sidebar__content__wrapper {
+        display: flex;
+        flex-direction: column;
+      }
+
+      .sidebar__search {
+        display: unset;
+        width: calc(var(--sidebar-width) - 4rem);
+        margin-left: 1rem;
+      }
     }
   }
 
@@ -655,6 +677,11 @@ ol li:last-child {
         margin: 0;
       }
     }
+    .header-container {
+      .header__search {
+        display: none;
+      }
+    }
   }
 
   .header__product-selector {
@@ -945,6 +972,10 @@ main {
   --atomic-border-radius-md: 0;
   --atomic-border-radius: 0;
   --atomic-font-family: var(--font-family);
+
+  atomic-search-box {
+    z-index: 0;
+  }
 }
 
 atomic-search-interface {
@@ -1203,9 +1234,7 @@ nav.sidebar.sidebar__mobile-open {
     border-radius: 5px 0 0 5px;
     color: oklch(0 0 0 / 0.75);
     text-decoration: none;
-    transition:
-      background-color 0.2s ease,
-      color 0.2s ease;
+    transition: background-color 0.2s ease, color 0.2s ease;
 
     &:hover {
       background-color: oklch(var(--color-brand) / 0.08);

assets/css/v2/style.css

@@ -36,6 +36,7 @@ async function atomicCoveo() {
   /* Initialize the interfaces with credentials */
   const searchPageInterface = document.querySelector('#search-v2');
   const searchBarHeader = document.querySelector('#search-standalone-header');
+  const searchBarSidebar = document.querySelector('#search-standalone-sidebar');
 
   if (searchPageInterface) {
     await searchPageInterface.initialize({
@@ -53,21 +54,41 @@ async function atomicCoveo() {
     await searchPageInterface.executeFirstSearch();
   }
 
-  /* Initialize the header searchbar*/
-  await searchBarHeader.initialize({
-    accessToken: token,
-    organizationId: org_id,
-    analytics: { analyticsMode: 'legacy' },
-    preprocessRequest: (request) => {
-      const body = JSON.parse(request.body);
-      body.q = `<@- ${body.q} -@>`;
-      request.body = JSON.stringify(body);
+  /* Initialize the header searchbar */
+  if (searchBarHeader) {
+    await searchBarHeader.initialize({
+      accessToken: token,
+      organizationId: org_id,
+      analytics: { analyticsMode: 'legacy' },
+      preprocessRequest: (request) => {
+        const body = JSON.parse(request.body);
+        body.q = `<@- ${body.q} -@>`;
+        request.body = JSON.stringify(body);
 
-      return request;
-    },
-  });
+        return request;
+      },
+    });
 
-  await searchBarHeader.executeFirstSearch();
+    await searchBarHeader.executeFirstSearch();
+  }
+
+  /* Initialize the sidebar searchbar */
+  if (searchBarSidebar) {
+    await searchBarSidebar.initialize({
+      accessToken: token,
+      organizationId: org_id,
+      analytics: { analyticsMode: 'legacy' },
+      preprocessRequest: (request) => {
+        const body = JSON.parse(request.body);
+        body.q = `<@- ${body.q} -@>`;
+        request.body = JSON.stringify(body);
+
+        return request;
+      },
+    });
+
+    await searchBarSidebar.executeFirstSearch();
+  }
 }
 
 document.addEventListener('DOMContentLoaded', async () => {

assets/js/coveo.js

@@ -0,0 +1,6 @@
+{{<banner "caution" "Under development">}}
+  <br>
+  This product on our example site is under development and changes are being added frequently. 
+  <br>
+  Please reach out to <strong>#friends-of-the-docs</strong> on Slack to ask questions.
+{{</banner>}}

exampleSite/_banners/test-product-intro.md

@@ -13,6 +13,11 @@ nd-content-type: landing-page
 # Intended for internal catalogue and search, case sensitive:
 # Agent, N4Azure, NIC, NIM, NGF, NAP-DOS, NAP-WAF, NGINX One, NGINX+, Solutions, Unit
 nd-product:
+cascade:
+  nd-banner:
+    enabled: true
+    start-date: 2025-01-01
+    md: /_banners/test-product-intro.md
 ---
 
 ## About

exampleSite/content/test-product/_index.md

@@ -13,20 +13,20 @@ The callout shortcode aims to support both, but **not** in the same shortcode in
 ## The two callouts below using **unnamed** params
 
 {{<call-out "" "Custom title" "fa fa-check-circle" "true">}}
-This callout uses the icon check-circle. **This should be an inline callout.**
+This callout uses the icon check-circle. **This should be an sideline callout.**
 {{</call-out>}}
 
 {{<call-out "" "Custom title" "fa fa-check-circle" "false">}}
-This callout uses the icon check-circle. **This should be an sideline callout.**
+This callout uses the icon check-circle. **This should be an inline callout.**
 {{</call-out>}}
 
 ## The two callouts below using **named** params
 This should work exactly the same as the two callouts above
 
-{{<call-out title="Custom title" icon="fa fa-check-circle" inline="true">}}
-This callout uses the icon check-circle. **This should be an inline callout.**
+{{<call-out title="Custom title" icon="fa fa-check-circle" sideline="true">}}
+This callout uses the icon check-circle. **This should be an sideline callout.**
 {{</call-out>}}
 
-{{<call-out title="Custom title" icon="fa fa-check-circle" inline="asdas">}}
+{{<call-out title="Custom title" icon="fa fa-check-circle" sideline="true">}}
 This callout uses the icon check-circle. **This should be an sideline callout.**
 {{</call-out>}}

exampleSite/content/test-product/call-out/call-out-param-types.md

@@ -46,6 +46,6 @@ This assumes the callout text is shorter than the text in the callout.
 If the text in the paragraph is shorter than the callout, it's likely
 the content needs to be re-written.
 
-{{<call-out "tip inline-callout" "Tip for Automated Reporting" >}}
+{{<call-out "tip" "Tip for Automated Reporting" >}}
 I am some call out text. Look at me go!
 {{</call-out>}}

exampleSite/content/test-product/call-out/call-out-side.md

@@ -2,49 +2,48 @@
 {{ $class := .class | default "" }}
 {{ $title := .title | default "" }}
 {{ $icon  := .icon  | default "" }}
-{{ $inlineParam := .inline | default "false" | lower }}
+{{ $sidelineParam := .sideline | default "false" | lower }}
 
-{{ if not (in (slice "true" "false") $inlineParam) }}
-  {{ errorf "Invalid parameter 'inline'='%s' passed to blockquote partial from '%s'. Allowed values: true, false" $inlineParam .Page.Path }}
+{{ if not (in (slice "true" "false") $sidelineParam) }}
+  {{ errorf "Invalid parameter 'sideline'='%s' passed to blockquote partial from '%s'. Allowed values: true, false" $sidelineParam .Page.Path }}
 {{ end }}
 
 {{/*  Figure out inline/side and set class accordingly  */}}
-{{ $inline := eq $inlineParam "true" }}
+{{ $sideline := eq $sidelineParam "true" }}
 {{ $sideOption := "side-callout" }}
 {{ $inlineOption := "inline-callout" }}
 
-{{ if $inline }}
+{{ if $sideline }}
   {{ $class = printf "%s %s" $class $sideOption }}
 {{ else }}
   {{ $class = printf "%s %s" $class $inlineOption }}
 {{ end }}
 
 {{/*  Render a different block, if "loud" callouts are used  */}}
+{{ $type := (index (split $class " ") 0) | strings.FirstUpper }}
 {{ $specialTitles := slice "Caution" "Warning" "Deprecated" "Important" }}
 {{ $specialTitleIcons := dict
   "Caution"    "alert-triangle"
   "Warning"    "alert-octagon"
   "Deprecated" "alert-octagon"
   "Important"  "arrow-right-circle"
 }}
-{{ $icon := index $specialTitleIcons $title | default "" }}
+{{ $icon := index $specialTitleIcons $type | default "" }}
 
-{{ $isSpecialTitle := in $specialTitles $title }}
+{{ $isSpecialTitle := in $specialTitles $type }}
 {{ if $isSpecialTitle }}
-  {{/*  Loud callouts  */}}
+{{/*  Loud callouts  */}}
+<blockquote class="{{ $class }}">
   <div>
-  <blockquote class="{{ $class }}">
-    <div>
-      <div class="call-out-type">
-        {{ partial "feather" (dict "context" . "icon" $icon) .}}
-       {{ $title }}
-      </div>
-      <div class="callout-content">
-        {{ .content | markdownify }}
-      </div>
+    <div class="call-out-type">
+      {{ partial "feather" (dict "context" . "icon" $icon) .}}
+      {{ $title }}
     </div>
-  </blockquote>
-</div>
+    <div class="callout-content">
+      {{ .content | markdownify }}
+    </div>
+  </div>
+</blockquote>
 
 {{ else }}
 

layouts/partials/callout.html

@@ -0,0 +1,21 @@
+<!-- Get the product name -->
+{{ $productUrl := .Page.Permalink }}
+{{ $baseUrl := .Site.BaseURL }}
+{{ $linkSplit := split (replace $productUrl $baseUrl "") "/" }}
+{{ $productName := index $linkSplit 0 }}
+<!-- Get the content -->
+{{ $changelogContent := readFile (printf "content/%s/changelog.md" $productName) }}
+{{ $maxNumLogs := 3 }}
+{{ $headings := first $maxNumLogs (findRE `(?m)^##\s(.+)$` $changelogContent) }}
+
+<ul>
+  {{ if gt (len $headings) 0 }}
+  {{ range $headings }}
+  {{ $title := replaceRE "^##\\s" "" . }}
+  <li><a href="{{ absURL (print $productName "/changelog/#" (urlize $title)) }}">{{ $title }}</a></li>
+  {{ end }}  
+  <li><a href="{{ absURL (print $productName "/changelog/")}}">Older...</a></li>
+  {{ else }}
+  <li><p>No changelog found...</p></li>
+  {{ end }}
+</ul>

layouts/partials/changelog-date.html

@@ -1,5 +1,6 @@
 {{ $redirectionUrl := .redirectionUrl | default "/search.html" }}
-<atomic-search-interface id="search-standalone-header">
+{{ $id := .id | default "search-standalone-header"}}
+<atomic-search-interface id={{ $id }}>
     <atomic-search-box redirection-url={{ $redirectionUrl }} class="header-search-box">
     </atomic-search-box>
-</atomic-search-interface>
+</atomic-search-interface>