Skip to content

Commit

Permalink
docs: add anchors to yaml paths
Browse files Browse the repository at this point in the history
  • Loading branch information
@renzodavid9
renzodavid9 committed May 24, 2023
1 parent 75c4495 commit 3bef233
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 29 deletions.
36 changes: 25 additions & 11 deletions docs-v2/content/en/docs/references/yaml/main.css
View file
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,30 @@ 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;
}

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

.yaml-link {
color: #FFF;
}

.yaml-link:hover{
color: #72A1E5;
}
65 changes: 47 additions & 18 deletions docs-v2/content/en/docs/references/yaml/main.js
View file
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 All @@ -21,15 +33,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 @@ -53,9 +65,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 @@ -83,7 +96,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 @@ -106,7 +119,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 @@ -121,7 +134,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 @@ -133,7 +146,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 @@ -148,7 +161,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 @@ -174,7 +187,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 @@ -191,7 +204,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 @@ -202,7 +215,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 @@ -215,7 +228,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 @@ -226,7 +239,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 @@ -238,9 +251,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></span>`;
}

function getPathLinkList(yamlLinks) {
return html`${joinTemplates(yamlLinks.map((yamlLink) => yamlLink.render()), '.')}`;
}

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

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

return joinedTemplates;
}

0 comments on commit 3bef233

Please sign in to comment.