npm i
npm run build # (node 12+ required)
The src
folder uses 11ty.
/confbox.config.js
allows you to configure the start, end, and timezone of the conference.
All templates have access to the following:
conf.utcOffset
- The offset of the conference from the UTC timezone in milliseconds.conf.start
- Start of the conference as a timestamp.conf.end
- End of the conference as a timestamp.
CSS files are processed as CSS Modules. Within a template, reference classnames like this:
{% className cssPath, class %}
…and it will output the transformed class name. Eg:
{% set css = "/_includes/talk/style.css" %}
<h2 class="{% className css, 'talk-header' %}">Building offline-first apps</h2>
<div class="{% className css, 'talk-description' %}">
…
</div>
In the example above, set
is used to avoid repeating the path to the CSS.
This will output a <link>
pointing to the cssURL
unless it's been included already for the current page. This means you can use an include multiple times without loading the CSS multiple times.
page
- This is the page object available in every template.cssURL
- CSS url.
Example:
{% set css = "/_includes/talk/style.css" %}
{% css page, css %}
In templates and CSS, references assets via confboxAsset('/path/to/asset.jpg')
. This will be replaced with the hashed name of the asset.
<link rel="stylesheet" href="confboxAsset('/_includes/talk/style.css')">
.whatever {
background: url('confboxAsset(asset.jpg)');
}
Assets ending .js
will be bundled together using Rollup.
This will take a date
and format it for the timezone of the conference (as set in /confbox.config.js
).
date
- The date to display. This can be aDate
object or a timestamp.format
- A formatting string as used by date-and-time.
<p>The conference starts {% confDate conf.start, 'MMMM DD' %}</p>
Returns an ISO 8601 version of a date. This is suitable for <time datetime>
and other machine-readable formats like iCal.
date
- The date to display. This can be aDate
object or a timestamp.