Assets and media

Templates bundle everything they need—stylesheets, logos, header snippets—so exports stay self-contained. These assets live beside configuration.sfo.yml inside the template directory.

Registering assets in the configuration

The main Configuration block contains an assets array. Each entry looks like this:

spec:
  assets:
    - id: logo-main
      type: logo
      path: tpl/generic-journal/assets/logo.png
      role: logo
      dimensions:
        width: 300px
        height: 50px
    - id: headers-and-footers
      type: hbs
      path: ./assets/headers-and-footers.hbs
      inline: true

id references the file from component blocks.
type is a free-form label; hbs and logo are common values.
path is relative to the template directory. Use ./ to stay within the template folder.
inline: true embeds the file content directly into the configuration. The loader in libs/tdk/src/template.ts reads the file and attaches it to the asset so that exports do not need to access the filesystem later.
role and dimensions are optional hints for downstream consumers.

Any asset marked as static: true is always copied to export bundles, even if the file is not referenced elsewhere.

Stylesheets

A template-wide stylesheet named styles.scss is automatically picked up. During loading the file is added as the first style in the export pipeline (stylePaths in libs/tdk/src/template.ts). This is a good place for shared rules such as brand colours or utility classes. Component-specific styles can still live next to their Handlebars templates for clarity.

Translations and metadata

You can provide additional folders alongside assets:

translations/<locale>.yaml — used by the loader to merge in locale-specific labels when a document switches languages.
metaData.schema.yml — a JSON Schema (via YAML) that defines custom metadata fields collected from authors before exporting.

Both files are optional but help teams keep template behaviour predictable across languages and publication series.