Skip to content

Commit f8308e7

Browse files
gaurav-nelsongaurav-nelson
committed
feat: Add breadcrumb navigation, page actions toolbar, and copy page functionality
1 parent 61424d1 commit f8308e7

16 files changed

Lines changed: 492 additions & 38 deletions

File tree

‎layouts/_default/baseof.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
</div>
1111
<script src="{{ "js/codeblock.js" | relURL }}"></script>
1212
<script src="{{ "js/mobile-nav.js" | relURL }}"></script>
13+
<script src="{{ "js/page-actions.js" | relURL }}"></script>
1314
</body>
1415
<!-- Uncomment when you have sorted out the feedback partials option
1516
<body>

‎layouts/blog/list.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,7 @@
1010

1111
<main class="pf-c-page__main" id="maincontent">
1212
<section class="pf-c-page__main-section">
13-
<!-- Sidebar toggle for mobile -->
14-
<div class="sidebar-toggle-container">
15-
{{ partial "sidebar-toggle.html" . }}
16-
</div>
13+
{{ partial "page-toolbar.html" . }}
1714
<div class="pf-l-grid__item pf-m-9-col">
1815
<div class="pf-u-text-align-center">
1916
<div class="pf-c-content" style="--pf-c-content--FontSize: 1rem;">

‎layouts/ci/single.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,10 +10,7 @@
1010
</div>
1111
<main class="pf-c-page__main">
1212
<section class="pf-c-page__main-section">
13-
<!-- Sidebar toggle for mobile -->
14-
<div class="sidebar-toggle-container">
15-
{{ partial "sidebar-toggle.html" . }}
16-
</div>
13+
{{ partial "page-toolbar.html" . }}
1714
<div class="pf-u-display-flex">
1815
<div class="pf-c-content">
1916
<h1>{{- .Title -}}</h1>

‎layouts/contribute/list.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,7 @@
77

88
<main class="pf-c-page__main">
99
<section class="pf-c-page__main-section">
10-
<!-- Sidebar toggle for mobile -->
11-
<div class="sidebar-toggle-container">
12-
{{ partial "sidebar-toggle.html" . }}
13-
</div>
10+
{{ partial "page-toolbar.html" . }}
1411
<div class="pf-l-grid__item pf-m-9-col">
1512
<div class="pf-u-text-align-center">
1613
<div class="pf-c-content" style="--pf-c-content--FontSize: 1rem;">

‎layouts/contribute/single.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,7 @@
77
</div>
88
<main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
99
<section class="pf-c-page__main-section pf-m-fill">
10-
<!-- Sidebar toggle for mobile -->
11-
<div class="sidebar-toggle-container">
12-
{{ partial "sidebar-toggle.html" . }}
13-
</div>
10+
{{ partial "page-toolbar.html" . }}
1411
<div class="pf-u-display-flex">
1512
<div class="pf-c-content">
1613
{{ .Content }}

‎layouts/learn/list.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,7 @@
77

88
<main class="pf-c-page__main">
99
<section class="pf-c-page__main-section">
10-
<!-- Sidebar toggle for mobile -->
11-
<div class="sidebar-toggle-container">
12-
{{ partial "sidebar-toggle.html" . }}
13-
</div>
10+
{{ partial "page-toolbar.html" . }}
1411
<div class="pf-l-grid__item pf-m-9-col">
1512
<div class="pf-u-text-align-center">
1613
<div class="pf-c-content" style="--pf-c-content--FontSize: 1rem;">

‎layouts/learn/single.html‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,10 +7,7 @@
77
</div>
88
<main class="pf-c-page__main" tabindex="0" data-bs-spy="scroll" data-bs-target="#TableOfContents" data-bs-offset="50">
99
<section class="pf-c-page__main-section pf-m-fill">
10-
<!-- Sidebar toggle for mobile -->
11-
<div class="sidebar-toggle-container">
12-
{{ partial "sidebar-toggle.html" . }}
13-
</div>
10+
{{ partial "page-toolbar.html" . }}
1411
<div class="pf-u-display-flex">
1512
<div class="pf-c-content">
1613
{{ .Content }}

‎layouts/partials/breadcrumbs.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
{{- if not .IsHome -}}
2+
{{- $ancestors := .Ancestors.Reverse -}}
3+
{{- $count := len $ancestors -}}
4+
<nav class="pf-c-breadcrumb" aria-label="Breadcrumb">
5+
<ol class="pf-c-breadcrumb__list">
6+
{{- range $i, $a := $ancestors }}
7+
<li class="pf-c-breadcrumb__item{{ if and (gt $count 2) (gt $i 0) }} pf-c-breadcrumb__item--collapsible{{ end }}">
8+
<span class="pf-c-breadcrumb__item-divider" aria-hidden="true">
9+
<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>
10+
</span>
11+
<a href="{{ .RelPermalink }}" class="pf-c-breadcrumb__link">
12+
{{- if .IsHome }}Home{{ else }}{{ .Title }}{{ end -}}
13+
</a>
14+
</li>
15+
{{- if and (gt $count 2) (eq $i 0) }}
16+
<li class="pf-c-breadcrumb__item pf-c-breadcrumb__item--ellipsis">
17+
<span class="pf-c-breadcrumb__item-divider" aria-hidden="true">
18+
<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>
19+
</span>
20+
<button type="button" class="pf-c-breadcrumb__link pf-c-breadcrumb__expand-btn" aria-label="Show full breadcrumb path">&hellip;</button>
21+
</li>
22+
{{- end }}
23+
{{- end }}
24+
<li class="pf-c-breadcrumb__item">
25+
<span class="pf-c-breadcrumb__item-divider" aria-hidden="true">
26+
<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>
27+
</span>
28+
<span class="pf-c-breadcrumb__link pf-m-current" aria-current="page">
29+
{{- .Title -}}
30+
</span>
31+
</li>
32+
</ol>
33+
</nav>
34+
{{- end -}}

‎layouts/partials/page-actions.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{{- $repo := .Site.Params.github_repo | default "validatedpatterns/docs" -}}
2+
{{- $branch := .Site.Params.github_branch | default "main" -}}
3+
{{- $filePath := "" -}}
4+
{{- $rawUrl := "" -}}
5+
{{- $sourceLabel := "View source" -}}
6+
{{- if .File -}}
7+
{{- $filePath = .File.Path -}}
8+
{{- $rawUrl = printf "https://raw.githubusercontent.com/%s/%s/content/%s" $repo $branch $filePath -}}
9+
{{- if strings.HasSuffix $filePath ".md" -}}
10+
{{- $sourceLabel = "View as Markdown" -}}
11+
{{- end -}}
12+
{{- end -}}
13+
14+
<div class="page-actions" data-permalink="{{ .Permalink }}">
15+
<button type="button" class="page-actions__button" data-action="copy-page" aria-label="Copy page content">
16+
<i class="far fa-copy" aria-hidden="true"></i>
17+
<span class="page-actions__label"><span class="page-actions__label-full">Copy page</span><span class="page-actions__label-short">Copy</span></span>
18+
</button>
19+
<button type="button" class="page-actions__toggle" aria-expanded="false" aria-label="More actions">
20+
<i class="fas fa-chevron-down" aria-hidden="true"></i>
21+
</button>
22+
<ul class="page-actions__menu" role="menu">
23+
<li role="menuitem">
24+
<button type="button" data-action="copy-link">
25+
<i class="fas fa-link" aria-hidden="true"></i> Copy link
26+
</button>
27+
</li>
28+
{{- if $rawUrl }}
29+
<li role="menuitem">
30+
<a href="{{ $rawUrl }}" target="_blank" rel="noopener">
31+
<i class="fab fa-markdown" aria-hidden="true"></i> {{ $sourceLabel }}
32+
</a>
33+
</li>
34+
{{- end }}
35+
<li class="page-actions__divider" role="separator"></li>
36+
<li role="menuitem">
37+
<a href="https://claude.ai/new?q={{ printf "Read and summarize this documentation page: %s" .Permalink | urlquery }}" target="_blank" rel="noopener">
38+
<i class="fas fa-robot" aria-hidden="true"></i> Open in Claude
39+
</a>
40+
</li>
41+
<li role="menuitem">
42+
<a href="https://chatgpt.com/?q={{ printf "Read and summarize this documentation page: %s" .Permalink | urlquery }}" target="_blank" rel="noopener">
43+
<i class="fas fa-comment-dots" aria-hidden="true"></i> Open in ChatGPT
44+
</a>
45+
</li>
46+
</ul>
47+
</div>

‎layouts/partials/page-toolbar.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<div class="page-toolbar">
2+
<div class="page-toolbar__toggle">
3+
{{ partial "sidebar-toggle.html" . }}
4+
</div>
5+
<div class="page-toolbar__breadcrumbs">
6+
{{ partial "breadcrumbs.html" . }}
7+
</div>
8+
{{- if not (and .IsSection .Parent.IsHome) }}
9+
<div class="page-toolbar__actions">
10+
{{ partial "page-actions.html" . }}
11+
</div>
12+
{{- end }}
13+
</div>

0 commit comments

Comments
 (0)