cli: alias tpl

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;
   }

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;
+    }
+  }
 }

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()
+}

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)));
-
-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()
+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);
+  });
 }

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 "/") -}}

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 @@ <h1 class="scroll-mt-36">{{ .Title }}</h1>
         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 }}

layouts/partials/github-links.html

@@ -3,19 +3,19 @@
 {{ 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>
 {{ end }}
 {{ 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>

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>

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",