{"_rev":"3-7074f3b2489adcb7c4d869e544006e4b","time":{"created":"2025-10-15T13:55:41.542Z","modified":"2025-10-15T13:55:42.381Z","1.1.0":"2025-10-13T08:48:10.897Z","1.0.0":"2025-10-15T13:55:41.883Z"},"_id":"@adityaghag/blockcerts-verifier","name":"@adityaghag/blockcerts-verifier","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@adityaghag/blockcerts-verifier","version":"1.0.0","description":"A standalone universal viewer and verifier for bloxberg credentials","repository":{"type":"git","url":"git+https://github.com/adi-ghag/blockcerts-verifier.git"},"main":"dist/main.js","engines":{"node":">=20.0.0"},"dependencies":{"@adityaghag/cert-verifier-js":"^1.2.1","@blockcerts/cert-verifier-js-v1-legacy":"^4.0.1","@polymer/lit-element":"0.5.1","@polymer/polymer":"3.5.2","@webcomponents/webcomponentsjs":"2.8.0","autolinker":"^4.0.0","cssfilter":"0.0.11","html-canvas":"^0.0.4","jspdf":"^3.0.1","lit-html":"0.10.2","pdfjs-dist":"^5.4.296","proxy-polyfill":"^0.3.0","pwa-helpers":"^0.8.4","qrcode-svg":"^1.1.0","redux":"^5.0.0","redux-thunk":"^2.3.0","whatwg-fetch":"^3.0.0","xss":"^1.0.3"},"devDependencies":{"@commitlint/cli":"^19.8.0","@commitlint/config-conventional":"^19.8.0","@eslint/js":"^9.24.0","@open-wc/testing":"^4.0.0","@rollup/plugin-commonjs":"^28.0.3","@rollup/plugin-node-resolve":"^16.0.1","@rollup/plugin-replace":"^6.0.2","@rollup/plugin-terser":"^0.4.3","@rollup/plugin-typescript":"^12.1.2","@types/mocha":"^10.0.10","@types/qrcode-svg":"^1.1.1","@types/sinon":"^17.0.1","@typescript-eslint/eslint-plugin":"^8.30.1","@typescript-eslint/parser":"^8.23.0","@web/test-runner":"^0.20.1","codecov":"^3.8.3","concurrently":"^9.1.2","eslint":"^9.24.0","express":"^5.1.0","husky":"^9.1.7","jsdom":"^26.0.0","rimraf":"^6.0.1","rollup":"^4.22.4","rollup-plugin-livereload":"^2.0.0","rollup-plugin-serve":"^3.0.0","rollup-plugin-visualizer":"^6.0.1","semantic-release":"^24.2.3","sinon":"^21.0.0","stylelint":"^16.9.0","stylelint-config-standard-scss":"^15.0.1","typescript":"^5.8.3","typescript-eslint":"^8.29.1","vitest":"^3.1.1","wc-sass-render":"github:blockchain-certificates/wc-sass-render"},"scripts":{"build":"rimraf dist && rollup -c rollup.config.mjs","build:sanitizer":"rollup -c rollup-sanitizer.config.mjs","test":"npm run test:application","test:build":"npm run test:e2e","test:e2e":"tsc -p tsconfig-test.json && web-test-runner && npm run test:e2e:cleanup","test:e2e:cleanup":"git clean -dfq","test:application":"vitest run","test:application:watch":"vitest","test:coverage":"vitest run --silent --coverage.enabled","test:coverage:report":"codecov","start":"concurrently 'rollup -c rollup.dev.config.mjs -w' 'npm run styles:compile:watch' 'npm run start:mock-server'","start:mock-server":"node test/mock-server","styles:compile":"sass-render ./src/components/**/*.scss","styles:compile:watch":"sass-render ./src/components/**/*.scss -w","lint":"npm run lint:ts && npm run lint:styles","lint:ts":"eslint . --ext .ts","lint:styles":"stylelint '**/*.scss'","semantic-release":"semantic-release","prepare":"husky install"},"browserslist":["defaults","not IE 11","maintained node versions"],"publishConfig":{"access":"public"},"semistandard":{"globals":["performance","fetch","FileReader","atob","CustomEvent","Image","domainParseStub"],"ignore":["sanitizer/sanitizer.js","test/wct-script/getTestFiles.js","test/assertions/*","*-css.js"]},"_id":"@adityaghag/blockcerts-verifier@1.0.0","gitHead":"416eb098ab28616fd2c41b1fe83ba6a1838829eb","bugs":{"url":"https://github.com/adi-ghag/blockcerts-verifier/issues"},"homepage":"https://github.com/adi-ghag/blockcerts-verifier#readme","_nodeVersion":"22.13.0","_npmVersion":"10.9.2","dist":{"integrity":"sha512-pNA71jvctoUGEiO2GNDW/e2WNi1ep4T1MlJ8bbONwWBg8ucWq8dbV4vmzB/uZf0ZpMge36B0Y87Cw5XRMT9kRg==","shasum":"4348541bad79e47d5273c26dfef0f3509a2df262","tarball":"https://registry.npmjs.org/@adityaghag/blockcerts-verifier/-/blockcerts-verifier-1.0.0.tgz","fileCount":86,"unpackedSize":7291071,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCfY78Sge0YFYDxVrcK6zYHPujzd6sOx53/7J+hr43KEwIhALTfFWItCuW8x39FQYaV6OjNb7PzCKCbAKsU2DWSFwHq"}]},"_npmUser":{"name":"adityaghag","email":"aditya.ghag94@gmail.com"},"directories":{},"maintainers":[{"name":"adityaghag","email":"aditya.ghag94@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/blockcerts-verifier_1.0.0_1760536541659_0.9043991521350145"},"_hasShrinkwrap":false}},"maintainers":[{"name":"adityaghag","email":"aditya.ghag94@gmail.com"}],"description":"A standalone universal viewer and verifier for bloxberg credentials","homepage":"https://github.com/adi-ghag/blockcerts-verifier#readme","repository":{"type":"git","url":"git+https://github.com/adi-ghag/blockcerts-verifier.git"},"bugs":{"url":"https://github.com/adi-ghag/blockcerts-verifier/issues"},"readme":"# \\<blockcerts-verifier\\>\n\n[![Build Status](https://app.travis-ci.com/blockchain-certificates/blockcerts-verifier.svg?branch=master)](https://app.travis-ci.com/github/blockchain-certificates/blockcerts-verifier)\n[![codecov](https://codecov.io/gh/blockchain-certificates/blockcerts-verifier/branch/master/graph/badge.svg)](https://codecov.io/gh/blockchain-certificates/blockcerts-verifier)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n\nA standalone universal viewer &amp; verifier for blockcerts credentials\n\n# Production\nThe component is developed with Polymer 3.\nTo use the component in your project, install it via:\n\n```\n  npm i @blockcerts/blockcerts-verifier\n```\n\n```html\n  <script type=\"module\" src=\"node_modules/@blockcerts/blockcerts-verifier/dist/main.js\"></script>\n\n  <blockcerts-verifier></blockcerts-verifier>\n```\nChrome will support natively the code, but for Firefox, Safari, MS Edge (Opera and Brave), you will need to add the webcomponent loader before:\n\n```html\n    <script src=\"node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js\"></script>\n```\n\nHave a look at the [Demo Pages](/demo) to see examples of the usage\n\n## API Usage\n\n### Default behavior\nBy the default, the component will:\n- Display a Blockcerts record in `card` mode (concise information)\n- Will allow verification of a Blockcerts Record\n- Enables auto-verification (verification as the record is loaded)\n\n### API\nThe component will understand the following options:\n\n- `allow-download`: (Boolean. default: `false`). Enables the download of the record. At this moment only records provided by Learning Machine are downloadable. \n   \n   Example:\n   \n   ```html\n   <blockcerts-verifier allow-download></blockcerts-verifier>\n   ```\n- `allow-social-share`: (Boolean. default: `false`). Allows sharing the record on the social networks (LinkedIn, Facebook and Twitter). \n   \n   Example:\n   \n   ```html\n   <blockcerts-verifier allow-social-share></blockcerts-verifier>\n   ```\n- `disable-auto-verify`: (Boolean. default: `false`). Disables starting automatically the verification sequence as the record is loaded. \n   \n   Example:\n   \n   ```html\n   <blockcerts-verifier disable-auto-verify></blockcerts-verifier>\n   ```\n- `disable-download-pdf`: (Boolean. default: `false`). Disables the Download PDF functionality.\n   \n   Example:\n   \n   ```html\n   <blockcerts-verifier disable-download-pdf></blockcerts-verifier>\n   ```\n- `disable-verify`: (Boolean. default: `false`). Disables verification of the record altogether. \n  \n  Example:\n  \n  ```html\n  <blockcerts-verifier disable-verify></blockcerts-verifier>\n  ```\n- `display-mode`: (String, oneOf('card', 'full', 'fullscreen'). default: `card`). \nChanges the display of a record. \n    - `card` will be a concise summary of the record with a link to the full record. \n    - `full` will show the actual record as designed by the emitter.\n    - `fullscreen` will display a two-column overlay (in desktop) that takes the window dimensions.\nThe certificate displays similar as `full`. NOTA: only works for certificates that have a `displayHTML` property.\n  \n  Example:\n  \n  ```html\n  <blockcerts-verifier display-mode=\"full\"></blockcerts-verifier>\n  ```\n- `show-metadata`: (Boolean. default: `false`). Enables showing the metadata of a record.  \n  \n  Example:\n  \n  ```html\n  <blockcerts-verifier show-metadata></blockcerts-verifier>\n  ```\n- `src`: (String. default: `''`). Allows loading an initial record with no further actions required. `src` can be either an absolute URL, a relative path or a stringified certificate definition.  \n  \n  Example:\n  \n  ```html\n  <blockcerts-verifier src='../fixtures/valid-certificate-example.json'></blockcerts-verifier>\n  ```\n- `theme`: (String. default: `'bright'`). Adapts to the background of the page that hosts the component. If the component is displayed on a dark background, you should use the `dark` option. If it's bright, then use the `bright` option.  \n  \n  Example:\n  \n  ```html\n  <blockcerts-verifier theme='dark'></blockcerts-verifier>\n  ```\n  \n- `locale`: (String. default: `'auto'`, if language code not recognized will default to English (`en`)). View `src/i18n/lang` to see the list of supported languages. Contributions welcome.\n\n  Example:\n  \n  ```html\n  <blockcerts-verifier locale='fr'></blockcerts-verifier>\n  ``` \n  \n- `clickable-urls`: (Boolean, default: `false`). When set to true, the certificate view will identify and convert to clickable links (`<a href=...) any url ([http(s)://(www.)]blockcerts.org/[params]) contained in the `displayHTML` property of the certificate. \n  \n## Custom Blockchain explorers - `explorerAPIs`\nSince v4.1.0 of [cert-verifier-js](https://github.com/blockchain-certificates/cert-verifier-js) accepts custom blockchain explorers, Blockcerts Verifier facilitates communicating such service for the verification process.\n\nAs the object would be quite complicated, the option cannot be passed as attribute, but rather via property, as follows:\n\n```javascript\nconst explorer = {\n  parsingFunction: function (): TransactionData {},\n  serviceURL: 'your-explorer-service.url',\n  priority: 0 | 1\n}\n    \ndocument.addEventListener('DOMContentLoaded', function () {\n  const bv = document.querySelector('blockcerts-verifier');\n  bv.explorerAPIs = [explorer];\n});\n```\n\nSee this section: https://github.com/blockchain-certificates/cert-verifier-js#explorerapis to get more information. \n  \n## Event Tracking API\nThe component will emit events on different moment of the certificate life cycle.\nTo subscribe and track these events you should add on your consumer page event listeners on the `window` object.\n\nSee the [event demo page](https://github.com/blockchain-certificates/blockcerts-verifier/blob/master/demo/events.html) for a working example.\n\nThe information is communicated via the `detail` key of the event.\n\nSupported Events:\n- `certificate-load`\n   \n   Triggered when a certificate has been loaded into the component.\n   Returns:\n    - the `certificateDefinition` (object) on which the action was called.\n   \n- `certificate-verify`\n   \n   Triggered when the verification process of a certificate is started.\n   Returns:\n    - the `certificateDefinition` (object) on which the action was called.\n   \n- `certificate-share`\n   \n   Triggered when a social network link is clicked.\n   Returns:\n    - the `certificateDefinition` (object) on which the action was called.\n    - the `socialNetwork` (string) to which the record was shared.\n   \n   \n\n# Development\n## Viewing Your Element\n\n```\nnpm run start\n```\n\nWill make the demo page available on http://localhost:8081/demo/.\n\n## Modifying the Sanitizer\n\nThe `sanitizer` is used in order to protect against malicious certificates that could hold XSS attacks.\nIt is an overlay of the [xss](https://www.npmjs.com/package/xss) library, since at times, you might want to be able to configure or adapt the whitelist to your own needs.\n\nTo modify it, you should edit the `sanitizer/index.js` file. \n\n#### Whitelist CSS properties\nMore specifically if you wish to whitelist some CSS properties, add them to the object `whiteListedCssProperties`.\n\n#### Generate the updated sanitizer\n```\n  npm run build:sanitizer\n```\n\nThis will generate the `sanitizer.js` file, which is then used by the application and the tests.\n\nIf you want to work on the sanitizer in watch mode (and auto-generate your changes), use the following command:\n\n```\n  npm run build:sanitizer -- -w\n```\n\n## Running Tests\n\n### Application Tests\n\n```\nnpm run test:application\n```\n\nNOTE: application must be started to run the tests, or at the very least the mock-server via the `npm run start:mock-server` (automatically included in the `npm run start` command).\n\n**watch mode**\n\n```\nnpm run test:application:watch\n```\n\n### Component Tests\n```\nnpm run test:components\n```\n\n**\"watch\" mode**\n```\nnpm run test:components:persist\n```\nWill allow refreshing the test page: http://localhost:8000/components/blockcerts-verifier/generated-index.html?cli_browser_id=0\n\n## Dealing with CSS\nThe `npm run start` command will also start a SASS compiler watcher, which means that any stylesheet within the `components` folder will be transpiled to a polymer component that can be reused within another component. ie:\n\n```javascript\nimport CSS from './_components.button-css';\n[...]\n_render () {\n    return html`${CSS}[...]`\n}\n```\n\n### Using shared styles\nTo reduce the amount of code duplication, and following the ITCSS philosophy, you may need to import some of the shared-styles in your component.\nTo do so, in your component's SASS file, add the following instruction:\n\n```javascript\n/* in _components.my-component.sass */\n\n@import '../../../shared-styles/objects.text';\n\n[...component styles]\n\n@import '../../../shared-styles/utils.a11y';\n```\n\nPlease note that the SASS watcher does not observe changes in the shared styles folder, and will not automatically recompile any consumer stylesheet. You will have to recompile them yourselves (TODO: improve DevX here).\n\n## More info\nPlease have a look through the [ADR](/docs/ADR) documentation to get more context around the architecture and the ways of developing a component.\n","readmeFilename":"README.md"}