Origami comics

Maps transform bulk content

To transform bulk content and data into a presentable form for your site, use a map!

post1.md
**Hey everyone!**
Welcome to my very first blog post from my new home in the woods!

Markdown is easy to edit, but your site needs HTML.

Suppose you have a function that transforms a single item of content or data.

post1.md
**Hey everyone!**
Welcome to my very first blog post from my new home in the woods!
$ ori Origami.mdHtml post1.md
<p><strong>Hey everyone!</strong>
Welcome to my very first blog post from my new home in the woods!</p>
$

This one transforms markdown to HTML.

Origami’s Tree.map builtin can apply that function to every item in a collection, returning a new collection of transformed items.

site.ori
{
  posts/ = Tree.map(markdown/, Origami.mdHtml)
}
$ ori site.ori/
posts:
  post1.html: |
    <p><strong>Hey everyone!</strong>
    Welcome to my very first blog post from my new home in the woods!</p>
  post2.html: >
    <p>When I first decided to move off-grid, I knew I wanted to build my own
    home.</p>
  post3.html: >
    <p>The interior is cozy and functional, designed to make the most of the
    small space.</p>
$

File names changed too!

The same map operation can generate a list in an index page, the pages in an area, or items in a data feed.

index.ori.html
${ Tree.map(_, (post, key) => Tree.indent`
  <li>
    <a href="${ key }">
      ${ post }
    </a>
  </li>
`)}

$ ori site.ori/index.html
<li>
  <a href="post1.html">
    <p><strong>Hey everyone!</strong>
    Welcome to my very first blog post from my new home in the woods!</p>
  </a>
</li>
<li>
  <a href="post2.html">
    <p>When I first decided to move off-grid, I knew I wanted to build my own home.</p>
  </a>
</li>
<li>
  <a href="post3.html">
    <p>The interior is cozy and functional, designed to make the most of the small space.</p>
  </a>
</li>
$

Read more: Tree.map builtin function

  Comic index