@startinblox/ontochain-directory NPM

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