From adcb1edfa7b70db26f42d6977a52101ddf948e6b Mon Sep 17 00:00:00 2001 From: David Karlsson <35727626+dvdksn@users.noreply.github.com> Date: Fri, 23 Feb 2024 15:01:55 +0100 Subject: [PATCH 1/3] chore: style and script refactor Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> --- assets/css/global.css | 6 ------ assets/css/icons.css | 18 ++++++++++++++++++ .../js/src/{tooltip.js => dockerfile-links.js} | 0 layouts/_default/_markup/render-link.html | 4 ++-- layouts/partials/github-links.html | 8 ++++---- 5 files changed, 24 insertions(+), 12 deletions(-) rename assets/js/src/{tooltip.js => dockerfile-links.js} (100%) diff --git a/assets/css/global.css b/assets/css/global.css index 18b44137cca4..0b8471c001e2 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -18,12 +18,6 @@ @apply text-blue-light underline underline-offset-2 dark:text-blue-dark; } - .external-link { - .icon-svg svg { - @apply text-base ml-1 align-top; - } - } - .invertible { @apply dark:hue-rotate-180 dark:invert dark:filter; } diff --git a/assets/css/icons.css b/assets/css/icons.css index d68025ee3272..4a6121f46072 100644 --- a/assets/css/icons.css +++ b/assets/css/icons.css @@ -8,4 +8,22 @@ fill: currentColor; } } + + .icon-xs { + svg { + @apply text-base; + } + } + + .icon-sm { + svg { + @apply text-lg; + } + } + + .icon-top { + svg { + @apply ml-1 align-top; + } + } } diff --git a/assets/js/src/tooltip.js b/assets/js/src/dockerfile-links.js similarity index 100% rename from assets/js/src/tooltip.js rename to assets/js/src/dockerfile-links.js diff --git a/layouts/_default/_markup/render-link.html b/layouts/_default/_markup/render-link.html index 9497c6f2d388..d0fb36db1470 100644 --- a/layouts/_default/_markup/render-link.html +++ b/layouts/_default/_markup/render-link.html @@ -2,12 +2,12 @@ {{- if (strings.HasPrefix $url "http") -}} {{/* external link, add icon */}} {{- .Text | safeHTML -}} - + {{- partial "icon" "open_in_new" -}} {{- else if (strings.HasPrefix $url "/") -}} diff --git a/layouts/partials/github-links.html b/layouts/partials/github-links.html index d2e8a7e5d062..7755e4952b77 100644 --- a/layouts/partials/github-links.html +++ b/layouts/partials/github-links.html @@ -3,9 +3,9 @@ {{ if not (in .Filename "/_vendor/") }}

{{ partial "icon" "edit" }} - {{ T "editPage" }} - + {{- partial "icon" "open_in_new" -}}

@@ -13,9 +13,9 @@ {{ end }}

{{ partial "icon" "done" }} - {{ T "requestChanges" }} - + {{- partial "icon" "open_in_new" -}} From 36d3f62159f9ef5df65434921051b91e8bc54195 Mon Sep 17 00:00:00 2001 From: David Karlsson <35727626+dvdksn@users.noreply.github.com> Date: Fri, 23 Feb 2024 15:02:28 +0100 Subject: [PATCH 2/3] feat: add tooltip partial Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> --- assets/js/src/tooltip.js | 66 +++++++++++++++++++++++++++++++++++ layouts/partials/tooltip.html | 11 ++++++ package-lock.json | 23 ++++++++++++ package.json | 1 + 4 files changed, 101 insertions(+) create mode 100644 assets/js/src/tooltip.js create mode 100644 layouts/partials/tooltip.html diff --git a/assets/js/src/tooltip.js b/assets/js/src/tooltip.js new file mode 100644 index 000000000000..79db56cf43b4 --- /dev/null +++ b/assets/js/src/tooltip.js @@ -0,0 +1,66 @@ +import { computePosition, flip, shift, offset, arrow } from "@floating-ui/dom"; + +/* Regular tooltips (partial) */ + +const tooltipWrappers = Array.from( + document.querySelectorAll("[data-tooltip-wrapper]"), +); + +for (const tooltipWrapper of tooltipWrappers) { + const button = tooltipWrapper.firstElementChild; + const tooltip = button.nextElementSibling; + const arrowElement = tooltip.firstElementChild; + + function update() { + computePosition(button, tooltip, { + placement: "top", + middleware: [ + offset(6), + flip(), + shift({ padding: 5 }), + arrow({ element: arrowElement }), + ], + }).then(({ x, y, placement, middlewareData }) => { + Object.assign(tooltip.style, { + left: `${x}px`, + top: `${y}px`, + }); + + // Accessing the data + const { x: arrowX, y: arrowY } = middlewareData.arrow; + + const staticSide = { + top: "bottom", + right: "left", + bottom: "top", + left: "right", + }[placement.split("-")[0]]; + + Object.assign(arrowElement.style, { + left: arrowX != null ? `${arrowX}px` : "", + top: arrowY != null ? `${arrowY}px` : "", + right: "", + bottom: "", + [staticSide]: "-4px", + }); + }); + } + + function showTooltip() { + tooltip.classList.toggle("hidden"); + update(); + } + + function hideTooltip() { + tooltip.classList.toggle("hidden"); + } + + [ + ["mouseenter", showTooltip], + ["mouseleave", hideTooltip], + ["focus", showTooltip], + ["blur", hideTooltip], + ].forEach(([event, listener]) => { + button.addEventListener(event, listener); + }); +} diff --git a/layouts/partials/tooltip.html b/layouts/partials/tooltip.html new file mode 100644 index 000000000000..06fa905ffbb3 --- /dev/null +++ b/layouts/partials/tooltip.html @@ -0,0 +1,11 @@ +

+
+ {{ partial "icon" "help" }} +
+ +
diff --git a/package-lock.json b/package-lock.json index 3ab08522d2d9..9e33f2957fb4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "dependencies": { "@alpinejs/collapse": "^3.13.5", "@docsearch/js": "^3.5.2", + "@floating-ui/dom": "^1.6.3", "@material-symbols/svg-400": "^0.14.6", "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e", "@tailwindcss/typography": "^0.5.10", @@ -244,6 +245,28 @@ } } }, + "node_modules/@floating-ui/core": { + "version": "1.6.0", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz", + "integrity": "sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==", + "dependencies": { + "@floating-ui/utils": "^0.2.1" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.3", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz", + "integrity": "sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==", + "dependencies": { + "@floating-ui/core": "^1.0.0", + "@floating-ui/utils": "^0.2.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz", + "integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==" + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "resolved": "https://registry.npmjs.org/@isaacs/cliui/-/cliui-8.0.2.tgz", diff --git a/package.json b/package.json index 58a67a04768e..51341f773ed6 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "dependencies": { "@alpinejs/collapse": "^3.13.5", "@docsearch/js": "^3.5.2", + "@floating-ui/dom": "^1.6.3", "@material-symbols/svg-400": "^0.14.6", "@tailwindcss/nesting": "^0.0.0-insiders.565cd3e", "@tailwindcss/typography": "^0.5.10", From 56679aec9870a57dc306a781e3e445be70aba1a6 Mon Sep 17 00:00:00 2001 From: David Karlsson <35727626+dvdksn@users.noreply.github.com> Date: Fri, 23 Feb 2024 10:52:07 +0100 Subject: [PATCH 3/3] cli: alternative alias rendering Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com> --- layouts/_default/cli.html | 60 +++++++++++++++++++++------------------ 1 file changed, 32 insertions(+), 28 deletions(-) diff --git a/layouts/_default/cli.html b/layouts/_default/cli.html index 6d12c2c6d40e..fc0b9809e89e 100644 --- a/layouts/_default/cli.html +++ b/layouts/_default/cli.html @@ -13,18 +13,39 @@ {{ .Scratch.Set "subheadings" slice }} {{ partial "breadcrumbs.html" . }}
- {{ if ne .LinkTitle .Title }} - {{/* - we use linkTitle for surfacing popular aliases like "docker run" - if linkTitle is set, use both alias and canonical cmd as title - */}} -

{{ .LinkTitle }} ({{ .Title }}) -

- {{ else }}

{{ .Title }}

- {{ end }} - {{ $data.short | .RenderString (dict "display" "block") }} + + + {{ with $data.short }} + + + + {{ end }} + {{ with $data.usage }} + + + + + {{ end }} + {{ with $data.aliases }} + {{ $aliases := strings.Replace . (fmt.Printf "%s, " page.Title) "" }} + + + + + {{ end }} + +
Description{{ . }} +
Usage{{ . }}
+ Aliases + {{ partial "tooltip.html" "An alias is a short or memorable alternative for a longer command." }} + +
+ {{ range (strings.Split $aliases ", ") }} + {{ . }} + {{ end }} +
+
{{ .Content }} {{ if $data.deprecated }}
@@ -60,23 +81,6 @@

{{ .Title }}

This command works with the Swarm orchestrator.

{{ end }} - {{ with $data.usage }} - {{ $heading := dict "level" 2 "text" "Usage" }} - {{ partial "heading.html" $heading }} - {{ $.Scratch.Add "headings" $heading }} - {{ highlight (strings.Replace . "\t" "") "console" }} - {{ end }} - {{ with $data.aliases }} - {{ $heading := dict "level" 2 "text" "Aliases" }} - {{ partial "heading.html" $heading }} - {{ $aliases := strings.Split . ", " }} -

The following commands are equivalent and redirect here:

- - {{ end }} {{ with $data.long }} {{ $heading := dict "level" 2 "text" "Description" }} {{ partial "heading.html" $heading }}