Public Badges Web Component

This is a Stencil JS project used to build a web component for the PublicBadges project. Adding the Public Badges to your website is done by including the PublicBadges javascript and adding our web component into the html of your website.

Include javascript in your site/project

Including PublicBadges javascript can be done by simply referencing the javascript via a script tag (see below for different hosting options) or include it into your project via npm.

via script tags

The javascript can be included from different sources.

From CDN:

<script type="module" src="https://unpkg.com/@publicbadges/badge@latest/dist/publicbadges/publicbadges.esm.js"></script>
<script nomodule src="https://unpkg.com/@publicbadges/badge@latest/dist/publicbadges/publicbadges.js"></script>

From the Public Spaces server:

<script type="module" src="https://assets.publicspaces.net/@publicbadges/badge@latest/dist/publicbadges/publicbadges.esm.js"></script>
<script nomodule src="https://assets.publicspaces.net/@publicbadges/badge@latest/dist/publicbadges/publicbadges.js"></script>

Or download the javascript files and host it on your own server. For example:

<script type="module" src="https://example.org/path/to/publicbadges-folder/publicbadges.esm.js"></script>
<script nomodule src="https://example.org/path/to/publicbadges-folder/publicbadges.js"></script>

Include javascript in your project from NPM:

npm install @publicbadges/badge

Or if you use yarn:

yarn add @publicbadges/badge

Please refer to the StencilJS documentation for more information on how to include the web component in your JS framework. See Custom Elements Everywhere for how your framework supports web components.

Include Public Badges drawer web component in your html

The Public Badges drawer is a web component that you can use directly in your html.

<publicbadges-drawer />

To configure the badges drawer the following (optional) html attributes are available:

| attribute | values | default | description | |-------------|-----------------|-----------------------|-------------------------------------------------------------------------------------------------| | badge-color | hex color code | "#3C3C3C" | Sets the color of the badges drawer. Make sure it has enough contrast with the background color | | modal-theme | "dark", "light" | "light" | Sets the color scheme of the modal (that appears when the drawer is clicked). | | language | "EN", "NL" | "EN" | Sets the language of the badges drawer |

The size can optionally be controled with css (default size is 120px, minimum size is 90px).

<publicbadges-drawer style="width:150px; height:150px;" />

Browser support

Older browsers may not support web components and thus not show the PublicBadges web component. Internet Explorer, Edge v. <79, Firefox v. <63, Chrome v. <67 and Safari v. <10.1 do not support web components. See https://caniuse.com/custom-elementsv1 for a full overview of browser support.

While it is possible to polyfill web component apis for older browsers, the PublicBadges web component may still not function properly as is has not been tested older browsers that don't support web components.