feat: add topics sidebar and breadcrumbs navigation

content/topics-list/_index.md

@@ -0,0 +1,4 @@
++++
+title = "Topics List"
+template = "topics-list.html"
++++

sass/_valkey.scss

@@ -575,7 +575,7 @@ p {
     overflow-x: auto;
     background-size: cover;
     background-position: center bottom;
-    position: stiky;
+    position: sticky;
     top: 0px;
 
     @media (max-width: 1100px) {
@@ -1979,13 +1979,16 @@ blockquote {
     .breadcrumb-item {
       align-items: center;
       display: flex;
-
+      font-size: 14px;
+
       img {
         margin-right: 5px;
       }
 
       .breadcrumb-link {
         color: #2054B2;
+        text-decoration: underline;
+        font-weight: 600;
       }
     }
   }

templates/docs-page.html

@@ -1,4 +1,4 @@
-{% extends "right-aside.html" %}
+{% extends "left-aside.html" %}
 
 {% import "macros/docs.html" as docs %}
 
@@ -21,10 +21,26 @@
 
 {% block subhead_content %}
 {% if has_frontmatter and frontmatter_title %}
-<h1 class="page-title">Documentation: {{ frontmatter_title }}</h1>
+    <div class="styled-title">
+        <h1 class="page-title">Documentation: {{ frontmatter_title }}</h1>
+    </div>
 {% endif  %}
 {% endblock subhead_content %}
 
+{% block breadcrumbs %}
+{# Breadcrumbs section #}
+<nav class="breadcrumbs">
+    <ul class="breadcrumb-list">
+        <li class="breadcrumb-item">
+            <a href="/topics/" class="breadcrumb-link">Topics</a>
+        </li>
+        <li class="breadcrumb-item breadcrumb-current" aria-current="page">
+            <img src="/img/caret-right.svg" alt="Caret Right Icon" width="8" height="10"/>
+            {% if frontmatter_title %}{{ frontmatter_title }}{% else %}{{ page.slug | upper }}{% endif %}
+        </li>
+    </ul>
+</nav>
+{% endblock breadcrumbs %}
 
 {% block main_content %}
 {% if config.extra.review_list is containing(page.path) %}
@@ -41,6 +57,56 @@ <h1 class="page-title">Documentation: {{ frontmatter_title }}</h1>
 {% endblock main_content %}
 
 {% block related_content %}
+<div class="sb-search-container">
+    <input type="text" id="sidebar-search-box" placeholder="Search within topics" onkeyup="searchSidebarTopics()" />
+</div>
+
+<!-- No results message for sidebar search -->
+<div id="sidebar-no-results-message" class="no-results-message" style="display: none;">
+    <span>&lt;/&gt;</span>
+    <h4>No topics found</h4>
+    <p>Check your spelling or try different keywords</p>
+</div>
+
+<h2 id="topic-list-title">Alphabetical Index</h2>
+<ul id="topic-list"></ul>
+
+<script>
+document.addEventListener("DOMContentLoaded", function() {
+    var 
+        topicListEl = document.getElementById('topic-list'),
+        f = fetch("/topics-list/");
+
+    f.then((r) => r.text()).then((v) => { topicListEl.innerHTML = v; })
+    f.catch((error) => { topicListEl.innerHTML = "Could not load topic list."; });
+});
+
+function searchSidebarTopics() {
+    var input = document.getElementById("sidebar-search-box").value.toLowerCase();
+    var topicList = document.getElementById("topic-list");
+    var topicListTitle = document.getElementById("topic-list-title");
+    var items = topicList.querySelectorAll(".topic-list-item");
+    var noResultsMessage = document.getElementById("sidebar-no-results-message");
+    var totalVisible = 0;
+
+    items.forEach(function (item) {
+        var text = item.querySelector("a").innerText.toLowerCase();
+        if (text.includes(input)) {
+            item.style.display = "";
+            totalVisible++;
+        } else {
+            item.style.display = "none";
+        }
+    });
+
+    // Show/hide no results message and title based on search results
+    var hasResults = totalVisible > 0;
+    noResultsMessage.style.display = hasResults ? "none" : "block";
+    topicListTitle.style.display = hasResults ? "" : "none";
+    topicList.style.display = hasResults ? "" : "none";
+}
+</script>
+
 <div class="edit_box">
     See an error?
     <a href="https://github.com/valkey-io/valkey-doc/edit/main/topics/{{ page.slug }}.md">Update this Page on GitHub!</a>

templates/left-aside.html

@@ -5,6 +5,7 @@
 <div class="left-aside-bg">
     <div class="left-aside">
         <main>
+            {% block breadcrumbs %}{% endblock breadcrumbs %}
             <div class="main-inner">
                 {% block main_content %}{% endblock main_content %}
             </div>

templates/topics-list.html

@@ -0,0 +1,34 @@
+{% import "macros/docs.html" as docs %}
+
+{% set topics_entries = [] %}
+{% set topics_section = get_section(path="topics/_index.md") %}
+
+{% for topic_page in topics_section.pages %}
+    {% set docs_file_contents = docs::load(slug= topic_page.slug) %}
+    {% set frontmatter = docs::extract_frontmatter(content= docs_file_contents) %}
+    {% set frontmatter_length = frontmatter | length() %}
+
+    {% if frontmatter_length > 0 %}
+        {% set frontmatter_data = load_data(literal= frontmatter, format="yaml") %}
+        {% if frontmatter_data.title %}
+            {% set topic_entry = [
+                frontmatter_data.title,
+                topic_page.permalink | safe,
+                frontmatter_data.description | default(value="")
+            ] %}
+            {% set_global topics_entries = topics_entries | concat(with= [ topic_entry ]) %}
+        {% endif %}
+    {% endif %}
+{% endfor %}
+
+{% set alpha_entries = topics_entries | sort(attribute="0") %}
+{% for entry in alpha_entries %}
+    <li class="topic-list-item">
+        <a href="{{ entry[1] }}">
+            {{ entry[0] }}
+            {% if entry[2] %}
+                <span class="topic-description">{{ entry[2] | safe }}</span>
+            {% endif %}
+        </a>
+    </li>
+{% endfor %}