Origami comics

File extensions

The Origami dialect of JavaScript can associate a file extension with a function that unpacks that kind of file.

movies.yaml
kiki:
  title: Kiki's Delivery Service
  year: 1989
mononoke:
  title: Princess Mononoke
  year: 1997
spirited:
  title: Spirited Away
  year: 2001
heron:
  title: The Boy and the Heron
  year: 2023
$ ori movies.yaml/spirited/title
Spirited Away
$

Origami comes with file extension handlers for common file types like .json, .yaml, .csv, .tsv, even the metadata in .jpeg files.

$ ls
bunnies.tsv   meissner.jpeg
$ ori bunnies.tsv
breed	fur	color	origin
American Fuzzy Lop	Long	Various	United States
Belgian Hare	Short	Black, Chestnut	Belgium
Meissner Lop	Short	Various	Germany
Thrianta	Short	Chestnut	Netherlands
$ ori bunnies.tsv[1]
breed: Belgian Hare
fur: Short
color: Black, Chestnut
origin: Belgium
$ ori meissner.jpeg/exif/ModifyDate
Thu Jan 12 2017 05:00:00 GMT-0800 (Pacific Standard Time)
$ ori meissner.jpeg/caption
Look at those ears!
$

Origami uses this to add support for additional template languages like Handlebars and Liquid.

countries.hbs
<ul>
  {{#each this}}
    <li>{{flag}} {{name}}</li>
  {{/each}}
</ul>

$ ori countries.hbs countries.yaml
<ul>
    <li>🇫🇷 France</li>
    <li>🇬🇷 Greece</li>
    <li>🇮🇹 Italy</li>
    <li>🇵🇹 Portugal</li>
    <li>🇪🇸 Spain</li>
</ul>
$

You can define your own file extension handlers for the file types that come up in your projects!

user_handler.js
export default {
  unpack: (packed) => {
    const text = new TextDecoder().decode(packed);
    return JSON.parse(text); // Treat as JSON for this example
  },
};
alice.user
{
  "name": "Alice",
  "location": "Jakarta"
}
$ ori alice.user/name
Alice
$

Read more: Working with file types in Origami

  Comic index