diff --git a/input/_Layout.cshtml b/input/_Layout.cshtml index 884a87d..f66521e 100644 --- a/input/_Layout.cshtml +++ b/input/_Layout.cshtml @@ -278,6 +278,15 @@ } } } + + // Find the active element + var activeElement = $("#left-sidebar .sidebar-nav-item.active"); + + if (activeElement.length > 0) { + // Scroll to the active element + $("#left-sidebar").scrollTop(activeElement.position().top); + } + } function stickSidebar(sidebar, rect) { // Bottom @@ -345,6 +354,58 @@ }); } }); + + // Create the SVG element + const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); + svg.setAttribute("xmlns", "http://www.w3.org/2000/svg"); + svg.setAttribute("height", "16"); + svg.setAttribute("width", "14"); + svg.setAttribute("viewBox", "0 0 448 512"); + svg.innerHTML = ''; + + // use a class selector if available + let blocks = document.querySelectorAll("pre"); + + blocks.forEach((block) => { + // only add button if browser supports Clipboard API + if (navigator.clipboard) { + let button = document.createElement("button"); + + // Clone the SVG and append it to the button + button.appendChild(svg.cloneNode(true)); + + // Add a title attribute for accessibility + button.title = "Copy Code"; + + // Wrap the pre element with a div of class "language" + let languageDiv = document.createElement("div"); + languageDiv.classList.add("language"); + block.parentNode.insertBefore(languageDiv, block); + languageDiv.appendChild(block); + + // Append the button to the languageDiv + languageDiv.appendChild(button); + + button.addEventListener("click", async () => { + await copyCode(block, button); + }); + } + }); + + async function copyCode(block, button) { + let code = block.querySelector("code"); + let text = code.innerText; + + await navigator.clipboard.writeText(text); + + // visual feedback that task is completed + button.innerHTML = ''; + + setTimeout(() => { + button.innerHTML = svg.cloneNode(true).outerHTML; + }, 1000); + } + @await RenderSectionAsync(SectionNames.Scripts, false) diff --git a/input/assets/css/theme.scss b/input/assets/css/theme.scss index a393d64..dac7535 100644 --- a/input/assets/css/theme.scss +++ b/input/assets/css/theme.scss @@ -244,13 +244,6 @@ code, code[class*="language-"], pre[class*="language-"] { padding-bottom: $spacer * .25; } } - - &.p-4 > pre[class*="language-"] { - margin-left: -$spacer * 1.5; - margin-right: -$spacer * 1.5; - padding-left: $spacer * 1.5; - padding-right: $spacer * 1.5; - } } #footer { @@ -469,4 +462,54 @@ code, code[class*="language-"], pre[class*="language-"] { .cluster rect { fill: $gray-100 !important; stroke: $gray-300 !important; - } \ No newline at end of file + } + +/* Search Button*/ +.language { + position: relative; + + button { + position: absolute; + top: 5px; + right: 5px; + font-size: 0.9rem; + background-color: #bcbabb; + border: ridge 1px #7b7b7c; + border-radius: 5px; + text-shadow: #c4c4c4 0 0 2px; + outline: none; + background-clip: padding-box; + + &:hover { + cursor: pointer; + background-color: #828282; + } + } +} + +pre[class*="language-"] { + overflow: auto; + margin: 5px 0; + border-radius: 10px; + padding-top: 30px !important; + + /* custom scrollbar */ + &::-webkit-scrollbar { + width: 20px; + } + + &::-webkit-scrollbar-track { + background-color: transparent; + } + + &::-webkit-scrollbar-thumb { + background-color: #d6dee1; + border-radius: 20px; + border: 6px solid transparent; + background-clip: content-box; + } + + &::-webkit-scrollbar-thumb:hover { + background-color: #a8bbbf; + } +}