GoogleChrome / Devsummit
Labels
npm i
npm run build # (node 12+ required)
The src
folder uses 11ty.
Configs
/confbox.config.js
allows you to configure the start, end, and timezone of the conference.
Data
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.
Helpers
{% className cssPath, class %}
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.
{% css page, cssURL %}
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 %}
confboxAsset(url)
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.
{% confDate date, format %}
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>
{% isoDate date %}
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.