@bedrockio/templates

This package provides a wrapper for Handlebars with additional features for custom templating. It standardizes template rendering with support for front matter, sections, and custom helpers.

• Install
• Usage
• Templates
• Sections
• Helpers
  • Default Helpers

Install

yarn install @bedrockio/templates

Usage

import { TemplateRenderer } from '@bedrockio/templates';

const renderer = new TemplateRenderer({
  // Templates directory
  dir: 'templates',

  // Custom helpers (optional)
  helpers: {
    uppercase: (str) => str.toUpperCase(),
  },

  // Default params (optional)
  params: {
    foo: 'bar',
  },
});

// Render a template
const result = renderer.run({
  // The template string or path
  template: 'Hello {{name}}!',

  // Parameters to interpolate
  params: {
    name: 'World',
  },
});

console.log(result.body); // "Hello World!"

Templates

Templates use Handlebars syntax and support front matter for metadata:

---
title: My Title
---

Hello, {{user.name}}!

{{#if user.isPremium}}
  Welcome, premium user!
{{/if}}

Sections

Templates can be divided into named sections using three equals signs: === as delimiters:

=== SYSTEM ===

You are a helpful assistant.

=== USER ===

I am the user!

Sections are accessed in the result:

const { sections } = renderer.run({
  template: 'my-template,
});

console.log(sections);

/*
[
  {
    name:'SYSTEM',
    content: 'You are a helpful assistant.'
  },
  {
    name:'USER',
    content: 'I am the user!'
  },
]
*/

Helpers

The renderer includes default helpers and supports custom helpers. Custom helpers can be passed during instantiation or per render call.

const renderer = new TemplateRenderer({
  helpers: {
    foo() {
      return 'foo';
    },
  },
});

Default Helpers

| Helper | Params | Example | | -------------------- | ---------------------- | ----------------------------------------------------------- | | date | | 2025-01-01 | | dateLong | | January 1, 2025 | | dateMedium | | Jan 1, 2025 | | dateShort | | 1/1/2025 | | time | | 7:00am | | time | meridiem="caps" | 2:00PM | | time | meridiem="space" | 2:00 pm | | time | meridiem="period" | 2:00 p.m. | | time | meridiem="short" | 2:00p | | timeLong | | 7:00:00am | | timeMedium | | 7:00am | | timeShort | | 7am | | timeZone | | 7:00am EST | | timeZone | style="long" | 7:00am Eastern Standard Time | | timeZone | style="shortGeneric" | 7:00am ET | | timeZone | style="longGeneric" | 7:00am Eastern Time | | dateTime | | January 1, 2025 at 7:00am | | dateTimeLong | | January 1, 2025 at 7:00am | | dateTimeMedium | | Jan 1, 2025, 7:00am | | dateTimeShort | | 1/1/2025, 7:00am | | dateTimeZone | | January 1, 2025 at 7:00am EST | | dateTimeZone | style="long" | January 1, 2025 at 7:00am Eastern Standard Time | | dateTimeZone | style="shortGeneric" | January 1, 2025 at 7:00am ET | | dateTimeZone | style="longGeneric" | January 1, 2025 at 7:00am Eastern Time | | relTime | date | 6 months ago | | relTime | date min=cutoff | January 1, 2025 | | number | | 1. Frank | | link | url text | [Hello](http://example.com) | | button | url text | <a href="..." class="button" target="_blank">Click me</a> | | list | arr | - one- two- three |

relTime - Formats a date as relative time (e.g., "6 months ago"). When a min or max cutoff date is provided, dates beyond that threshold will be formatted as absolute dates instead of relative time.

number - Provides a 1-based index when used inside an {{#each}} loop. Useful for creating numbered lists.

list - Converts an array into a markdown-formatted bullet list with each item prefixed by - .