From 82a8abdfcc0be75955be059b1c8b99d24c4e0a7a Mon Sep 17 00:00:00 2001 From: Benjamin Young Date: Fri, 15 Aug 2025 11:59:30 -0400 Subject: [PATCH 01/11] Load JSON-LD from hash fragments. Supports `startTab` and `json-ld` (for the document). --- playground/next/editor.mjs | 7 +++++++ playground/next/index.html | 2 +- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/playground/next/editor.mjs b/playground/next/editor.mjs index 10cdc8c5..07af8740 100644 --- a/playground/next/editor.mjs +++ b/playground/next/editor.mjs @@ -539,5 +539,12 @@ window.app = createApp({ '@context': this.doc['@context'] }; setEditorValue(this.contextEditor, this.contextDoc); + }, + gatherHash() { + const url = new URL(window.location); + const hash = new URLSearchParams(url.hash.slice(1)); + this.doc = JSON.parse(hash.get('json-ld') || {}); + setEditorValue(this.mainEditor, this.doc); + this.outputTab = hash.get('startTab').slice(4); } }).mount(); diff --git a/playground/next/index.html b/playground/next/index.html index af1f01fc..b0b6b01a 100644 --- a/playground/next/index.html +++ b/playground/next/index.html @@ -29,7 +29,7 @@

JSON-LD Playground

Shift+Tab) to navigate out of the editor.

-
+
- -
-
Keyboard Shortcuts
- - - - - - - - - - - - - - - - - -
KeyAutocomplete
all of the @ keywords
available keys in @context
+
+ +
+
Keyboard Shortcuts
+ + + + + + + + + + + + + + + + + +
KeyAutocomplete
all of the @ keywords
available keys in @context
+
From 086d452e82d81513da7c94aed18ed84bc92b8828 Mon Sep 17 00:00:00 2001 From: Benjamin Young Date: Fri, 15 Aug 2025 14:40:55 -0400 Subject: [PATCH 04/11] Add permalink popup & copy button. --- playground/next/editor.mjs | 16 ++++++++++++++++ playground/next/index.html | 12 ++++++++++++ 2 files changed, 28 insertions(+) diff --git a/playground/next/editor.mjs b/playground/next/editor.mjs index 07af8740..8bb99a4e 100644 --- a/playground/next/editor.mjs +++ b/playground/next/editor.mjs @@ -349,6 +349,14 @@ window.app = createApp({ } return ''; }, + get permalinkURL() { + const url = new URL(window.location); + const hash = new URLSearchParams(); + hash.set('json-ld', JSON.stringify(this.doc)); + hash.set('startTab', `tab-${this.outputTab}`); + url.hash = hash.toString(); + return url.toString(); + }, get sideDoc() { if (this.outputTab === 'framed') { return 'frameDoc'; @@ -370,6 +378,14 @@ window.app = createApp({ return 'Context URL'; } }, + copyPermalink() { + const url = this.permalinkURL; + navigator.clipboard.writeText(url).then(() => { + console.log('Permalink copied to clipboard:', url); + }).catch(err => { + console.error('Failed to copy permalink:', err); + }); + }, // methods async retrieveDoc(_editor, docVar, url) { try { diff --git a/playground/next/index.html b/playground/next/index.html index 30537a35..2f681b58 100644 --- a/playground/next/index.html +++ b/playground/next/index.html @@ -70,6 +70,18 @@

JSON-LD Playground

+ +
+
Share this
+
+ + +
+
From 12794f6934aee4cb7a46f166717d90d44084e06e Mon Sep 17 00:00:00 2001 From: Benjamin Young Date: Fri, 15 Aug 2025 15:05:58 -0400 Subject: [PATCH 05/11] Add setting of `frame` & `context` in permalink. --- playground/next/editor.mjs | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/playground/next/editor.mjs b/playground/next/editor.mjs index 8bb99a4e..ebe54828 100644 --- a/playground/next/editor.mjs +++ b/playground/next/editor.mjs @@ -353,6 +353,12 @@ window.app = createApp({ const url = new URL(window.location); const hash = new URLSearchParams(); hash.set('json-ld', JSON.stringify(this.doc)); + if (this.contextDoc && JSON.stringify(this.contextDoc) !== '{}') { + hash.set('context', JSON.stringify(this.contextDoc)); + } + if (this.frameDoc && JSON.stringify(this.frameDoc) !== '{}') { + hash.set('frame', JSON.stringify(this.frameDoc)); + } hash.set('startTab', `tab-${this.outputTab}`); url.hash = hash.toString(); return url.toString(); From d85ba7b39c0371c8049678d2aff3de8c8a0a384b Mon Sep 17 00:00:00 2001 From: Benjamin Young Date: Fri, 15 Aug 2025 15:37:23 -0400 Subject: [PATCH 06/11] Load `frame` & `context` from URL. --- playground/next/editor.mjs | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/playground/next/editor.mjs b/playground/next/editor.mjs index ebe54828..d059ca44 100644 --- a/playground/next/editor.mjs +++ b/playground/next/editor.mjs @@ -565,6 +565,10 @@ window.app = createApp({ gatherHash() { const url = new URL(window.location); const hash = new URLSearchParams(url.hash.slice(1)); + this.contextDoc = JSON.parse(hash.get('context') || {}); + setEditorValue(this.contextEditor, this.contextDoc); + this.frameDoc = JSON.parse(hash.get('frame') || {}); + setEditorValue(this.frameEditor, this.frameDoc); this.doc = JSON.parse(hash.get('json-ld') || {}); setEditorValue(this.mainEditor, this.doc); this.outputTab = hash.get('startTab').slice(4); From 0bd0524926428184e91b9af5b2bc8112bda08ebc Mon Sep 17 00:00:00 2001 From: Benjamin Young Date: Fri, 15 Aug 2025 16:16:19 -0400 Subject: [PATCH 07/11] Handle failure scenarios better. --- playground/next/editor.mjs | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/playground/next/editor.mjs b/playground/next/editor.mjs index d059ca44..b6de5576 100644 --- a/playground/next/editor.mjs +++ b/playground/next/editor.mjs @@ -564,13 +564,13 @@ window.app = createApp({ }, gatherHash() { const url = new URL(window.location); - const hash = new URLSearchParams(url.hash.slice(1)); - this.contextDoc = JSON.parse(hash.get('context') || {}); + const hash = new URLSearchParams(url?.hash.slice(1)); + this.contextDoc = JSON.parse(hash.get('context')) || {}; setEditorValue(this.contextEditor, this.contextDoc); - this.frameDoc = JSON.parse(hash.get('frame') || {}); + this.frameDoc = JSON.parse(hash.get('frame')) || {}; setEditorValue(this.frameEditor, this.frameDoc); - this.doc = JSON.parse(hash.get('json-ld') || {}); + this.doc = JSON.parse(hash.get('json-ld')) || {}; setEditorValue(this.mainEditor, this.doc); - this.outputTab = hash.get('startTab').slice(4); + this.outputTab = hash.get('startTab')?.slice(4); } }).mount(); From ca7bc2df7b6d0702a3784e56f373e287d1c61308 Mon Sep 17 00:00:00 2001 From: Benjamin Young Date: Fri, 21 Nov 2025 09:49:40 -0500 Subject: [PATCH 08/11] Handle URLs in `json-ld` fragment identifiers. Also handle `copyContext`. --- playground/next/editor.mjs | 16 +++++++++++++--- 1 file changed, 13 insertions(+), 3 deletions(-) diff --git a/playground/next/editor.mjs b/playground/next/editor.mjs index b6de5576..6799dec6 100644 --- a/playground/next/editor.mjs +++ b/playground/next/editor.mjs @@ -562,15 +562,25 @@ window.app = createApp({ }; setEditorValue(this.contextEditor, this.contextDoc); }, - gatherHash() { + async gatherHash() { const url = new URL(window.location); const hash = new URLSearchParams(url?.hash.slice(1)); this.contextDoc = JSON.parse(hash.get('context')) || {}; setEditorValue(this.contextEditor, this.contextDoc); this.frameDoc = JSON.parse(hash.get('frame')) || {}; setEditorValue(this.frameEditor, this.frameDoc); - this.doc = JSON.parse(hash.get('json-ld')) || {}; - setEditorValue(this.mainEditor, this.doc); + // the `json-ld` parameter can be JSON or a URL + const jsonLdOrUrl = hash.get('json-ld'); + try { + this.doc = JSON.parse(jsonLdOrUrl); + setEditorValue(this.mainEditor, this.doc); + } catch { + this.remoteDocURL = jsonLdOrUrl; + await this.retrieveDoc(this.mainEditor, 'doc', this.remoteDocURL); + } + if (hash.get('copyContext') === 'true') { + this.copyContext(); + } this.outputTab = hash.get('startTab')?.slice(4); } }).mount(); From c2d26dda8b0071852591f7112798ffd60e35d75b Mon Sep 17 00:00:00 2001 From: Benjamin Young Date: Fri, 21 Nov 2025 11:36:18 -0500 Subject: [PATCH 09/11] Add warning message about permalink URL length. --- playground/next/index.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/playground/next/index.html b/playground/next/index.html index 2f681b58..27a4659c 100644 --- a/playground/next/index.html +++ b/playground/next/index.html @@ -81,6 +81,9 @@

JSON-LD Playground

+
+ This link is longer than 2kb, and may not work. +