json-ld · BigBlueHat · Jun 4, 2025 · May 6, 2025 · May 6, 2025 · May 6, 2025
diff --git a/.eleventy.js b/.eleventy.js
@@ -20,7 +20,7 @@ export default async function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy('benchmarks/**/*.{jsonld,nq,md}');
   eleventyConfig.addPassthroughCopy('contexts/**/*.{htaccess,html,jsonld}');
   eleventyConfig.addPassthroughCopy('contexts/{event,person,place,recipe,remote-context}');
-  eleventyConfig.addPassthroughCopy('examples/**/*.{html,ttl,txt,json}');
+  eleventyConfig.addPassthroughCopy('examples/**/*.{html,ttl,txt,json,jsonld}');
   eleventyConfig.addPassthroughCopy('favicon.ico');
   eleventyConfig.addPassthroughCopy('fonts');
   eleventyConfig.addPassthroughCopy('functions/**/*.js');

diff --git a/README.md b/README.md
@@ -89,6 +89,23 @@ the [Wrangler][] server to emulate the [Cloudflare Pages Functions][] code:
 npm run dev
 ```
 
+Editor Development
+------------------
+
+The new Playground is build using [CodeMirror][] 6 and is integrated into the
+surrounding UI using [petite-vue][].
+
+* `playground/next/index.html` has the HTML and petite-vue markup-level code
+* `playground/next/editor.mjs` contains the JS for setting up CodeMirror and
+  attaching it to the DOM via petite-vue
+
+The `npm run build:editor` command uses [Rollup][] to build the final JS bundle
+at `playground/next/editor.bundle.js` which contains the browser ready JS code.
+
+Only the first two should be edited. However, `editor.bundle.js` should be built
+locally and committed along with the rest of the site to avoid unnecessary build
+time/cost/waste at deployment time.
+
 Website Analytics
 -----------------
 
@@ -110,3 +127,6 @@ The default code can be overridden by setting `ga` to a specific number (ex:
 [Wrangler]: https://developers.cloudflare.com/workers/wrangler/
 [list of users]: https://github.com/json-ld/json-ld.org/wiki/Users-of-JSON-LD
 [playground]: https://json-ld.org/playground/
+[CodeMirror]: https://codemirror.net/
+[petite-vue]: https://github.com/vuejs/petite-vue
+[Rollup]: https://rollupjs.org/
diff --git a/_layouts/bs5.liquid b/_layouts/bs5.liquid
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html
+  prefix="
+    xhv: http://www.w3.org/1999/xhtml/vocab#
+    xsd: http://www.w3.org/2001/XMLSchema#
+    rdfs: http://www.w3.org/2000/01/rdf-schema#
+    dc: http://purl.org/dc/terms/
+    vcard: http://www.w3.org/2006/vcard/ns#
+    v: http://rdf.data-vocabulary.org/#"
+  lang="en" >
+  <head>
+    <title>{% if title %}{{ title }} - {% endif %}{{ site.title }}</title>
+
+    <!-- Meta Tags -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+
+    <!-- Style Sheets -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4Q6Gf2aSP4eDXB8Miphtr37CMZZQ5oXLH2yaXMJ2w8e2ZtHTl7GptT4jmndRuHDT" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" integrity="sha512-Evv84Mr4kqVGRNSgIGL/F/aIDqQb7xQ2vcrdIwxfjThSH8CSR7PBEakCr51Ck+w+/U6swU2Im1vVX0SVk9ABhg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+    <link rel="shortcut icon" href="/favicon.ico" />
+
+    <!-- Script tags -->
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-{{ ga | default: '42886053' }}-1', 'json-ld.org');
+      ga('send', 'pageview');
+    </script>
+  </head>
+
+  <body>
+    <nav class="navbar navbar-expand-md sticky-top bg-body">
+      <div class="container">
+        <a class="navbar-brand" href="/">
+          <img class="align-text-top" src="/images/json-ld-data-24.png" alt="JSON-LD logo">
+          JSON-LD
+        </a>
+        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarNav">
+          <ul class="navbar-nav">
+            <li class="nav-item">
+              <a class="nav-link {% if page.url == '/playground/' %}active{% endif %}" href="/playground/"><i class="fa-solid fa-beer-mug-empty"></i> Playground</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link {% if page.url == '/learn/' %}active{% endif %}" href="/learn/"><i class="fa-solid fa-book"></i> Documentation</a>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link {% if page.url == '/spec/' %}active{% endif %}" href="/#developers"><i class="fa-solid fa-flask"></i> Developers</a>
+            </li>
+            <li class="nav-item dropdown">
+              <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                <i class="fa-solid fa-folder-open"></i> Specifications</a>
+              <ul class="dropdown-menu">
+                <li class="dropdown-header"><strong>W3C Recommendations</strong></li>
+                <li><a class="dropdown-item" href="https://www.w3.org/TR/json-ld/">Syntax</a></li>
+                <li><a class="dropdown-item" href="https://www.w3.org/TR/json-ld-api/">Processing Algorithms and API</a></li>
+                <li><a class="dropdown-item" href="https://www.w3.org/TR/json-ld-framing/">Framing</a></li>
+                <li><hr class="dropdown-divider"></li>
+                <li class="dropdown-header"><strong>Latest Drafts</strong></li>
+                <li><a class="dropdown-item" href="https://w3c.github.io/json-ld-syntax/">Syntax</a></li>
+                <li><a class="dropdown-item" href="https://w3c.github.io/json-ld-api/">Processing Algorithms and API</a></li>
+                <li><a class="dropdown-item" href="https://w3c.github.io/json-ld-framing/">Framing</a></li>
+                <li><a class="dropdown-item" href="https://w3c.github.io/json-ld-bp/">Best Practices</a></li>
+                <li><a class="dropdown-item" href="https://w3c.github.io/json-ld-streaming/">Streaming</a></li>
+                <li><a class="dropdown-item" href="https://json-ld.github.io/json-ld-star/">JSON-LD-star</a></li>
+                <li><a class="dropdown-item" href="https://w3c.github.io/json-ld-cbor/">CBOR</a></li>
+                <li><a class="dropdown-item" href="https://github.com/w3c/json-ld-rc/">Recommended Context</a></li>
+                <li><a class="dropdown-item" href="https://json-ld.github.io/yaml-ld/">YAML-LD</a></li>
+                <li><a class="dropdown-item" href="/spec/">1.0 drafts (historic)</a></li>
+              </ul>
+            </li>
+            <li class="nav-item">
+              <a class="nav-link {% if page.url == '/images/' %}active{% endif %}" href="#"><i class="fa-solid fa-image"></i> Branding</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </nav>
+
+    {{ content }}
+
+    <!-- Script tags -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js" integrity="sha384-j1CDi7MgGQ12Z7Qab0qlWQ/Qqz24Gc6BM0thvEMVjHnfYGF0rmFCozFSxQBxwHKO" crossorigin="anonymous"></script>
+  </body>
+</html>
diff --git a/_layouts/fomantic.liquid b/_layouts/fomantic.liquid
@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html
+  prefix="
+    xhv: http://www.w3.org/1999/xhtml/vocab#
+    xsd: http://www.w3.org/2001/XMLSchema#
+    rdfs: http://www.w3.org/2000/01/rdf-schema#
+    dc: http://purl.org/dc/terms/
+    vcard: http://www.w3.org/2006/vcard/ns#
+    v: http://rdf.data-vocabulary.org/#"
+  lang="en" >
+  <head>
+    <title>{% if title %}{{ title }} - {% endif %}{{ site.title }}</title>
+
+    <!-- Meta Tags -->
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
+
+    <!-- Style Sheets -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.4/dist/semantic.min.css">
+    <link rel="stylesheet" type="text/css" href="/static/css/rdf-font/rdf-font.css">
+    <style>
+      /* fomantic overrides */
+      html { scroll-padding-top: 5em; }
+      .ui.main.container { margin-top: 7em; }
+      .ui.top.menu .header.item { border: none !important; padding-left: 0; }
+      .ui.top.menu .header.item > span { font-size: 150%; }
+      .ui.top.menu .header.item > img { margin-right: 1rem; }
+      .ui.fitted.tab.segment > .ui.table { border-left: 0; border-top: 0; border-right: 0; margin-top: 0; }
+      /* RDF Font gets priority */
+      i.rdf-icon-rdf.icon { font-family: 'rdf-font'; }
+    </style>
+
+    <link rel="shortcut icon" href="/favicon.ico" />
+
+    <!-- Script tags -->
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
+
+    <script>
+      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+
+      ga('create', 'UA-{{ ga | default: '42886053' }}-1', 'json-ld.org');
+      ga('send', 'pageview');
+    </script>
+  </head>
+
+  <body>
+    <div class="ui top fixed menu">
+      <div class="ui container">
+        <!-- Brand -->
+        <a class="header item" href="/">
+          <img src="/images/json-ld-data-24.png" alt="JSON-LD logo">
+          <span>JSON-LD</span>
+        </a>
+
+        <!-- Main menu items -->
+        <a class="item {% if page.url == '/playground/' %}active{% endif %}" href="/playground/">
+          <i class="beer icon"></i> Playground
+        </a>
+
+        <a class="item {% if page.url == '/learn/' %}active{% endif %}" href="/learn/">
+          <i class="book icon"></i> Documentation
+        </a>
+
+        <a class="item" href="/#developers">
+          <i class="flask icon"></i> Developers
+        </a>
+
+        <!-- Dropdown menu -->
+        <div class="ui simple dropdown item {% if page.url == '/spec/' %}active{% endif %}">
+          <i class="folder open icon"></i>
+          Specifications
+          <i class="dropdown icon"></i>
+          <div class="menu">
+            <div class="header"><strong>W3C Recommendations</strong></div>
+            <a class="item" href="https://www.w3.org/TR/json-ld/">Syntax</a>
+            <a class="item" href="https://www.w3.org/TR/json-ld-api/">Processing Algorithms and API</a>
+            <a class="item" href="https://www.w3.org/TR/json-ld-framing/">Framing</a>
+
+            <div class="divider"></div>
+
+            <div class="header"><strong>Latest Drafts</strong></div>
+            <a class="item" href="https://w3c.github.io/json-ld-syntax/">Syntax</a>
+            <a class="item" href="https://w3c.github.io/json-ld-api/">Processing Algorithms and API</a>
+            <a class="item" href="https://w3c.github.io/json-ld-framing/">Framing</a>
+            <a class="item" href="https://w3c.github.io/json-ld-bp/">Best Practices</a>
+            <a class="item" href="https://w3c.github.io/json-ld-streaming/">Streaming</a>
+            <a class="item" href="https://json-ld.github.io/json-ld-star/">JSON-LD-star</a>
+            <a class="item" href="https://w3c.github.io/json-ld-cbor/">CBOR</a>
+            <a class="item" href="https://github.com/w3c/json-ld-rc/">Recommended Context</a>
+            <a class="item" href="https://json-ld.github.io/yaml-ld/">YAML-LD</a>
+            <a class="item" href="/spec/">1.0 drafts (historic)</a>
+          </div>
+        </div>
+
+        <a class="item {% if page.url == '/images/' %}active{% endif %}" href="/images/">
+          <i class="image icon"></i> Branding
+        </a>
+      </div>
+    </div>
+
+    <div class="ui main container">
+    {{ content }}
+    </div>
+
+    <!-- Script tags -->
+    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.4/dist/semantic.min.js"></script>
+    <script>
+      $('#keyboard-shortcuts').popup({ on: 'click', inline: true });
+    </script>
+  </body>
+</html>
diff --git a/examples/playground/activity.jsonld b/examples/playground/activity.jsonld
@@ -0,0 +1,14 @@
+{
+  "@context": "https://www.w3.org/ns/activitystreams",
+  "@type": "Create",
+  "actor": {
+    "@type": "Person",
+    "@id": "acct:sally@example.org",
+    "name": "Sally"
+  },
+  "object": {
+    "@type": "Note",
+    "content": "This is a simple note"
+  },
+  "published": "2015-01-25T12:34:56Z"
+}
diff --git a/examples/playground/event.jsonld b/examples/playground/event.jsonld
@@ -0,0 +1,12 @@
+{
+  "@context": {
+    "ical": "http://www.w3.org/2002/12/cal/ical#",
+    "xsd": "http://www.w3.org/2001/XMLSchema#",
+    "ical:dtstart": {
+      "@type": "xsd:dateTime"
+    }
+  },
+  "ical:summary": "Lady Gaga Concert",
+  "ical:location": "New Orleans Arena, New Orleans, Louisiana, USA",
+  "ical:dtstart": "2011-04-09T20:00:00Z"
+}
diff --git a/examples/playground/library-frame.jsonld b/examples/playground/library-frame.jsonld
@@ -0,0 +1,11 @@
+{
+  "@context": {
+    "dc11": "http://purl.org/dc/elements/1.1/",
+    "ex": "http://example.org/vocab#"
+  },
+  "@type": "ex:Library",
+  "ex:contains": {
+    "@type": "ex:Book",
+    "ex:contains": {"@type": "ex:Chapter"}
+  }
+}
diff --git a/examples/playground/library.jsonld b/examples/playground/library.jsonld
@@ -0,0 +1,24 @@
+{
+  "@context": {
+    "dc11": "http://purl.org/dc/elements/1.1/",
+    "ex": "http://example.org/vocab#",
+    "xsd": "http://www.w3.org/2001/XMLSchema#",
+    "ex:contains": {"@type": "@id"}
+  },
+  "@graph": [{
+    "@id": "https://example.org/library",
+    "@type": "ex:Library",
+    "ex:contains": "https://example.org/library/the-republic"
+  }, {
+    "@id": "https://example.org/library/the-republic",
+    "@type": "ex:Book",
+    "dc11:creator": "Plato",
+    "dc11:title": "The Republic",
+    "ex:contains": "https://example.org/library/the-republic#introduction"
+  }, {
+    "@id": "https://example.org/library/the-republic#introduction",
+    "@type": "ex:Chapter",
+    "dc11:description": "An introductory chapter on The Republic.",
+    "dc11:title": "The Introduction"
+  }]
+}
diff --git a/examples/playground/person.jsonld b/examples/playground/person.jsonld
@@ -0,0 +1,8 @@
+{
+  "@context": "https://schema.org/",
+  "@type": "Person",
+  "name": "Jane Doe",
+  "jobTitle": "Professor",
+  "telephone": "(425) 123-4567",
+  "url": "https://www.janedoe.example/"
+}
diff --git a/examples/playground/place.jsonld b/examples/playground/place.jsonld
@@ -0,0 +1,27 @@
+{
+  "@context": {
+    "name": "https://schema.org/name",
+    "description": "https://schema.org/description",
+    "image": {
+      "@id": "https://schema.org/image",
+      "@type": "@id"
+    },
+    "geo": "https://schema.org/geo",
+    "latitude": {
+      "@id": "https://schema.org/latitude",
+      "@type": "xsd:float"
+    },
+    "longitude": {
+      "@id": "https://schema.org/longitude",
+      "@type": "xsd:float"
+    },
+    "xsd": "http://www.w3.org/2001/XMLSchema#"
+  },
+  "name": "The Empire State Building",
+  "description": "The Empire State Building is a 102-story landmark in New York City.",
+  "image": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/91/View_of_Empire_State_Building_from_Rockefeller_Center_New_York_City_dllu_Cropped.jpg/250px-View_of_Empire_State_Building_from_Rockefeller_Center_New_York_City_dllu_Cropped.jpg",
+  "geo": {
+      "latitude": "40.75",
+      "longitude": "73.98"
+  }
+}
diff --git a/examples/playground/product.jsonld b/examples/playground/product.jsonld
@@ -0,0 +1,27 @@
+{
+  "@context": {
+    "gr": "http://purl.org/goodrelations/v1#",
+    "pto": "http://www.productontology.org/id/",
+    "foaf": "http://xmlns.com/foaf/0.1/",
+    "xsd": "http://www.w3.org/2001/XMLSchema#",
+    "foaf:page": {"@type": "@id"},
+    "gr:acceptedPaymentMethods": {"@type": "@id"},
+    "gr:hasBusinessFunction": {"@type": "@id"},
+      "gr:hasCurrencyValue": {"@type": "xsd:float"}
+  },
+  "@id": "https://example.org/cars/for-sale#tesla",
+  "@type": "gr:Offering",
+  "gr:name": "Used Tesla Roadster",
+  "gr:description": "Need to sell fast and furiously",
+  "gr:hasBusinessFunction": "gr:Sell",
+  "gr:acceptedPaymentMethods": "gr:Cash",
+  "gr:hasPriceSpecification": {
+    "gr:hasCurrencyValue": "85000",
+    "gr:hasCurrency": "USD"
+  },
+  "gr:includes": {
+    "@type": ["gr:Individual", "pto:Vehicle"],
+    "gr:name": "Tesla Roadster",
+    "foaf:page": "https://www.teslamotors.com/roadster"
+  }
+}