Strategy for breaking apart an html tag?

[robacarp]

I have some code which builds a calendar by iterating days. The calendar looks like this:

The blueprint I built looks like this (although I've reduced the code here for demonstration):

  def blueprint
    @presenter.days_of_the_month.each do |date|
      if date.monday?
        raw safe "<tr>"
      end

      td do
        a href: url_for(:result, date: date.to_s("%Y-%m-%d")) do
          div do
            div date.to_s("%-d")
          end

          if query_result = @presenter.result_for_date(date)
            div "#{query_result.percentage}%"
          end
        end
      end

      if date.sunday?
        raw safe "</tr>"
      end
    end
  end

The weird thing about this code is that I'm manually rendering <tr> tags with raw safe "<tr>". The crux of the problem is that the output needs contain the open or close tag conditionally depending on where in the week the loop is -- there's no easy way to "nest" each set of cells under it's own row.

I don't have any objection to this implementation, except that it seems like it abuses "raw safe".

[stephannv]

I think you could improve this grouping the dates by week, eg.

dates = Time.utc(2024, 9, 2).step(to: Time.utc(2024, 11, 2), by: 1.day)
grouped_by_week = dates.group_by(&.calendar_week)

grouped_by_week.each do |_week, week_dates|
  tr do
    week_dates.each do |date|  
      td do
        # ... code here
      end
    end
  end
end

Another solution is using grid layout, so you wouldn't need to control the rows with html structure, just an element with multiple elements inside.

<style>
  ol.calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }
  ol.calendar > li {
    aspect-ratio: 1 / 1;
  }
</style>

<ol class="calendar">
  <li>29</li>
  <li>30</li>
  <li>1</li>
  ...
  <li>31</li>
  <li>1</li>
  <li>2</li>
</li>

I'm not sure if makes sense for blueprint exposing something like open_tr, close_tr, open_div, close_div, etc. But if you really need this, at least you can extract it for dedicated methods (if you need in more places, you can add it to a module). I think raw safe is useful for these exceptional cases.

class MyComponent
  include Blueprint::HTML
  
  def blueprint
    open_tr  if date.monday?
    ... 
    close_tr if date.sunday?
  end
  
  def open_tr : Nil
    raw safe "<tr>"
  end

  def close_tr : Nil
    raw safe "</tr>"
  end
end

What do you think? Do you have any other ideas how can blueprint help in this case?

[robacarp]

All excellent ideas! I particularly like the group by calendar week strategy, that's elegant.

I actually don't think blueprint should have "begin_tag" / "end_tag" methods -- that would be a pollution. In the world where grouping is impossible for some reason, it's not terrible to break paradigm and emit a raw tag. The verbosity is a good indicator that it's a pattern that shouldn't be often used.