Fix IDs on widget catalog pages (#10995)

Since these are header elements, we should make sure their IDs can be
properly used as a URI fragment by using the same slugify function as
elsewhere on the site.

src/_11ty/filters.js

@@ -1,4 +1,5 @@
 import { getPageInfo } from './utils/get-page-info.js';
+import { slugify } from "./utils/slugify.js";
 import { fromHtml } from 'hast-util-from-html';
 import { selectAll } from 'hast-util-select';
 import { toText } from 'hast-util-to-text';
@@ -27,6 +28,7 @@ export function registerFilters(eleventyConfig) {
  eleventyConfig.addFilter('array_to_sentence_string', arrayToSentenceString);
  eleventyConfig.addFilter('generate_toc', generateToc);
  eleventyConfig.addFilter('breadcrumbsForPage', breadcrumbsForPage);
+ eleventyConfig.addFilter('slugify', slugify);
 }
 
 /**

src/_includes/docs/catalogpage-material.html

@@ -9,7 +9,7 @@
 {% if category.subcategories and category.subcategories.size != 0 -%}
 <ul>
  {% for sub in category.subcategories -%}
- <li><a href="#{{sub.name}}">{{sub.name}}</a></li>
+ <li><a href="#{{sub.name | slugify}}">{{sub.name}}</a></li>
  {% endfor -%}
 </ul>
 {% endif -%}
@@ -20,7 +20,7 @@
 {% for sub in category.subcategories -%}
  {% assign components = catalog.widgets | widget_filter: "subcategories", sub.name %}
  {% if components.size != 0 -%}
- <h2 id="{{sub.name}}">{{sub.name}}</h2>
+ <h2 id="{{sub.name | slugify}}">{{sub.name}}</h2>
  <div class="card-grid">
  {% for comp in components -%}
  <div class="card">

src/_includes/docs/catalogpage.html

@@ -12,7 +12,7 @@
  {% if category.subcategories and category.subcategories.size != 0 -%}
  <ul>
  {% for sub in category.subcategories -%}
- <li><a href="#{{sub.name}}">{{sub.name}}</a></li>
+ <li><a href="#{{sub.name | slugify}}">{{sub.name}}</a></li>
  {% endfor -%}
  </ul>
  {% endif -%}
@@ -47,7 +47,7 @@
  {% for sub in category.subcategories -%}
  {% assign components = catalog.widgets | widget_filter: "subcategories", sub.name %}
  {% if components.size != 0 -%}
- <h2 id="{{sub.name}}">{{sub.name}}</h2>
+ <h2 id="{{sub.name | slugify}}">{{sub.name}}</h2>
  <div class="card-grid">
  {% for comp in components -%}
  <div class="card">

src/content/ui/layout/scrolling/index.md

@@ -80,7 +80,7 @@ For more information, check out
 and the [Sliver classes][].
 
 [`CustomScrollView`]: {{site.api}}/flutter/widgets/CustomScrollView-class.html
-[Sliver classes]: /ui/widgets/layout#Sliver%20widgets
+[Sliver classes]: /ui/widgets/layout#sliver-widgets
 [Using slivers to achieve fancy scrolling]: /ui/layout/scrolling/slivers
 
 ## Nested scrolling widgets