HTML Render Method

credentials/html-render-method/README.md

@@ -0,0 +1,12 @@
+# HTML Render Method Example VC
+
+This example contains an HTML-based template following the forthcoming
+[HTML Render Method](https://github.com/w3c/vc-render-method/pull/42)
+change to the
+[Verifiable Credential Render Methods v1.0](https://w3c.github.io/vc-render-method/)
+specification.
+
+## `image.png` Attribution
+
+The HTML file icon used in the `image.png` file was
+[created by Smashicons and found via Flaticon.com](https://www.flaticon.com/free-icons/html-file).

credentials/html-render-method/credential.json

@@ -0,0 +1,37 @@
+{
+  "@context": [
+    "https://www.w3.org/ns/credentials/v2",
+    "https://www.w3.org/ns/credentials/examples/v2"
+  ],
+  "type": [
+    "VerifiableCredential",
+    "NameCredential"
+  ],
+  "issuer": {
+    "id": "did:example:1234",
+    "name": "The Issuer"
+  },
+  "credentialSubject": {
+    "name": "Example Name",
+    "notRendered": "should not appear"
+  },
+  "renderMethod": {
+    "type": "TemplateRenderMethod",
+    "renderSuite": "html",
+    "renderProperty": [
+      "/issuer/name",
+      "/credentialSubject/name"
+    ],
+    "template": "data:text/html,<div>\n  <script>\n    document.addEventListener('DOMContentLoaded', (event) => {\n    console.log('running template render script');\n\n    // display credential as JSON as an example renderer; anything\n    // could be done here instead, including mustache/other-style\n    // template processing to generate the HTML for display\n\n    // FIXME: determine best name/location for the datablock/script tag\n    const credential = JSON.parse(document.querySelector(\n      'head > script[name=\"credential\"]').innerHTML);\n\n    document.querySelector('#credentialSubject-name').innerText =\n      credential.credentialSubject.name;\n    document.querySelector('#issuer-name').innerText =\n      credential.issuer.name;\n\n    // TBD: signal to host that rendering is complete\n    window.renderMethodReady();\n});  </script>\n  <style>\n    h1 {\n      color: blue;\n    }\n  </style>\n\n  <h1 id=\"credentialSubject-name\"></h1>\n  <p>Issued by: <span id=\"issuer-name\"></span></p>\n</div>",
+    "outputPreference": {
+      "mode": [
+        "visual"
+      ],
+      "mediaType": "application/html",
+      "style": {
+        "width": "800px",
+        "height": "800px"
+      }
+    }
+  }
+}

credentials/html-render-method/queries.json

@@ -0,0 +1,26 @@
+{
+  "default": {
+    "type": "QueryByExample",
+    "credentialQuery": {
+      "reason": "Please present your Name Credential with HTML Render Method.",
+      "example": {
+        "@context": [
+          "https://www.w3.org/2018/credentials/v1",
+          "https://www.w3.org/ns/credentials/examples/v2"
+        ],
+        "type": ["NameCredential"],
+        "renderMethod": {
+          "type": "TemplateRenderMethod",
+          "renderSuite": "html"
+        }
+      },
+      "acceptedCryptosuites": [
+        "Ed25519Signature2020",
+        "eddsa-rdfc-2022",
+        "ecdsa-rdfc-2019",
+        "bbs-2023",
+        "ecdsa-sd-2023"
+      ]
+    }
+  }
+}

src/_data/examples.js

@@ -24,7 +24,8 @@ for(const dir of directories) {
   const readmePath = path.join(dir, 'README.md');
   // TODO: gather images also
   const credential = JSON.parse(fs.readFileSync(credentialPath, 'utf8'));
-  const queries = JSON.parse(fs.readFileSync(queriesPath, 'utf8'));
+  const queries = fs.existsSync(queriesPath) ?
+    JSON.parse(fs.readFileSync(queriesPath, 'utf8')) : {};
   const readme = fs.existsSync(readmePath) ?
     fs.readFileSync(readmePath, 'utf8') : '';
   const dirname = path.basename(dir);