Add a container block #110

code-bunny · 2025-01-04T00:34:55Z

A common issue we have with maglev(and all web development) is how to deal with the header, main, and footer. Especially given the requirement to have the footer be on the bottom of the screen if there isn't enough content. Currently the hack is to include a </main> in the footer blocks and a <main class="flex-grow"> in the header blocks. This means you must pick one header and one footer.

The default maglev has the data-maglev-dropzone in the main tag so we change that to a div. It would be ideal if we could ether set a specific drop zone for headers and footers outside main. Or the ability to create a brick that you can drop other bricks into it.

Of course if there is already a better solution, I would absolutely love to hear it.

For reference our base layout resembles below:

<body class="bg-gray-900 select-none">
  <div class="flex flex-col min-h-screen overflow-hidden">
    <header></header>
    <main class="flex-grow"></main>
    <footer></footer>
  </div>
</body>

Current workaround:

# header.html.erb
<%= maglev_section.wrapper_tag.div class: "text-white body-font bg-gray-900" do %>
  <%= render NavbarComponent.new maglev_section: maglev_section %>
<% end %>
<main class="flex-grow"><%# start flex grow %>

# layout.html.erb
<html>
  <body class="bg-gray-900 select-none" data-aos-easing="ease-out-back" data-aos-duration="1000" data-aos-delay="0">
    <div class="flex flex-col min-h-screen overflow-hidden" x-data data-maglev-dropzone>
      <%= render_maglev_sections %>
    </div>
  </body>
</html>

# footer.html.erb
</main><%# end flex grow %>

<%= maglev_section.wrapper_tag.footer class: "text-gray-400 body-font bg-gray-900 mt-10" do %>
<% end %>

Edit:

After a little digging it looks like this is most of the way there:

  <body class="bg-gray-900 select-none" data-aos-easing="ease-out-back" data-aos-duration="1000" data-aos-delay="0">
    <div class="flex flex-col min-h-screen overflow-hidden" x-data data-maglev-dropzone>
      <%# These should be in some helper if it turns out good %>
      <% header_section = maglev_page_sections.select { |section| section["type"] =~ /header$/ } %>
      <% footer_section = maglev_page_sections.select { |section| section["type"] =~ /footer$/ } %>
      <% remaining_sections = maglev_page_sections.reject do |section| 
        section["type"] =~ /header$/ || section["type"] =~ /footer$/
      end %>

      <%= render_maglev_sections page_sections: header_section %>
      <main class="flex-grow">
        <%= render_maglev_sections page_sections: remaining_sections %>
      </main>
      <%= render_maglev_sections page_sections: footer_section %>
    </div>
  </body>

Though this could be improved if sections where taggable in some way or in some other way identifiable, for instance:

<%= render_maglev_sections page_sections_tagged: "header" %>
<%= render_maglev_sections page_sections_tagged: "content" %>
<%= render_maglev_sections page_sections_tagged: "footer" %>

The text was updated successfully, but these errors were encountered:

did · 2025-03-03T22:17:01Z

👋 @code-bunny, I'm working on a POC for a client which might be what you're looking for.

Here how it works:

we add a new property for a section named scope. Ex: header, footer, aside, ..etc. A section can't have more than one scope.
in our layout, we filter the sections based on their scope property (in their definition) -> very close to what you're doing
when you persist a page, the content of scoped section is saved in a new model (Maglev::SectionContentStore)
a maglev page belongs to a layout which is both a new HTML/ERB template -> you don't need it.

The last missing part is in the editor UI when you add a section which has to be added in a specific "region" / "scope"..

I'm still thinking about a better / simpler way of handling this use case.

code-bunny · 2025-03-05T13:46:58Z

That does sound like what I am looking for. My next site will be merging Spree to a Maglev CMS which will be fun, I look forward to trying out any new features you add.

did added enhancement New feature or request question Further information is requested labels Jan 9, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a container block #110

Add a container block #110

code-bunny commented Jan 4, 2025 •

edited

Loading

did commented Mar 3, 2025

code-bunny commented Mar 5, 2025

Add a container block #110

Add a container block #110

Comments

code-bunny commented Jan 4, 2025 • edited Loading

did commented Mar 3, 2025

code-bunny commented Mar 5, 2025

code-bunny commented Jan 4, 2025 •

edited

Loading