Skip to content

Reader Metadata Template System

Overview

The Reader application now supports template-driven metadata injection, allowing metadata fields to be placed in designated UI regions through configurable templates. This approach gives flexibility to customize Reader outputs based on structured document metadata, without hard-coding presentation logic.

Template Rendering Stack

Reader renders static templates with Handlebars helpers and styles them with Basscss utility classes. When configuring templates, use Handlebars syntax for dynamic metadata and Basscss classes to keep layout and spacing consistent with the Reader interface.

Template Requirements

Every metadata injection template must:

  • Be of type kind: Static
  • Define a unique metadata.name
  • Specify a valid metadata.reader.position (e.g., 'header' and 'dca')
  • Include reader as a runner
  • Use getMetaData helpers to dynamically access SciFlow metadata fields

About metadata.name and reader.position

Each template must include a metadata block that declares:

metadata:
  name: unique-name
  reader:
    position: dca
  • the name is a unique identifier
  • reader.position maps to a named layout region in the Reader UI. If missing or incorrect, the template will not render.

The Reader layout engine uses this information to determine what content to render where based on the output runner (reader).

Supported Positions

Currently supported Reader UI positions for metadata injection:

Position Description
header Injects metadata near the top of the article
dca Injects near the top of the right column, in the Meta tab

Additional positions may be supported in future releases.

Metadata Semantics

Templates can access document metadata via the getMetaData helper using dot-paths like:

  • JournalMeta.name
  • ArticleMeta.version
  • PermissionsMeta.licenseLink

Example usage:

<span>{{getMetaData 'ArticleMeta.version'}}</span>

Only populated fields will be rendered — no blank shells will appear. For more information on obtaining paths, you will need more information on how templates are structured.

Example Templates

# yaml-language-server: $schema=https://transform.development.svc.sciflow.net/template/configuration/Static.json
kind: Static
ui:
  showTo: []
runners:
  - reader
spec:
  dom: >
    <section class='col-12' role='region' aria-roledescription='Copyright and permissions'>
      <h1 class='h2 m0' id='copyright-title'>Copyright and permissions</h1>
      <p class="mt0">
        Copyright ©
        <span>
          {{#if (getMetaData 'PermissionsMeta.copyrightYear')}}
            <span aria-label='Copyright Year'>
              {{getMetaData 'PermissionsMeta.copyrightYear'}}
            </span>
          {{/if}}
          {{#if (getMetaData 'PermissionsMeta.copyrightHolder')}}
            <span aria-label='Copyright Holder'>
              {{getMetaData 'PermissionsMeta.copyrightHolder'}}.
            </span>
          {{/if}}
          {{#if (getMetaData 'PermissionsMeta.copyrightStatement')}}
            <span aria-label='Copyright Statement'>
              {{getMetaData 'PermissionsMeta.copyrightStatement'}}
            </span>
          {{/if}}
        </span>
      </p>

      <p>
        {{#if (getMetaData 'PermissionsMeta.licenseP')}}
          <span aria-label='License information'>
            {{getMetaData 'PermissionsMeta.licenseP'}}
          </span>
        {{/if}}

        {{#if (getMetaData 'PermissionsMeta.licenseType')}}
          License type:
          <strong aria-label='License Type'>{{getMetaData 'PermissionsMeta.licenseType'}}</strong>
        {{/if}}
      </p>

      {{#if (getMetaData 'PermissionsMeta.licenseLink')}}
        <p>
          <a
            href='{{getMetaData "PermissionsMeta.licenseLink"}}'
            target='_blank'
            rel='noopener'
            aria-label='View full license'
          >
            View License
          </a>
        </p>
      {{/if}}
    </section>
metadata:
  name: reader-copyright-dca
  reader:
    position: dca

Journal and Article Information in Header

# yaml-language-server: $schema=https://transform.development.svc.sciflow.net/template/configuration/Static.json
kind: Static
ui:
  showTo: []
runners:
  - reader
spec:
  dom: >
    <div class='col-12 flex justify-between' role='group'>
      <div class='flex flex-column pr2' role='group' aria-label='Journal Metadata Information' aria-labelledby='journal-title journal-shortname'>
        {{#if (getMetaData 'JournalMeta.name')}}
          <h1 id='journal-title'>{{getMetaData 'JournalMeta.name'}}</h1>
        {{/if}}
        {{#if (getMetaData 'JournalMeta.shortName')}}
          <h2 id="journal-shortname" class='h3'>{{getMetaData 'JournalMeta.shortName'}}</h2>
        {{/if}}
      </div>
      <div class='flex flex-column py2' role='group' aria-label='Article Metadata'>
        {{#if (getMetaData 'ArticleMeta.articleType')}}
          <div class='flex'>
            <span class='label'>Type: </span>
            <span class='value'>{{getMetaData 'ArticleMeta.articleType'}}</span>
          </div>
        {{/if}}
        {{#if (getMetaData 'ArticleMeta.version')}}
          <div class='flex'>
            <span class='label'>Version: </span>
            <span class='value'>{{getMetaData 'ArticleMeta.version'}}</span>
          </div>
        {{/if}}
        {{#if (getMetaData 'ArticleMeta.issue')}}
          <div>
            <span class='label'>Issue: </span>
            <span class='value'>{{getMetaData 'ArticleMeta.issue'}}</span>
          </div>
        {{/if}}
        {{#if (getMetaData 'ArticleMeta.identifiers')}}
          <div aria-label="Publisher">
            {{#if (getMetaData 'ArticleMeta.identifiers.publisher')}}
              <span class='label'>Publisher: </span>
              <span class='value' aria-label='Publisher Id'>{{getMetaData 'ArticleMeta.identifiers.publisher'}}</span>
            {{/if}}
          </div>
          {{#if (getMetaData 'ArticleMeta.identifiers.doi')}}
            <div aria-label="DOI">
              <a 
                href="https://doi.org/{{getMetaData 'ArticleMeta.identifiers.doi'}}" 
                class="value" 
                aria-label="DOI: {{getMetaData 'ArticleMeta.identifiers.doi'}}"
              >
                {{getMetaData 'ArticleMeta.identifiers.doi'}}
              </a>
            </div> 
          {{/if}}
        {{/if}}
      </div>
    </div>
metadata:
  name: reader-journal-article-metadata
  reader:
    position: header