Chore: Merge branch 'mainframe' into mainframe-regrid

Author: lamATnginx

.github/workflows/build-push.yml

@@ -11,7 +11,7 @@ env:
 
 jobs:
     deploy-example-site:
-      uses: nginxinc/docs-actions/.github/workflows/docs-build-push.yml@9c59fab05a8131f4d691ba6ea2b6a119f3ef832a # v1.0.7
+      uses: nginxinc/docs-actions/.github/workflows/docs-build-push.yml@285440f02d9967b62aeb1b7e0b5c2c70d4f950cf # v1.0.10
       with:
         production_url_path: "/nginx-hugo-theme"
         preview_url_path: "/previews/nginx-hugo-theme"

assets/css/v2/style.css

@@ -1391,31 +1391,88 @@ h6:has(a):hover {
 }
 
 /* Landing page cards */
-
 .text-content .card-layout {
-  grid-column: 1 / -1;
+  grid-column: 1;
 
   .card-section {
-    margin-bottom: 1rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
 
     strong {
       font-weight: 500;
     }
+
+    /* Hide all the cards past 3 if it is a featured card section */
+    &.featured-section {
+      .card-section-content.card-grid > *:nth-child(n + 4) {
+        display: none;
+      }
+    }
   }
 }
 
 /* Optional grid layout */
 .card-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 500px));
+  grid-template-columns: repeat(auto-fit, minmax(33%, 1fr));
   gap: 1.5rem;
-  margin-top: 1rem;
 
   .card-container {
     border: 1px solid oklch(var(--color-codeblock-border));
     box-shadow: 3px 3px 0px oklch(var(--color-shadow));
-    padding: 1rem 2rem 2rem 2rem;
-    margin-bottom: 1.5rem;
+    padding: 1rem;
+
+    &.featured-card {
+      /* If there is a need for a featured card, only the featured card should be full length */
+      grid-column: 1 / -1;
+
+      /* If there is a featured card AND two cards, the last one should be full length */
+      ~ .card-container:nth-child(2n):last-child {
+        grid-column: 1 / -1;
+      }
+    }
+  }
+
+  /* If there is no featured card, last card that is the 3rd one should be full width */
+  &:not(:has(.featured-card)) .card-container:nth-child(3n) {
+    grid-column: 1 / -1;
+  }
+}
+
+.card-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+
+  .card-header {
+    display: flex;
+    flex-direction: row;
+    gap: 0.5rem;
+
+    .card-brand-icon {
+      height: 20px;
+      width: auto;
+    }
+
+    h2 {
+      padding: 0;
+      margin: 0;
+      font-size: 1rem;
+    }
+  }
+}
+
+.list-header-container {
+  display: flex;
+  gap: 1.5rem;
+  align-items: center;
+  justify-content: start;
+
+  img {
+    width: auto;
+    height: 3.5rem;
   }
 }
 

exampleSite/content/test-product/_index.md

@@ -1,5 +1,56 @@
 ---
-description: Test pages for nginx-hugo-theme
+# The title is the product name
 title: Test pages
 weight: 100
----
+# The URL is the base of the deployed path, becoming "docs.nginx.com/<url>/<other-pages>"
+url: 
+# The subtitle displays directly underneath the heading of a given page
+nd-subtitle: Test pages for nginx-hugo-theme
+# Indicates that this is a custom landing page
+nd-landing-page: true
+# Types have a 1:1 relationship with Hugo archetypes, so you shouldn't need to change this
+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:
+---
+
+## About
+[//]: # "These are Markdown comments to guide you through document structure. Remove them as you go, as well as any unnecessary sections."
+[//]: # "Use underscores for _italics_, and double asterisks for **bold**."
+[//]: # "Backticks are for `monospace`, used sparingly and reserved mostly for executable names - they can cause formatting problems. Avoid them in tables: use italics instead."
+
+[//]: # "This initial section introduces the product to a reader: give a short 1-2 sentence summary of what the product does and its value to the reader."
+[//]: # "Name specific functionality it provides: avoid ambiguous descriptions such as 'enables efficiency', focus on what makes it unique."
+
+This is a compilation of all our shortcodes to show how they look, function, respond, and coded.
+
+## Featured Content
+[//]: # "You can add a maximum of three cards: any extra will not display."
+[//]: # "One card will take full width page: two will take half width each. Three will stack like an inverse pyramid."
+[//]: # "Some examples of content could be the latest release note, the most common install path, and a popular new feature."
+
+{{<card-layout >}}
+  {{<card-section showAsCards="true" isFeaturedSection="true">}}
+    {{<card title="Everything" titleUrl="everything" icon="circle-dot-dashed">}}
+      All shortcodes in one page.
+    {{</card >}}
+    {{<card title="Call Out usages" titleUrl="call-out/all-callouts/" icon="message-square">}}
+      Examples for call-out shortcode
+    {{</card >}}
+    {{<card title="Code Block usages" titleUrl="code-blocks/code-blocks-highlighting/" icon="code">}}
+      Examples for codeblock shortcode
+    {{</card >}}
+  {{</card-section>}}
+{{</card-layout >}}
+
+## Other Content 
+[//]: # "You can add any extra content for the page here, such as additional cards, diagrams or text."
+
+{{<card-layout >}}
+  {{<card-section title="NGINX" showAsCards="true" >}}
+    {{<card title="NGINX Plus" titleUrl="/nginx/" brandIcon="NGINX-Plus-product-icon-RGB" >}}
+      Installing NGINX
+    {{</card >}}
+  {{</card-section >}}
+{{</card-layout >}}

layouts/partials/banner.html

@@ -1,4 +1,4 @@
-{{- with .Params.banner -}}
+{{- with index .Params "nd-banner" -}}
   {{- if .enabled -}}
     <!-- Gather the dates and default to beginning or end of time if frontmatter is not provided -->
     {{- $currentDate :=  now | dateFormat "2006-01-02" -}}

layouts/shortcodes/card-layout.html

@@ -1,2 +1,2 @@
 <!-- Render the main content first with modifications, then render the custom content -->
-<div class="card-layout">{{- .Inner | markdownify -}}</div>
+<div class="card-layout">{{- .Inner | markdownify -}}</div>

layouts/shortcodes/card-section.html

@@ -1,4 +1,5 @@
 {{ $title := .Get "title" }}
+{{ $isFeaturedSectionParam := .Get "isFeaturedSection" | default "false" }}
 {{ $showAsCardsParam := .Get "showAsCards" | default "false"}}
 {{- /* Validate the parameter strictly */ -}}
 {{- if not (in (slice "true" "false") $showAsCardsParam) -}}
@@ -8,13 +9,20 @@
 {{- $current := .Page.Scratch.Get "showAsCards" | default (dict) -}}
 {{- $newShowAsCards := dict ($title | default "main") ($showAsCards) -}}
 {{- .Page.Scratch.Set "showAsCards" (merge $current ($newShowAsCards)) -}}
-{{- $class := "card-grid wide" -}}
+{{- /* Limit the cards if it is a featured section */ -}}
+{{- if not (in (slice "true" "false") $isFeaturedSectionParam) -}}
+  {{- warnf "The '<card-section>' Shortcode parameter 'isFeaturedSection' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedSectionParam -}}
+{{- end -}}
+{{- $isFeaturedSection := cond (eq $isFeaturedSectionParam "true") "true" "false" -}}
+{{- $class := "card-grid" -}}
 {{- /* Validate that the parent is card-layout */ -}}
 {{ if eq .Parent.Name "card-layout"}}
-  <div class="card-section">
+  <div class="card-section {{if eq $isFeaturedSection "true"}}featured-section{{ end }}">
     {{- if $title -}}
       <strong class="card-section-title">{{- $title -}}</strong>
       <div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }}">{{- .Inner -}}</div>    
+    {{ else }}
+      <div class="card-section-content{{ if eq $showAsCards "true" }} {{ $class }} {{ end }}">{{ .Inner }}</div>    
     {{ end }}
   </div>
 {{ else }}

layouts/shortcodes/card.html

@@ -1,18 +1,34 @@
 {{- $title := .Get "title" -}}
 {{- $titleUrl := .Get "titleUrl" | default "/" -}} 
-{{- $icon := .Get "icon" | default "NGINX-product-icon" -}}
+{{- $icon := .Get "icon" | default "book-open" -}}
+{{- $brandIcon := .Get "brandIcon" -}}
+{{- $isFeaturedParam := .Get "isFeatured" | default "false" }}
+{{- /* Validate the parameter strictly */ -}}
+{{- if not (in (slice "true" "false") $isFeaturedParam) -}}
+  {{- warnf "The '<card>' Shortcode parameter 'isFeatured' must be 'true' or 'false', but got: '%s'. This will now default to 'false'" $isFeaturedParam -}}
+{{- end -}}
+{{- $isFeatured := cond (eq $isFeaturedParam "true") "true" "false" -}}
 {{- $current := .Page.Scratch.Get "cards" | default (slice) -}}
 {{- $newCard := dict "title" ($title) "content" (.Inner) -}}
 {{- .Page.Scratch.Set "cards" ($current | append $newCard) -}}
-{{- /* Validate that the parent is card-section */ -}}
-{{- if eq .Parent.Name "card-section" -}}
-  <div class="card-container">
+{{- /* Validate that the parent is card-section and under 3 cards */ -}}
+{{- if (eq .Parent.Name "card-section") -}}
+  <div class="card-container {{ if eq $isFeatured "true" }}featured-card{{ end }}">
     {{- if $title -}}
-      {{- if $titleUrl -}}
-        <h2 class="card-title"><a href="{{- $titleUrl -}}">{{- $title -}}</a></h2>
-      {{- else -}}
-        <h2 class="card-title">{{- $title -}}</h2>
-      {{- end -}}
+      <div class="card-header">
+        {{- if $brandIcon -}}
+          <img class="card-brand-icon" src="/images/icons/{{ $brandIcon }}.svg">
+        {{- else -}}
+          {{- if $icon -}}
+            {{ partial "lucide" (dict "context" . "icon" $icon) }}
+          {{- end -}}
+        {{- end -}}
+        {{- if $titleUrl -}}
+          <h2 class="card-title"><a href="{{- $titleUrl -}}">{{- $title -}}</a></h2>
+        {{- else -}}
+          <h2 class="card-title">{{- $title -}}</h2>
+        {{- end -}}
+      </div>
     {{- else -}}
       {{ errorf "Mainframe: Missing param 'title'" }}
     {{- end -}}

layouts/shortcodes/dimensions.html

@@ -3,16 +3,11 @@
 {{ $jsPath := replace $rawJSPath "/static" "" }}
 {{ $dimensionsRef := dict }}
 {{ with resources.Get $jsPath }}
-  {{ with .Err }}
-    {{ errorf "%s" . }}
-  {{ else }}
     {{ $dimensionsRef = . | transform.Unmarshal }}
-  {{ end }}
 {{ else }}
-  {{ errorf "Unable to get asset resource %q" $jsPath }}
+    {{ errorf "Unable to get asset resource %q" $jsPath }}
 {{ end }}
 
-
 <div class="row flex-xl-nowrap">
 
 

layouts/shortcodes/ghcode.html

@@ -1,7 +1,7 @@
 {{ $file := .Get 0 }}
 {{ $params := .Get 1 }}
 {{ $codeBlockId :=  printf "id-%x" (now.UnixNano) }}
-{{ with resources.GetRemote $file }}
+{{ with try (resources.GetRemote $file) }}
   {{ with .Err }}
     {{ errorf "%s" . }}
   {{ else }}
@@ -13,10 +13,10 @@
       <div class="code-container chroma">
           <button onclick="copyToClipBoard(this, {{ $codeBlockId }})" class="code-copy-button multi-line" type="button">Copy</button>
           <div class="highlight-v2" id="{{ $codeBlockId }}">
-            {{ highlight .Content $lang $params }}
+            {{ highlight .Value $lang $params }}
           </div>
       </div>
-  </div>
+    </div>
   {{ end }}
 {{ else }}
   {{ errorf "Unable to load github content from %s from %q" $file .Position}}

layouts/shortcodes/metrics.html

@@ -3,11 +3,7 @@
 {{ $jsPath := replace $rawJSPath "/static" "" }}
 {{ $metricsRef := dict }}
 {{ with resources.Get $jsPath }}
-  {{ with .Err }}
-    {{ errorf "%s" . }}
-  {{ else }}
     {{ $metricsRef = . | transform.Unmarshal }}
-  {{ end }}
 {{ else }}
   {{ errorf "Unable to get asset resource %q" $jsPath }}
 {{ end }}