npm package: @startinblox/ontochain-directory
Description: 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.
Author: startinblox
Latest version: 1.0.9

# 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
<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
<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:

```bash
npm install
```

Build with:

```bash
npm run build
```

Watch files & rebuild on change with this command:

```bash
npm run watch
```