From bfce18c90bd84dd65d54c178a9fb5e0ed4209690 Mon Sep 17 00:00:00 2001 From: Sebastiaan van Stijn Date: Tue, 17 Aug 2021 21:33:58 +0200 Subject: [PATCH] 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 --- js/docs.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/js/docs.js b/js/docs.js index 9e4baeafc2..fd7b7f0d00 100644 --- a/js/docs.js +++ b/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" + }); });