Skip to content

Commit

Permalink
Merge pull request #6022 from roc-lang/minor-website-fixes
Browse files Browse the repository at this point in the history 
Minor website fixes
  • Loading branch information
@rtfeldman
rtfeldman authored Nov 20, 2023
2 parents d87d5e3 + 328f6df commit b32495a
Show file tree
Hide file tree
Showing 5 changed files with 151 additions and 112 deletions.
243 changes: 133 additions & 110 deletions crates/docs/src/static/search.js
View file
Original file line number Diff line number Diff line change
@@ -1,124 +1,147 @@
(() => {
let sidebar = document.getElementById("sidebar-nav");
let searchBox = document.getElementById("module-search");

function search() {
let text = searchBox.value.toLowerCase(); // Search is case-insensitive.

if (text === "") {
// Un-hide everything
sidebar.querySelectorAll(".sidebar-entry a").forEach((entry) => entry.classList.remove("hidden"));

// Re-hide all the sub-entries except for those of the current module
let currentModuleName = document.querySelector('.module-name').textContent;

sidebar.querySelectorAll(".sidebar-entry").forEach((entry) => {
let entryName = entry.querySelector('.sidebar-module-link').textContent;
if (currentModuleName === entryName) {
entry.firstChild.classList.add("active");
return;
};
entry.querySelectorAll(".sidebar-sub-entries a").forEach((subEntry) => subEntry.classList.add("hidden"));
})
} else {
// First, show/hide all the sub-entries within each module (top-level functions etc.)
sidebar.querySelectorAll(".sidebar-sub-entries a").forEach((entry) => {
if (entry.textContent.toLowerCase().includes(text)) {
entry.classList.remove("hidden");
} else {
entry.classList.add("hidden");
let sidebar = document.getElementById("sidebar-nav");
let searchBox = document.getElementById("module-search");

if (searchBox != null) {
function search() {
let text = searchBox.value.toLowerCase(); // Search is case-insensitive.

if (text === "") {
// Un-hide everything
sidebar
.querySelectorAll(".sidebar-entry a")
.forEach((entry) => entry.classList.remove("hidden"));

// Re-hide all the sub-entries except for those of the current module
let currentModuleName =
document.querySelector(".module-name").textContent;

sidebar.querySelectorAll(".sidebar-entry").forEach((entry) => {
let entryName = entry.querySelector(
".sidebar-module-link"
).textContent;
if (currentModuleName === entryName) {
entry.firstChild.classList.add("active");
return;
}
entry
.querySelectorAll(".sidebar-sub-entries a")
.forEach((subEntry) =>
subEntry.classList.add("hidden")
);
});
} else {
// First, show/hide all the sub-entries within each module (top-level functions etc.)
sidebar
.querySelectorAll(".sidebar-sub-entries a")
.forEach((entry) => {
if (entry.textContent.toLowerCase().includes(text)) {
entry.classList.remove("hidden");
} else {
entry.classList.add("hidden");
}
});

// Then, show/hide modules based on whether they match, or any of their sub-entries matched
sidebar
.querySelectorAll(".sidebar-module-link")
.forEach((entry) => {
if (
entry.textContent.toLowerCase().includes(text) ||
entry.parentNode.querySelectorAll(
".sidebar-sub-entries a:not(.hidden)"
).length > 0
) {
entry.classList.remove("hidden");
} else {
entry.classList.add("hidden");
}
});
}
}
});

// Then, show/hide modules based on whether they match, or any of their sub-entries matched
sidebar.querySelectorAll(".sidebar-module-link").forEach((entry) => {
if (entry.textContent.toLowerCase().includes(text) || entry.parentNode.querySelectorAll(".sidebar-sub-entries a:not(.hidden)").length > 0) {
entry.classList.remove("hidden");
} else {
entry.classList.add("hidden");
}
});
}
}
searchBox.addEventListener("input", search);

searchBox.addEventListener("input", search);

search();

// Capture '/' keypress for quick search
window.addEventListener("keyup", (e) => {
if (e.key === "s" && document.activeElement !== searchBox) {
e.preventDefault;
searchBox.focus();
searchBox.value = "";
}
search();

if (e.key === "Escape" && document.activeElement === searchBox) {
e.preventDefault;
// Capture '/' keypress for quick search
window.addEventListener("keyup", (e) => {
if (e.key === "s" && document.activeElement !== searchBox) {
e.preventDefault;
searchBox.focus();
searchBox.value = "";
}

// De-focus input box
searchBox.blur();
if (e.key === "Escape" && document.activeElement === searchBox) {
e.preventDefault;

// Reset sidebar state
search();
// De-focus input box
searchBox.blur();

// Reset sidebar state
search();
}
});
}
});

const isTouchSupported = () => {
try{ document.createEvent("TouchEvent"); return true; }
catch(e){ return false; }
}

// Select all <samp> elements that are children of <pre> elements
const codeBlocks = document.querySelectorAll("pre > samp");

// Iterate over each code block
codeBlocks.forEach((codeBlock) => {
// Create a "Copy" button
const copyButton = document.createElement("button");
copyButton.classList.add("copy-button");
copyButton.textContent = "Copy";

// Add event listener to copy button
copyButton.addEventListener("click", () => {
const codeText = codeBlock.innerText;
navigator.clipboard.writeText(codeText);
copyButton.textContent = "Copied!";
copyButton.classList.add("copy-button-copied");
copyButton.addEventListener("mouseleave", () => {
copyButton.textContent = "Copy";
copyButton.classList.remove('copy-button-copied');
});
});

// Create a container for the copy button and append it to the document
const buttonContainer = document.createElement("div");
buttonContainer.classList.add("button-container");
buttonContainer.appendChild(copyButton);
codeBlock.parentNode.insertBefore(buttonContainer, codeBlock);

// Hide the button container by default
buttonContainer.style.display = "none";
const isTouchSupported = () => {
try {
document.createEvent("TouchEvent");
return true;
} catch (e) {
return false;
}
};

// Select all <samp> elements that are children of <pre> elements
const codeBlocks = document.querySelectorAll("pre > samp");

// Iterate over each code block
codeBlocks.forEach((codeBlock) => {
// Create a "Copy" button
const copyButton = document.createElement("button");
copyButton.classList.add("copy-button");
copyButton.textContent = "Copy";

// Add event listener to copy button
copyButton.addEventListener("click", () => {
const codeText = codeBlock.innerText;
navigator.clipboard.writeText(codeText);
copyButton.textContent = "Copied!";
copyButton.classList.add("copy-button-copied");
copyButton.addEventListener("mouseleave", () => {
copyButton.textContent = "Copy";
copyButton.classList.remove("copy-button-copied");
});
});

// Create a container for the copy button and append it to the document
const buttonContainer = document.createElement("div");
buttonContainer.classList.add("button-container");
buttonContainer.appendChild(copyButton);
codeBlock.parentNode.insertBefore(buttonContainer, codeBlock);

// Hide the button container by default
buttonContainer.style.display = "none";

if (isTouchSupported()) {
// Show the button container on click for touch support (e.g. mobile)
document.addEventListener("click", (event) => {
if (event.target.closest("pre > samp") !== codeBlock) {
buttonContainer.style.display = "none";
if (isTouchSupported()) {
// Show the button container on click for touch support (e.g. mobile)
document.addEventListener("click", (event) => {
if (event.target.closest("pre > samp") !== codeBlock) {
buttonContainer.style.display = "none";
} else {
buttonContainer.style.display = "block";
}
});
} else {
buttonContainer.style.display = "block";
// Show the button container on hover for non-touch support (e.g. desktop)
codeBlock.parentNode.addEventListener("mouseenter", () => {
buttonContainer.style.display = "block";
});

codeBlock.parentNode.addEventListener("mouseleave", () => {
buttonContainer.style.display = "none";
});
}
});
} else {
// Show the button container on hover for non-touch support (e.g. desktop)
codeBlock.parentNode.addEventListener("mouseenter", () => {
buttonContainer.style.display = "block";
});

codeBlock.parentNode.addEventListener("mouseleave", () => {
buttonContainer.style.display = "none";
});
}
});
});
})();
2 changes: 1 addition & 1 deletion www/content/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ Here are some examples of how it can be used today.
<pre><samp class="code-snippet">main <span class="kw">=</span>
Stdout<span class="punctuation section">.</span>line <span class="literal">"Hello!"</span></samp></pre>
<p>You can use Roc to create scripts and command-line interfaces (CLIs). The compiler produces binary executables, so Roc programs can run on devices that don't have Roc itself installed.</p>
<p>As an example, the HTML for this website is generated using a simple Roc script. You can see <a href="https://github.com/roc-lang/roc/blob/main/www/generate_website/main.roc">the code for it</a> in the main Roc code repository.</p>
<p>As an example, the HTML for this website is generated using a simple Roc script. You can see <a href="https://github.com/roc-lang/roc/blob/main/www/main.roc">the code for it</a> in the main Roc code repository.</p>
<p>If you’re looking for a starting point for building a command-line program in Roc, <a href="https://github.com/roc-lang/basic-cli">basic-cli</a> is a popular <a href="/platforms">platform</a> to check out.</p>
</div>
<div role="presentation" class="home-examples-column">
Expand Down
1 change: 1 addition & 0 deletions www/content/tutorial.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2026,3 +2026,4 @@ Here are various Roc expressions involving operators, and what they desugar to.


</section>
<script type="text/javascript" src="/builtins/search.js" defer></script>
12 changes: 11 additions & 1 deletion www/main.roc
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,17 @@ view = \page, htmlContent ->
when page is
"index.html" -> [id "homepage-main"]
"tutorial.html" -> [id "tutorial-main", class "article-layout"]
_ -> [class "article-layout"]
_ ->
if Str.startsWith page "examples/" && page != "examples/index.html" then
# Individual examples should render wider than articles.
# Otherwise the width is unreasonably low for the code blocks,
# and those pages don't tend to have big paragraphs anyway.
# Keep the article width on examples/index.html though,
# because otherwise when you're clicking through the top nav links,
# /examples has a surprisingly different width from the other links.
[id "example-main"]
else
[class "article-layout"]

html [lang "en", class "no-js"] [
head [] [
Expand Down
5 changes: 5 additions & 0 deletions www/public/site.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,6 +197,10 @@ a:hover {
text-decoration: underline;
}

a:hover code {
text-decoration: inherit;
}

li {
margin-bottom: 0.5rem;
}
Expand Down Expand Up @@ -560,6 +564,7 @@ li {
margin: 0 !important;
padding-right: 120px;
border: 0;
z-index: 2;
}

#homepage-logo {
Expand Down

0 comments on commit b32495a

Please sign in to comment.