Documentation page improvements (#420)

* Added status frontmatter to documentation pages

* Added status to resource card component

For displaing the state of a page, saving end users a click and frustration/assumption the site is empty

* Added status to frameworks page

* Displaying core techologies at the top of the documentation page

* Added missing status to frameworks without page content

* Update resource_card_component.html.erb

Author: TeriyakiBomb

app/components/page/resource_card_component.html.erb

@@ -3,7 +3,12 @@
     <%= image_tag image_path(image) %>
   <% end %>
 <% else %>
-  <%= link_to @resource.request_path, class: "p-6 h-24 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") %>
+  <%= link_to @resource.request_path, class: "p-6 h-48 flex flex-col space-y-2 items-center justify-center bg-gray-950 hover:bg-gray-900 border border-gray-700 rounded-lg w-full" do %>
+    <span class="font-bold text-2xl text-center"><%= @resource.data.fetch("title") %></span>
+
+    <% status = @resource.data.dig("status") %>
+    <% if status == "missing" %>
+    <span class="bg-yellow-500 text-black py-0.5 px-1.5 rounded-lg text-xs">Coming soon</span>
+    <% end %>
   <% end %>
 <% end %>

app/content/models/documentation_model.rb

@@ -1,4 +1,12 @@
 class DocumentationModel < Sitepress::Model
   collection glob: "**/documentation/*.html*"
   data :title
+
+  def self.core_technologies
+    all.filter { |page| page.data["core"] == true }.sort_by(&:title)
+  end
+
+  def self.third_party_technologies
+    all.filter { |page| page.data["core"] != true }.sort_by(&:title)
+  end
 end

app/content/models/framework_model.rb

@@ -1,6 +1,6 @@
 class FrameworkModel < Sitepress::Model
   collection glob: "**/frameworks/*.html*"
-  data :title, :framework, :language, :description, :icon_class, :image
+  data :title, :framework, :language, :description, :icon_class, :image, :status
 
   def self.grouped_by_language
     all.sort_by(&:title).group_by(&:language).sort_by { |language, _| (language == "Ruby") ? "" : language }

app/content/pages/documentation.html.erb

@@ -5,6 +5,6 @@ title: Documentation
 <%= render Page::ContainerComponent.new(page: current_page) do |page| %>
   <% page.with_title(title: current_page.data.fetch("title")) %>
 
-  <% pages = DocumentationModel.all.sort_by(&:title) %>
-  <%= render Page::CardSectionComponent.new(resources: pages) %>
+  <%= render Page::CardSectionComponent.new(resources: DocumentationModel.core_technologies) %>
+  <%= render Page::CardSectionComponent.new(resources: DocumentationModel.third_party_technologies) %>
 <% end %>

app/content/pages/documentation/formulus.html.erb

@@ -1,5 +1,6 @@
 ---
 title: Formulus
+status: missing
 ---
 
 <%= render Page::ContainerComponent.new(page: current_page) do |page| %>

app/content/pages/documentation/stimulus-use.html.erb

@@ -1,5 +1,6 @@
 ---
 title: Stimulus Use
+status: missing
 ---
 
 <%= render Page::ContainerComponent.new(page: current_page) do |page| %>

app/content/pages/documentation/stimulus.html.erb

@@ -1,5 +1,7 @@
 ---
 title: Stimulus
+status: done
+core: true
 ---
 
 <%= render Page::ContainerComponent.new(page: current_page) do |page| %>

app/content/pages/documentation/strada.html.erb

@@ -1,5 +1,7 @@
 ---
 title: Strada
+status: done
+core: true
 ---
 
 <%= render Page::ContainerComponent.new(page: current_page) do |page| %>

app/content/pages/documentation/turbo-boost.html.erb

@@ -1,5 +1,6 @@
 ---
 title: Turbo Boost
+status: missing
 ---
 
 <%= render Page::ContainerComponent.new(page: current_page) do |page| %>

app/content/pages/documentation/turbo-morph.html.erb

@@ -1,5 +1,6 @@
 ---
 title: Turbo Morph
+status: missing
 ---
 
 <%= render Page::ContainerComponent.new(page: current_page) do |page| %>