mirror of https://github.com/docker/docs.git
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:
parent
62d0daa0e3
commit
bfce18c90b
10
js/docs.js
10
js/docs.js
|
@ -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"
|
||||
});
|
||||
});
|
||||
|
|
Loading…
Reference in New Issue