feat: Super-powerful new Ruby Front Matter syntax

[jaredcwhite]

Suggested by @drush!

Instead of parsing front matter as YAML and then having to do a funky syntax to support Ruby expressions, we could simply add a native Ruby hash syntax. That way:

title: I'm a Page
categories:
 - category1
 - category2

could instead be expressed by:

{
  title: "I'm a Page",
  categories: [1, 2].map { |num| "category#{num}" }
}

For the front matter delimiter, I propose the following since it works well with Markdown syntax highlighting (in VS code anyway):

~~~ruby
{
  key: "value"
}
~~~

Content here.

If we wanted to be more in sync with the style Eleventy uses for dynamic front matter, we could do this:

---ruby
{
  key: "value"
}
---

Content here.

But that doesn't provide syntax highlighting in Markdown.

As it so happens I've already implemented this locally 🤯 (with the first option), and it works extremely well! It even evaluates lambdas in the context of the resource object so you can do stuff like this:

{
  layout: :post,
  title: "Blog post",
  also_title: ->{ data.title },
  permalink: ->{ "/sections/#{collection.label}/#{data.title.gsub(' ', '').downcase}.html" }
}

Whoa.

[jaredcwhite]

I'm thinking of an alternate front matter syntax that's suited to ERB (or Serbea) syntax. For example:

~~~<%
{
  layout: :post,
  title: "Blog post",
  also_title: ->{ data.title },
  permalink: ->{ "/sections/#{collection.label}/#{data.title.gsub(' ', '').downcase}.html" }
}
%>~~~

Content here.

---

UPDATE: not planning to further pursue the below. See instead: #284

That not only provides good syntax highlighting, but it also solves a conceptual problem that's been nagging me for a long time now. How do we make it easy to define single-file ERB-based components just like we've had Liquid components? Possible solution:

~~~<%
module Sidebar
  class Card < SiteComponent
    description "A card you can place anywhere in the sidebar."

    interface do
      title String, description: "Display a title for your component."
      kind? enum: [:one, :two, :three], default: :one
    end
  end
end
%>~~~

<div class="card">
  <strong>Hello! <%= @title %></strong>

  <% if @kind == :two %>
    I'm kind two!
  <% end %>
</div>

Then in similar fashion to the ViewComponent library:

<%= render Sidebar::Card.new(title: "I'm a title", kind: :two) %>

[jaredcwhite]

(P. S. Something's wonky about GitHub's syntax highlighting above…works great in VS Code!)

[jaredcwhite]

(made a few edits to the above proposals to standardize on ~~~)

[andreimoment]

@jaredcwhite this looks very powerful. Will the erb-format ruby frontmatter be applicable to slim-Lang templates?

[jaredcwhite]

The parsing out of the Ruby front matter is done prior to template evaluation, so in theory it should work fine but I'd want to double-check any syntax highlighting issues for editors.

[jaredcwhite]

Resolved in #285