## Synopsis

This is a series of web component respecting both the web components standards and the Linked Data Platform convention.
They are aimed at enabling anyone with little development skills to create their own web application by placing these components in an HTML file.

## Code Example

An full app example can be found in index.html:

## Initialization

You first need to load the webcomponents polyfill for the browsers that have not implemented them yet, and import the components you want to use in your HTML file:
```html
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.0.20/webcomponents-loader.js"></script>
<script type="module" src="https://unpkg.com/@startinblox/router@latest"></script>
```

Then you can use the new tags in your markup, for instance : `<sib-router>`. 
More details on each component in the following section. 

## Components documentation

### sib-router &amp; sib-route

Displays a menu and handle the navigation for you.

```html
<sib-router 
    default-route="list"
    route-prefix="my-app"
    use-hash
>
    <sib-route name="list">List</sib-route>
    <sib-route name="form">Form</sib-route>
    <sib-route name="detail">Details</sib-route>
</sib-router>

```

`<sib-router>` accepts the following attributes:

 - **default-route**: The `name` attribute of the default `<sib-route>` displayed.
 - **route-prefix**: If you app is not run from the root of your domain name, for instance `www.your-domain.com/some-uri`, you should set `route-prefix` to `"some-uri"`. 
 - **use-hash**: If you can't rewrite the URLs on your server, you might want to set this attribute to use `location.hash` instead of `location.pathname` as URLs. 
 
`<sib-route>` accepts the following attributes:

 - **active**: This attribute is present on route being displayed by `<sib-router>`. It is automatically added/removed by `<sib-router>` and should not be tinkered manually.


### sib-link
`<sib-link>` accepts the following attributes:

 - **next**: The `name` attribute of the `<sib-route>` you want to access.

Example :
```html
<sib-link next="profile">See profile</sib-link>
```

### bind-resources attribute
To associate the currently displayed resource to a component, add the `bind-resources` attribute to it.
It will set its `data-src` attribute to the currently displayed resource's URL. 

Example:
```html
<sib-conversation bind-resources></sib-conversation>
```
will result in :
```html
<sib-conversation data-src="https://your-domain/your-group-uri/3" bind-resources></sib-conversation>
```


## Events

Coming soon...


## License

Licence MIT