A quick introduction to the Origami programming 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.
2
If I type ori “hello”, ori displays hello.
hello
In the shell, you need to escape or nest quotes.
But to do more interesting things, you’ll want to reference files!
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.
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.
Welcome to my **new site**!
<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.
Welcome to my **new site**!
<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.
- 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.
- 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.
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
This is the README file.
You don’t have to know JavaScript to use Origami — but if you do know JavaScript, you can use it to extend what Origami can do!
export default (name) => `Hello, ${name}!`;
You can call a JavaScript function using its file name.
export default (name) => `Hello, ${name}!`;
Hello, world!
You can freely combine these ideas, so you can call a JavaScript function using data from a file.
Hello, Alice!
You can save an Origami expression in its own file so you can quickly invoke it later.
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.js(teamData.yaml/0/name)
greet.js(teamData.yaml/0/name)
But adding a slash lets us get the formula’s value!
greet.js(teamData.yaml/0/name)
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”.
a: 1
We can use a path to traverse the tree and get the value of that property.
1
To create a site, define an object with the structure and contents of the site’s tree of resources.
{
index.html: 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.
{
index.html: mdHtml(hello.md)
}
<p>Welcome to my <strong>new site</strong>!</p>
We can start a web server on our own computer to serve that tree…
{
index.html: mdHtml(hello.md)
}
Server running at http://localhost:5000. Press Ctrl+C to stop.
…and open the site in a browser to see the home page!
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.
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
<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.
To be continued!