Package Exports

vuepress-plugin-jsonld-playground
vuepress-plugin-jsonld-playground/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vuepress-plugin-jsonld-playground) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

vuepress-plugin-jsonld-playground

A vuepress plug-in to embed a component similar to JSON-LD Playground into a vuepress book.

Usage

.vuepress/config.js

module.exports = {
    ...
    ,plugins: [
      'vuepress-plugin-jsonld-playground'
    ]
}

document.md

Some markdown text or some html markup
<json-ld>
{
    "@context": {
        "@vocab": "https://my.org/vocabulary"
    },
    "@id": "1",
    "prop1": "value1",
    "prop2": "value2"
}
</json-ld>

Attributes

You may use the <json-ld> element with the following attributes like <element attr="...">:

view to pre-select a particular view.
- Valid values are: compacted | expanded | flattened | rdf | framed
- Default: "compacted"
inputLabel to change the default label for editable text area 1
- Default: "JSON-LD Document 1"
inputLabel2 to change the default label for editable text area 2
- Default: "JSON-LD Document 2"
outputLabel to change the default label for readonly output text area
- Default: "Output"
frameLabel to change the default label for editable frame text area
- Default: "JSON-LD Frame (Matching & Mapping)"

Note: For some yet to be understood reason <json-ld> can not be the first element of a new paragraph.
Some text
              <-- Doesn't work.
<json-ld>
...
Some text
              <-- Works because of --.
<span></span> <----------------------'
<json-ld>
...

Advanced Uses

Framing

<json-ld view="framed">
{
    "@context": {
        "@vocab": "https://my.org/vocabulary"
    },
    "@id": "1",
    "prop1": "value1",
    "prop2": "value2"
}
<template v-slot:frame>
{
    "@context": {
        "@vocab": "https://my.org/vocabulary"
    },
    "prop1": ""
}
</template>
</json-ld>

Framing two Datasources

In framed view we can provide a second JSON-LD document. This option aims to demonstrate a data integration scenario which involves more than one data source:

<json-ld view="framed">
{
    "@context": {
        "@vocab": "https://my.org/vocabulary"
    },
    "@id": "1",
    "prop1": "value1",
    "prop2": "value2"
}
<template v-slot:data2>
{
    "@context": {
        "@vocab": "https://my.org/vocabulary"
    },
    "@id": "1",
    "prop3": "value3"
}
</template>
<template v-slot:frame>
{
    "@context": {
        "@vocab": "https://my.org/vocabulary"
    },
    "prop1": ""
}
</template>
</json-ld>

Internally the component combines both input documents and expands them into a single JSON-LD graph before applying the given JSON-LD frame to the combined data graph like so:

jsonld.expand([input, input2]).then(expanded => {
    return jsonld.frame(expanded, frame, {
        embed: "@always"
    });
});