Support JSON-LD data islands in HTML pages #5

Problem

When browsing to an HTML page like https://jsonos.com/examples/organization.html, the browser shows nothing because rdflib's Fetcher doesn't extract JSON-LD data islands from HTML responses.

Current behavior:

1. User browses to organization.html
2. Server returns Content-Type: text/html
3. rdflib Fetcher doesn't know how to parse HTML
4. Empty store, nothing renders

Expected behavior:

1. User browses to organization.html
2. solid-shim detects HTML response
3. Extracts <script type="application/ld+json"> content
4. Parses JSON-LD into store
5. Renders with appropriate pane (or @view if specified)

Background

JSON-LD data islands are part of the JSON-LD spec and widely used (Google's structured data, schema.org markup, etc.). The browser should handle them natively.

Proposed Solution

Hook into rdflib's Fetcher or add a custom handler:

// When fetching a URL
const response = await fetch(url)
const contentType = response.headers.get('content-type')

if (contentType?.includes('text/html')) {
  const html = await response.text()
  const doc = new DOMParser().parseFromString(html, 'text/html')
  const jsonLdScript = doc.querySelector('script[type="application/ld+json"]')
  
  if (jsonLdScript) {
    const data = JSON.parse(jsonLdScript.textContent)
    parseJsonLdToStore(data, url, store)
    // Render with @view or type-based pane
  }
}

Related

• Proposal: @view as syntactic sugar for a standard RDF predicate json-os/json-os.github.io#1 - The @view proposal
• solid-shim#4 - @view predicate support