What's Internet Identity?
A custom element that explains briefly what is Internet Identity.
It can be integrated in any modern web applications with or without frameworks.
Table of contents
Installation
You can use the component via CDN or by installing it locally.
CDN
Add the following code to your page to load the editor.
<script type="module" src="https://unpkg.com/@papyrs/what-is-internet-identity@latest/dist/what-is-internet-identity/what-is-internet-identity.esm.js"></script>
That's it, it is imported and loaded.
Local Installation
Install the custom element in your project from npm:
npm install @papyrs/what-is-internet-identity
Afterwards you will need to load - i.e. import - the component in your application. Use one of the following methods, the one that fits the best your needs or framework.
Loader
Lazy load the components with the help of a loader.
import {defineCustomElements} from '@papyrs/what-is-internet-identity/dist/loader';
defineCustomElements();
Import
Import the library.
import '@papyrs/what-is-internet-identity';
Custom Elements
It is also possible to dynamically import the custom element.
const {defineCustomElement} = await import('@papyrs/what-is-internet-identity/dist/components/what-is-ii');
defineCustomElement();
Assets
The component uses an image to render a screenshot of Internet Identity in the UI. It should be integrated in your application's assets.
You can either copy it manually or automate the process. The image finds place in your node_modules/@papyrs/what-is-internet-identity/dist/what-is-internet-identity/images/internet-identity.webp
.
Another option is also to download the file from GitHub.
e.g. in Papyrs - a SvelteKit application - I copied the file into my application static
folder that is automatically copied to my output folder at build time.
Usage
To integrate the component into your application, use the following tag:
<what-is-ii></what-is-ii>
Assuming the component would ever be translated, you can set another language
through the dedicated property:
<what-is-ii language="en"></what-is-ii>
Finally, to specify the relative path to the folder in which you have copied the image, you can use the assetsDir
property.
<what-is-ii assets-dir="assets"></what-is-ii>
The default value is images
. e.g. in Papyrs the file is hosted at the address https://app.papy.rs/images/internet-identity.webp
.
Contribution
Obviously open for contribution! Go for PR
In addition to code, translations are also welcomed:
- in i18n copy
en.ts
to the new language you are looking to add - translate all the keys of the file
- provide a PR
Afterwards it will need a small piece of code to load the new translations, I'll take care of this before releasing a new version of the library.
Credits
I noticed the original idea and design on Distrikt - a decentralized social media network that empowers users.
License
MIT © David Dal Busco and Nicolas Mattia