Variables and Helpers

Pages are rendered as an ERB templates before being (optionally) processed as markdown, and Lookbook makes a number of variables and helpers available that can be used to add dynamic content.

Variables

All pages have the following variables available for use in the page template:

page	The current page object
next_page	The next page object (if available)
previous_page	The previous page object (if available)
pages	Array of all available pages

Page objects have access to the frontmatter variables for that page:

The page title is <%= page.title %>
Our brand color hex value is <%= page.data[:brand_colors][:red] %>

Helpers

The following helpers are available to use in your page templates.

page_path

Returns the path to a page.

page_path(<page>)

<page>

The page to generate a path to. Can be a page id (Symbol) or a Page object instance. Page ids can be specified in the YAML frontmatter for that page.

Type: Symbol | Page

Visit the [about page](<%= page_path :about %>)
Go to the [next page](<%= page_path @next_page %>)

embed

Generates a live embed of a component preview.

See the docs on embedding previews for more info.

embed(<preview>, <example>, <opts?>)

<preview>	The Preview class to generate an embed for - eg. `Elements:ButtonComponentPreview` Type: Class
<example>	The name of the example method to embed - eg. `:default` Type: Symbol
<opts?>	Optional hash of options, including for specifying params. Type: Hash

<!-- Basic embed -->
<%= embed Elements:ButtonComponentPreview, :default %>

<!-- With param values set -->
<%= embed Elements:ButtonComponentPreview, :default, params: {
  icon: "plus",
  text: "Add new"
} %>

code

Adds syntax highlighting to blocks of code.

The code helper is an alternative to using markdown code blocks for templates that have markdown parsing disabled, or for when more control is required.

code(<lang?>) { <block_content> }

<lang?>

The language the code is written in. Defaults to :ruby

Type: Symbol

<!-- Highlight Ruby code -->
<%= code do %>
  # Ruby code to highlight goes here
<% end %>

<!-- Highlight a different language (HTML) -->
<%= code :html do %>
  <!-- HTML code to highlight goes here -->
<% end %>

icon

Displays an icon.

Lookbook uses icons from the Feather Icons set and a full list of available icon names can be found on that site.

icon(<icon_name>, <opts?>)

<icon_name>	The name of the icon to display Type: Symbol
<opts?>	Hash of options Type: Hash

<%= icon :trash %>
<%= icon :camera, size: 6, style: "color: red;" %>

Variables
Helpers