Add tooltips and links to reference docs to Dockerfile codeblocks

This is an initial "experiment" on making codeblocks more useful; it's
just a quick implementation, and can use a lot of improvements, but we
can see if it's useful in its current form already (as a starting point).

More context below:

With example blocks being parsed/highlighted by rouge, we should be able
to pick keywords from them; for example, in the highlighted Dockerfile
examples, we can show tool-tips (even a hover-card) with more details
about the command.

Shell examples may be a bit more involved, but we could still detect;

- adjacent keywords (`docker` + `run` => `docker run`)
- with the yaml-docs we have (we could generate JSON and upload them
  as a "database"),   we could even do an AJAX call to dynamically
  fetch  flag  descriptions, etc.

This very quick and dirty test adds tooltips to Dockerfile commands
in examples. When hovering, it shoulds a tooltip ("click for  more
information about this command"), and when clicking, navigates to the
Dockerfile reference.

Ideally, we wouldn't navigate away from the current page for initial
details (instead, we should present a rich hoverbox / pane), to provide
the user with more details without interrupting the article they were
reading.

Signed-off-by: Sebastiaan van Stijn <github@gone.nl>
This commit is contained in:
Sebastiaan van Stijn 2021-08-17 21:33:58 +02:00
parent 62d0daa0e3
commit bfce18c90b
No known key found for this signature in database
GPG Key ID: 76698F39D527CE8C
1 changed files with 10 additions and 0 deletions

View File

@ -215,4 +215,14 @@ ready(() => {
const group = $(this).attr("data-group");
$(`.nav-tabs > li > a[data-group='${ group }']`).tab("show");
});
$('.language-dockerfile span.k').tooltip({
title: function() {
let c = this.textContent;
this.style.cursor = 'help';
$(this).on('click', () => { window.location.href = "/engine/reference/builder/#"+c.toLowerCase()});
return 'Learn more about the "'+ c + '" Dockerfile command.'
},
placement: "auto"
});
});