Add content sections to trending feed

assets/css/default.css

@@ -600,3 +600,20 @@ hr {
     display: none;
   }
 }
+
+.category {
+  margin: 3em 0px 4em 0px;
+}
+
+.category .heading > p {
+  display: inline-block;
+}
+
+.category .badge.featured {
+  background: #005aa7;
+  color: white;
+  padding: 3px 4px 1px 4px;
+  border-radius: 5px;
+  font-size: 14px;
+  margin-left: 10px;
+}

src/invidious/trending.cr

@@ -27,7 +27,7 @@ def fetch_trending(trending_type, region, locale)
   end
 
   initial_data = extract_initial_data(trending)
-  trending = extract_videos(initial_data)
+  trending = extract_items(initial_data)
 
   return {trending, plid}
 end

src/invidious/views/trending.ecr

@@ -37,9 +37,36 @@
 </div>
 
 <div class="pure-g">
-    <% trending.each_slice(4) do |slice| %>
+    <% trending.each do |category| %>
-            <% slice.each do |item| %>
+        <% if category.is_a? Category %>
+            <%# We don't need to differinate between a category that only
+            # contains videos and no metadata %>
+            <% if category.title.empty? %>
+                <% category.contents.each do |item| %>
                     <%= rendered "components/item" %>
                 <% end %>
+            <% else %>
+                <div class="category pure-u-1">
+                    <div class="category-heading h-box">
+                        <p> <%= category.title %> </p>
+                        <% if (badges = category.badges).is_a? Array %>
+                            <% badges.each do | badge |%>
+                                <% if badge[0] == "BADGE_STYLE_TYPE_FEATURED" %>
+                                    <div class="badge featured">
+                                        <span> <%=badge[1] %><span>
+                                    </div>
+                                <% end %>
+                            <% end %>
+                        <% end %>
+                    </div>
+
+                    <div class="pure-g">
+                        <% category.contents.each do |item| %>
+                            <%= rendered "components/item" %>
+                        <% end %>
+                    </div> 
+                </div>
+            <% end %>
+        <% end %>
     <% end %>
 </div>