Origami Comics

A quick introduction to the Origami expression language!

We can start by trying the Origami language in the terminal, using a command-line interface called ori.

The ori tool evaluates an expression in Origami, so if I type ori 1 + 1, it displays 2.

$ ori 1 + 1

Origami is a dialect of JavaScript expressions.

If I type ori “hello”, ori displays hello.

$ ori \"hello\"

hello

In the shell, you need to escape or nest quotes.

But to do more interesting things, you’ll want to reference files!

hello.md

Welcome to my **new site**!

This is an example of a markdown file, a common way to write text with formatting.

Think of your files as a spreadsheet… but instead of using A1, B2 style cell references, you refer to files with paths and file names.

$ ori hello.md

Welcome to my **new site**!

Unlike most programming languages, Origami lets you use periods and hyphens in names!

Where a spreadsheet has built-in math functions, Origami has functions for transforming data for use in sites.

Filtering
Grouping
JSON output
Mapping
Paginating
Parsing
RSS feeds
Redirects
Resizing
Sitemaps
Sorting
Tags
YAML output

…

We can pass our markdown file to a function that transforms it to HTML.

hello.md

Welcome to my **new site**!

$ ori "Origami.mdHtml(hello.md)"

<p>Welcome to my <strong>new site</strong>!</p>

To avoid quoting parentheses in the shell, we can omit them! Origami figures out where they would be.

hello.md

Welcome to my **new site**!

$ ori Origami.mdHtml hello.md

<p>Welcome to my <strong>new site</strong>!</p>

In addition to the file system, Origami can work with other tree structures, like objects in memory, data in files, or content on a server.

$ ori teamData.yaml

- name: Alice
        image: van.jpg
        location: Honolulu
        bio: After working as a manager for numerous startups over the years, I
          decided to take the plunge and start a business of my own.
      - name: Bob
        image: kingfisher.jpg
        location: Los Angeles
        bio: Having been an art student for 11 years, I constantly explore various
          disciplines to incorporate artistic pursuits into product design studies.
      - name: Carol
        image: venice.jpg
        location: Venice
        bio: I open the line of communication between clients, customers, and
          businesses to get projects done.

Just like your OS associates file extensions with apps, Origami associates extensions with handlers that can traverse into data.

teamData.yaml

- name: Alice
        image: van.jpg
        location: Honolulu
        bio: After working as a manager for numerous startups over the years, I
          decided to take the plunge and start a business of my own.
      - name: Bob
        image: kingfisher.jpg
        location: Los Angeles
        bio: Having been an art student for 11 years, I constantly explore various
          disciplines to incorporate artistic pursuits into product design studies.
      - name: Carol
        image: venice.jpg
        location: Venice
        bio: I open the line of communication between clients, customers, and
          businesses to get projects done.

$ ori teamData.yaml[0].name

Alice

Origami resolves names using a scope like other programming languages, but the scope extends to the file system.

      myProject/
        package.json
        README.md
        src/
          hello.md
          teamData.yaml

If you were in the src folder, the project’s top-level files would also be in scope.

If I ask for a file that doesn’t exist in the current folder, Origami searches up the folder hierarchy until it finds the file.

      myProject/
        package.json
        README.md
        src/
          hello.md
          teamData.yaml

$ ori README.md

This is the README file.

Origami expressions are often all you’ll need, but you can also extend what Origami can do with JavaScript.

greet.js

export default (name) => `Hello, ${name}!`;

You can call a JavaScript function using its file name.

greet.js

export default (name) => `Hello, ${name}!`;

$ ori greet.js \"world\"

Hello, world!

You can freely combine these ideas, so you can call a JavaScript function using data from a file.

$ ori greet.js teamData.yaml[0].name

Hello, Alice!

You can save an Origami expression in its own file so you can quickly invoke it later.

greet.ori

greet.js(teamData.yaml[0].name)

Origami files have a .ori extension.

This kind of file is like a spreadsheet cell with a formula. If we ask for this file, we just get the formula back…

greet.ori

greet.js(teamData.yaml[0].name)

$ ori greet.ori

greet.js(teamData.yaml[0].name)

But adding a slash lets us get the formula’s value!

greet.ori

greet.js(teamData.yaml[0].name)

$ ori greet.ori/

Hello, Alice!

Origami is good for creating lots of things but especially websites. You can think of a site as a tree of resources.

You can define a tree with an object expression. This tiny object has a single property called “a”.

$ ori { a: 1 }

a: 1

We can use a path to traverse the tree and get the value of that property.

$ ori { a: 1 }/a

To create a site, define an object with the structure and contents of the site’s tree of resources.

site.ori

{
        index.html: Origami.mdHtml(hello.md)
      }

This little site has a single page called index.html, the name given to the default page.

When this tree is served as a site, each path the user visits will return the resource at that path.

site.ori

{
        index.html: Origami.mdHtml(hello.md)
      }

$ ori site.ori/index.html

<p>Welcome to my <strong>new site</strong>!</p>

We can start a web server on our own computer to serve that tree…

site.ori

{
        index.html: Origami.mdHtml(hello.md)
      }

$ ori serve site.ori

Server running at http://localhost:5000. Press Ctrl+C to stop.

…and open the site in a browser to see the home page!

localhost:5000

Welcome to my new site!

To prepare the site for public use, we can copy it to plain static files that won’t need to change often.

$ ori copy src/site.ori, ./build

These static files are all the resources your site needs, and you can host them anywhere on the internet!

      myProject/
        build/
          index.html
        package.json
        src/
          hello.md
          site.ori

$ ori build/index.html

<p>Welcome to my <strong>new site</strong>!</p>

Some file hosting services are free!

Thanks for watching! To learn more about using Origami to create websites, check out the documentation.

weborigami.org

To be continued!