Custom components

The template comes with a few placeholder data lists and matching components for common needs, but advanced users can make their own. Here's an example of doing that.
Let's say we want to have a page that lists the talks we've given at various places.
  1. 1.
    We'll start with a data file to cleanly list and manage the key details of each talk. Notice that these field names aren't something you'll see in any of the included components.
- title: A new way to analyze data
venue: University of London
length: 45
- title: Utilizing AI in research
venue: University of Colorado
length: 30
  1. 2.
    Now let's make a new component with matching parameters. In the future we could make this nicer by having a little clock icon next to minutes and maybe a link to the venue's website or location on Google Maps.
<div class="talk">
<strong>{{ include.title }}</strong>
<span>{{ include.venue }}</span>
<em>{{ include.length }} minutes</em>
  1. 3.
    We already included some bold and italics right in the HTML, but let's add a little bit more style with CSS/Sass. We'll reference the talk class we put in the HTML.
.talk {
display: inline-flex;
flex-wrap: wrap;
gap: 10px;
margin: 20px 0;
padding: 20px;
box-shadow: var(--shadow);
  1. 4.
    Now we can use the list component to easily loop through our new data and display each item with our custom component.
# Talks
{% include list.html data="talks" component="talk" %}
  1. 5.
    Hmm but wait, it didn't work completely right. Only the title shows. Unfortunately, due to a limitation of Jekyll/Liquid, any new parameters that you want to pass from data to component in the list component must be explicitly named in /_includes/list.html. The title works because there are already other components that take that parameter name, and title was already included. Just add the other two like this.
  1. 6.
    It's finally working! We've now created a custom page that uses the list component to show a custom set of data (written in human-readable form) with a custom component with custom styling.