Skip to content

Commit ce1b4f0

Browse files
gkellogggkellogg
committed
Improve examples.
Relates to w3c/json-ld-syntax#26.
1 parent 0e6c60d commit ce1b4f0

File tree

1 file changed

+163
-83
lines changed

1 file changed

+163
-83
lines changed

‎index.html

Lines changed: 163 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,52 @@
151151
color: green;
152152
background-color: inherit;
153153
}
154+
aside.example {
155+
overflow-y: hidden;
156+
}
157+
/* example tab selection */
158+
.ds-selector-tabs {
159+
padding-bottom: 2em;
160+
}
161+
.ds-selector-tabs .selectors {
162+
padding: 0;
163+
border-bottom: 1px solid #ccc;
164+
height: 28px;
165+
}
166+
.ds-selector-tabs .selectors button {
167+
display: inline-block;
168+
min-width: 54px;
169+
text-align: center;
170+
font-size: 11px;
171+
font-weight: bold;
172+
height: 27px;
173+
padding: 0 8px;
174+
line-height: 27px;
175+
transition: all,0.218s;
176+
border-top-right-radius: 2px;
177+
border-top-left-radius: 2px;
178+
color: #666;
179+
border: 1px solid transparent;
180+
}
181+
.ds-selector-tabs .selectors button:first-child {
182+
margin-left: 2px;
183+
}
184+
.ds-selector-tabs .selectors button.selected {
185+
color: #202020 !important;
186+
border: 1px solid #ccc;
187+
border-bottom: 1px solid #fff !important;
188+
}
189+
.ds-selector-tabs .selectors button:hover {
190+
background-color: transparent;
191+
color: #202020;
192+
cursor: pointer;
193+
}
194+
.ds-selector-tabs pre, .ds-selector-tabs table {
195+
display: none;
196+
}
197+
.ds-selector-tabs pre.selected, .ds-selector-tabs table.selected {
198+
display: block;
199+
}
154200
</style>
155201
</head>
156202

@@ -351,43 +397,64 @@ <h2>Expansion</h2>
351397
here is an example of JSON-LD that uses only <a>terms</a>
352398
and is fairly compact:</p>
353399

354-
<pre class="example nohighlight" data-transform="updateExample"
355-
title="JSON-LD documenet using only terms">
356-
<!--
357-
{
358-
"@context": {
359-
"name": "http://xmlns.com/foaf/0.1/name",
360-
"homepage": {
361-
"@id": "http://xmlns.com/foaf/0.1/homepage",
362-
"@type": "@id"
363-
}
364-
},
365-
"@id": "http://me.markus-lanthaler.com/",
366-
"name": "Markus Lanthaler",
367-
"homepage": "http://www.markus-lanthaler.com/"
368-
}
369-
-->
370-
</pre>
371-
372-
<script class="example"
373-
data-result-for="JSON-LD documenet using only terms"
374-
title="JSON-LD document using only terms (expanded)">
375-
[
376-
{
377-
"@id": "http://me.markus-lanthaler.com/",
378-
"http://xmlns.com/foaf/0.1/homepage": [
379-
{
380-
"@id": "http://www.markus-lanthaler.com/"
381-
}
382-
],
383-
"http://xmlns.com/foaf/0.1/name": [
384-
{
385-
"@value": "Markus Lanthaler"
386-
}
387-
]
388-
}
389-
]
390-
</script>
400+
<aside class="example ds-selector-tabs"
401+
title="JSON-LD document using only terms">
402+
<div class="selectors">
403+
<button class="selected" data-selects="expanded">Expanded</button>
404+
<button data-selects="statements">Statements</button>
405+
<button data-selects="turtle">Turtle</button>
406+
</div>
407+
<pre class="original selected" data-transform="updateExample">
408+
<!--
409+
{
410+
"@context": {
411+
"name": "http://xmlns.com/foaf/0.1/name",
412+
"homepage": {
413+
"@id": "http://xmlns.com/foaf/0.1/homepage",
414+
"@type": "@id"
415+
}
416+
},
417+
"@id": "http://me.markus-lanthaler.com/",
418+
"name": "Markus Lanthaler",
419+
"homepage": "http://www.markus-lanthaler.com/"
420+
}
421+
-->
422+
</pre>
423+
<pre class="expanded"
424+
data-result-for="JSON-LD document using only terms-expanded">
425+
<!--
426+
[{
427+
"@id": "http://me.markus-lanthaler.com/",
428+
"http://xmlns.com/foaf/0.1/name": [
429+
{"@value": "Markus Lanthaler"}
430+
],
431+
"http://xmlns.com/foaf/0.1/homepage": [
432+
{"@id": "http://www.markus-lanthaler.com/"}
433+
]
434+
}]
435+
-->
436+
</pre>
437+
<table class="statements"
438+
data-result-for="JSON-LD document using only terms-expanded">
439+
<thead><tr><th>Subject</th><th>Property</th><th>Value</th></tr></thead>
440+
<tbody>
441+
<tr><td>http://me.markus-lanthaler.com/</td><td>foaf:name</td><td>Markus Lanthaler</td></tr>
442+
<tr><td>http://me.markus-lanthaler.com/</td><td>http://xmlns.com/foaf/0.1/homepage</td><td>http://www.markus-lanthaler.com/</td></tr>
443+
</tbody>
444+
</table>
445+
<pre class="turtle"
446+
data-content-type="text/turtle"
447+
data-result-for="JSON-LD document using only terms-expanded"
448+
data-transform="updateExample"
449+
data-to-rdf>
450+
<!--
451+
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
452+
453+
<http://me.markus-lanthaler.com/> foaf:name "Markus Lanthaler";
454+
foaf:homepage <http://www.markus-lanthaler.com/> .
455+
-->
456+
</pre>
457+
</aside>
391458

392459
<p>The next input example uses one <a>IRI</a> to express a <a>property</a>
393460
and an <a>array</a> to encapsulate another, but
@@ -582,9 +649,7 @@ <h2>Flattening</h2>
582649
"@id": "http://me.markus-lanthaler.com/",
583650
"name": "Markus Lanthaler",
584651
"knows": [
585-
{
586-
"name": "Dave Longley"
587-
}
652+
{"name": "Dave Longley"}
588653
]
589654
}
590655
-->
@@ -600,23 +665,20 @@ <h2>Flattening</h2>
600665
data-flatten
601666
title="Flattened sample document in expanded form">
602667
<!--
603-
[
604-
{
605-
"@id": "_:b0",
606-
"http://xmlns.com/foaf/0.1/name": [
607-
{ "@value": "Dave Longley" }
608-
]
609-
},
610-
{
611-
"@id": "http://me.markus-lanthaler.com/",
612-
"http://xmlns.com/foaf/0.1/name": [
613-
{ "@value": "Markus Lanthaler" }
614-
],
615-
"http://xmlns.com/foaf/0.1/knows": [
616-
{ "@id": "_:b0" }
617-
]
618-
}
619-
]
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+
}]
620682
-->
621683
</pre>
622684

@@ -645,16 +707,14 @@ <h2>Flattening</h2>
645707
"name": "http://xmlns.com/foaf/0.1/name",
646708
"knows": "http://xmlns.com/foaf/0.1/knows"
647709
},
648-
"@graph": [
649-
{
650-
"@id": "_:b0",
651-
"name": "Dave Longley"
652-
}, {
653-
"@id": "http://me.markus-lanthaler.com/",
654-
"name": "Markus Lanthaler",
655-
"knows": { "@id": "_:b0" }
656-
}
657-
]
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+
}]
658718
}
659719
-->
660720
</pre>
@@ -3205,21 +3265,31 @@ <h3>Examples</h3>
32053265
<h4>Language Map Term</h4>
32063266
<p>If the term definition has <code>"@container": "@language"</code>, it will only match a
32073267
<a>value object</a> having no <code>@type</code>.</p>
3208-
<pre class="example" title="Term definition with language map">
3268+
3269+
<aside class="example" data-ignore
3270+
title="Term definition with language map">
3271+
<pre data-transform="updateExample">
3272+
<!--
32093273
{
32103274
"@context": {"t": {"@id": "http://example.org/t", "@container": "@language"}}
32113275
}
3212-
</pre>
3213-
<p>The inverse context will contain the following:</p>
3214-
<pre>
3215-
{
3216-
"@language": {
3217-
"@language": {"@none": "t"},
3218-
"@type": {"@none": "t"},
3219-
"@any": {"@none": "t"}
3276+
-->
3277+
</pre>
3278+
3279+
<p>The inverse context will contain the following:</p>
3280+
3281+
<pre data-transform="updateExample">
3282+
<!--
3283+
{
3284+
"@language": {
3285+
"@language": {"@none": "t"},
3286+
"@type": {"@none": "t"},
3287+
"@any": {"@none": "t"}
3288+
}
32203289
}
3221-
}
3222-
</pre>
3290+
-->
3291+
</pre>
3292+
</aside>
32233293

32243294
<aside class="example" data-ignore title="Language map term with language value">
32253295
<p>Given the <a>member</a> <code>{"http://example.org/t": {"@value": "foo", "@type": "http:/example.org/type"}}</code>,
@@ -3242,21 +3312,31 @@ <h4>Language Map Term</h4>
32423312
<h4>Datatyped Term</h4>
32433313
<p>If the term definition has a datatype, it will only match a
32443314
<a>value object</a> having a matching datatype.</p>
3245-
<pre class="example" title="Term definition with datatype">
3315+
3316+
<aside class="example" data-ignore
3317+
title="Term definition with datatype">
3318+
<pre data-transform="updateExample">
3319+
<!--
32463320
{
32473321
"@context": {"t": {"@id": "http://example.org/t", "@type": "http:/example.org/type"}}
32483322
}
3249-
</pre>
3250-
<p>The inverse context will contain the following:</p>
3251-
<pre>
3323+
-->
3324+
</pre>
3325+
3326+
<p>The inverse context will contain the following:</p>
3327+
3328+
<pre data-transform="updateExample">
3329+
<!--
32523330
{
32533331
"@none": {
32543332
"@language": {},
32553333
"@type": {"http:/example.org/type": "t"},
32563334
"@any": {"@none": "t"}
32573335
}
32583336
}
3259-
</pre>
3337+
-->
3338+
</pre>
3339+
</aside>
32603340

32613341
<aside class="example" data-ignore title="Datatyped term with datatyped value">
32623342
<p>Given the <a>member</a> <code>{"http://example.org/t": {"@value": "foo", "@type": "http:/example.org/type"}}</code>,

0 commit comments

Comments
 (0)