From 068eee12ecd9e3143906a34f130ae34cdd15d1bc Mon Sep 17 00:00:00 2001 From: Benjamin Young Date: Tue, 25 Nov 2025 12:06:23 -0500 Subject: [PATCH 1/5] Load examples from vcplayground.org. The VC Examples repo can be used locally for testing (if the `examplesBaseUrl` is changed in `app.js`: https://github.com/credential-handler/vc-examples --- app.js | 18 +++++++++++++++++- index.html | 18 +++++++++++++++++- 2 files changed, 34 insertions(+), 2 deletions(-) diff --git a/app.js b/app.js index cbf21a4..e096b33 100644 --- a/app.js +++ b/app.js @@ -6,6 +6,11 @@ import { createApp, reactive } from 'https://unpkg.com/petite-vue?module' import { prettyXML } from './helpers.js'; +// Production URL +const examplesBaseUrl = 'https://examples.vcplayground.org/credentials/'; +// Development URL +//const examplesBaseUrl = 'http://localhost:8788/credentials/'; + // global state const store = reactive({ credential: {} @@ -73,6 +78,12 @@ function SVGViewer({idx}) { } } +async function fetchExamples() { + const examples = await fetch(`${examplesBaseUrl}index.json`) + .then((r) => r.json()); + return examples; +} + window.app = createApp({ // components SVGViewer, @@ -86,6 +97,7 @@ window.app = createApp({ landscape: "", landscapeSVG: "", parseError: "", + examples: await fetchExamples(), // methods async pickFile() { @@ -110,6 +122,7 @@ window.app = createApp({ .then((r) => r.json()) .then((credential) => { store.credential = credential; + this.credentialString = JSON.stringify(credential, null, 2); }) .catch(console.error); }, @@ -121,5 +134,8 @@ window.app = createApp({ this.parseError = error.message; console.error(error); } + }, + loadExampleCredential(event) { + this.loadCredential(`${examplesBaseUrl}${event.target.value}`); } - }).mount(); +}).mount(); diff --git a/index.html b/index.html index a74680d..b63f6de 100644 --- a/index.html +++ b/index.html @@ -39,11 +39,27 @@ +
- +
+
+ +
+
+
+ + +
+
+
From 17afc0c84400d4c99a285d872ec0c74101291ec6 Mon Sep 17 00:00:00 2001 From: Benjamin Young Date: Tue, 25 Nov 2025 12:07:42 -0500 Subject: [PATCH 2/5] Switch SVGViewer default tab back to `rendered`. --- app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app.js b/app.js index e096b33..1864cd2 100644 --- a/app.js +++ b/app.js @@ -21,7 +21,7 @@ function SVGViewer({idx}) { return { $template: '#svg-viewer', // local state - currentTab: 'code', // rendered or code + currentTab: 'rendered', // rendered or code code: '', // methods mustache(template, credential) { From ff46664cd3b096f486a5979799dfc4518919dc65 Mon Sep 17 00:00:00 2001 From: Benjamin Young Date: Thu, 29 Jan 2026 13:21:18 -0500 Subject: [PATCH 3/5] Change JSON shape to match latest vc-examples. --- app.js | 2 +- index.html | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/app.js b/app.js index 1864cd2..f42d1fd 100644 --- a/app.js +++ b/app.js @@ -136,6 +136,6 @@ window.app = createApp({ } }, loadExampleCredential(event) { - this.loadCredential(`${examplesBaseUrl}${event.target.value}`); + this.loadCredential(event.target.value); } }).mount(); diff --git a/index.html b/index.html index b63f6de..09c10e2 100644 --- a/index.html +++ b/index.html @@ -54,8 +54,9 @@
From 031e392de9aeaccd3f7ca4dafdc0648f3aa16c29 Mon Sep 17 00:00:00 2001 From: Benjamin Young Date: Thu, 29 Jan 2026 13:37:46 -0500 Subject: [PATCH 4/5] Set the base URL dynamically. --- app.js | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/app.js b/app.js index f42d1fd..d60ced3 100644 --- a/app.js +++ b/app.js @@ -6,10 +6,9 @@ import { createApp, reactive } from 'https://unpkg.com/petite-vue?module' import { prettyXML } from './helpers.js'; -// Production URL -const examplesBaseUrl = 'https://examples.vcplayground.org/credentials/'; -// Development URL -//const examplesBaseUrl = 'http://localhost:8788/credentials/'; +const examplesBaseUrl = window.location.hostname !== 'localhost' ? + 'https://examples.vcplayground.org/credentials/' : + 'http://localhost:8788/credentials/'; // global state const store = reactive({ From 5bf4a46304f8eb5bde3dff1e6a0b4f20bb72e7cf Mon Sep 17 00:00:00 2001 From: Benjamin Young Date: Fri, 30 Jan 2026 14:57:09 -0500 Subject: [PATCH 5/5] Add info about example loading. --- README.md | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/README.md b/README.md index 3288f4c..56c93d5 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,14 @@ that file). The rest happens in your browser. The Web app is built using [petite-vue](https://github.com/vuejs/petite-vue) and is delightfully build tool free (for now). +## Examples + +Examples are pulled from the hosted version of +https://github.com/credential-handler/vc-examples via a Linked Data Platform +(LDP) Basic Container description hosted at +https://examples.vcplayground.org/credentials/index.json + + ## Render Method implementations The current viewer code implements *only* SVG processing based on the