Reorganize content on ecosystem page

Author: marcoroth

app/components/page/card_section_component.html.erb

@@ -0,0 +1,15 @@
+<h2 class="text-2xl font-bold mt-12 mb-6">
+  <%= @title %>
+</h2>
+
+<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 mb-4">
+  <% @resources.each do |resource| %>
+    <%= render Page::ResourceCardComponent.new(resource: resource) %>
+  <% end %>
+</div>
+
+<% if @all_url %>
+  <%= link_to @all_url do %>
+    View all <span class="tracking-normal text-white ml-1">-&gt;</span>
+  <% end %>
+<% end %>

app/components/page/card_section_component.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class Page::CardSectionComponent < ViewComponent::Base
+  def initialize(title:, resources:, limit: 3, all_url: nil)
+    @title = title
+    @resources = resources
+    @limit = limit
+    @all_url = all_url
+  end
+end

app/components/page/resource_card_component.html.erb

@@ -0,0 +1,9 @@
+<% if image = @resource.data.dig("image") %>
+  <%= link_to @resource.request_path, class: "h-48 flex items-center justify-center bg-black hover:opacity-75 border border-gray-700 rounded-lg w-full overflow-hidden" do %>
+    <%= image_tag image_path(image) %>
+  <% end %>
+<% else %>
+  <%= link_to @resource.request_path, class: "p-6 h-48 flex items-center justify-center bg-gray-950 hover:bg-gray-900 border border-gray-700 rounded-lg w-full font-bold text-2xl text-center" do %>
+    <%= @resource.data.fetch("title") %>
+  <% end %>
+<% end %>

app/components/page/resource_card_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class Page::ResourceCardComponent < ViewComponent::Base
+  def initialize(resource:)
+    @resource = resource
+  end
+end

app/content/models/ecosystem_model.rb

@@ -1,4 +1,4 @@
 class EcosystemModel < Sitepress::Model
   collection glob: "**/ecosystem/*.html*"
-  data :title, :subtitle
+  data :title, :subtitle, :order
 end

app/content/pages/ecosystem.html.erb

@@ -5,11 +5,11 @@ title: Ecosystem
 <%= render Page::ContainerComponent.new(page: current_page) do |page| %>
   <% page.with_title(title: current_page.data.fetch("title")) %>
 
-  <div class="grid grid-cols-3">
-    <% EcosystemModel.all.sort_by(&:title).each do |page| %>
-      <div class="flex flex-col gap-x-4">
-        <h2 class="font-bold text-lg underline"><%= link_to page.title, page.request_path %></h2>
-      </div>
-    <% end %>
-  </div>
+  <% EcosystemModel.all.sort_by(&:order).each do |page| %>
+    <%= render Page::CardSectionComponent.new(
+      title: page.title,
+      resources: site.resources.glob("#{page.page.request_path}/*.html.erb".delete_prefix("/")).sort_by { |site| site.data.fetch("title") }.take(3),
+      all_url: page.request_path
+    ) %>
+  <% end %>
 <% end %>

app/content/pages/ecosystem/components.html.erb

@@ -1,10 +1,16 @@
 ---
 title: Components
+order: 7
 ---
 
 <%= render Page::ContainerComponent.new(page: current_page) do |page| %>
   <% page.with_title(title: current_page.data.fetch("title")) %>
 
   https://github.com/excid3/tailwindcss-stimulus-components<br/>
   https://www.stimulus-components.com<br/>
+
+  <%= render Page::CardSectionComponent.new(
+    title: current_page.data.fetch("title"),
+    resources: site.resources.glob("#{current_page.request_path}/*.html.erb".delete_prefix("/")).sort_by { |site| site.data.fetch("title") },
+  ) %>
 <% end %>

app/content/pages/ecosystem/components/stimulus-components.html.erb

@@ -0,0 +1,10 @@
+---
+title: Stimulus Components
+---
+
+<%= render Page::ContainerComponent.new(page: current_page) do |page| %>
+  <% page.with_title(title: current_page.data.fetch("title")) %>
+
+  <%= link_to "stimulus-components", "https://github.com/stimulus-components", target: :blank %><br/>
+  <%= link_to "Documentation", "https://www.stimulus-components.com", target: :blank %><br/>
+<% end %>

app/content/pages/ecosystem/components/tailwindcss-stimulus-components.html.erb

@@ -0,0 +1,10 @@
+---
+title: Tailwindcss Stimulus Components
+---
+
+<%= render Page::ContainerComponent.new(page: current_page) do |page| %>
+  <% page.with_title(title: current_page.data.fetch("title")) %>
+
+  <%= link_to "excid3/tailwindcss-stimulus-components", "https://github.com/excid3/tailwindcss-stimulus-components", target: :blank %><br/>
+  <%= link_to "Documentation", "https://excid3.github.io/tailwindcss-stimulus-components/", target: :blank %><br/>
+<% end %>

app/content/pages/ecosystem/core.html.erb

@@ -1,7 +1,13 @@
 ---
 title: Core Libraries
+order: 1
 ---
 
 <%= render Page::ContainerComponent.new(page: current_page) do |page| %>
   <% page.with_title(title: current_page.data.fetch("title")) %>
+
+  <%= render Page::CardSectionComponent.new(
+    title: current_page.data.fetch("title"),
+    resources: site.resources.glob("#{current_page.request_path}/*.html.erb".delete_prefix("/")).sort_by { |site| site.data.fetch("title") },
+  ) %>
 <% end %>