html is so 2008

10x.erb

<%= render ArticleComponent.new do %>
  <%= render StackComponent.new do %>
    <%= render BoxComponent.new(as: :header) do %>
      <%= render HeaderComponent.new.with_content(resource.data.title) %>
      <%= render TextComponent.new(tone: :secondary) do %>
        <%= render LinkComponent.new(href: "/").with_content("Andrew Mason") %>
        • <%= pretty_date resource.data.updated_at %>
        • <%= reading_time resource.content %> Minute Read
      <% end %>
    <% end %>
    <%= render ProseComponent.new(classes: "pt-8") do %>
      <%= yield %>
    <% end %>
    <%= render BoxComponent.new(as: :footer) do %>
      <%= render DescriptionList::Component.new do |dl| %>
        <%= dl.item(title: "Links", col_span: "2") do %>
          <%= render ListComponent.new do |l| %>
            <%= l.item { render(LinkComponent.new(href: twitter_discuss_link(resource)).with_content("Discuss on Twitter").with_variant(:external)) } %>
            <%= l.item { render(LinkComponent.new(href: resource.data.dev_to_url).with_variant(:external).with_content("Read on DEV")) } if resource.data.dev_to_url %>
            <%= l.item { render(LinkComponent.new(href: github_edit_link(resource)).with_variant(:external).with_content("Edit on GitHub")) } %>
          <% end %>
        <% end %>
        <%= dl.item(title: "Published On").with_content("#{pretty_date(resource.data.date) || "-"} ") %>
        <%= dl.item(title: "Updated On").with_content("#{pretty_date resource.data.updated_at} ") %>
        <%= dl.item(title: "Tags", col_span: "2") do %>
          <% resource.data.tags.each do |tag| %>
            <%= render BadgeComponent.new.with_content(tag) %>
          <% end %>
        <% end %>
      <% end %>
    <% end %>
  <% end %>
<% end %>