use better top-level categories

lib/docs/filters/react/clean_html_react_dev.rb

@@ -31,9 +31,7 @@ module Docs
         end
 
         # Remove styling divs while lifting children
-        styling_prefixes = [
-          'ps-', 'mx-', 'my-', 'px-', 'py-', 'mb-', 'sp-', 'rounded-'
-        ]
+        styling_prefixes = %w[ps- mx- my- px- py- mb- sp- rounded-]
         selectors = styling_prefixes.map { |prefix| "div[class*=\"#{prefix}\"]" }
         css(*selectors, 'div[class=""]', 'div.cm-line').each do |node|
           node.before(node.children).remove

lib/docs/filters/react/entries_react_dev.rb

@@ -2,21 +2,21 @@ module Docs
   class React
     class EntriesReactDevFilter < Docs::EntriesFilter
       def get_name
-        name = at_css('article h1').content
+        name = at_css('article h1')&.content
         return update_canary_copy(name)
       end
 
       def get_type
-        breadcrumb_nodes = css('a.tracking-wide')
-        is_top_level_page = breadcrumb_nodes.length == 1
-        category = if is_top_level_page
         # Category is the opened category in the sidebar
-          css('aside a.text-link div').first.content
-        else
-          breadcrumb_nodes.last.content
-        end
-        is_learn_page = path.start_with?('learn/')
-        prefix = is_learn_page ? 'Learn: ' : ''
+        category = css('a:has(> span.text-link) > div').first&.content
+        # The grey category in the sidebar
+        top_category = css('h3:has(~ li a.text-link)')
+                         .last&.content
+                         &.sub(/@.*$/, '') # remove version tag
+                         &.sub(/^./, &:upcase) # capitalize first letter
+                         &.concat(": ")
+        is_learn_page = path.start_with?('learn/') || slug == 'learn'
+        prefix = is_learn_page ? 'Learn: ' : top_category
         return update_canary_copy(prefix + (category || 'Miscellaneous'))
       end