HTML

Concepts

Templates

Kibble is our static site generator: it combines a set of templates with your data to produce the HTML pages for your site.

Kibble uses the Jet Template Engine for Go and will process any file ending in .jet. If you have used other templating systems (e.g. Mustache, Handlebars, etc.), the syntax should be familiar:

<!-- Assuming you have access to a film object. -->
<h1>{{film.Title}}</h1>

Overriding

Typical approach is to find the base template in node_modules/@shift72/core-template/site and copy it to a similar folder structure in local. You can then make modifications that will override the base template.

Warning: Forward compatibility

How Tos

Understand the available properties for a template

The available objects (and their properties) will vary from template to template. For example, if you saw a template using a film object:

<h1>{{film.Title}}</h1>

... you can dump the object in the page as JSON to see what else it has:

<h1>{{film.Title}}</h1>
<code>{{film|json}}</code>

The models that Kibble uses are mapped from the equivalent APIs. In the above example, this is the model for films.

Use a custom field

If you have custom fields enabled and have added data to them, you can access them like this:

<!-- The second argument is the default value to return if the custom field is missing. -->
<p>Stars: {{film.CustomFields.GetString("film_rating", "Unrated - be the first!")}}</p>

Conditionally display an element

For example, when a film has a trailer:

<!-- Checking a collection length -->
{{if len(film.Trailers) > 0}}
  <blink>Check out the trailer: {{film.Trailers[0].URL}}</blink>
{{end}}

Strings can be checked on length or characters, so these are equivalent:

{{if len(film.CustomFields.GetString("custom_field", "")) > 0}} ... {{end}}
{{if film.CustomFields.GetString("custom_field", "") == ""}} ... {{end}}

Adding a custom page

For example, if you want to showcase your sponsors at /sponsors.html, add a new template at local/site/sponsors.html.jet:

<!-- Extend the application template to reuse the look and feel. -->
{{extends "templates/application.jet"}}
<!-- Insert your custom HTML in the application template body block. -->
{{block body()}}
  <!-- Include any CSS classes you need to style it. -->
  <main id="main" class="page">
    <!-- Sponsors HTML. -->
  </main>
{{end}}

Include a custom font

Find the base template that specifies the HTML for fonts: node_modules/@shift72/core-template/site/templates/application/head/font.jet

{{block font()}}
    <link rel="preconnect" href="https://fonts.gstatic.com">
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet">
{{end}}

Copy the file to local/site/templates/application/head/font.jet and replace with your fonts, e.g.:

{{block font()}}
    <link rel="stylesheet" href="https://use.typekit.net/your-typekit-id.css">
{{end}}

The font will be included in the application.jet and be available for you to use in your CSS as you normally would.