Origami comics

Deferring work

When you define pages in your Origami site using a colon, that work happens when the site loads.

site.ori
{
  // Use log statements so we can see when work happens.
  // Both pages will get evaluated even if only one is requested.
  page1.html: Dev.log("Page 1", "Creating page 1")
  page2.html: Dev.log("Page 2", "Creating page 2")
}
$ ori site.ori/page1.html
Creating page 1
Creating page 2
Page 1
$ 

You can defer that work by using an equals sign. Now the work only happens when you ask for that specific page!

site.ori
{
  // Use log statements so we can see when work happens.
  // Now only the requested page gets evaluated.
  page1.html = Dev.log("Page 1", "Creating page 1")
  page2.html = Dev.log("Page 2", "Creating page 2")
}
$ ori site.ori/page1.html
Creating page 1
Page 1
$ 

The equals sign is Origami shorthand for a property getter, equivalent to more verbose syntax in JavaScript.

site.ori
{
  page1.html = "Page 1"
  page2.html = "Page 2"
}
site.js
export default {
  get ["page1.html"]() {
    return "Page 1";
  },

  get ["page2.html"]() {
    return "Page 2";
  },
};

Reducing the work to load your site makes it faster to reload the specific page you’re working on!

http://localhost:5000/page1.html
Page 1
$ ori serve site.ori
Server running at http://localhost:5000. Press Ctrl+C to stop.
/page1.html
Creating page 1

Didn’t need to create page 2!

Read more: Property getters in Origami

  Comic index