Fix grouping and ordering of website menus

Groups subcategories and sorts their pages by weight properly. Subcategories
are sorted by name. Pages within subcategories are sorted by weight.

PiperOrigin-RevId: 324766128

4 files changed, 31 insertions, 36 deletions

diff --git a/BUILD b/BUILD
index 5d0dbde4c..f3d0eec4e 100644
--- a/BUILD
+++ b/BUILD
@@ -30,7 +30,7 @@ doc(
     permalink = "/community/governance/",
     subcategory = "Community",
     visibility = ["//website:__pkg__"],
-    weight = "91",
+    weight = "20",
 )
 
 doc(
diff --git a/g3doc/BUILD b/g3doc/BUILD
index c315d38be..f91a77b6f 100644
--- a/g3doc/BUILD
+++ b/g3doc/BUILD
@@ -31,7 +31,7 @@ doc(
     category = "Project",
     permalink = "/community/",
     subcategory = "Community",
-    weight = "95",
+    weight = "10",
 )
 
 doc(
@@ -40,5 +40,5 @@ doc(
     category = "Project",
     permalink = "/community/style_guide/",
     subcategory = "Community",
-    weight = "10",
+    weight = "99",
 )
diff --git a/g3doc/user_guide/tutorials/BUILD b/g3doc/user_guide/tutorials/BUILD
index caae98623..405026a33 100644
--- a/g3doc/user_guide/tutorials/BUILD
+++ b/g3doc/user_guide/tutorials/BUILD
@@ -11,16 +11,7 @@ doc(
     category = "User Guide",
     permalink = "/docs/tutorials/docker/",
     subcategory = "Tutorials",
-    weight = "21",
-)
-
-doc(
-    name = "cni",
-    src = "cni.md",
-    category = "User Guide",
-    permalink = "/docs/tutorials/cni/",
-    subcategory = "Tutorials",
-    weight = "22",
+    weight = "10",
 )
 
 doc(
@@ -33,5 +24,14 @@ doc(
     ],
     permalink = "/docs/tutorials/kubernetes/",
     subcategory = "Tutorials",
-    weight = "33",
+    weight = "20",
+)
+
+doc(
+    name = "cni",
+    src = "cni.md",
+    category = "User Guide",
+    permalink = "/docs/tutorials/cni/",
+    subcategory = "Tutorials",
+    weight = "30",
 )
diff --git a/website/_layouts/docs.html b/website/_layouts/docs.html
index 6bc5d87db..0422f9fb0 100644
--- a/website/_layouts/docs.html
+++ b/website/_layouts/docs.html
@@ -14,30 +14,25 @@ categories:
         {% for category in layout.categories %}
           <h3>{{ category }}</h3>
           <ul class="sidebar-nav">
-          {% assign sorted_pages = site.pages | where: 'layout', 'docs' | where: 'category', category | sort: 'weight' | sort: 'subcategory' %}
-          {% assign subcategory = nil %}
-          {% for p in sorted_pages %}
-            {% if p.subcategory != subcategory %}
-              {% if subcategory != nil %}
-                  </ul>
-                </li>
-              {% endif %}
-              {% assign subcategory = p.subcategory %}
-              {% if subcategory != nil %}
-                {% assign ac = "aria-controls" %}
-                {% assign cid = p.category | remove: " " | downcase %}
-                {% assign sid = p.subcategory | remove: " " | downcase %}
-                <li>
-                  <a class="sidebar-nav-heading" data-toggle="collapse" href="#{{ cid }}-{{ sid }}" aria-expanded="false" {{ ac }}="{{ cid }}-{{ sid }}">{{ subcategory }}<span class="caret"></span></a>
-                  <ul class="collapse sidebar-nav sidebar-submenu" id="{{ cid }}-{{ sid }}">
-              {% endif %}
+          {% assign subcats = site.pages | where: 'layout', 'docs' | where: 'category', category | group_by: 'subcategory' | sort: 'name', 'first' %}
+          {% for subcategory in subcats %}
+            {% assign sorted_pages = subcategory.items | sort: 'weight', 'last' %}
+            {% if subcategory.name != "" %}
+              {% assign ac = "aria-controls" %}
+              {% assign cid = category | remove: " " | downcase %}
+              {% assign sid = subcategory.name | remove: " " | downcase %}
+              <li>
+                <a class="sidebar-nav-heading" data-toggle="collapse" href="#{{ cid }}-{{ sid }}" aria-expanded="false" {{ ac }}="{{ cid }}-{{ sid }}">{{ subcategory.name }}<span class="caret"></span></a>
+                <ul class="collapse sidebar-nav sidebar-submenu" id="{{ cid }}-{{ sid }}">
             {% endif %}
-            <li><a href="{{ p.url }}">{{ p.title }}</a></li>
-          {% endfor %}
-          {% if subcategory != nil %}
-                </ul>
+            {% for p in sorted_pages %}
+              <li><a href="{{ p.url }}">{{ p.title }}</a></li>
+            {% endfor %}
+            {% if subcategory.name != "" %}
               </li>
-          {% endif %}
+            </ul>
+            {% endif %}
+          {% endfor %}
           </ul>
         {% endfor %}
       </nav>