"A new way to organize, edit, and deliver the web, one component at a time."
Powering New York Magazine, Vulture, The Cut, Grub Street, and The Science of Us.
Created by New York Media.
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 upcoming Clay project, an open-source content management system.
It follows semver and is stable as of v1.0.0.
npm install --save @nymdev/amphora
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('@nymdev/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('@nymdev/amphora'),
nunjucks = require('nunjucks'),
port = process.env.PORT || 3000,
env;
// add project-specific settings to your app
app.set('strict routing', true);
app.set('trust proxy', 1);
env = nunjucks.configure();
// add custom settings to your templating engine
env.addGlobal('projectName', process.env.PROJECT_NAME);
return amphora({app: app, engines: {nunjucks: env} })
.then(function (server) {
server.listen(port);
});Components in Clay have the following structure:
/component-name unique name of your component
template.html your template
schema.yml describes how the component's data is edited
All of these files are optional.
Clay Components can be made with over 30+ templating languages using multiplex-templates, such as jade, mustache, handlebars, nunjucks, react.
Name your template with an identifying extension and Clay will render it with the corresponding engine. For example, template.jade will render with Jade, and template.html will simply render unprocessed html.
Kiln uses a component's schema.yml to determine how it is edited. For example, if you want to edit the data in this template:
<article>
<h1>{{ title }}</h1>
<p>{{ story }}</p>
</article>You would create a schema.yml file that looks like:
title:
_label: Title
_placeholder: Type your title here
_has: text
story:
_placeholder: Type your life story here
_has: textareaMore details about schema.yml are available in the Kiln project.
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.