Skip to content

Commit 3f6b396

Browse files
dvdksnclaude
dvdksn
and
claude
committed
Replace page actions dropdown with inline row
Render the page actions (Ask Gordon, Copy Markdown, View Markdown) as a horizontal row of icon links below the page title, separated from the body by a divider — emulating the Stripe docs pattern. Drops the bordered button + dropdown UI from md-dropdown.html and the Open in Claude entry. Also clean up dead kapa.ai references: the "Ask Gordon" action now talks to the Alpine gordon store directly instead of clicking the header button via an open-kapa-widget class hook. The class, the unused glossary link hook, and the dead params.kapa config block all go away. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
1 parent 594bfbb commit 3f6b396

6 files changed

Lines changed: 66 additions & 121 deletions

File tree

‎content/reference/glossary.md‎

Lines changed: 3 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,19 +5,11 @@ keywords: glossary, docker, terms, definitions
55
notoc: true
66
layout: glossary
77
aliases:
8-
- /engine/reference/glossary/
9-
- /glossary/
8+
- /engine/reference/glossary/
9+
- /glossary/
1010
---
1111

12-
> [!TIP]
13-
>
14-
> Looking for a definition that's not listed or need a more context-aware
15-
> explanation?
16-
>
17-
> Try <a role="button" tabindex="0" class="open-kapa-widget">Gordon</a>.
18-
19-
2012
<!--
2113
To edit/add/remove glossary entries, visit the YAML file at:
2214
https://github.com/docker/docs/blob/main/data/glossary.yaml
23-
-->
15+
-->

‎hugo.yaml‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -135,8 +135,6 @@ languages:
135135
# Can be accessed in content with {{% param "param_name" %}}
136136
# Or in layouts/partials with site.Params.param_name
137137
params:
138-
kapa:
139-
id: ba5c2cbc-6535-4334-a72e-050f7a681c8a
140138
analytics:
141139
hotjar:
142140
prod: 3169877

‎layouts/_partials/content-default.html‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
{{ partial "breadcrumbs.html" . }}
2-
<div class="flex items-start justify-between">
3-
<h1 data-pagefind-weight="10">{{ .Title | safeHTML }}</h1>
4-
<div class="md-dropdown ml-auto hidden lg:block">
5-
{{ partialCached "md-dropdown.html" "-" "-" }}
6-
</div>
2+
<h1 data-pagefind-weight="10">{{ .Title | safeHTML }}</h1>
3+
<div class="hidden lg:block">
4+
{{ partialCached "md-dropdown.html" "-" "-" }}
75
</div>
86
<div class="block lg:hidden">
97
{{ partialCached "pagemeta.html" . . }}

‎layouts/_partials/header.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
@click="$store.gordon.toggle()"
5353
aria-label="Ask Gordon, AI assistant"
5454
aria-describedby="gordon-tooltip"
55-
class="group shimmer open-kapa-widget flex cursor-pointer items-center gap-2 rounded-lg border border-blue-500 bg-blue-700 p-2 text-white transition-colors focus:ring focus:ring-blue-400 focus:outline-none"
55+
class="group shimmer flex cursor-pointer items-center gap-2 rounded-lg border border-blue-500 bg-blue-700 p-2 text-white transition-colors focus:ring focus:ring-blue-400 focus:outline-none"
5656
>
5757
<span class="icon-svg group-hover:hidden">
5858
{{ partialCached "icon" "icons/gordon.svg" "icons/gordon.svg" }}

‎layouts/_partials/md-dropdown.html‎

Lines changed: 56 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,85 @@
1-
<div class="ml-3 relative inline-block" x-data="{ open: false }" @click.outside="open = false">
2-
<div class="flex shadow rounded-sm overflow-hidden border border-gray-200 dark:border-gray-700">
3-
<!-- Primary copy button -->
1+
<div class="not-prose mt-4">
2+
<div class="flex flex-wrap items-center gap-x-6 gap-y-2 text-sm">
3+
<button
4+
onclick="askGordon()"
5+
data-heap-id="ask-gordon-button"
6+
class="inline-flex cursor-pointer items-center gap-1.5 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
7+
>
8+
<span class="icon-svg icon-sm -translate-y-px">
9+
{{ partialCached "icon" "icons/gordon.svg" "icons/gordon.svg" }}
10+
</span>
11+
<span>Ask Gordon</span>
12+
</button>
13+
414
<button
515
onclick="copyMarkdown()"
616
data-heap-id="copy-markdown-button"
7-
class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 flex cursor-pointer items-center gap-2 px-3 py-2 text-sm transition-colors whitespace-nowrap text-gray-900 dark:text-white"
17+
class="inline-flex cursor-pointer items-center gap-1.5 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
818
>
9-
<span class="icon-svg icon-sm">
19+
<span class="icon-svg icon-sm -translate-y-px">
1020
{{ partialCached "icon" "content_copy" "content_copy" }}
1121
</span>
12-
<span class="icon-svg icon-sm hidden">
22+
<span class="icon-svg icon-sm hidden -translate-y-px">
1323
{{ partialCached "icon" "check_circle" "check_circle" }}
1424
</span>
15-
<span>Copy as Markdown</span>
16-
</button>
17-
18-
<!-- Dropdown toggle -->
19-
<button
20-
@click="open = !open"
21-
type="button"
22-
data-heap-id="markdown-dropdown-toggle"
23-
class="bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700 flex items-center justify-center px-2 border-l border-gray-200 dark:border-gray-700 transition-colors text-gray-900 dark:text-white"
24-
aria-label="More options"
25-
>
26-
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
27-
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
28-
</svg>
25+
<span>Copy Markdown</span>
2926
</button>
30-
</div>
3127

32-
<!-- Dropdown menu -->
33-
<div
34-
x-show="open"
35-
x-collapse
36-
x-cloak
37-
class="absolute right-0 top-full mt-1 min-w-full bg-white dark:bg-gray-800 rounded-sm shadow-lg overflow-hidden z-50 border border-gray-200 dark:border-gray-700"
38-
data-heap-id="markdown-dropdown-menu"
39-
>
4028
<button
4129
onclick="viewPlainText()"
4230
data-heap-id="view-markdown-button"
43-
class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap"
31+
class="inline-flex cursor-pointer items-center gap-1.5 text-gray-600 transition-colors hover:text-gray-900 dark:text-gray-400 dark:hover:text-gray-100"
4432
>
45-
<span class="icon-svg icon-sm">
33+
<span class="icon-svg icon-sm -translate-y-px">
4634
{{ partialCached "icon" "open_in_new" "open_in_new" }}
4735
</span>
48-
<span>Open Markdown</span>
49-
</button>
50-
51-
<button
52-
onclick="openInDocsAI()"
53-
data-heap-id="search-docs-ai-button"
54-
class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap"
55-
>
56-
<span class="icon-svg icon-sm">
57-
{{ partialCached "icon" "search" "search" }}
58-
</span>
59-
<span>Ask Docs AI</span>
60-
</button>
61-
<button
62-
onclick="openInClaude()"
63-
data-heap-id="open-claude-button"
64-
class="flex w-full items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 whitespace-nowrap"
65-
>
66-
<span class="icon-svg icon-sm">
67-
{{ partialCached "icon" "/icons/claude.svg" "claude" }}
68-
</span>
69-
<span>Open in Claude</span>
36+
<span>View Markdown</span>
7037
</button>
7138
</div>
39+
<hr class="mt-4 mb-6 border-t border-gray-200 dark:border-gray-700" />
7240
</div>
7341

7442
<script>
75-
function getCurrentPlaintextUrl() {
76-
const url = window.location.href.split("#")[0].replace(/\/$/, "");
77-
return `${url}.md`;
78-
}
43+
function getCurrentPlaintextUrl() {
44+
const url = window.location.href.split("#")[0].replace(/\/$/, "");
45+
return `${url}.md`;
46+
}
7947

80-
function copyMarkdown() {
81-
fetch(getCurrentPlaintextUrl())
82-
.then((response) => response.text())
83-
.then((text) => {
84-
navigator.clipboard.writeText(text).then(() => {
85-
const button = document.querySelector('[data-heap-id="copy-markdown-button"]');
86-
if (!button) return;
48+
function copyMarkdown() {
49+
fetch(getCurrentPlaintextUrl())
50+
.then((response) => response.text())
51+
.then((text) => {
52+
navigator.clipboard.writeText(text).then(() => {
53+
const button = document.querySelector(
54+
'[data-heap-id="copy-markdown-button"]',
55+
);
56+
if (!button) return;
8757

88-
const icons = button.querySelectorAll(".icon-svg");
89-
const copyIcon = icons[0];
90-
const checkIcon = icons[1];
58+
const icons = button.querySelectorAll(".icon-svg");
59+
const copyIcon = icons[0];
60+
const checkIcon = icons[1];
9161

92-
copyIcon.classList.add("hidden");
93-
checkIcon.classList.remove("hidden");
62+
copyIcon.classList.add("hidden");
63+
checkIcon.classList.remove("hidden");
9464

95-
setTimeout(() => {
96-
copyIcon.classList.remove("hidden");
97-
checkIcon.classList.add("hidden");
98-
}, 2000);
99-
});
100-
})
101-
.catch((err) => {
102-
console.error("Error copying markdown:", err);
65+
setTimeout(() => {
66+
copyIcon.classList.remove("hidden");
67+
checkIcon.classList.add("hidden");
68+
}, 2000);
10369
});
104-
}
70+
})
71+
.catch((err) => {
72+
console.error("Error copying markdown:", err);
73+
});
74+
}
10575

106-
function viewPlainText() {
107-
window.open(getCurrentPlaintextUrl(), "_blank");
108-
}
109-
110-
function openInDocsAI() {
111-
const kapaButton = document.querySelector(".open-kapa-widget");
112-
if (kapaButton) {
113-
kapaButton.click();
114-
} else {
115-
alert("Couldn't find Docs AI.");
116-
}
117-
}
76+
function viewPlainText() {
77+
window.open(getCurrentPlaintextUrl(), "_blank");
78+
}
11879

119-
function openInClaude() {
120-
const markdownUrl = getCurrentPlaintextUrl();
121-
const prompt = `Read ${markdownUrl} so I can ask questions about it.`;
122-
const encodedText = encodeURIComponent(prompt);
123-
const claudeUrl = `https://claude.ai/new?q=${encodedText}`;
124-
window.open(claudeUrl, '_blank');
80+
function askGordon() {
81+
if (window.Alpine && window.Alpine.store("gordon")) {
82+
window.Alpine.store("gordon").toggle();
12583
}
126-
</script>
84+
}
85+
</script>

‎layouts/cli.html‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,9 @@
55
{{ .Store.Set "subheadings" slice }}
66
<article class="prose min-w-0 max-w-4xl dark:prose-invert">
77
{{ partial "breadcrumbs.html" . }}
8-
<div class="flex items-start justify-between gap-4">
9-
<h1>{{ .Title }}</h1>
10-
<div class="md-dropdown ml-auto mr-4 hidden lg:block">
11-
{{ partialCached "md-dropdown.html" "-" "-" }}
12-
</div>
8+
<h1>{{ .Title }}</h1>
9+
<div class="hidden lg:block">
10+
{{ partialCached "md-dropdown.html" "-" "-" }}
1311
</div>
1412
<div class="overflow-x-auto">
1513
<table>

0 commit comments

Comments
 (0)