Disclaimer
This is for now a specialization of the ontochain-directory component to serve as demonstration for our ontochain-related scenario. It uses the same component name, only the import is different.
Ambition is to merge them in a near future, adding more features to ontochain-directory like wallet and NFT lists support.
Ontochain Directory
Ontochain Directory serves 3 components:
- Solid Profile, to edit your own profile
- Ontochain Directory itself, profile listing component
- Solid Picture, widget for profile picture uploading
How to use
Once the package is installed, you can use the ontochain-directory component:
<html>
<head>
<!-- import the module in the head of the page -->
<script
type="module"
src="https://cdn.skypack.dev/@startinblox/ontochain-directory"
></script>
</head>
<body>
<!-- use the component -->
<ontochain-directory
data-src="http://mydatasrc"
range-skills="http://myrangeskills"
show-incomplete="true"
show-skills="false"
paginate-by="3"
></ontochain-directory>
</body>
</html>Parameters
| Name | Default | Description |
|---|---|---|
data-src |
undefined |
Data source of your user container |
extra-context |
{} |
Custom extra context |
range-skills |
? |
Data source of your skills container, if any |
route-chat |
undefined |
Route for chat |
paginate-by |
undefined |
How many cards per page |
show-incomplete |
undefined |
Show profile having no picture ? |
show-skills |
undefined |
Show skills filters and property ? |
Ontochain specialization
//TODO: complete this section
SIB Picture
SIB Picture is a standalone component that allows to upload picture on my profile.
You can use it as a standalone component this way:
<html>
<head>
<!-- import the module in the head of the page -->
<script type="module" src="https://cdn.skypack.dev/@startinblox/component-directory/ontochain-picture"></script>
</head>
<body>
<!-- use the component -->
<ontochain-picture
data-src="http://mydatasrc"
upload-src="http://mydatasrc/upload"
upload-id="id-of-the-upload-field"
nested-fields="nested-object-in-resource"
fields="field-of-the-nested-resource"
next="form-submit-redirect"
additional='comma, seperated, additional, fields'
></ontochain-picture>
</body>
</html>Parameters
| Name | Default | Description |
|---|---|---|
data-src |
undefined |
Data source of your resource container |
upload-src |
undefined |
Upload source of your resource container |
upload-id |
undefined |
Upload ID |
nested-field |
undefined |
Nested resource container |
fields |
undefined |
Field of the nested resource |
next |
undefined |
Redirect to after form submit |
additional |
undefined |
Additional fields of the nested resource ontainer |
Developpers
Installation:
npm installBuild with:
npm run buildWatch files & rebuild on change with this command:
npm run watch