Skip to content

feat: add category filtering to commands page sidebar #534

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kkonaparthi1 wants to merge 1 commit into
base: main
Choose a base branch
from
+67 −1
Open

feat: add category filtering to commands page sidebar #534

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions sass/_valkey.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1462,6 +1462,12 @@ pre table {
}
}

.category-link.active,
.show-all-link.active {
font-weight: 700;
color: $link-color;
}

.index-entry {
padding: 0.5em 1em;
margin-bottom: 0.5em;
Expand Down
62 changes: 61 additions & 1 deletion templates/commands.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -92,22 +92,82 @@ <h2 id="{{command_group_description_name}}">{{ group_descriptions[command_group_
// Show/hide no results message based on search results
noResultsMessage.style.display = totalVisible === 0 ? "block" : "none";
}

function filterByCategory() {
var hash = window.location.hash.substring(1);
var groups = document.querySelectorAll(".command-group");
var sidebarLinks = document.querySelectorAll(".category-link");
var noResultsMessage = document.getElementById("no-results-message");

// Clear search box when filtering by category
var searchBox = document.getElementById("search-box");
if (searchBox) searchBox.value = "";

// Update active state on sidebar links
sidebarLinks.forEach(function (link) {
link.classList.remove("active");
if (link.getAttribute("href") === "#" + hash) {
link.classList.add("active");
}
});

// If no hash or hash is "top", show all groups
if (!hash || hash === "top") {
groups.forEach(function (group) {
group.style.display = "";
group.querySelectorAll(".command-entry").forEach(function (item) {
item.style.display = "";
});
});
noResultsMessage.style.display = "none";
sidebarLinks.forEach(function (link) { link.classList.remove("active"); });
var showAllLink = document.querySelector(".show-all-link");
if (showAllLink) showAllLink.classList.add("active");
return;
}

// Show only the matching group
var found = false;
groups.forEach(function (group) {
var heading = group.querySelector("h2");
if (heading && heading.id === hash) {
group.style.display = "";
group.querySelectorAll(".command-entry").forEach(function (item) {
item.style.display = "";
});
found = true;
} else {
group.style.display = "none";
}
});

noResultsMessage.style.display = found ? "none" : "block";
}
</script>

<script>
document.addEventListener("DOMContentLoaded", function() {
document.getElementById("search-box").focus();

// Filter on initial page load if URL has a hash
if (window.location.hash) {
filterByCategory();
}

// Filter when hash changes (sidebar link clicked)
window.addEventListener("hashchange", filterByCategory);
});
</script>
{% endblock main_content %}

{% block related_content %}
<h2 id="top">Command Categories</h2>
<ul>
<li><a href="#top" class="show-all-link active" onclick="window.location.hash='top';">Show All</a></li>
Copy link
Copy Markdown
Member

@stockholmux stockholmux Jun 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The 'Show all' button is active when you don't have any filtering, which is kind of confusing.

Here I'm not filtering, so I'd expect "Show all" to be hidden.
Image

{% if group_descriptions %}
{% for command_group_name, group_description in group_descriptions %}
{% set replaced_group_id = command_group_name | replace(from="-", to="_") %}
{% if grouped[replaced_group_id] %}<li> <a href="#{{ command_group_name }}">{{ group_description.display }}</a></li>{% endif %}
{% if grouped[replaced_group_id] %}<li> <a href="#{{ command_group_name }}" class="category-link">{{ group_description.display }}</a></li>{% endif %}
Copy link
Copy Markdown
Member

@stockholmux stockholmux Jun 5, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would probably make sense to have some sort of indication that you're filtering above the search bar.

For example: "Show only Search commands."

Image

{% endfor %}
{% endif %}
</ul>
Expand Down