Time

Render a <time> containing:

• text
• <span> with relative time
• temporal classes accordingly: past, future, today, tomorrow
• add readable date as title

{% include widgets/time.html datetime=site.time %}

Includes

• datetime: reference instant, default to site.time
• text: text before relative time, optional
• duration: repeating event, ISO-8601 duration (P)eriod string, optional
  /^P(\d+Y)?(\d+M)?(\d+W)?(\d+D)?(T(\d+H)?(\d+M)?(\d+S)?)?$/
• repetition: number of repetitions of the duration period, optional
• style: can be narrow or short, default to long

File: _includes/widgets/time.html

Rolls

Compute a dice roll from a string (rolls)d(sides)(+/-modifier).
Expose the liquid array rolls_rolls of the rolls.
Changes with site build.

{% include widgets/rolls.html roll='1d6' mod=0 %}

• include.roll: Roll string default to 1d6
• include.mod: modifier default to 0

File: _includes/widgets/rolls.html

View

Render data files or liquid objects.

• csv, json or yml: data filename, no extension
• liquid: liquid object
• title: optional, heading text, default to category or filename
• class: optional, space separated class list for the element

{% include widgets/view.html csv='csv' sort='desc' %}
{% include widgets/view.html liquid=page.list %}
{% include widgets/view.html json='json' %}
{% include widgets/view.html yml='yml' %}

Options for csv

• limit: hide extra rows if data-limit attribute is set, negative limit show table bottom rows
• category: filter rows given a string for the category property
• sort: optional, can be asc or desc to sort the first column numeric values
  default state is unsorted

Csv table

<table class='...' data-sort='...' data-limit='...'>
  <tr data-row='1'>
    <td data-header='...' data-value='...'>
      <!-- if header is `date` or `unix` -->
      <time datetime='date_to_rcf822'>ISO 8601 </time>
...

Styles

td[data-value='briefing']{color:var(--color-green)}
td[data-value='bill']{color:var(--color-orange)}
td[data-value='trash']{color:var(--fg-muted)}

File: _includes/widgets/view.html

Progress

Render a progress bar.

• max: Max value, default to 100
• value: Value to be filled, default to 50
• class: Space separated classnames info/success/warning/error

File: _includes/widgets/progress.html

Toc

Add a table-of-content excluding the preceding heading.

{% include widgets/toc.html %}

File: _includes/widgets/toc.html

Form

Render a functional form from a yml object in the page front matter

{% include widgets/form.html form=page.form %}

• include.form: yml form, front-matter or data file

Form properties

• file: fields.json
• timestamp: file or folder
• user: true
• class: space separated list
• fields:
  • type: text, hidden, email, textarea, number, boolean, color, date, datetime, select, select multiple, radio, ref, random, roll (csv)
  • options: required, disabled, placeholder

Form bottom contains a message box for the future

<div data-input="message" role='status'></div>

File: _includes/widgets/form.html

Input

Render a form to create or edit a data file, or perform automatic functions.
Fields and destination are passed with a data file or in the front matter.

• include.class: class added to output element.
• include.form: front-matter or data file, default to page.form.

  {% include widgets/input.html form=page.form %}
  

• include.function: javascript function.

  {% include widgets/input.html function='a/b=c/d' %}
  

Forms schema

• file_name:
• file_extension:
• file_path:
• file_overwrite:
• file_append:

File: _includes/widgets/input.html

Aside

page.aside: true will append an <aside> element to <main> with existing front-matter variables.

• page.author
• page.date
• page.category
• page.categories
• page.tag
• page.tags

File: _includes/widgets/aside.html

Pagination

page.pagination: true will append a div.pagination[aria-label='Pagination'] to <main> with the links to the previous and next collections’s document.

File: _includes/widgets/pagination.html