Calling Nunjucks from Ruby

0_wtf.md

Ever wanted to render nunjucks macros from Ruby? Neither have I, until half an hour ago.

Here's a quick approach using the excellent Schmooze from Shopify.

Try it yourself

Save nunjucks.rb in a new directory then:

• npm install govuk-frontend nunjucks
• bundle init && echo "gem 'schmooze'" >> Gemfile && bundle

1_nunjucks.rb

require 'schmooze'

class ComponentRenderer
  class Nunjuckifier < Schmooze::Base
    dependencies nunjucks: 'nunjucks'
    method :render, 'nunjucks.render'
  end

  def initialize(dir)
    @nunjuckifier = ComponentRenderer::Nunjuckifier.new(dir)
  end

  def govuk_accordion(params)
    render('accordion', params)
  end

  def govuk_back_link(params)
    render('back-link', params)
  end

  def govuk_breadcrumbs(params)
    render('breadcrumbs', params)
  end

  # could probably just use some define_method magic to loop through
  # and set up all the components in one go

private

  def render(template_name, params)
    @nunjuckifier.render(template_path(template_name), params: params)
  end

  def template_path(name)
    %(node_modules/govuk-frontend/govuk/components/#{name}/template.njk)
  end
end

ComponentRenderer.new(__dir__).tap do |cr|
  # example lifted directly from https://design-system.service.gov.uk/components/accordion/
  args = {
    id: "accordion-default",
    items: [
      {
        heading: {
          text: "Writing well for the web"
        },
        content: {
          html: "<p class='govuk-body'>This is the content for Writing well for the web.</p>"
        }
      },
      {
        heading: {
          text: "Writing well for specialists"
        },
        content: {
          html: "<p class='govuk-body'>This is the content for Writing well for specialists.</p>"
        }
      },
      {
        heading: {
          text: "Know your audience"
        },
        content: {
          html: "<p class='govuk-body'>This is the content for Know your audience.</p>"
        }
      },
      {
        heading: {
          text: "How people read"
        },
        content: {
          html: "<p class='govuk-body'>This is the content for How people read.</p>"
        }
      }
    ]
  }

  puts cr.govuk_accordion(args)
end

2_output.html

<div class="govuk-accordion" data-module="govuk-accordion" id="accordion-default">
  <div class="govuk-accordion__section ">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="accordion-default-heading-1">
          Writing well for the web
        </span>
      </h2>
    </div>
    <div id="accordion-default-content-1" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-1">
      <p class='govuk-body'>This is the content for Writing well for the web.</p>
    </div>
  </div>
  <div class="govuk-accordion__section ">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="accordion-default-heading-2">
          Writing well for specialists
        </span>
      </h2>
    </div>
    <div id="accordion-default-content-2" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-2">
      <p class='govuk-body'>This is the content for Writing well for specialists.</p>
    </div>
  </div>
  <div class="govuk-accordion__section ">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="accordion-default-heading-3">
          Know your audience
        </span>
      </h2>
    </div>
    <div id="accordion-default-content-3" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-3">
      <p class='govuk-body'>This is the content for Know your audience.</p>
    </div>
  </div>
  <div class="govuk-accordion__section ">
    <div class="govuk-accordion__section-header">
      <h2 class="govuk-accordion__section-heading">
        <span class="govuk-accordion__section-button" id="accordion-default-heading-4">
          How people read
        </span>
      </h2>
    </div>
    <div id="accordion-default-content-4" class="govuk-accordion__section-content" aria-labelledby="accordion-default-heading-4">
      <p class='govuk-body'>This is the content for How people read.</p>
    </div>
  </div>
</div>