AlexandraMMR/devsummit

Chrome Dev Summit Conference Site

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 a Date 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 a Date object or a timestamp.