Countdown

Generate a little buzz for your project by adding a countdown widget to your page. The timer will use the current datetime and your specified datetime to determine how much time is left in the countdown. If the time runs out, the countdown will stop (at '0d 0h 0m 0s').

Options

The following options are supported by this widget.

launchDate

Specify the exact time that the countdown should end, as a UTC datetime value.

ex: "2024-10-09T05:00:00.000Z"

config

(OPTIONAL) A copy of the config hash. See the snippet that follows. This option reduces the number of times the site configuration values are queried, speeding up the process of building the site.

    {% include read-config.liquid %}
    {% include countdown.widget config=config launchDate="2024-01-09T05:00:00.000Z" %}}

    {% include 'countdown.widget' config=site.config launchDate:'2024-01-09T05:00:00.000Z' %}

Usage

There are several ways to incorporate this widget into your pages.

Inline

If you have more than one countdown target datetime, you can specify each directly on the widget.

{% include countdown.widget launchDate="2024-01-09T05:00:00.000Z" %}

{% include 'countdown.widget' launchDate:'2024-01-09T05:00:00.000Z' %}

Page Metadata

If you want to have multiple countdown widgets on the same page, you can set the target datetime in the page's metadata.

---
launchDate: 2024-01-09T05:00:00.000Z
---
{% include countdown.widget %}

---
launchDate: 2024-01-09T05:00:00.000Z
---
{% include 'countdown.widget' %}

Site Config

If the countdown widget is used across the site in multiple places, you can store the target datetime in the site config.

In the 'config.yml' file:

launchDate: "2024-01-09T05:00:00.000Z"

In the 'my-page.md' file:

{% include countdown.widget %}

In the 'config.yml' file:

launchDate: "2024-01-09T05:00:00.000Z"

In the 'my-page.md' file:

{% include 'countdown.widget' %}

Last modified: 25 May 2024