jbj-rdfa

JBJ RDFa module

JBJ RDFa is a JBJ module to generate HTML + RDFa from a JSON-LD.

Contributors

• François Parmentier

Installation

$ npm install jbj-rdfa

Usage

This JBJ module cannot be used alone. JBJ has to be installed.

var JBJ = require('jbj');
JBJ.use(require('jbj-rdfa'));

But, the first aim of this JBJ module is to be used as a template engine filter:

<li>Label: {{_content.jsonld|getJsonLdField(["http://www.w3.org/2004/02/skos/core#prefLabel","fr"])}}</li>

In the above example, a template variable _content, containing a jsonld key, pointing to a JSON-LD object, can be filtered using the JBJ actions getJsonLdField, here.

You can pipe several JBJ filters: {{_content.jsonld | getJsonLdField(["http://www.w3.org/2004/02/skos/core#prefLabel", "fr"]) | style({"color": "red"}) | class("label") | tag("p")}} which should give, using nunjucks or ejs:

<p property="http://www.w3.org/2004/02/skos/core#prefLabel" lang="fr" style="color: red" class="label">Le libellé préférentiel en question</p>

You can see a complete example in the LODEX project.

Tests

Use mocha to run the tests.

$ npm install
$ npm test

Actions

Once the module is declared as used for JBJ, you can use the following actions:

getJsonLdField: URI | [URI, language]

Get the value of the field which URI is given in parameter, and declared in the @content part of the JSON-LD.

Input:

{
    "@id": "http://article-type.lod.istex.fr/=/research-article",
    "@context": {
        "c2": {
            "@id": "http://www.w3.org/2008/05/skos-xl#prefLabel",
            "@language": "en"
        },
        "c3": {
            "@id": "http://www.w3.org/2008/05/skos-xl#prefLabel",
            "@language": "fr"
        },
        "c4": {
            "@id": "http://www.w3.org/2004/02/skos/core#definition",
            "@language": "en"
        },
        "c5": {
            "@id": "http://www.w3.org/2004/02/skos/core#definition",
            "@language": "fr"
        },
        "_wid": {
            "@id": "http://purl.org/dc/elements/1.1/identifier",
            "@language": null
        }
    },
    "c2": "research article",
    "c3": "papier de recherche",
    "c4": "Article reporting on primary research (The related value “review-article” describes a literature review, research summary, or state-of-the-art article.)",
    "c5": "Article relatif à une recherche initiale",
    "_wid": "research-article"
}

Stylesheet:

{
    "getJsonLdField": "http://www.w3.org/2004/02/skos/core#definition"
}

Output:

{
    "uri": "http://www.w3.org/2004/02/skos/core#definition",
    "content": "Article reporting on primary research (The related value “review-article” describes a literature review, research summary, or state-of-the-art article.)",
    "language": "en"
}

When the language is given, only the matching value will be returned.

Input:

{
    "@id": "http://article-type.lod.istex.fr/=/research-article",
    "@context": {
        "c2": {
            "@id": "http://www.w3.org/2008/05/skos-xl#prefLabel",
            "@label": "Libellé anglais",
            "@language": "en"
        },
        "c3": {
            "@id": "http://www.w3.org/2008/05/skos-xl#prefLabel",
            "@label": "Libellé français",
            "@language": "fr"
        }
    },
    "c2": "research article",
    "c3": "papier de recherche"
}

Stylesheet:

{
    "getJsonLdField": [
        "http://www.w3.org/2008/05/skos-xl#prefLabel",
        "fr"
    ]
}

Output:

{
    "uri": "http://www.w3.org/2008/05/skos-xl#prefLabel",
    "content": "papier de recherche",
    "language": "fr"
}

style: CSS

Add inline CSS style.

Input:

{
    "tag": "p"
}

Stylesheet:

{
    "style": {
        "font-weight": "bold"
    }
}

Output:

{
    "tag": "p",
    "style": "font-weight: bold"
}

class: class | [class, ...]

Add one or several classes.

Input:

{
    "tag": "div"
}

Stylesheet:

{
    "class": "figure"
}

Output:

{
    "tag": "div",
    "classes": "figure"
}

tag: name

Add a tag over the content.

Input:

{
    "content": "Any string value"
}

Stylesheet:

{
    "tag": "name"
}

Output:

{
    "tag": "name",
    "content": "Any string value"
}

toHtml

Serializes the input to HTML+RDFa. Used keys: uri, content, language, style, and tag.

Input:

{
    "uri": "http://www.w3.org/2004/02/skos/core#definition",
    "content": "Any string value",
    "language": "en",
    "style": {
        "font-weight": "bold"
    },
    "class": ["show", "center"],
    "tag": "menu"
}

Stylesheet:

{
    "toHtml": true
}

Output:

"<menu property=\"http://www.w3.org/2004/02/skos/core#definition\" lang=\"en\" style=\"font-weight: bold\" class=\"show center\">Any string value</menu>"

Examples

See unit tests : https://github.com/Inist-CNRS/node-jbj-rdfa/tree/master/test

Try it

http://Inist-CNRS.github.io/jbj-playground/

(don't forget to click on RDFa button -- when it will exist)

License

MIT