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.
An full app example can be found in index.html:
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:
Then you can use the new tags in your markup, for instance:
<solid-router>. More details on each component in the following
Displays a menu and handle the navigation for you.
<solid-router default-route="list" route-prefix="my-app" use-hash > <solid-route name="list">List</solid-route> <solid-route name="form">Form</solid-route> <solid-route name="detail">Details</solid-route> </solid-router>
nameattribute of the default
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
use-hash: If you can’t rewrite the URLs on your server, you might want to set this attribute to use
keep-url: It freezes the URL of all the
<solid-route>included. Usefull to freeze the URL when a pop-up is displayed.
use-id: indicates that the route takes an id.
name: The name of the route. Must match the
data-viewof the view that is to be displayed. The same name is used as a url identifier as well.
rdf-type: Can be used as an alternative of
name. The route will be activated if a resource with the given type is passed to the router.
active: This attribute is present on route being displayed by
<solid-router>. It is automatically added/removed by
<solid-router>and should not be tinkered manually.
<div data-view=[name]> attributes:¶
view-title: allows to change the
titleof the page when a user navigates to this view.
view-description: allows to change the
<meta name="description">of the page when the user navigates to this view.
Manage browsing statistics.
Sign in on a web analytics service and set
<body>, at the begining for example.
<solid-analytics> accepts the following attributes:
type: the type of web analytics service used (currently supports
url: URL of the service. For
type="google"it is not necessary to specify the url attribute.
id: id of the website on the service.
'debug' allow to test sib-analytics. It will display the route
on the console each time a navigation is triggered.
<sib-analytics type="matomo" url="https://matomo.example.com/" id="1234"></sib-analytics>
Interacting with the router¶
To associate the currently displayed resource to a component, add the
bind-resources attribute to it. It will set its
attribute to the currently displayed resource’s URL.
<sib-conversation bind-resources ></sib-conversation>
will result in:
<sib-conversation data-src="https://your-domain/your-group-uri/3" bind-resources ></sib-conversation>
In the same way, the
bind-user attribute can be used to associate the
currently logged in user to a component and set its
More informations about this in the sib-auth documentation.