Skip to content

Commit 30e6006

Browse files
gkellogggkellogg
committed
Playground links to highlight algorithms.
For w3c/json-ld-syntax#70.
1 parent c3cb6a9 commit 30e6006

File tree

1 file changed

+135
-86
lines changed

1 file changed

+135
-86
lines changed

‎index.html

Lines changed: 135 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -197,6 +197,16 @@
197197
.ds-selector-tabs pre.selected, .ds-selector-tabs table.selected {
198198
display: block;
199199
}
200+
a.playground {
201+
border-bottom: none;
202+
text-decoration: none;
203+
font-size: 13px;
204+
}
205+
a[href].playground {
206+
border-bottom: none;
207+
text-decoration: none;
208+
color: #666;
209+
}
200210
</style>
201211
</head>
202212

@@ -400,11 +410,13 @@ <h2>Expansion</h2>
400410
<aside class="example ds-selector-tabs"
401411
title="JSON-LD document using only terms">
402412
<div class="selectors">
403-
<button class="selected" data-selects="expanded">Expanded</button>
413+
<button class="selected" data-selects="original">Original</button>
414+
<button data-selects="expanded">Expanded</button>
404415
<button data-selects="statements">Statements</button>
405416
<button data-selects="turtle">Turtle</button>
417+
<a class="playground" target="_blank"></a>
406418
</div>
407-
<pre class="expanded selected" data-transform="updateExample">
419+
<pre class="original selected" data-transform="updateExample">
408420
<!--
409421
{
410422
"@context": {
@@ -421,7 +433,8 @@ <h2>Expansion</h2>
421433
-->
422434
</pre>
423435
<pre class="expanded"
424-
data-result-for="JSON-LD document using only terms-expanded">
436+
data-result-for="JSON-LD document using only terms-original"
437+
data-transform="updateExample">
425438
<!--
426439
[{
427440
"@id": "http://me.markus-lanthaler.com/",
@@ -460,19 +473,24 @@ <h2>Expansion</h2>
460473
and an <a>array</a> to encapsulate another, but
461474
leaves the rest of the information untouched.</p>
462475

463-
<pre class="example nohighlight" data-transform="updateExample"
464-
title="Sample JSON-LD document using an IRI instead of a term to express a property">
465-
<!--
466-
{
467-
"@context": {
468-
****"website": "http://xmlns.com/foaf/0.1/homepage"****
469-
},
470-
"@id": "http://me.markus-lanthaler.com/",
471-
"****http://xmlns.com/foaf/0.1/name****": "Markus Lanthaler",
472-
****"website"****: ****{ "@id":**** "http://www.markus-lanthaler.com/" ****}****
473-
}
474-
-->
475-
</pre>
476+
<aside class="example ds-selector-tabs"
477+
title="Sample JSON-LD document using an IRI instead of a term to express a property">
478+
<div class="selectors">
479+
<a class="playground" target="_blank"></a>
480+
</div>
481+
<pre class="original selected nohighlight" data-transform="updateExample">
482+
<!--
483+
{
484+
"@context": {
485+
****"website": "http://xmlns.com/foaf/0.1/homepage"****
486+
},
487+
"@id": "http://me.markus-lanthaler.com/",
488+
"****http://xmlns.com/foaf/0.1/name****": "Markus Lanthaler",
489+
****"website"****: ****{ "@id":**** "http://www.markus-lanthaler.com/" ****}****
490+
}
491+
-->
492+
</pre>
493+
</aside>
476494

477495
<p>Note that both inputs are valid JSON-LD and both represent the same
478496
information. The difference is in their <a>context</a> information
@@ -493,16 +511,16 @@ <h2>Expansion</h2>
493511
operation) against the above examples results in the following output:</p>
494512

495513
<pre class="example nohighlight" data-transform="updateExample"
496-
data-result-for="Sample JSON-LD document using an IRI instead of a term to express a property"
514+
data-result-for="Sample JSON-LD document using an IRI instead of a term to express a property-original"
497515
title="Expanded JSON-LD document using an IRI">
498516
<!--
499517
[
500518
{
501519
"@id": "http://me.markus-lanthaler.com/",
502-
"http://xmlns.com/foaf/0.1/name": [
520+
"****http://xmlns.com/foaf/0.1/name****": [
503521
{ "@value": "Markus Lanthaler" }
504522
],
505-
"http://xmlns.com/foaf/0.1/homepage": [
523+
"****http://xmlns.com/foaf/0.1/homepage****": [
506524
{ "@id": "http://www.markus-lanthaler.com/" }
507525
]
508526
}
@@ -546,8 +564,8 @@ <h2>Compaction</h2>
546564

547565
<p>For example, assume the following expanded JSON-LD input document:</p>
548566

549-
<pre class="example nohighlight" data-transform="updateExample"
550-
data-result-for="Sample JSON-LD document using an IRI instead of a term to express a property"
567+
<pre id="sample-document"
568+
class="example nohighlight" data-transform="updateExample"
551569
title="Expanded sample document">
552570
<!--
553571
[
@@ -567,7 +585,9 @@ <h2>Compaction</h2>
567585
<p>Additionally, assume the following developer-supplied JSON-LD
568586
<a>context</a>:</p>
569587

570-
<pre class="example nohighlight" data-transform="updateExample"
588+
<pre id="sample-document-context"
589+
class="example nohighlight"
590+
data-transform="updateExample"
571591
data-context-for="Expanded sample document"
572592
title="JSON-LD context">
573593
<!--
@@ -588,26 +608,36 @@ <h2>Compaction</h2>
588608
operation) given the context supplied above against the JSON-LD input
589609
document provided above would result in the following output:</p>
590610

591-
<pre class="example nohighlight" data-transform="updateExample"
592-
data-result-for="Expanded sample document"
593-
data-context="JSON-LD context"
594-
data-compact
595-
title="Compacted sample document">
596-
<!--
597-
{
598-
"@context": {
599-
"name": "http://xmlns.com/foaf/0.1/name",
600-
"homepage": {
601-
"@id": "http://xmlns.com/foaf/0.1/homepage",
602-
"@type": "@id"
603-
}
604-
},
605-
"@id": "http://me.markus-lanthaler.com/",
606-
"name": "Markus Lanthaler",
607-
"homepage": "http://www.markus-lanthaler.com/"
608-
}
609-
-->
610-
</pre>
611+
<aside class="example ds-selector-tabs"
612+
title="Compacted sample document">
613+
<div class="selectors">
614+
<a class="playground"
615+
data-result-for="#sample-document"
616+
data-context="#sample-document-context"
617+
data-compact
618+
target="_blank"></a>
619+
</div>
620+
<pre class="original selected nohighlight" data-transform="updateExample"
621+
data-result-for="Expanded sample document"
622+
data-context="JSON-LD context"
623+
data-compact
624+
title="Compacted sample document">
625+
<!--
626+
{
627+
"@context": {
628+
"name": "http://xmlns.com/foaf/0.1/name",
629+
"homepage": {
630+
"@id": "http://xmlns.com/foaf/0.1/homepage",
631+
"@type": "@id"
632+
}
633+
},
634+
"@id": "http://me.markus-lanthaler.com/",
635+
"name": "Markus Lanthaler",
636+
"homepage": "http://www.markus-lanthaler.com/"
637+
}
638+
-->
639+
</pre>
640+
</aside>
611641

612642
<p class="changed">The example above is the JSON-LD serialization of the output of the
613643
<a href="#compaction-algorithm">compaction algorithm</a>,
@@ -638,7 +668,8 @@ <h2>Flattening</h2>
638668

639669
<p>For example, assume the following JSON-LD input document:</p>
640670

641-
<pre class="example nohighlight" data-transform="updateExample"
671+
<pre id="json-ld-document-in-compact-form"
672+
class="example nohighlight" data-transform="updateExample"
642673
title="JSON-LD document in compact form">
643674
<!--
644675
{
@@ -660,27 +691,35 @@ <h2>Flattening</h2>
660691
operation) with a context set to <a>null</a> to prevent compaction
661692
returns the following document:</p>
662693

663-
<pre class="example nohighlight" data-transform="updateExample"
664-
data-result-for="JSON-LD document in compact form"
665-
data-flatten
666-
title="Flattened sample document in expanded form">
667-
<!--
668-
[{
669-
"@id": "http://me.markus-lanthaler.com/",
670-
"http://xmlns.com/foaf/0.1/name": [
671-
{ "@value": "Markus Lanthaler" }
672-
],
673-
"http://xmlns.com/foaf/0.1/knows": [
674-
{ "@id": "_:b0" }
675-
]
676-
}, {
677-
"@id": "_:b0",
678-
"http://xmlns.com/foaf/0.1/name": [
679-
{ "@value": "Dave Longley" }
680-
]
681-
}]
682-
-->
683-
</pre>
694+
<aside class="example ds-selector-tabs"
695+
title="Flattened sample document">
696+
<div class="selectors">
697+
<a class="playground"
698+
data-result-for="#json-ld-document-in-compact-form"
699+
data-flatten
700+
target="_blank"></a>
701+
</div>
702+
<pre class="original selected nohighlight" data-transform="updateExample"
703+
data-result-for="JSON-LD document in compact form"
704+
data-flatten>
705+
<!--
706+
[{
707+
"@id": "http://me.markus-lanthaler.com/",
708+
"http://xmlns.com/foaf/0.1/name": [
709+
{ "@value": "Markus Lanthaler" }
710+
],
711+
"http://xmlns.com/foaf/0.1/knows": [
712+
{ "@id": "_:b0" }
713+
]
714+
}, {
715+
"@id": "_:b0",
716+
"http://xmlns.com/foaf/0.1/name": [
717+
{ "@value": "Dave Longley" }
718+
]
719+
}]
720+
-->
721+
</pre>
722+
</aside>
684723

685724
<p class="changed">The example above is the JSON-LD serialization of the output of the
686725
<a href="#flattening-algorithm">flattening algorithm</a>,
@@ -696,28 +735,38 @@ <h2>Flattening</h2>
696735
the same context as the input document, the flattened and compacted document
697736
looks as follows:</p>
698737

699-
<pre class="example nohighlight" data-transform="updateExample"
700-
data-result-for="JSON-LD document in compact form"
701-
data-flatten
702-
data-context="JSON-LD document in compact form"
703-
title="Flattened and compacted sample document">
704-
<!--
705-
{
706-
"@context": {
707-
"name": "http://xmlns.com/foaf/0.1/name",
708-
"knows": "http://xmlns.com/foaf/0.1/knows"
709-
},
710-
"@graph": [{
711-
"@id": "http://me.markus-lanthaler.com/",
712-
"name": "Markus Lanthaler",
713-
"knows": { "@id": "_:b0" }
714-
}, {
715-
"@id": "_:b0",
716-
"name": "Dave Longley"
717-
}]
718-
}
719-
-->
720-
</pre>
738+
<aside class="example ds-selector-tabs"
739+
title="Flattened and compacted sample document">
740+
<div class="selectors">
741+
<a class="playground"
742+
data-result-for="#json-ld-document-in-compact-form"
743+
data-context="#json-ld-document-in-compact-form"
744+
data-flatten
745+
target="_blank"></a>
746+
</div>
747+
<pre class="original selected nohighlight" data-transform="updateExample"
748+
data-result-for="JSON-LD document in compact form"
749+
data-context="JSON-LD document in compact form"
750+
data-flatten
751+
title="Flattened and compacted sample document">
752+
<!--
753+
{
754+
"@context": {
755+
"name": "http://xmlns.com/foaf/0.1/name",
756+
"knows": "http://xmlns.com/foaf/0.1/knows"
757+
},
758+
"@graph": [{
759+
"@id": "http://me.markus-lanthaler.com/",
760+
"name": "Markus Lanthaler",
761+
"knows": { "@id": "_:b0" }
762+
}, {
763+
"@id": "_:b0",
764+
"name": "Dave Longley"
765+
}]
766+
}
767+
-->
768+
</pre>
769+
</aside>
721770

722771
<p>Please note that the result of flattening and <a>compacting</a> a document
723772
is always a <a class="changed">dictionary</a>,

0 commit comments

Comments
 (0)