Skip to content

Commit

Permalink
Merge pull request #1165 from VamshiReddy02/anchor-link
Browse files Browse the repository at this point in the history 
Adding anchor-link to individual fields within the spin documentation
  • Loading branch information
Timothy McCallum authored Feb 21, 2024
2 parents d1a1ff2 + 059fde2 commit 52e9230
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 31 deletions.
10 changes: 9 additions & 1 deletion static/css/styles.css
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

52 changes: 34 additions & 18 deletions static/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1107,26 +1107,42 @@ const addCopyButtons = (clipboard)=>{
pre.appendChild(button);
});
};
const addAnchorLinks = ()=>{
document.querySelectorAll(".content h1, .content h2, .content h3, .content h4").forEach((heading)=>{
let id = heading.innerText.toLowerCase().replace(/[`~!@#$%^&*()_|+=?;:'",.<>\{\}\[\]\\\/]/gi, "").replace(/ +/g, "-");
heading.setAttribute("id", id);
heading.classList.add("heading-anchor");
let anchor = document.createElement("a");
anchor.className = "anchor-link";
anchor.href = "#" + id;
anchor.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width=16 height=16 viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>';
heading.append(anchor);
anchor.addEventListener("click", (e)=>{
const addAnchorLinks = () => {
const elementsToProcess = document.querySelectorAll(".content h1, .content h2, .content h3, .content h4, .content tr");

elementsToProcess.forEach(element => {
let uniqueId;
if (element.tagName.toLowerCase() === 'tr') {
const closestHeading = element.closest('.content').querySelector('.heading-anchor');
const rowText = Array.from(element.cells).map(cell => cell.textContent.trim()).join(' ').toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');

if (closestHeading) {
const headingText = closestHeading.textContent.trim().toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
uniqueId = `${headingText}-${rowText}`;
} else {
uniqueId = rowText;
}
} else {
uniqueId = element.textContent.trim().toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
}

element.classList.add("heading-anchor");
element.setAttribute('id', uniqueId);
let anchor = document.createElement('a');
anchor.className = 'anchor-link';
anchor.href = '#' + uniqueId;
anchor.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width=16 height=16 viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l-1.1-1.6c-10.3-14.4-6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l-1.6 1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l-1.1 1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>';
element.append(anchor);
anchor.addEventListener("click", (e) => {
e.preventDefault();
window.location = anchor.href;
document.querySelector(anchor.getAttribute("href")).scrollIntoView({
behavior: "smooth",
block: "start" //scroll to top of the target element
});
});
});
};
document.querySelector(anchor.getAttribute('href')).scrollIntoView({
behavior: 'smooth',
block: 'start'
})
})
})
}
function removeExpiredEvents() {
let events = document.querySelectorAll(".community-highlight .carousel-cell");
let eventsNumber = events.length;
Expand Down
38 changes: 26 additions & 12 deletions static/js/src/modules/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,23 +82,37 @@ const addCopyButtons = (clipboard) => {
};

const addAnchorLinks = () => {
document.querySelectorAll(".content h1, .content h2, .content h3, .content h4").forEach(heading => {
let id = heading.innerText.toLowerCase()
.replace(/[`~!@#$%^&*()_|+=?;:'",.<>\{\}\[\]\\\/]/gi, '')
.replace(/ +/g, '-');
heading.setAttribute("id", id);
heading.classList.add("heading-anchor");
const elementsToProcess = document.querySelectorAll(".content h1, .content h2, .content h3, .content h4, .content tr");

elementsToProcess.forEach(element => {
let uniqueId;
if (element.tagName.toLowerCase() === 'tr') {
const closestHeading = element.closest('.content').querySelector('.heading-anchor');
const rowText = Array.from(element.cells).map(cell => cell.textContent.trim()).join(' ').toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');

if (closestHeading) {
const headingText = closestHeading.textContent.trim().toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
uniqueId = `${headingText}-${rowText}`;
} else {
uniqueId = rowText;
}
} else {
uniqueId = element.textContent.trim().toLowerCase().replace(/[^\w\s-]/g, '').replace(/\s+/g, '-');
}

element.classList.add("heading-anchor");
element.setAttribute('id', uniqueId);
let anchor = document.createElement('a');
anchor.className = 'anchor-link';
anchor.href = '#' + id;
anchor.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width=16 height=16 viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>';
heading.append(anchor);
anchor.href = '#' + uniqueId;
anchor.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width=16 height=16 viewBox="0 0 640 512"><!--! Font Awesome Pro 6.2.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l-1.1-1.6c-10.3-14.4-6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l-1.6 1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l-1.1 1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>';
element.append(anchor);
anchor.addEventListener("click", (e) => {
e.preventDefault()
window.location = anchor.href
e.preventDefault();
window.location = anchor.href;
document.querySelector(anchor.getAttribute('href')).scrollIntoView({
behavior: 'smooth',
block: 'start' //scroll to top of the target element
block: 'start'
})
})
})
Expand Down
14 changes: 14 additions & 0 deletions static/sass/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -409,6 +409,13 @@ Importing color and theme updates for the brand 1.5 refresh
}
}
}
tr {
&:hover {
>a.anchor-link {
opacity: 1;
}
}
}

a {
font-weight: 600;
Expand All @@ -419,6 +426,13 @@ Importing color and theme updates for the brand 1.5 refresh
content: none;
}
}

tr {
overflow-x: hidden;
a.anchor-link {
position: absolute;
}
}

aside.menu {
padding-bottom: 7.5rem;
Expand Down

0 comments on commit 52e9230

Please sign in to comment.