Introduction

illustration of an amphora

"A new way to organize, edit, and deliver the web, one component at a time."

Powering New York Magazine, Vulture, The Cut, Grub Street. Created by New York Media.

Table of Contents

• Introduction

• Installation

• Usage

• Contribution

• Advanced Topics

Introduction

Amphora is a mixin for Express that:

• Composes components into renderable pages

• Uses any key-value store of your choice (e.g., Mongo, Redis, LevelDB, etc.)

• Provides an API for managing instances of components, uris, and pages

Components are reusable, configurable, self-contained bits of the web.

Amphora is a core part of New York Media's Clay project, an open-source content management system.

It follows semver and is stable as of v1.0.0.

Installation

npm install --save amphora

Usage

Clay separates concerns into two main areas: components and sites. Create two new directories in your project:

/components  (where your custom components live)
/sites       (for site-specific settings, routes, and assets)

In your project's main server file (e.g. app.js), instantiate a new Amphora instance.

var amphora = require('amphora'),
  port = process.env.PORT || 3000;

return amphora()
  .then(function (server) {
    server.listen(port);
  });

For additional configuration, you may pass in an Express app / router. You can also override the default templating engine(s) with your own.

var app = require('express')(),
  amphora = require('amphora'),
  amphoraHtml = require('amphora-html'),
  port = process.env.PORT || 3000,
  env;

// add project-specific settings to your app
app.set('strict routing', true);
app.set('trust proxy', 1);

// add custom settings to your templating engine
env.addGlobal('projectName', process.env.PROJECT_NAME);

return amphora({
  app: app,
  renderers: {
    default: 'html',
    html: amphoraHtml
  }
}).then(function (server) {
  server.listen(port);
});

How to create a component

Components in Clay have the following structure:

/component-name     unique name of your component
    template.handlebars   your template
    schema.yml            describes how the component's data is edited

All of these files are optional.

How to create a template

The template you create is dependent on whichever renderer you'd like to use. The Clay Core team supports an HTML renderer using Handlebars template, but the choice is yours. Either request a renderer or build one on your own!

How to create a schema

Kiln uses a component's schema.yml to determine how it is edited. Visit the Kiln wiki for examples of how to write schema files for your components.

Contribution

Fork the project and submit a PR on a branch that is not named master. We use linting tools and unit tests, which are built constantly using continuous integration. If you find a bug, it would be appreciated if you could also submit a branch with a failing unit test to show your case.

Advanced Topics

• New Concepts For Developers and Designers

• Bootstrapping Data

• Routing

• Plugins

• Subsites