feat: restyle Commands Page with new layout and search functionality (#242)

feat: restyle Commands Page with new layout and search functionality

- Add left sidebar with command categories and alphabetical list
- Implement responsive design with mobile-first approach
- Add search functionality with real-time filtering
- Style command groups with improved readability
- Add no-results message for empty searches

<img width="1727" alt="Screenshot 2025-04-18 at 7 43 52 PM"
src="https://github.com/user-attachments/assets/e9bdbf91-bef4-4277-b944-d4fc1233a59d"
/>

<img width="1728" alt="Screenshot 2025-04-18 at 7 43 59 PM"
src="https://github.com/user-attachments/assets/00df6c44-0a11-4361-aa6a-b77d81886c71"
/>

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

Author: phiro56

sass/_valkey.scss

@@ -449,6 +449,121 @@ p {
   }
 }
 
+.left-aside {
+  display: flex;
+  width: 100%;
+  background-color: #e2e8f0;
+  flex-direction: column;
+
+  @include respond-min(768px) {
+    flex-direction: row-reverse;
+  }
+
+  h2 {
+    font-size: 1.5rem;
+    margin: 0 0 0.25rem 0;
+    font-weight: 700;
+    color: #000;
+    text-transform: uppercase;
+
+  }
+
+  main {
+    flex: 1;
+    padding: 2rem;
+  }
+
+  .main-inner {
+    width: 100%;
+    background-color: #fff;
+    border-radius: 20px;
+    padding: 1rem 2rem 2rem;
+  }
+
+  aside {
+    background-color: #f1f0fa;
+    padding: 2rem;
+    width: 100%;
+    
+    @include respond-min(768px) {
+      max-width: 420px;
+    }
+
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0 0 2rem 0;
+
+      li {
+
+        a {
+          display: block;
+          background-color: #d1d9ff;
+          padding: 1.2rem;
+          margin-bottom: 1rem;
+          color: #000;
+          text-transform: uppercase;
+          cursor: pointer;
+
+          &:hover {
+            background-color: #b9c6ff;
+          }
+        }
+      }
+    }
+  }
+}
+
+.search-container {
+  display: flex;
+  align-items: center;
+  margin: 0 -2rem 2rem;
+  padding: 0 2rem 1rem;
+  border-bottom: 1px solid rgb(104, 147, 238);
+
+  label {
+    margin-right: 10px;
+    font-size: 80%;
+  }
+
+  input {
+    flex: 1;
+    width: 100%;
+    min-width: 0px;
+    outline: none;
+    padding: 1rem;
+    border: 1px solid #ccc;
+    background: #fff;
+    border-radius: 50px;
+    font-size: 80%;
+
+    &:focus {
+      border-color: #6983ff;;
+    }
+  }
+}
+
+.no-results-message {
+  color: #30176e;
+  padding: 5rem 2rem 7rem;
+  text-align: center;
+
+  span {
+    font-size: 6rem;
+    font-weight: 800;
+  }
+  
+  h4 {
+    font-size: 1.75rem;
+    margin: 0.75rem 0;
+  }
+
+  p {
+    font-size: 1.75rem;
+    margin: 0;
+  }
+}
+
 .row {
   display: flex;
   margin: 0 auto;
@@ -505,6 +620,25 @@ p {
   @include sans-serif;
 }
 
+.styled-title {
+  padding-top: var(--chakra-space-16);
+  padding-bottom: var(--chakra-space-16);
+  color: var(--chakra-colors-white);
+  text-align: center;
+  background-image: linear-gradient(rgb(59, 42, 102), rgb(78, 81, 191));
+  padding: 80px;
+
+  h1 {
+    @include sans-serif;
+    font-size: 4rem;
+    font-weight: 700;
+    line-height: 1;
+    color: #fff;
+    margin: 0;
+    padding: 0;
+  }
+}
+
 #principles {
   dl {
     counter-reset: principles;
@@ -776,19 +910,28 @@ pre table {
 }
 
 .command-group {
-  .command-entry {
-    border-bottom: 1px dotted $line;
-    margin-top: 0.5rem;
-    margin-bottom: 0.5rem;
-    padding-top: 1rem;
+  margin-bottom: 2rem;
+  
+  h2 {
+    border-bottom: 1px solid $line;
     padding-bottom: 1rem;
-    
+    margin: 0;
+
+    span {
+      font-weight: 400;
+    }
   }
-  .command-entry, 
-  .command-group-meta {
-    margin-left: 1em;
+
+  .command-entry {
+    font-size: 1.5rem;
+    border-bottom: 1px solid $line;
+    padding: 1.25rem 0;
+
+    a {
+      text-decoration: underline;
+    }
+    
   }
-  
 }
 
 .index-entry {

templates/commands.html

@@ -1,4 +1,4 @@
-{% extends "right-aside.html" %}
+{% extends "left-aside.html" %}
 
 {% import "macros/command.html" as commands %}
 
@@ -12,9 +12,17 @@
 {% set commands_entries = [] %}
 <!-- command search box -->
 <div class="search-container">
+    <label>Search Commands:</label>
     <input type="text" id="search-box" placeholder="Search commands..." onkeyup="searchCommands()" />
 </div>
 
+<!-- No results message -->
+<div id="no-results-message" class="no-results-message"  style="display: none;">
+    <span>&lt;/&gt;</span>
+    <h4>We couldn't find any results matching your search</h4>
+    <p>Check your spelling or try different keywords</p>
+</div>
+
 {% for page in section.pages %}
     {% for json_path in [
         commands::command_json_path(slug=page.slug),
@@ -44,25 +52,25 @@
 
 {% for command_group_name, command_group in grouped %}
     <div class="command-group">
-    {% set command_group_description_name = command_group_name | replace(from="_", to="-") %}
-    <h2 id="{{command_group_description_name}}">{{ group_descriptions[command_group_description_name].display }}</h2>
-    <div class="command-group-meta">
-        <p><small>{{ group_descriptions[command_group_description_name].description }}</small></p>
-        <hr />
-    </div>
-    {% for entry in command_group | sort(attribute="0") %}
-        <div class="command-entry"><code><a href="{{ entry[1] }}">{{ entry[0] }}</a></code> {{entry[2]}}</div>
-    {% endfor %}
-    <div class="command-group-meta">
-        <small><a href="#top">Back to top</a></small>
-    </div>
+        {% set command_group_description_name = command_group_name | replace(from="_", to="-") %}
+        <h2 id="{{command_group_description_name}}">{{ group_descriptions[command_group_description_name].display }}
+            <span>{{ group_descriptions[command_group_description_name].description }}</span>
+        </h2>
+        {% for entry in command_group | sort(attribute="0") %}
+            <div class="command-entry"><code><a href="{{ entry[1] }}">{{ entry[0] }}</a></code> {{entry[2]}}</div>
+        {% endfor %}
+        <div class="command-group-meta">
+            <small><a href="#top">Back to top</a></small>
+        </div>
     </div>
 {% endfor %}
 
 <script>
 function searchCommands() {
     var input = document.getElementById("search-box").value.toLowerCase();
     var groups = document.querySelectorAll(".command-group");
+    var noResultsMessage = document.getElementById("no-results-message");
+    var totalVisible = 0;
 
     groups.forEach(function (group) {
         var items = group.querySelectorAll(".command-entry");
@@ -72,12 +80,16 @@ <h2 id="{{command_group_description_name}}">{{ group_descriptions[command_group_
             if (text.includes(input)) {
                 item.style.display = "";
                 found = true;
+                totalVisible++;
             } else {
                 item.style.display = "none";
             }
         });
         group.style.display = found ? "" : "none";
     });
+
+    // Show/hide no results message based on search results
+    noResultsMessage.style.display = totalVisible === 0 ? "block" : "none";
 }
 </script>
 
@@ -86,34 +98,6 @@ <h2 id="{{command_group_description_name}}">{{ group_descriptions[command_group_
     document.getElementById("search-box").focus();
 });
 </script>
-
-<style>
-.search-container {
-    margin: 20px 0;
-    text-align: center;
-}
-
-#search-box {
-    width: 60%;
-    padding: 10px;
-    font-size: 16px;
-    border: 2px solid #ddd;
-    border-radius: 4px;
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-    transition: border-color 0.3s ease, box-shadow 0.3s ease;
-}
-
-#search-box:focus {
-    border-color: #007bff;
-    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
-}
-
-#search-box::placeholder {
-    color: #aaa;
-    font-style: italic;
-}
-</style>
-
 {% endblock main_content %}
 
 {% block related_content %}
@@ -138,5 +122,7 @@ <h2>Alphabetical Command List</h2>
 
 
 {% block subhead_content %}
-<h1 class="page-title">Documentation: Command Reference</h1>
+<div class="styled-title">
+    <h1>Documentation: Command Reference</h1>
+</div>
 {% endblock subhead_content %}

templates/left-aside.html

@@ -0,0 +1,15 @@
+{% extends "default.html" %}
+
+{% block content %}
+{% block subhead_content %}{% endblock subhead_content %}
+<div class="left-aside">
+    <main>
+        <div class="main-inner">
+            {% block main_content %}{% endblock main_content %}
+        </div>
+    </main>
+    <aside>
+        {% block related_content %}{% endblock related_content %}
+    </aside>
+</div>
+{% endblock content %}