Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add anchors to yaml paths #8541

Merged
merged 3 commits into from
Aug 4, 2023
Merged

docs: add anchors to yaml paths #8541

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a02f42e
docs: add anchors to yaml paths
renzodavid9 Mar 10, 2023
9a5311a
feat: add note about tooltip anchors and arrow to indicate that there…
renzodavid9 May 5, 2023
eda8193
docs: move tooltip tip to same box as cloud code tip
renzodavid9 Aug 3, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs-v2/content/en/docs/references/yaml/_index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@
---

{{< alert title="💡 Tip" >}}
The Cloud Code IDE extensions (see [install options]({{< relref "../../install/#managed-ide" >}})) provide authoring assistance for `skaffold.yaml` files in the form of schema based validation, diagnostics, quick documentation, code completions, and snippets, that can make it easier to create and edit these files.
The Cloud Code IDE extensions (see [install options]({{< relref "../../install/#managed-ide" >}})) provide authoring assistance for `skaffold.yaml` files in the form of schema based validation, diagnostics, quick documentation, code completions, and snippets, that can make it easier to create and edit these files.

You can now navigate the `skaffold.yaml` reference from an inner element to its upper levels using the tooltip that appears on hover, clicking on the parent element you want to go: <div class="tooltip-img-continaer">![Tooltip with links to upper elements](/images/tooltip-click-note.png)</div>
{{< /alert >}}

<link href="https://fonts.googleapis.com/css?family=Roboto+Mono:400,700" rel="stylesheet">
Expand Down
49 changes: 38 additions & 11 deletions docs-v2/content/en/docs/references/yaml/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,24 +89,17 @@ a.anchor{
}
}

.stooltip {
.stooltip__content {
background-color: #555;
border-radius: 5px;
color: #fff;
color: #FFF;
display: inline-block;
font-size: 9px;
font-weight: 100;
left: 0;
opacity: 0;
padding: 5px 6px;
position: absolute;
top: -15px;
transform: translateY(-50%);
transition: opacity 0.3s;
visibility: hidden;
}

.stooltip::before {
.stooltip__content::before {
background-color: #555;
border-radius: 1px;
bottom: -3px;
Expand All @@ -117,9 +110,43 @@ a.anchor{
position: absolute;
transform: rotate(45deg);
width: 10px;
z-index: -1;
}

.stooltip__anchor:hover ~ .stooltip {
.stooltip {
border-bottom: 10px solid transparent;
display: inline-block;
left: 0;
opacity: 0;
position: absolute;
top: -10px;
transform: translateY(-50%);
transition: opacity 0.3s;
visibility: hidden;
}

.stooltip__icon {
margin: 0 0 0 6px;
}

.key:hover > .stooltip {
opacity: 1;
visibility: visible;
}

.yaml-link {
color: #FFF;
}

.yaml-link:hover{
color: #72A1E5;
}

.yaml-link__separator {
cursor: default;
}

.tooltip-img-continaer {
margin: 10px 0 0;
max-width: 220px;
}
65 changes: 47 additions & 18 deletions docs-v2/content/en/docs/references/yaml/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,18 @@ import { unsafeHTML } from 'https://unpkg.com/lit-html@1.1.2/directives/unsafe-h

var version;
let latest;

class YamlLink {
constructor(url, label) {
this.url = `#${url}`;
this.label = label
}

render() {
return html`<a class="yaml-link" href="${this.url}">${this.label}</a>`;
}
}

(async function() {
const versionParam = "?version=";
const index = window.location.href.indexOf(versionParam);
Expand Down Expand Up @@ -31,15 +43,15 @@ let latest;
const json = await response.json();

render(html`
${template(json.definitions, undefined, json.anyOf[0].$ref, 0, "", "")}
${template(json.definitions, undefined, json.anyOf[0].$ref, 0, "", [])}
`, table);

if (location.hash) {
table.querySelector(location.hash).scrollIntoView();
}
})();

function* template(definitions, parentDefinition, ref, ident, parent, parentYamlPath) {
function* template(definitions, parentDefinition, ref, ident, parent, parentLinks) {
const name = ref.replace('#/definitions/', '');
const allProperties = [];
const seen = {};
Expand All @@ -63,9 +75,10 @@ function* template(definitions, parentDefinition, ref, ident, parent, parentYaml
let index = -1;
for (let [key, definition] of allProperties) {
const path = parent.length == 0 ? key : `${parent}-${key}`;
const yamlPath = (definition.items && definition.items.$ref) ?
`${parentYamlPath}${key}[]`:
`${parentYamlPath}${key}`;
const propetyLabel = (definition.items && definition.items.$ref) ? `${key}[]`: `${key}`;
const yamlLink = new YamlLink(path, propetyLabel);
const pathLinks = [...parentLinks, yamlLink]
const renderedPath = getPathLinkList(pathLinks);
index++;

// Key
Expand Down Expand Up @@ -93,7 +106,7 @@ function* template(definitions, parentDefinition, ref, ident, parent, parentYaml
yield html`
<tr>
<td>
<span class="${keyClass}" style="margin-left: ${ident * 20}px">${anchor(path, key)}:${tooltip(yamlPath)}</span>
<span class="${keyClass}" style="margin-left: ${ident * 20}px">${anchor(path, key)}:${tooltip(renderedPath)}</span>
<span class="${valueClass}">${value}</span>
</td>
<td><span class="comment">#&nbsp;</span></td>
Expand All @@ -116,7 +129,7 @@ function* template(definitions, parentDefinition, ref, ident, parent, parentYaml
yield html`
<tr class="top">
<td>
<span class="${keyClass}" style="margin-left: ${ident * 20}px">${anchor(path, key)}:${tooltip(yamlPath)}</span>
<span class="${keyClass}" style="margin-left: ${ident * 20}px">${anchor(path, key)}:${tooltip(renderedPath)}</span>
<span class="${valueClass}">${value}</span>
</td>
<td class="comment">#&nbsp;</td>
Expand All @@ -131,7 +144,7 @@ function* template(definitions, parentDefinition, ref, ident, parent, parentYaml
yield html`
<tr class="top">
<td>
<span class="${keyClass}" style="margin-left: ${ident * 20}px">${anchor(path, key)}:${tooltip(yamlPath)}</span>
<span class="${keyClass}" style="margin-left: ${ident * 20}px">${anchor(path, key)}:${tooltip(renderedPath)}</span>
<span class="${valueClass}">${value}</span>
</td>
<td class="comment">#&nbsp;</td>
Expand All @@ -143,7 +156,7 @@ function* template(definitions, parentDefinition, ref, ident, parent, parentYaml
<tr>
<td>

<span class="${keyClass}" style="margin-left: ${(ident - 1) * 20}px">- ${anchor(path, key)}:${tooltip(yamlPath)}</span>
<span class="${keyClass}" style="margin-left: ${(ident - 1) * 20}px">- ${anchor(path, key)}:${tooltip(renderedPath)}</span>
<span class="${valueClass}">${value}</span>
</td>
<td class="comment">#&nbsp;</td>
Expand All @@ -158,7 +171,7 @@ function* template(definitions, parentDefinition, ref, ident, parent, parentYaml
<tr>
<td>

<span class="${keyClass}" style="margin-left: ${ident * 20}px">${anchor(path, key)}:${tooltip(yamlPath)}</span>
<span class="${keyClass}" style="margin-left: ${ident * 20}px">${anchor(path, key)}:${tooltip(renderedPath)}</span>
</td>
<td class="comment">#&nbsp;</td>
<td class="comment" rowspan="${1 + values.length}">
Expand All @@ -184,7 +197,7 @@ function* template(definitions, parentDefinition, ref, ident, parent, parentYaml
yield html`
<tr>
<td>
<span class="${keyClass}" style="margin-left: ${ident * 20}px">${anchor(path, key)}:${tooltip(yamlPath)}</span>
<span class="${keyClass}" style="margin-left: ${ident * 20}px">${anchor(path, key)}:${tooltip(renderedPath)}</span>
</td>
<td class="comment">#&nbsp;</td>
<td class="comment" rowspan="${1 + Object.keys(values).length}">
Expand All @@ -201,7 +214,7 @@ function* template(definitions, parentDefinition, ref, ident, parent, parentYaml
<tr>
<td>

<span class="key" style="margin-left: ${(ident + 1) * 20}px">${k}:${tooltip(yamlPath)}<span class="${valueClass}">${v}</span>
<span class="key" style="margin-left: ${(ident + 1) * 20}px">${k}:${tooltip(renderedPath)}<span class="${valueClass}">${v}</span>
</span>
</td>
<td class="comment">#&nbsp;</td>
Expand All @@ -212,7 +225,7 @@ function* template(definitions, parentDefinition, ref, ident, parent, parentYaml
yield html`
<tr>
<td>
<span class="${keyClass}" style="margin-left: ${ident * 20}px">${anchor(path, key)}:${tooltip(yamlPath)}</span>
<span class="${keyClass}" style="margin-left: ${ident * 20}px">${anchor(path, key)}:${tooltip(renderedPath)}</span>
<span class="${valueClass}">${value}</span>
<span class="${keyClass}">${getLatest(key === 'apiVersion' && latest === value)}</span>
</td>
Expand All @@ -225,7 +238,7 @@ function* template(definitions, parentDefinition, ref, ident, parent, parentYaml
// This definition references another definition
if (definition.$ref) {
yield html`
${template(definitions, definition, definition.$ref, ident + 1, path, `${yamlPath}.`)}
${template(definitions, definition, definition.$ref, ident + 1, path, pathLinks)}
`;
}

Expand All @@ -236,7 +249,7 @@ function* template(definitions, parentDefinition, ref, ident, parent, parentYaml
yield html ``;
} else {
yield html`
${template(definitions, definition, definition.items.$ref, ident + 1, path, `${yamlPath}.`)}
${template(definitions, definition, definition.items.$ref, ident + 1, path, pathLinks)}
`;
}
}
Expand All @@ -248,9 +261,25 @@ function getLatest(isLatest) {
}

function anchor(path, label) {
return html`<a class="anchor" id="${path}"></a><a class="key stooltip__anchor" href="#${path}">${label}</a>`
return html`<a class="anchor" id="${path}"></a><a class="key stooltip__anchor" href="#${path}">${label}</a>`;
}

function tooltip(text) {
return html`<span class="stooltip">${text}</span>`;
function tooltip(content) {
return html`<span class="stooltip"><span class="stooltip__content">${content}<span class="stooltip__icon"><i class="fas fa-arrow-left"></i></span></span>`;
}

function getPathLinkList(yamlLinks) {
return html`${joinTemplates(yamlLinks.map((yamlLink) => yamlLink.render()), html`<span class="yaml-link__separator">.</span>`)}`;
}

function joinTemplates(templates=[html``], separator=html` `) {
const joinedTemplates = [];

for (const template of templates) {
joinedTemplates.push(template);
joinedTemplates.push(separator);
}
joinedTemplates.pop();

return joinedTemplates;
}
Binary file added docs-v2/static/images/tooltip-click-note.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.