maglev-core Add a container block

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" %>

Jan 04 '25 00:01 code-bunny

👋 @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.

Mar 03 '25 22:03 did

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.

Mar 05 '25 13:03 code-bunny

WIP here #118. It's almost Maglev v2. The branch is almost ready to be merged in the master branch but I'm working on releasing the Maglev 1.8.1 version first.

Apr 23 '25 20:04 did

That's awesome.. and why not call it v2? Might get more people on board if they see your on the second stable version.

Apr 24 '25 23:04 code-bunny

maglev-core maglev-core copied to clipboard

Add a container block

maglev-core
maglev-core copied to clipboard