Merge pull request #649 from gaurav-nelson/breadcrumbs+ai

mbaldessari · web-flow · commit 7ac8632e38c2 · 2026-03-04T08:48:56.000+01:00
feat: Add breadcrumb navigation, page actions toolbar, and copy page option
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
@@ -10,6 +10,7 @@
         </div>
         <script src="{{ "js/codeblock.js"  | relURL }}"></script>
         <script src="{{ "js/mobile-nav.js"  | relURL }}"></script>
+        <script src="{{ "js/page-actions.js"  | relURL }}"></script>
     </body>
     <!-- Uncomment when you have sorted out the feedback partials option
         <body>
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
@@ -10,10 +10,7 @@
 
 <main class="pf-c-page__main" id="maincontent">
   <section class="pf-c-page__main-section">
-    <!-- Sidebar toggle for mobile -->
-    <div class="sidebar-toggle-container">
-      {{ partial "sidebar-toggle.html" . }}
-    </div>
+    {{ partial "page-toolbar.html" . }}
     <div class="pf-l-grid__item pf-m-9-col">
       <div class="pf-u-text-align-center">
         <div class="pf-c-content" style="--pf-c-content--FontSize: 1rem;">
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
@@ -18,9 +18,11 @@
       </div>
     </div>
   </div>
-  <main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
+  <main class="pf-c-page__main" tabindex="0">
     <section class="pf-c-page__main-section">
+      {{ partial "toc-mobile.html" . }}
       <div class="pf-u-display-flex">
+          {{ partial "toc.html" . }}
           <div class="pf-c-content">
             <h1>
               {{- .Title -}}
@@ -45,7 +47,6 @@ <h1>
               {{ .Content }}
             </div>
           </div>
-          {{ partial "toc.html" . }}
       </div>
     </section>
     {{ partial "footer.html" . }}
diff --git a/layouts/ci/single.html b/layouts/ci/single.html
@@ -10,10 +10,7 @@
   </div>
   <main class="pf-c-page__main">
     <section class="pf-c-page__main-section">
-      <!-- Sidebar toggle for mobile -->
-      <div class="sidebar-toggle-container">
-        {{ partial "sidebar-toggle.html" . }}
-      </div>
+      {{ partial "page-toolbar.html" . }}
       <div class="pf-u-display-flex">
       <div class="pf-c-content">
         <h1>{{- .Title -}}</h1>
diff --git a/layouts/contribute/list.html b/layouts/contribute/list.html
@@ -7,10 +7,7 @@
 
 <main class="pf-c-page__main">
   <section class="pf-c-page__main-section">
-    <!-- Sidebar toggle for mobile -->
-    <div class="sidebar-toggle-container">
-      {{ partial "sidebar-toggle.html" . }}
-    </div>
+    {{ partial "page-toolbar.html" . }}
     <div class="pf-l-grid__item pf-m-9-col">
       <div class="pf-u-text-align-center">
         <div class="pf-c-content" style="--pf-c-content--FontSize: 1rem;">
diff --git a/layouts/contribute/single.html b/layouts/contribute/single.html
@@ -5,17 +5,15 @@
       {{ partial "menu-contribute.html" . }}
     </div>
   </div>
-  <main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
+  <main class="pf-c-page__main" tabindex="0">
     <section class="pf-c-page__main-section pf-m-fill">
-      <!-- Sidebar toggle for mobile -->
-      <div class="sidebar-toggle-container">
-        {{ partial "sidebar-toggle.html" . }}
-      </div>
+      {{ partial "toc-mobile.html" . }}
+      {{ partial "page-toolbar.html" . }}
       <div class="pf-u-display-flex">
+        {{ partial "toc.html" . }}
         <div class="pf-c-content">
           {{ .Content }}
         </div>
-          {{ partial "toc.html" . }}
       </div>
     </section>
     {{ partial "footer.html" . }}
diff --git a/layouts/learn/list.html b/layouts/learn/list.html
@@ -7,10 +7,7 @@
 
 <main class="pf-c-page__main">
   <section class="pf-c-page__main-section">
-    <!-- Sidebar toggle for mobile -->
-    <div class="sidebar-toggle-container">
-      {{ partial "sidebar-toggle.html" . }}
-    </div>
+    {{ partial "page-toolbar.html" . }}
     <div class="pf-l-grid__item pf-m-9-col">
       <div class="pf-u-text-align-center">
         <div class="pf-c-content" style="--pf-c-content--FontSize: 1rem;">
diff --git a/layouts/learn/single.html b/layouts/learn/single.html
@@ -5,13 +5,12 @@
       {{ partial "menu-learn.html" . }}
     </div>
   </div>
-  <main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
+  <main class="pf-c-page__main" tabindex="0">
     <section class="pf-c-page__main-section pf-m-fill">
-      <!-- Sidebar toggle for mobile -->
-      <div class="sidebar-toggle-container">
-        {{ partial "sidebar-toggle.html" . }}
-      </div>
+      {{ partial "toc-mobile.html" . }}
+      {{ partial "page-toolbar.html" . }}
       <div class="pf-u-display-flex">
+        {{ partial "toc.html" . }}
         <div class="pf-c-content">
           {{ .Content }}
 
@@ -42,7 +41,6 @@
             </div>
           </div>
         </div>
-          {{ partial "toc.html" . }}
       </div>
     </section>
     {{ partial "footer.html" . }}
diff --git a/layouts/partials/breadcrumbs.html b/layouts/partials/breadcrumbs.html
@@ -0,0 +1,34 @@
+{{- if not .IsHome -}}
+{{- $ancestors := .Ancestors.Reverse -}}
+{{- $count := len $ancestors -}}
+<nav class="pf-c-breadcrumb" aria-label="Breadcrumb">
+  <ol class="pf-c-breadcrumb__list">
+    {{- range $i, $a := $ancestors }}
+    <li class="pf-c-breadcrumb__item{{ if and (gt $count 2) (gt $i 0) }} pf-c-breadcrumb__item--collapsible{{ end }}">
+      <span class="pf-c-breadcrumb__item-divider" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+      </span>
+      <a href="{{ .RelPermalink }}" class="pf-c-breadcrumb__link">
+        {{- if .IsHome }}Home{{ else }}{{ .Title }}{{ end -}}
+      </a>
+    </li>
+    {{- if and (gt $count 2) (eq $i 0) }}
+    <li class="pf-c-breadcrumb__item pf-c-breadcrumb__item--ellipsis">
+      <span class="pf-c-breadcrumb__item-divider" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+      </span>
+      <button type="button" class="pf-c-breadcrumb__link pf-c-breadcrumb__expand-btn" aria-label="Show full breadcrumb path">&hellip;</button>
+    </li>
+    {{- end }}
+    {{- end }}
+    <li class="pf-c-breadcrumb__item">
+      <span class="pf-c-breadcrumb__item-divider" aria-hidden="true">
+        <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
+      </span>
+      <span class="pf-c-breadcrumb__link pf-m-current" aria-current="page">
+        {{- .Title -}}
+      </span>
+    </li>
+  </ol>
+</nav>
+{{- end -}}
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
@@ -70,5 +70,6 @@
             <a href="//www.redhat.com" target="top" aria-label="Visit Red Hat.com"><img src="/images/RHlogo.svg" alt="Red Hat logo" width="145px" height="613px"></a><span class="site-copyright">Copyright &copy; {{ now.Year }} Red Hat, Inc. All third-party trademarks are the property of their respective owners.</span>
         </div>
         <script src="{{ "js/bootstrap.bundle.js" | relURL }}"></script>
+        <script src="{{ "js/toc.js" | relURL }}"></script>
         {{ partial "search-index.html" . }}
 </footer>
diff --git a/layouts/partials/page-actions.html b/layouts/partials/page-actions.html
@@ -0,0 +1,47 @@
+{{- $repo := .Site.Params.github_repo | default "validatedpatterns/docs" -}}
+{{- $branch := .Site.Params.github_branch | default "main" -}}
+{{- $filePath := "" -}}
+{{- $rawUrl := "" -}}
+{{- $sourceLabel := "View source" -}}
+{{- if .File -}}
+  {{- $filePath = .File.Path -}}
+  {{- $rawUrl = printf "https://raw.githubusercontent.com/%s/%s/content/%s" $repo $branch $filePath -}}
+  {{- if strings.HasSuffix $filePath ".md" -}}
+    {{- $sourceLabel = "View as Markdown" -}}
+  {{- end -}}
+{{- end -}}
+
+<div class="page-actions" data-permalink="{{ .Permalink }}">
+  <button type="button" class="page-actions__button" data-action="copy-page" aria-label="Copy page content">
+    <i class="far fa-copy" aria-hidden="true"></i>
+    <span class="page-actions__label"><span class="page-actions__label-full">Copy page</span><span class="page-actions__label-short">Copy</span></span>
+  </button>
+  <button type="button" class="page-actions__toggle" aria-expanded="false" aria-label="More actions">
+    <i class="fas fa-chevron-down" aria-hidden="true"></i>
+  </button>
+  <ul class="page-actions__menu" role="menu">
+    <li role="menuitem">
+      <button type="button" data-action="copy-link">
+        <i class="fas fa-link" aria-hidden="true"></i> Copy link
+      </button>
+    </li>
+    {{- if $rawUrl }}
+    <li role="menuitem">
+      <a href="{{ $rawUrl }}" target="_blank" rel="noopener">
+        <i class="fab fa-markdown" aria-hidden="true"></i> {{ $sourceLabel }}
+      </a>
+    </li>
+    {{- end }}
+    <li class="page-actions__divider" role="separator"></li>
+    <li role="menuitem">
+      <a href="https://claude.ai/new?q={{ printf "Read and summarize this documentation page: %s" .Permalink | urlquery }}" target="_blank" rel="noopener">
+        <i class="fas fa-robot" aria-hidden="true"></i> Open in Claude
+      </a>
+    </li>
+    <li role="menuitem">
+      <a href="https://chatgpt.com/?q={{ printf "Read and summarize this documentation page: %s" .Permalink | urlquery }}" target="_blank" rel="noopener">
+        <i class="fas fa-comment-dots" aria-hidden="true"></i> Open in ChatGPT
+      </a>
+    </li>
+  </ul>
+</div>
diff --git a/layouts/partials/page-toolbar.html b/layouts/partials/page-toolbar.html
@@ -0,0 +1,13 @@
+<div class="page-toolbar">
+  <div class="page-toolbar__toggle">
+    {{ partial "sidebar-toggle.html" . }}
+  </div>
+  <div class="page-toolbar__breadcrumbs">
+    {{ partial "breadcrumbs.html" . }}
+  </div>
+  {{- if not (and .IsSection .Parent.IsHome) }}
+  <div class="page-toolbar__actions">
+    {{ partial "page-actions.html" . }}
+  </div>
+  {{- end }}
+</div>
diff --git a/layouts/partials/patterns-browser.html b/layouts/partials/patterns-browser.html
@@ -10,10 +10,7 @@
 
 <main class="pf-c-page__main">
   <section class="pf-c-page__main-section">
-    <!-- Sidebar toggle for mobile -->
-    <div class="sidebar-toggle-container">
-      {{ partial "sidebar-toggle.html" . }}
-    </div>
+    {{ partial "page-toolbar.html" . }}
     <div class="pf-l-grid__item pf-m-9-col">
       <div class="pf-u-text-align-center">
         <div class="pf-c-content" style="--pf-c-content--FontSize: 1rem;">
diff --git a/layouts/partials/patterns-index.html b/layouts/partials/patterns-index.html
@@ -3,13 +3,12 @@
     {{ partial "menu-patterns.html" . }}
   </div>
 </div>
-<main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
+<main class="pf-c-page__main" tabindex="0">
   <section class="pf-c-page__main-section">
-    <!-- Sidebar toggle for mobile -->
-    <div class="sidebar-toggle-container">
-      {{ partial "sidebar-toggle.html" . }}
-    </div>
+    {{ partial "toc-mobile.html" . }}
+    {{ partial "page-toolbar.html" . }}
     <div class="pf-u-display-flex">
+      {{ partial "toc.html" . }}
       <div class="pf-c-content">
         <div class="pf-c-panel pf-m-raised">
           <div class="pf-c-panel__main">
@@ -109,7 +108,6 @@ <h1 class="pf-c-title pf-m-4xl">{{ .Title }}</h1>
           </div>
         </div>
       </div>
-      {{ partial "toc.html" . }}
     </div>
   </section>
   {{ partial "footer.html" . }}
diff --git a/layouts/partials/toc-mobile.html b/layouts/partials/toc-mobile.html
@@ -0,0 +1,19 @@
+{{- $toc := .TableOfContents -}}
+{{- if and $toc (not (eq $toc "<nav id=\"TableOfContents\"></nav>")) -}}
+
+{{- $tocHTML := $toc | replaceRE " id=\"TableOfContents\"" "" | replaceRE "<ul>" "<ul class=\"otp-list\">" | replaceRE "<li>" "<li class=\"otp-item\">" | replaceRE "<a" "<a class=\"otp-link\"" -}}
+
+<nav class="otp-mobile" aria-label="On this page">
+  <button class="otp-mobile__toggle" type="button" aria-expanded="false">
+    <span class="otp-mobile__label">On this page</span>
+    <span class="otp-mobile__chevron" aria-hidden="true">
+      <i class="fas fa-chevron-right"></i>
+    </span>
+    <span class="otp-mobile__current">Overview</span>
+  </button>
+  <div class="otp-mobile__dropdown">
+    {{- $tocHTML | safeHTML }}
+  </div>
+</nav>
+
+{{- end -}}
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
@@ -1,10 +1,13 @@
-<aside class="pf-c-jump-links pf-m-vertical sticky pf-m-expandable pf-m-non-expandable-on-2xl" aria-label="Table of contents">
-    <div class="pf-l-stack__item">
-      <div class="pf-c-jump-links__header">
-        <div class="pf-c-jump-links__label">
-          <h1>Table of Contents</h1>
-        </div>
-      </div>
-      {{- .TableOfContents | replaceRE "<ul>" "<ul class=\"pf-c-jump-links__list\">" | replaceRE "<li>" "<li class=\"pf-c-jump-links__item\">" | replaceRE "<a" "<a class=\"pf-c-jump-links__link\"" | safeHTML }}
-    </div>
+{{- $toc := .TableOfContents -}}
+{{- if and $toc (not (eq $toc "<nav id=\"TableOfContents\"></nav>")) -}}
+
+{{- $tocHTML := $toc | replaceRE " id=\"TableOfContents\"" "" | replaceRE "<ul>" "<ul class=\"otp-list\">" | replaceRE "<li>" "<li class=\"otp-item\">" | replaceRE "<a" "<a class=\"otp-link\"" -}}
+
+<aside class="otp-desktop" aria-label="On this page">
+  <div class="otp-desktop__header">
+    <h2 class="otp-desktop__title">On this page</h2>
+  </div>
+  {{- $tocHTML | safeHTML }}
 </aside>
+
+{{- end -}}
diff --git a/layouts/patterns/single.html b/layouts/patterns/single.html
@@ -5,13 +5,12 @@
       {{ partial "menu-patterns.html" . }}
     </div>
   </div>
-  <main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
+  <main class="pf-c-page__main" tabindex="0">
     <section class="pf-c-page__main-section pf-m-fill">
-      <!-- Sidebar toggle for mobile -->
-      <div class="sidebar-toggle-container">
-        {{ partial "sidebar-toggle.html" . }}
-      </div>
+      {{ partial "toc-mobile.html" . }}
+      {{ partial "page-toolbar.html" . }}
       <div class="pf-u-display-flex">
+        {{ partial "toc.html" . }}
         <div class="pf-c-content">
           {{ .Content }}
 
@@ -42,7 +41,6 @@
             </div>
           </div>
         </div>
-          {{ partial "toc.html" . }}
       </div>
     </section>
     {{ partial "footer.html" . }}
diff --git a/static/css/custom.css b/static/css/custom.css
diff --git a/static/js/codeblock.js b/static/js/codeblock.js
diff --git a/static/js/page-actions.js b/static/js/page-actions.js
diff --git a/static/js/toc.js b/static/js/toc.js
