refactor: refine regex for <body> targeting, adjust CSS for releases page

This commit is contained in:
Julio Estrada
2024-11-13 15:12:45 -05:00
committed by Julio C. Estrada
parent 27ef69af74
commit 21d8b262e8
2 changed files with 51 additions and 57 deletions

View File

@@ -542,10 +542,14 @@ p, h1, h2, h3, h4, h5, h6 {
overflow-y: auto;
}
.boostlook:not(#libraryReadMe) {
.boostlook {
margin-left: 18rem;
}
.boostlook#libraryReadMe {
margin-left: 0;
}
.boostlook #toggle-toc {
position: fixed;
top: 2rem;
@@ -585,8 +589,6 @@ p, h1, h2, h3, h4, h5, h6 {
}
html.toc-hidden .boostlook #toc.toc2 {
width: 0;
opacity: 0;
visibility: hidden;
}

View File

@@ -1,74 +1,66 @@
Asciidoctor::Extensions.register do
postprocessor do
process do |doc, output|
output = output.sub(/<body(.*?)>/, '<body\\1><div class="boostlook">')
output = output.sub(/<\/body>/, "</div></body>")
output = output.sub(/(<div id="toc".*?>)/, '<button id="toggle-toc" title="Show Table of Contents" aria-expanded="false" aria-controls="toc">☰</button>\\1')
output = output.sub(/(<div id="footer".*?>)/, '</div>\\1')
inline_script = <<~SCRIPT
<script>
(function() {
var isVisible = localStorage.getItem('tocVisible') === 'true';
var isPinned = localStorage.getItem('tocPinned') === 'true';
document.documentElement.classList.toggle('toc-visible', isVisible);
document.documentElement.classList.toggle('toc-hidden', !isVisible);
document.documentElement.classList.toggle('toc-pinned', isPinned);
})();
</script>
SCRIPT
output = output.sub(/<\/head>/, "#{inline_script}</head>")
output = output.sub(/(<body[^>]*>)/, '\1<div class="boostlook">')
output = output.sub('</body>', '</div></body>')
output = output.sub(/(<body.*?<div[^>]*id="toc"[^>]*>)/m, '\1<button id="toggle-toc" title="Show Table of Contents" aria-expanded="false" aria-controls="toc">☰</button>')
output = output.sub(/(<body.*?<div[^>]*id="footer"[^>]*>)/m, '</div>\1')
script_tag = <<~SCRIPT
<script>
document.addEventListener("DOMContentLoaded", (event) => {
const tocButton = document.getElementById("toggle-toc");
const toc = document.getElementById("toc");
(function() {
const html = document.documentElement;
const isPinned = localStorage.getItem('tocPinned') === 'true';
let isVisible = localStorage.getItem("tocVisible") === "true";
let isPinned = localStorage.getItem("tocPinned") === "true";
function updateTocVisibility(visible) {
html.classList.toggle("toc-visible", visible);
html.classList.toggle("toc-hidden", !visible);
tocButton.setAttribute("aria-expanded", visible);
tocButton.textContent = visible ? "×" : "";
tocButton.setAttribute("title", visible ? "Hide Table of Contents" : "Show Table of Contents");
html.classList.add('toc-hidden');
if (isPinned) {
html.classList.add('toc-pinned');
html.classList.add('toc-visible');
html.classList.remove('toc-hidden');
}
function updateTocPinned(pinned) {
html.classList.toggle("toc-pinned", pinned);
localStorage.setItem("tocPinned", pinned);
}
document.addEventListener("DOMContentLoaded", () => {
const tocButton = document.getElementById("toggle-toc");
const toc = document.getElementById("toc");
tocButton.addEventListener("click", () => {
isVisible = !isVisible;
isPinned = !isPinned;
updateTocVisibility(isVisible);
updateTocPinned(isPinned);
localStorage.setItem("tocVisible", isVisible);
localStorage.setItem("tocPinned", isPinned);
});
if (!tocButton || !toc) return;
tocButton.addEventListener("mouseenter", () => {
if (!isVisible) {
updateTocVisibility(true);
let isPinned = localStorage.getItem('tocPinned') === 'true';
function updateTocVisibility(visible) {
html.classList.toggle("toc-visible", visible);
html.classList.toggle("toc-hidden", !visible);
tocButton.setAttribute("aria-expanded", visible);
tocButton.textContent = visible ? "×" : "";
tocButton.setAttribute("title", visible ? "Hide Table of Contents" : "Show Table of Contents");
}
});
toc.addEventListener("mouseleave", () => {
if (!isVisible) {
updateTocVisibility(false);
}
});
tocButton.addEventListener("click", () => {
isPinned = !isPinned;
localStorage.setItem('tocPinned', isPinned);
html.classList.toggle('toc-pinned', isPinned);
updateTocVisibility(isPinned); state
});
updateTocVisibility(isVisible);
});
tocButton.addEventListener("mouseenter", () => {
if (!isPinned) {
updateTocVisibility(true);
}
});
toc.addEventListener("mouseleave", () => {
if (!isPinned) {
updateTocVisibility(false);
}
});
updateTocVisibility(isPinned);
});
})();
</script>
SCRIPT
output = output.sub(/<\/body>/, "#{script_tag}</body>")
output = output.sub('</body>', "#{script_tag}</body>")
output
end