SpaceClub!

Events

SpaceClub! has a full event system with support for dates, times, locations, upcoming/past separation, featured events, galleries, and links to recap posts.

Each event is a Markdown file in the src/events/ folder.

Creating an Event

  1. Copy src/events/template.md and rename it (e.g. src/events/open-day.md).
  2. Edit the front matter and content:
---
title: Open Day
description: Come visit us and see what we're all about!
eventDate: 2026-05-15
startTime: 10:00 AM
endTime: 3:00 PM
location: "Community Hall\n123 Main Street, Springfield"
image: /assets/images/open-day.jpg
---
 
We're hosting an open day! Come along and meet the team.
 
## What to Expect
 
- Tours of the space
- Free refreshments
- Live demos
  1. Save the file. The event will appear on the events page and, if upcoming, on the homepage.

Front Matter Properties

PropertyRequiredDescription
titleYesThe event name.
descriptionRecommendedA short summary shown on event cards and in search results. It also appears in search result previews and in SEO meta tags.
eventDateYesThe event date in YYYY-MM-DD format (e.g. 2026-05-15). Used for sorting and determining upcoming vs. past.
startTimeNoThe start time (e.g. 10:00 AM, 14:00). Displayed on the event page and cards.
endTimeNoThe end time. Also used to determine if an event is still “upcoming” - an event is considered past once its end time has passed. If not set, the event is considered past after midnight on the event date.
locationNoThe venue or address. Supports multi-line with \n - use quotes around the value.
imageNoPath to a header image shown on the event card (e.g. /assets/images/open-day.jpg).
preview_imageNoA separate image for search result previews.
featuredNoSet to true to mark as a featured event.
recapPostNoURL of a related blog post (e.g. /posts/open-day-recap/). Displays a “Read the recap post” link on the event page.
galleryNoPath to a folder of images to show as a gallery. See Gallery.
hideEventDetailsNoSet to true to hide the date/time/location block on the event page (useful for non-traditional event pages).

Title and description matter beyond the event page itself. The title shows up in browser tabs, search results, and when links are shared. The description appears in search result previews and SEO meta tags. Even if you haven’t set up search yet, writing a clear title and description for every event is good practice from the start. See Search for how the search system uses these fields.

How Events Are Sorted

Events are automatically sorted and categorised:

  • Upcoming events - Events whose end time (or end of day if no endTime) is in the future. Sorted by date ascending (soonest first).
  • Past events - Events whose end time has passed. Sorted by date descending (most recent first).

The timezone used for this calculation is set in src/_data/site.json (timezone field).

Events Listing Page

The /events/ page is generated by src/events/events.njk. It shows two sections:

  1. Upcoming Events - All future events.
  2. Past Events - All completed events.

You generally don’t need to edit this file.

Homepage Preview

The homepage shows a preview of upcoming events via the homeCards.njk partial. By default, it shows up to 2 upcoming events and 1 recent past event.

To feature an event:

---
title: Annual Gala
eventDate: 2026-12-01
featured: true
---

Featured events can be shown separately using the featured.njk partial. This is available on the homepage but commented out by default in homeCards.njk.

When the homepage uses preview mode with excludeFeatured, featured events are excluded from the regular preview list and shown in the featured section instead. This prevents duplication.

Multi-line Location

Use \n for line breaks in the location. Wrap the value in quotes:

location: "Outer Space Hub\n101 Star Lane\nMeridian 7, Dione"

This renders as:

Outer Space Hub
101 Star Lane
Meridian 7, Dione

Linking Events to Posts

You can link an event to a recap blog post:

In the event:

recapPost: /posts/open-day-recap/

In the post:

eventPage: /events/open-day/

Both pages will display a link to the other. See Posts for more details.

Adding Buttons

The btn.njk partial creates a styled button. To add a button anywhere in your event content, set variables immediately before the include:

{% set text = "Register Now" %}
{% set href = "https://example.com/register" %}
{% set icon = "ticket-perforated" %}
{% set style = "primary" %}
{% include "partials/btn.njk" %}
VariableDefaultDescription
text”Back to Home”Button label.
href”/“The URL the button links to.
icon”arrow-left”Bootstrap icon name without the bi- prefix. See Bootstrap Icons.
style”primary”Bootstrap button style - primary, outline-primary, secondary, outline-secondary, etc.
align”center”Alignment - start, center, or end.

You can add as many buttons as you like anywhere on the page, each with different settings:

{% set text = "Register Now" %}
{% set href = "https://example.com/register" %}
{% set icon = "ticket-perforated" %}
{% include "partials/btn.njk" %}
 
{% set text = "View Location" %}
{% set href = "https://maps.google.com" %}
{% set icon = "geo-alt" %}
{% set style = "outline-primary" %}
{% include "partials/btn.njk" %}

The event layout also automatically includes a default btn.njk (“Back to Home”) at the bottom of every event page. To change that default, edit src/_includes/layouts/event.njk.

Tips

  • Filenames matter - The filename becomes the URL. Use lowercase with hyphens: open-day.md → /events/open-day/.
  • Date format - Always use YYYY-MM-DD for eventDate in front matter. The display format is controlled by site.json.
  • Hiding the template file - Rename src/events/template.md to template.njk to hide it from the events listing. The events collection only scans *.md files, so template.njk won’t appear in any events list. The file will still be built as a page so you can use it as a reference, but it won’t show up where you don’t want it.
  • Time parsing - Use formats like 10:00 AM, 2:30 PM, or 14:00. The AM/PM format with a space before it works most reliably.

Graph View

Backlinks