Several fixes around overviews, outlines etc (#825)

* Fix outline for headings that have links

Previously produced blank items because it assumed any link in a heading is an anchor

* Filter unlisted items from overviews

Previously they were filtered only when the card was rendered, so their heading was still shown

* [Overview] Add id to group headings

* Hide headings from empty groups

Should never happen but you never know

* [Overview] Ensure "Other" is always last even when no sorting

docs/_includes/grouped-pages.njk

@@ -3,8 +3,8 @@
 <section id="grid" class="index-grid">
 {% set groupedPages = allPages | groupPages(categories, page) %}
 {% for category, pages in groupedPages -%}
-  {% if groupedPages.meta.groupCount > 1 %}
-  <h2 class="index-category">
+  {% if groupedPages.meta.groupCount > 1 and pages.length > 0 %}
+  <h2 class="index-category" id="{{ category | slugify }}">
     {% if pages.meta.url %}<a href="{{ pages.meta.url }}">{{ pages.meta.title }}</a>
     {% else %}
     {{ pages.meta.title }}

docs/_includes/sidebar-link.njk

@@ -1,4 +1,4 @@
-{% if not (isAlpha and page.data.noAlpha) and not page.data.unlisted -%}
+{% if page | show -%}
 	<li>
 		<a href="{{ page.url }}">{{ page.data.title }}</a>
 		{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}

docs/_utils/filters.js

@@ -178,6 +178,10 @@ export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
   });
 }
 
+export function show(page) {
+  return !(page.data.noAlpha && page.data.isAlpha) && !page.data.unlisted;
+}
+
 /**
  * Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags.
  * @param {object[]} collection
@@ -198,7 +202,7 @@ export function groupPages(collection, options = {}, page) {
     options = { tags: options };
   }
 
-  let { tags, groups, titles = {}, other = 'Other' } = options;
+  let { tags, groups, titles = {}, other = 'Other', filter = show } = options;
 
   if (groups === undefined && Array.isArray(tags)) {
     groups = tags;
@@ -237,6 +241,10 @@ export function groupPages(collection, options = {}, page) {
   let byUrl = {};
   let byParentUrl = {};
 
+  if (filter) {
+    collection = collection.filter(filter);
+  }
+
   for (let item of collection) {
     let url = item.page.url;
     let parentUrl = item.data.parentUrl;
@@ -313,6 +321,13 @@ export function groupPages(collection, options = {}, page) {
 
   if (sortedGroups) {
     ret = sortObject(ret, sortedGroups);
+  } else {
+    // At least make sure other is last
+    if (ret.other) {
+      let otherGroup = ret.other;
+      delete ret.other;
+      ret.other = otherGroup;
+    }
   }
 
   Object.defineProperty(ret, 'meta', {

docs/_utils/outline.js

@@ -39,7 +39,7 @@ export function outlinePlugin(options = {}) {
         }
 
         // Create a clone of the heading so we can remove links and [data-no-outline] elements from the text content
-        clone.querySelectorAll('a').forEach(a => a.remove());
+        clone.querySelectorAll('.wa-visually-hidden, [hidden], [aria-hidden="true"]').forEach(el => el.remove());
         clone.querySelectorAll('[data-no-outline]').forEach(el => el.remove());
 
         // Generate the link