feat: add topics sidebar and breadcrumbs navigation (#340)

feat: add topics sidebar and breadcrumbs navigation

- Add topics list page and sidebar navigation
- Implement search functionality for topics in sidebar
- Add breadcrumbs navigation

<img width="1728" height="1041" alt="Screenshot 2025-08-24 at 5 40
39 PM"
src="https://github.com/user-attachments/assets/beac9792-c59f-41fd-a3f7-e7f3268313e3"
/>

---------

Signed-off-by: Daniel Phillips <[email protected]>

Author: phiro56

content/topics-list/_index.md

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

sass/_valkey.scss

@@ -619,7 +619,7 @@ p {
     overflow-x: auto;
     background-size: cover;
     background-position: center bottom;
-    position: stiky;
+    position: sticky;
     top: 0px;
 
     @media (max-width: 1100px) {
@@ -2030,13 +2030,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;
       }
     }
   }

static/img/caret-right.svg

@@ -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,20 @@ <h1 class="page-title">Documentation: {{ frontmatter_title }}</h1>
 {% endblock main_content %}
 
 {% block related_content %}
+<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."; });
+});
+</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/docs-page.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/left-aside.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 %}