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
Copyright Information in DCA
# 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