Merge pull request #19489 from dvdksn/alias-tpl

cli: alias tpl
2026-03-27 14:28:47 +07:00 · 2024-02-23 17:24:52 +01:00
parent 1f61247594 56679aec98
commit e888dfaa71
10 changed files with 188 additions and 71 deletions
--- 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;
  }
--- 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;
+    }
+  }
 }
--- a/assets/js/src/dockerfile-links.js
+++ b/assets/js/src/dockerfile-links.js
@@ -0,0 +1,33 @@
+const keywords = [
+  "ADD",
+  "ARG",
+  "CMD",
+  "COPY",
+  "ENTRYPOINT",
+  "ENV",
+  "EXPOSE",
+  "FROM",
+  "HEALTHCHECK",
+  "LABEL",
+  // "MAINTAINER",
+  "ONBUILD",
+  "RUN",
+  "SHELL",
+  "STOPSIGNAL",
+  "USER",
+  "VOLUME",
+  "WORKDIR",
+]
+const cmds = Array.from(document.querySelectorAll(".language-dockerfile span.k"))
+  .filter((el) => keywords.some(kwd => el.textContent.includes(kwd)));
+
+for (const cmd of cmds) {
+  const name = cmd.textContent;
+  const a = document.createElement("a")
+  a.classList.add("underline","underline-offset-4","decoration-dashed","cursor-pointer")
+  a.title = `Learn more about the ${name} instruction`
+  a.href = `/reference/dockerfile/#${name.toLowerCase()}`
+  a.innerHTML = cmd.outerHTML
+  cmd.insertAdjacentElement("beforebegin", a)
+  cmd.remove()
+}
--- a/assets/js/src/tooltip.js
+++ b/assets/js/src/tooltip.js
@@ -1,33 +1,66 @@
-const keywords = [
-  "ADD",
-  "ARG",
-  "CMD",
-  "COPY",
-  "ENTRYPOINT",
-  "ENV",
-  "EXPOSE",
-  "FROM",
-  "HEALTHCHECK",
-  "LABEL",
-  // "MAINTAINER",
-  "ONBUILD",
-  "RUN",
-  "SHELL",
-  "STOPSIGNAL",
-  "USER",
-  "VOLUME",
-  "WORKDIR",
-]
-const cmds = Array.from(document.querySelectorAll(".language-dockerfile span.k"))
-  .filter((el) => keywords.some(kwd => el.textContent.includes(kwd)));
+import { computePosition, flip, shift, offset, arrow } from "@floating-ui/dom";

-for (const cmd of cmds) {
-  const name = cmd.textContent;
-  const a = document.createElement("a")
-  a.classList.add("underline","underline-offset-4","decoration-dashed","cursor-pointer")
-  a.title = `Learn more about the ${name} instruction`
-  a.href = `/reference/dockerfile/#${name.toLowerCase()}`
-  a.innerHTML = cmd.outerHTML
-  cmd.insertAdjacentElement("beforebegin", a)
-  cmd.remove()
+/* 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);
+  });
 }
--- 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 */}}
  <a
-    class="link external-link"
+    class="link"
    href="{{ $url | safeURL }}"
    target="_blank"
    rel="noopener">
      {{- .Text | safeHTML -}}
-      <span class="icon-svg">
+      <span class="icon-svg icon-xs icon-top">
        {{- partial "icon" "open_in_new" -}}
      </span></a>
 {{- else if (strings.HasPrefix $url "/") -}}
--- a/layouts/_default/cli.html
+++ b/layouts/_default/cli.html
@@ -13,18 +13,39 @@
  {{ .Scratch.Set "subheadings" slice }}
  {{ partial "breadcrumbs.html" . }}
  <article class="DocSearch-content prose max-w-none dark:prose-invert">
-    {{ 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
-    */}}
-    <h1 class="scroll-mt-36">{{ .LinkTitle }}<span
-      class="text-gray-light dark:text-gray-dark"> ({{ .Title }})</span>
-    </h1>
-    {{ else }}
    <h1 class="scroll-mt-36">{{ .Title }}</h1>
-    {{ end }}
-    {{ $data.short | .RenderString (dict "display" "block") }}
+    <table>
+      <tbody>
+        {{ with $data.short }}
+        <tr>
+          <th class="text-left w-32">Description</th>
+          <td>{{ . }}</th>
+        </tr>
+        {{ end }}
+        {{ with $data.usage }}
+        <tr>
+          <th class="text-left w-32">Usage</th>
+          <td><code>{{ . }}</code></td>
+        </tr>
+        {{ end }}
+        {{ with $data.aliases }}
+        {{ $aliases := strings.Replace . (fmt.Printf "%s, " page.Title) "" }}
+        <tr>
+          <th class="text-left w-32 flex items-center gap-2">
+            <span>Aliases</span>
+            {{ partial "tooltip.html" "An alias is a short or memorable alternative for a longer command." }}
+          </th>
+          <td>
+            <div class="flex gap-3">
+            {{ range (strings.Split $aliases ", ") }}
+              <code>{{ . }}</code>
+            {{ end }}
+            </div>
+          </td>
+        </tr>
+        {{ end }}
+      </tbody>
+    </table>
    {{ .Content }}
    {{ if $data.deprecated }}
      <blockquote class="warning">
@@ -60,23 +81,6 @@
        This command works with the Swarm orchestrator.
      </p>
    {{ 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 . ", " }}
-      <p>The following commands are equivalent and redirect here:</p>
-      <ul>
-      {{ range $aliases }}
-        <li><code>{{ . }}</code></li>
-      {{ end }}
-      </ul>
-    {{ end }}
    {{ with $data.long }}
      {{ $heading := dict "level" 2 "text" "Description" }}
      {{ partial "heading.html" $heading }}
--- a/layouts/partials/github-links.html
+++ b/layouts/partials/github-links.html
@@ -3,9 +3,9 @@
 {{ if not (in .Filename "/_vendor/") }}
 <p class="flex items-center gap-2">
  <span class="icon-svg">{{ partial "icon" "edit" }}</span>
-  <a class="link external-link" target="_blank" rel="noopener"
+  <a class="link" target="_blank" rel="noopener"
    href="{{ site.Params.repo }}/edit/main/content/{{ .Path }}">{{ T "editPage" }}
-    <span class="icon-svg">
+    <span class="icon-svg icon-xs icon-top">
      {{- partial "icon" "open_in_new" -}}
    </span></a>
 </p>
@@ -13,9 +13,9 @@
 {{ end }}
 <p class="flex items-center gap-2">
  <span class="icon-svg">{{ partial "icon" "done" }}</span>
-  <a class="link external-link" target="_blank" rel="noopener"
+  <a class="link" target="_blank" rel="noopener"
    href="{{ site.Params.repo }}/issues/new?template=doc_issue.yml&location={{ .Permalink }}&labels=status%2Ftriage">{{ T "requestChanges" }}
-    <span class="icon-svg">
+    <span class="icon-svg icon-xs icon-top">
      {{- partial "icon" "open_in_new" -}}
    </span></a>
  </a>
--- a/layouts/partials/tooltip.html
+++ b/layouts/partials/tooltip.html
@@ -0,0 +1,11 @@
+<div data-tooltip-wrapper>
+  <div data-tooltip-button class="icon-svg icon-sm flex items-center text-blue-light dark:text-blue-dark">
+    {{ partial "icon" "help" }}
+  </div>
+  <div data-tooltip-body
+    class="absolute left-0 top-0 hidden max-w-56 rounded bg-accent-light p-2 text-white dark:bg-accent-dark"
+    role="tooltip">
+    {{ . }}
+    <div data-tooltip-arrow class="absolute h-2 w-2 rotate-45 bg-accent-light dark:bg-accent-dark"></div>
+  </div>
+</div>
--- 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",
--- 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",