Integrate Serbea 1.0 into Bridgetown (#440)

* Integrate Serbea 1.0 into Bridgetown

* Add additional Serbea documentation

* don't italicize erb/serbea syntax

* serbea formatting

bridgetown-core/.rubocop.yml

@@ -11,6 +11,7 @@ AllCops:
     - vendor/**/*
     - tmp/**/*
     - test/source/**/*
+    - test/resources/src/_pages/*.rb
     - lib/site_template/Rakefile
     - lib/site_template/config.ru
     - lib/site_template/config/**/*

bridgetown-core/bridgetown-core.gemspec

@@ -49,6 +49,7 @@ Gem::Specification.new do |s|
   s.add_runtime_dependency("rake",                  ">= 13.0")
   s.add_runtime_dependency("roda",                  "~> 3.46")
   s.add_runtime_dependency("rouge",                 "~> 3.0")
+  s.add_runtime_dependency("serbea",                "~> 1.0")
   s.add_runtime_dependency("terminal-table",        "~> 1.8")
   s.add_runtime_dependency("thor",                  "~> 1.1")
   s.add_runtime_dependency("tilt",                  "~> 2.0")

bridgetown-core/lib/bridgetown-core/converters/serbea_templates.rb

@@ -0,0 +1,71 @@
+# frozen_string_literal: true
+
+require "serbea"
+require "rouge/lexers/serbea"
+
+module Bridgetown
+  class SerbeaView < ERBView
+    include Serbea::Helpers
+
+    def partial(partial_name, options = {}, &block)
+      options.merge!(options[:locals]) if options[:locals]
+      options[:content] = capture(&block) if block
+
+      partial_segments = partial_name.split("/")
+      partial_segments.last.sub!(%r!^!, "_")
+      partial_name = partial_segments.join("/")
+
+      Tilt::SerbeaTemplate.new(
+        site.in_source_dir(site.config[:partials_dir], "#{partial_name}.serb")
+      ).render(self, options)
+    end
+  end
+
+  module Converters
+    class SerbeaTemplates < Converter
+      priority :highest
+      input :serb
+
+      # Logic to do the Serbea content conversion.
+      #
+      # @param content [String] Content of the file (without front matter).
+      # @param convertible [
+      #   Bridgetown::GeneratedPage, Bridgetown::Resource::Base, Bridgetown::Layout]
+      #   The instantiated object which is processing the file.
+      #
+      # @return [String] The converted content.
+      def convert(content, convertible)
+        return content if convertible.data[:template_engine].to_s != "serbea"
+
+        serb_view = Bridgetown::SerbeaView.new(convertible)
+
+        serb_renderer = Tilt::SerbeaTemplate.new(convertible.relative_path) { content }
+
+        if convertible.is_a?(Bridgetown::Layout)
+          serb_renderer.render(serb_view) do
+            convertible.current_document_output
+          end
+        else
+          serb_renderer.render(serb_view)
+        end
+      end
+
+      def matches(ext, convertible)
+        if convertible.data[:template_engine].to_s == "serbea" ||
+            (convertible.data[:template_engine].nil? &&
+              @config[:template_engine].to_s == "serbea")
+          convertible.data[:template_engine] = "serbea"
+          return true
+        end
+
+        super(ext).tap do |ext_matches|
+          convertible.data[:template_engine] = "serbea" if ext_matches
+        end
+      end
+
+      def output_ext(ext)
+        ext == ".serb" ? ".html" : ext
+      end
+    end
+  end
+end

bridgetown-core/test/resources/src/_pages/i-am-ruby.rb

@@ -0,0 +1,12 @@
+###ruby
+front_matter do
+  layout :default
+  title "I am Ruby. Here me roar!"
+end
+###
+
+markdownify <<~MARKDOWN
+
+  > Well, _this_ is quite interesting! =)
+
+MARKDOWN

bridgetown-core/test/source/src/_components/nested.erb

@@ -1,5 +1,5 @@
 <%= @level %>: <%= content %>
 <%= render (Nested.new(level: @level + 1)) do %>Level <%= @level + 1 %><% end %>
 <% if @level == 4 %>
-  <%= markdownify("**#{site.config.level} 4!!**") %>
+  <%= markdownify("**#{site.config.level} 4!!**\n") %>
 <% end %>

bridgetown-core/test/source/src/_components/nested_serb.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class NestedSerb < Bridgetown::Component
+  def initialize(level:)
+    @level = level
+    @site = Bridgetown::Current.site
+  end
+
+  def render?
+    @level < 5
+  end
+end

bridgetown-core/test/source/src/_components/nested_serb.serb

@@ -0,0 +1,5 @@
+{{ @level }}: {{ content }}
+{%@ Nested level: @level + 1 do %}Level {{ @level + 1 }}{% end %}
+{% if @level == 4 %}
+  {{ "**#{site.config.level} 4!!**" | markdownify }}
+{% end %}

bridgetown-core/test/source/src/_layouts/serblayout.serb

@@ -0,0 +1,15 @@
+---
+layout_var:
+  - test
+---
+
+<div>Test? {%= layout[:layout_var].first %}</div>
+
+<h1>{{ page.data.title }}</h1>
+
+{%= yield %}
+
+{%= partial "testing/partials", locals: { yes: "yes." } %}
+{%= render "testing/partials", yes: "YES!!" %}
+
+<footer>{%= site.time %} / {%= Bridgetown::VERSION %}</footer>

bridgetown-core/test/source/src/_partials/testing/_partials.serb

@@ -0,0 +1 @@
+A partial success? {{ yes }}

bridgetown-core/test/source/src/page_using_serb.serb

@@ -0,0 +1,49 @@
+---
+layout: serblayout
+title: I'm an Serbea Page
+page_var: 123
+---
+
+One two three: {%= page.data[:page_var] * 10 %}
+
+{%= liquid_render "test_component", param: "Liquid FTW!" %}
+
+Oats, {{ ["peas", "beans", "barley"] | array_to_sentence_string }} grow.
+
+  {%= markdownify do %}
+      ## I'm a header!
+
+      * Yay!
+      {%= "* Nifty!" %}
+  {% end %}
+
+{% test_capturing = capture do %}
+  This is how {%= "#{"cap"}turing" %} works!
+{% end %}
+
+{{ test_capturing | reverse }}
+
+<p class="{%= class_map blank: !''.empty?, truthy: true, 'more-truthy' => 'yes' == 'yes', falsy: nil, 'more-falsy' => 'no' == 'yes' %}">classes!</p>
+
+{%@ RubyComponent %}
+
+{%= render(Card.new(title: "I'm a card", footer: "I'm a footer")) do |c| %}
+  {% c.image do %}
+    <img src="test.jpg" />
+  {% end %}
+  <p>I'm the body of the {%= c.kind %}</p>
+{% end %}
+
+{%@ Card title: "Nope", footer: "CANCEL!" do %}
+  Canceled!
+{% end %}
+
+{%= render (NestedSerb.new(level: 1)) do %}Level 1{% end %}
+
+{%= render Example::OverrideComponent.new %}
+
+===
+{%= test_block_helpers do |item| %}
+{%= item[:value] %}
+{% end %}
+---

bridgetown-core/test/test_filters.rb

@@ -849,6 +849,7 @@ def to_liquid
           assert(
             ["default",
              "erblayout",
+             "serblayout",
              "example/test_layout",
              "example/overridden_layout",
              "nil",
@@ -1143,6 +1144,7 @@ def to_liquid
           assert(
             ["DEFAULT",
              "ERBLAYOUT",
+             "SERBLAYOUT",
              "EXAMPLE/TEST_LAYOUT",
              "EXAMPLE/OVERRIDDEN_LAYOUT",
              "NIL",

bridgetown-core/test/test_layout_reader.rb

@@ -12,6 +12,7 @@ class TestLayoutReader < BridgetownUnitTest
       layouts = LayoutReader.new(@site).read
       assert_equal ["default",
                     "erblayout",
+                    "serblayout",
                     "example/overridden_layout",
                     "example/test_layout",
                     "simple",

bridgetown-core/test/test_resource.rb

@@ -311,6 +311,22 @@ class TestResource < BridgetownUnitTest
       end
     end
 
+    context "a PORT (Plain Ol' Ruby Template)" do
+      should "render out as HTML" do
+        @site = resources_site
+        @site.process
+        @dest_file = File.read(dest_dir("i-am-ruby/index.html"))
+
+        assert_includes @dest_file, <<~HTML
+          <body>
+          <blockquote>
+            <p>Well, <em>this</em> is quite interesting! =)</p>
+          </blockquote>
+          </body>
+        HTML
+      end
+    end
+
     context "dotfile permalink" do
       should "get saved to destination" do
         @site = resources_site

bridgetown-core/test/test_serbea.rb

@@ -0,0 +1,58 @@
+# frozen_string_literal: true
+
+require "helper"
+
+class TestSerbea < BridgetownUnitTest
+  def setup
+    @site = fixture_site
+    @site.process
+    @serb_page = @site.resources.find { |p| p.data[:title] == "I'm an Serbea Page" }
+  end
+
+  context "Serbea page" do
+    should "render page vars" do
+      assert_includes @serb_page.output, "One two three: 1230"
+    end
+
+    should "render Liquid components" do
+      assert_includes @serb_page.output, "<span id='include-param'>Liquid FTW!</span>"
+    end
+
+    should "render Ruby/Serbea components" do
+      assert_includes @serb_page.output, "1: Level 1"
+      assert_includes @serb_page.output, "<p>** 4!!**</p>"
+    end
+
+    should "provide full suite of Liquid filters" do
+      assert_includes @serb_page.output, "Oats, peas, beans, and barley grow."
+    end
+
+    should "allow Markdown content via a helper" do
+      assert_includes @serb_page.output, "<h2 id=\"im-a-header\">I’m a header!</h2>"
+      assert_includes @serb_page.output, "<li>Yay!</li>"
+      assert_includes @serb_page.output, "<li>Nifty!</li>"
+    end
+
+    should "allow capturing into a variable" do
+      assert_includes @serb_page.output, "This is how capturing works!".reverse
+    end
+
+    should "properly handle block expressions" do
+      assert_includes @serb_page.output, "\n===\n+Value: value+\n---\n"
+    end
+  end
+
+  context "Serbea layout" do
+    should "render layout vars" do
+      assert_includes @serb_page.output, "Test? test"
+      assert_includes @serb_page.output, "<h1>I&#39;m an Serbea Page</h1>"
+
+      assert_includes @serb_page.output, "<footer>#{@site.time} / #{Bridgetown::VERSION}</footer>"
+    end
+
+    should "render partials" do
+      assert_includes @serb_page.output, "A partial success? yes."
+      assert_includes @serb_page.output, "A partial success? YES!!"
+    end
+  end
+end

bridgetown-core/test/test_site.rb

@@ -166,6 +166,7 @@ class TestSite < BridgetownUnitTest
         main.scss
         page_from_a_plugin.html
         page_using_erb.erb
+        page_using_serb.serb
         properties.html
         sitemap.xml
         static_files.html

bridgetown-website/frontend/styles/syntax.scss

@@ -15,7 +15,7 @@ $base-code-text-color: #403030;
 .highlight .x { color: $base-code-text-color } /* Other */
 .highlight .p { color: $base-code-text-color; font-weight: 500 } /* Punctuation */
 .highlight .cm { color: #8f5902; font-style: italic } /* Comment.Multiline */
-.highlight .cp { color: #8f5902; font-style: italic } /* Comment.Preproc */
+.highlight .cp { color: #8f5902; } /* Comment.Preproc */
 .highlight .c1 { color: #8f5902; font-style: italic } /* Comment.Single */
 .highlight .cs { color: #8f5902; font-style: italic } /* Comment.Special */
 .highlight .gd { color: #a40000 } /* Generic.Deleted */