<h1>Workbook</h1>

<% if has_items %>
  <div class="collection">
    <% items.each do |item| %>
      <a class="collection-item" href="<%= item.path %>"><%= item.title %></a>
    <% end %>
  </div>
<% else %>
  <h2>Usage</h2>

  <p>
    This page lists <code>.md</code>, <code>.html</code>, and <code>.cr</code> files in <code>./playground</code> folder.
  </p>

  <p>
    Simply place crystal code blocks in
    <code>&lt;pre class="playground">&lt;/pre></code>
    tags. Or use <code>```playground</code> in <code>.md</code> files.
  </p>

  <p>For example, either</p>
  <p><pre><code>&lt;pre class="playground">
  [0x679bff14d, 0x2a4, 0x5cd88d86, 0xbe0ed]
    .map(&.to_s(36)).join(" ")
&lt;/pre></pre></code></p>

  <p>or</p>

  <p><pre><code>```playground
  [0x679bff14d, 0x2a4, 0x5cd88d86, 0xbe0ed]
    .map(&.to_s(36)).join(" ")
```</pre></code></p>

  <p>becomes</p>

  <pre class="playground">
  [0x679bff14d, 0x2a4, 0x5cd88d86, 0xbe0ed]
    .map(&.to_s(36)).join(" ")
  </pre>
<% end %>
