diff --git a/source/import_documentation/Components/Solid-Ac-Checker.rst b/source/import_documentation/Components/Solid-Ac-Checker.rst
index 1d9ae5d9be4a330d83aefd0250bb893d28c2470b..68dc8b60c90005600478dc09deee589e0de3aa66 100644
--- a/source/import_documentation/Components/Solid-Ac-Checker.rst
+++ b/source/import_documentation/Components/Solid-Ac-Checker.rst
@@ -1,3 +1,4 @@
+.. _solid-ac-checker:
solid-ac-checker
================
@@ -17,7 +18,8 @@ Mixins
This component uses the following mixins:
-- `store-mixin <store-mixin>`__
+ * :ref:`store-mixin <store-mixin>`
+
Please check their documentation to know more about their capabilities.
diff --git a/source/import_documentation/Components/Solid-Auth.rst b/source/import_documentation/Components/Solid-Auth.rst
index d612a91447deb7f62a0a90a1d6d21cd00c21670a..b42516b28f3407efc8fa32de2eceb75d3174af40 100644
--- a/source/import_documentation/Components/Solid-Auth.rst
+++ b/source/import_documentation/Components/Solid-Auth.rst
@@ -1,29 +1,23 @@
-solid-auth
+.. _sib-auth:
+sib-auth
================
Allows your users to login via a given OIDC provider.
Installation
--------------
- Add the following within the <head> of your HTML:
-
- .. note::
-
- Indeed, It doesn't matter where you put the solid-auth.
+ Initialize ``sib-auth`` in your HTML file:
.. code:: html
<script type="module" src="https://unpkg.com/@startinblox/oidc@latest"></script>
- <solid-auth>
- <solid-auth-provider
- class="solid-auth-provider"
+ <sib-auth>
+ <sib-auth-provider
data-authority="https://test-paris.happy-dev.fr/openid/"
- data-client_id="833925"
data-id="paris"
- data-client-name="SIB App"
>
- </solid-auth-provider>
- </solid-auth>
+ </sib-auth-provider>
+ </sib-auth>
`You'll find here the detail of the attributes configuration. <https://github.com/IdentityModel/oidc-client-js/wiki#usermanager>`__
@@ -34,17 +28,17 @@ Set an OIDC provider to your server
The Django package associated is there => https://github.com/jblemee/django-oidc-provider
More documentation here => https://django-oidc-provider.readthedocs.io/en/latest/
-Don't forget to set up your RSA key :
+Don't forget to set up your RSA key:
.. code:: bash
python3 ./manage.py creatersakey
-Set Up your loggin button
-~~~~~~~~~~~~~~~~~~
+Setup your login button
+~~~~~~~~~~~~~~~~~~~~~~~~~~
-Here is an example to make you understand the logic :
+Here is an example to make you understand the logic:
.. code:: html
@@ -52,23 +46,23 @@ Here is an example to make you understand the logic :
<!-- wherever you want in your interface -->
<script>
- // wherever you want in your project
+ // wherever you want in your project
document.querySelector('#login').addEventListener('click', () => {
- document.querySelector('sib-auth').login()
+ document.querySelector('sib-auth').login()
});
</script>
bind-user
-------------
+----------
To associate the currently logged in user to a component, add the bind-user attribute to it.
- It will set its `data-src` attribute to the currently logged in user's resource URL.
+ It will set its ``data-src`` attribute to the currently logged in user's resource URL.
Example:
.. code:: html
<sib-conversation bind-user></sib-conversation>
- will result in :
+ will result in:
.. code:: html
@@ -77,15 +71,15 @@ bind-user
Methods available
------------------
-Login
-~~~~~~~~~~~~~
+``login``
+~~~~~~~~~
.. code:: js
document.querySelector('sib-auth').login();
-Logout
-~~~~~~~~~~~~~
+``logout``
+~~~~~~~~~~
.. code:: js
@@ -95,5 +89,5 @@ Get user info
~~~~~~~~~~~~~
.. code:: js
-
+
document.querySelector('sib-auth').getUser();
\ No newline at end of file
diff --git a/source/import_documentation/Components/Solid-Calendar.rst b/source/import_documentation/Components/Solid-Calendar.rst
index 65c7e255e83e297a14571853847a7243b71ec088..92c68b8f61a198b379dca59eb6c8b9d143cc613e 100644
--- a/source/import_documentation/Components/Solid-Calendar.rst
+++ b/source/import_documentation/Components/Solid-Calendar.rst
@@ -17,9 +17,9 @@ Mixins
This component uses the following mixins:
-- `list-mixin <list-mixin>`__
-- `next-mixin <next-mixin>`__
-- `store-mixin <store-mixin>`__
+ * :ref:`list-mixin <list-mixin>`
+ * :ref:`next-mixin <next-mixin>`
+ * :ref:`store-mixin <store-mixin>`
Please check their documentation to know more about their capabilities.
diff --git a/source/import_documentation/Components/Solid-Delete.rst b/source/import_documentation/Components/Solid-Delete.rst
index 072d70f64cdadfbbef9b28a172d1a46163207a56..a1445917a9f5abf769516de1a72af8068c55d353 100644
--- a/source/import_documentation/Components/Solid-Delete.rst
+++ b/source/import_documentation/Components/Solid-Delete.rst
@@ -15,7 +15,7 @@ Mixins
This component uses the following mixin:
-- `next-mixin <next-mixin>`__
+ * :ref:`next-mixin <next-mixin>`
Please check their documentation to know more about its capabilities.
@@ -35,6 +35,6 @@ Attributes
Events
-------
-``resourceDeleted``
-~~~~~~~~~~~~~~~~~~~
+``save``
+~~~~~~~~
Triggered when the resource is successfully deleted.
diff --git a/source/import_documentation/Components/Solid-Display.rst b/source/import_documentation/Components/Solid-Display.rst
index 19d25d2baa9918036cf95e525e4e856761bc1d0c..b327fa1c885352adfef43eb48428c83ed637a933 100644
--- a/source/import_documentation/Components/Solid-Display.rst
+++ b/source/import_documentation/Components/Solid-Display.rst
@@ -1,5 +1,4 @@
.. _solid-display:
-
solid-display
=============
@@ -23,18 +22,17 @@ Mixins
------
This component uses the following mixins:
-
-- `counter-mixin <import_documentation/Mixins/counter-mixin>`__
-- `federation-mixin <federation-mixin>`__
-- `filter-mixin <filter-mixin>`__
-- `grouper-mixin <grouper-mixin>`__
-- `highlighter-mixin <highlighter-mixin>`__
-- `list-mixin <list-mixin>`__
-- `next-mixin <next-mixin>`__
-- `paginate-mixin <paginate-mixin>`__
-- `sorter-mixin <sorter-mixin>`__
-- `store-mixin <store-mixin>`__
-- `widget-mixin <widget-mixin>`__
+ * :ref:`counter-mixin <counter-mixin>`
+ * :ref:`federation-mixin <federation-mixin>`
+ * :ref:`filter-mixin <filter-mixin>`
+ * :ref:`grouper-mixin <grouper-mixin>`
+ * :ref:`highlighter-mixin <highlighter-mixin>`
+ * :ref:`list-mixin <list-mixin>`
+ * :ref:`next-mixin <next-mixin>`
+ * :ref:`paginate-mixin <paginate-mixin>`
+ * :ref:`sorter-mixin <sorter-mixin>`
+ * :ref:`store-mixin <store-mixin>`
+ * :ref:`widget-mixin <widget-mixin>`
Please check their documentation to know more about their capabilities.
diff --git a/source/import_documentation/Components/Solid-Form-Search.rst b/source/import_documentation/Components/Solid-Form-Search.rst
index f5b510e6f82fe6d2b4908208db6f181a83c535c1..4f0ffacf88639e136935810ee5fd2ba517ca2d4f 100644
--- a/source/import_documentation/Components/Solid-Form-Search.rst
+++ b/source/import_documentation/Components/Solid-Form-Search.rst
@@ -1,3 +1,4 @@
+.. _solid-form-search:
solid-form-search
=================
@@ -23,7 +24,7 @@ Mixins
This component uses the following mixins:
-- `widget-mixin <https://docs.startinblox.com/import_documentation/Mixins/widget-mixin.html>`__
+ * :ref:`widget-mixin <widget-mixin>`
Please check their documentation to know more about their capabilities.
diff --git a/source/import_documentation/Components/Solid-Form.rst b/source/import_documentation/Components/Solid-Form.rst
index bfb0820ce6f165a2c20113583124601845c42635..960a0dccc0e4bdda0d61468f301fb83569012436 100644
--- a/source/import_documentation/Components/Solid-Form.rst
+++ b/source/import_documentation/Components/Solid-Form.rst
@@ -15,10 +15,9 @@ Mixins
------
This component uses the following mixins:
-
-- `next-mixin <https://docs.startinblox.com/import_documentation/Mixins/next-mixin.html>`__
-- `store-mixin <https://docs.startinblox.com/import_documentation/Mixins/store-mixin.html>`__
-- `widget-mixin <https://docs.startinblox.com/import_documentation/Mixins/widget-mixin.html>`__
+ * :ref:`next-mixin <next-mixin>`
+ * :ref:`store-mixin <store-mixin>`
+ * :ref:`widget-mixin <widget-mixin>`
Please check their documentation to know more about their capabilities.
@@ -53,6 +52,10 @@ Attributes
for the field ``xyz``. It’s particularly useful with a dropdown
field.
+``order-asc-xyz`` or ``order-desc-xyz``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+ Name of the field used to order the range list ``xyz``.
+
``partial``
~~~~~~~~~~~
Add this attribute when the form does not include
diff --git a/source/import_documentation/Components/Solid-Lang.rst b/source/import_documentation/Components/Solid-Lang.rst
index 923425ece887f1b9a02c26519af0e0110d5b9033..f4127f7824f3b3726d3b4a7ee91105375791ef37 100644
--- a/source/import_documentation/Components/Solid-Lang.rst
+++ b/source/import_documentation/Components/Solid-Lang.rst
@@ -1,5 +1,6 @@
+.. _solid-lang:
solid-lang
-============
+==========
Displays a button to set the language of the application.
diff --git a/source/import_documentation/Components/Solid-Map.rst b/source/import_documentation/Components/Solid-Map.rst
index 83c7e1b149bdfd71cfbfc33b754a2dfc1b1dea8f..403e0eac7f69751b6929b8a5ab6fabfb400663f8 100644
--- a/source/import_documentation/Components/Solid-Map.rst
+++ b/source/import_documentation/Components/Solid-Map.rst
@@ -28,13 +28,14 @@ Mixins
This component uses the following mixins:
-- `counter-mixin <counter-mixin>`__
-- `filter-mixin <filter-mixin>`__
-- `grouper-mixin <grouper-mixin>`__
-- `list-mixin <list-mixin>`__
-- `next-mixin <next-mixin>`__
-- `store-mixin <store-mixin>`__
-- `widget-mixin <widget-mixin>`__
+ * :ref:`counter-mixin <counter-mixin>`
+ * :ref:`filter-mixin <filter-mixin>`
+ * :ref:`grouper-mixin <grouper-mixin>`
+ * :ref:`list-mixin <list-mixin>`
+ * :ref:`next-mixin <next-mixin>`
+ * :ref:`store-mixin <store-mixin>`
+ * :ref:`widget-mixin <widget-mixin>`
+
Please check their documentation to know more about their capabilities.
diff --git a/source/import_documentation/Components/Solid-Router.rst b/source/import_documentation/Components/Solid-Router.rst
index f7692d29cd19f98cbda062df9bf1fd9387e99a16..126654b11b3a752a902338388fe49348efa3f7d5 100644
--- a/source/import_documentation/Components/Solid-Router.rst
+++ b/source/import_documentation/Components/Solid-Router.rst
@@ -1,5 +1,6 @@
-sib-router
-==========
+.. _solid-router:
+solid-router
+============
This is a series of web component respecting both the web components
standards and the Linked Data Platform convention. They are aimed at
@@ -20,7 +21,7 @@ in your HTML file:
<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 :
+Then you can use the new tags in your markup, for instance:
``<solid-router>``. More details on each component in the following
section.
@@ -31,7 +32,7 @@ Displays a menu and handle the navigation for you.
.. code:: html
- <solid-router
+ <solid-router
default-route="list"
route-prefix="my-app"
use-hash
@@ -44,26 +45,26 @@ Displays a menu and handle the navigation for you.
``<solid-router>`` attributes:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-- **``default-route``**: The ``name`` attribute of the default
+- ``default-route``: The ``name`` attribute of the default
``<solid-route>`` displayed.
-- **``route-prefix``**: If you app is not run from the root of your
+- ``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
+- ``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.
``<solid-route>`` attributes:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
-- **``use-id``**: indicates that the route takes an id.
-- **``name``**: The name of the route. Must match the id of the view
+- ``use-id``: indicates that the route takes an id.
+- ``name``: The name of the route. Must match the id of 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
+- ``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
+- ``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.
@@ -72,7 +73,7 @@ solid-link
``<solid-link>`` accepts the following attributes:
-- **``next``**: The ``name`` attribute of the ``<solid-route>`` you
+- ``next``: The ``name`` attribute of the ``<solid-route>`` you
want to access.
Example:
@@ -91,11 +92,11 @@ Sign in on a web analytics service and set ``<sib-analytics>`` inside
``<solid-analytics>`` accepts the following attributes:
-- **``type``**: the type of web analytics service used (currently
+- ``type``: the type of web analytics service used (currently
supports ``'matomo'``, ``'google'`` or ``'debug'``).
-- **``url``**: URL of the service. For ``type="google"`` it is not
+- ``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.
+- ``id``: id of the website on the service.
Type ``'debug'`` allow to test sib-analytics. It will display the route
on the console each time a navigation is triggered.
@@ -109,8 +110,8 @@ Example :
Interacting with the router
---------------------------
-bind-resources attribute
-~~~~~~~~~~~~~~~~~~~~~~~~
+``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``
@@ -120,22 +121,28 @@ Example:
.. code:: html
- <sib-conversation bind-resources></sib-conversation>
+ <sib-conversation
+ bind-resources
+ ></sib-conversation>
will result in:
.. code:: html
- <sib-conversation data-src="https://your-domain/your-group-uri/3" bind-resources></sib-conversation>
+ <sib-conversation
+ data-src="https://your-domain/your-group-uri/3"
+ bind-resources
+ ></sib-conversation>
-RequestNavigation
-~~~~~~~~~~~~~~~~~
+Navigate with an event
+~~~~~~~~~~~~~~~~~~~~~
To trigger a route change through javascript, you can trigger a
-RequestNavigation event anywhere on the DOM.
+``requestNavigation`` event anywhere on the DOM.
-The detail part must have at least one of these two parameters: - route:
-the name of the route to activate - resource: a resource that will be
+The detail part must have at least one of these two parameters:
+ * ``route``: the name of the route to activate
+ * ``resource``: a resource that will be
passed to all elements with the ``bind-resources`` attribute. If no
route name is given, the router tries to find a route that has a
``rdf-type`` that matches the type of the resource.
@@ -143,8 +150,8 @@ route name is given, the router tries to find a route that has a
Events
------
-navigate
-~~~~~~~~
+``navigate``
+~~~~~~~~~~~~
This event is triggered whenever a route is activated, after the view is
displayed.
diff --git a/source/import_documentation/Components/Solid-Widget.rst b/source/import_documentation/Components/Solid-Widget.rst
index 8585f8b55ab234d72fb3179ce1e2119a92a5d249..db7c48bfda7a614abee45912bc3f60950220db79 100644
--- a/source/import_documentation/Components/Solid-Widget.rst
+++ b/source/import_documentation/Components/Solid-Widget.rst
@@ -1,3 +1,4 @@
+.. _solid-widget:
solid-widget
============
diff --git a/source/import_documentation/Developping-with-SibTemplateElement.rst b/source/import_documentation/Developping-with-SibTemplateElement.rst
index 30ae34fc9df03b172fd2dd723c964543c6ac2e70..132a0e670c4368b5499b1b5854ba6c2f26a79286 100644
--- a/source/import_documentation/Developping-with-SibTemplateElement.rst
+++ b/source/import_documentation/Developping-with-SibTemplateElement.rst
@@ -1,26 +1,27 @@
-Developping a comoponent with SiBTemplateElement
+.. _with-solid-template-element:
+Developing a comoponent with SolidTemplateElement
================================================
-What is SiBTemplateElement ?
+What is SolidTemplateElement?
---------------------------
It is a class that can extend your component in order to relieve you of some complexity and to make your code clearer in order to focus on the essential: your functionality.
.. warning::
- To start this tutorial, you should have followed `this first part <https://docs.startinblox.com/import_documentation/How-to-make-components.html>`__ .
+ To start this tutorial, you should have followed :ref:`this first part <create-components>`.
-What are we going to do ?
+What are we going to do?
-------------------------
For the example, we are gonna make a simple FAQ component.
It just displays questions and answers in an accordion and allows the user to submit a new question.
-Something like this :
+Something like this:
.. image:: ./../../_static/images/import_documentation/faq.gif
:alt: A FAQ component as example
Let's suppose we want to make the recipient's email customizable.
-To obtain this rendering, it would be enough to implement in our html page a component that looked like this :
+To obtain this rendering, it would be enough to implement in our html page a component that looked like this:
.. code:: html
@@ -30,8 +31,8 @@ To obtain this rendering, it would be enough to implement in our html page a com
></solid-faq>
.. note::
- **Remember the data-src attribute ?**
- This attribute that hosts the data source you want to interact with in this component.
+ **Remember the ``data-src`` attribute ?**
+ This attribute hosts the data source you want to interact with in this component.
.. note::
**Want to learn more about web components ?**
@@ -91,7 +92,7 @@ Here is the minimum code your component must contain that extends ``SolidTemplat
2. Pay attention to propsDefinition method
----------------------------------------------------
+------------------------------------------
You are going to set your attribute in this method.
@@ -108,40 +109,40 @@ You are going to set your attribute in this method.
Note the syntaxe convention => recipientEmail: 'recipient-email'
3. Let's focus on the template
------------------------
+-------------------------------
The template contains the HTML you want to render. Pass your attributes to your template and write it.
-To display the questions and answers, we are going to use `solid-display <https://docs.startinblox.com/import_documentation/Components/Solid-Display.html>`__.
+To display the questions and answers, we are going to use :ref:`solid-display <solid-display>`.
The attributes fields is used to define which datas you want to display from your data source.
-We add a conditional rendering : if no email is filled in, the possibility to submit a question is not displayed.
+We add a conditional rendering: if no email is filled in, the possibility to submit a question is not displayed.
.. code:: js
// Pass your attributes to your template
- template({ dataSrc, recipientEmail }) {
- // If we have no data sources, we display nothing
- if (!dataSrc) return "";
- let tmpl = `
- <solid-display
- data-src="${dataSrc}"
- fields="question, answer"
- id="faq"
- ></solid-display>
- `;
- // Otherwise, set the possibility to submit a question
- if (recipientEmail) {
- tmpl += `
- <a href='mailto:${recipientEmail}?subject=A%20new%20question%20for%20the%20FAQ&body=Hi!'>
- Your question question not here ?
- </a>
+ template({ dataSrc, recipientEmail }) {
+ // If we have no data sources, we display nothing
+ if (!dataSrc) return "";
+ let tmpl = `
+ <solid-display
+ data-src="${dataSrc}"
+ fields="question, answer"
+ id="faq"
+ ></solid-display>
`;
- }
- return tmpl;
+ // Otherwise, set the possibility to submit a question
+ if (recipientEmail) {
+ tmpl += `
+ <a href='mailto:${recipientEmail}?subject=A%20new%20question%20for%20the%20FAQ&body=Hi!'>
+ Your question question not here ?
+ </a>
+ `;
}
+ return tmpl;
+ }
4. Set fake datas
----------------
-Creating data sources is quite another matter. For the example, we will use static data in `JsonLD <https://fr.wikipedia.org/wiki/JSON-LD>`__.
+-----------------
+Creating data sources is quite another matter. For the example, we will use static data in `JSON-LD <https://fr.wikipedia.org/wiki/JSON-LD>`__.
Create a file named ``data-faq.jsonld`` at the root of your project and put these datas:
@@ -169,7 +170,7 @@ Create a file named ``data-faq.jsonld`` at the root of your project and put thes
}
.. note::
- If you want to know more about how look our API, have a look to `our SOLID introduction <https://docs.startinblox.com/import_documentation/Solid-introduction.html>`__.
+ If you want to know more about how our API looks like, have a look to `our SOLID introduction <https://docs.startinblox.com/import_documentation/Solid-introduction.html>`__.
5. Implement your component
-----------------------------
@@ -193,24 +194,24 @@ Import the script of your component and set the component in your ``index.html``
<body>
<h1>Solid FAQ Demo</h1>
<!--Import the component-->
- <solid-faq
- data-src="data-faq.jsonLD"
- recipient-email="alice@startinblox.com">
- </solid-faq>
+ <solid-faq
+ data-src="data-faq.jsonLD"
+ recipient-email="alice@startinblox.com"
+ ></solid-faq>
</body>
</html>
-6. Test your component:
+6. Test your component
-----------------------
.. code:: bash
npm run serve
-You should be able to display your datas but at the moment it's a bit ugly. Let's add some style.
+You should be able to display your data but at the moment it's a bit ugly. Let's add some style.
4. Implement JS and CSS in your component
----------------------------------
+-----------------------------------------
Create a js file, like ``/js/main.js``.
Add the JS you need to make your accordion work, like this:
@@ -314,7 +315,7 @@ Here is the CSS used for the demo:
}
**Use Helper functions**
-SiB framework provide you `Helpers function <https://docs.startinblox.com/import_documentation/Helpers-functions.html>`__ to add JS and CSS in your component.
+SiB framework provides you `helpers functions <https://docs.startinblox.com/import_documentation/Helpers-functions.html>`__ to add JS and CSS in your component.
Add at the begin of your ``solid-faq.js``, import your JS and CSS with those functions:
diff --git a/source/import_documentation/Developping-without-SibTemplateElement.rst b/source/import_documentation/Developping-without-SibTemplateElement.rst
index 9065e6fcc3af92f30c37fcf7c7fcc5ce0dd09156..aa03edc39a2ec584bb58b8cb5488cb2d995c535d 100644
--- a/source/import_documentation/Developping-without-SibTemplateElement.rst
+++ b/source/import_documentation/Developping-without-SibTemplateElement.rst
@@ -1,4 +1,5 @@
-Developping component without SibTemplateElement
-=================================
+.. _without-solid-template-element:
+Developping component without SolidTemplateElement
+==================================================
-This section is comming soon :)
\ No newline at end of file
+This section is coming soon :)
\ No newline at end of file
diff --git a/source/import_documentation/How-to-make-components.rst b/source/import_documentation/How-to-make-components.rst
index 45999979a2f87bb6442c66b6ed8502e97e8ee335..9ec1cf24e6ca78c8b8e6c3b1d81a9c4b50a1c6c8 100644
--- a/source/import_documentation/How-to-make-components.rst
+++ b/source/import_documentation/How-to-make-components.rst
@@ -1,3 +1,4 @@
+.. _create-components:
How to create components
######################
@@ -64,27 +65,27 @@ Let's set up a local development environment for a FAQ component as example.
.. note::
By convention, we prefix Startin'blox components with "solid". Example: solid-faq, solid-agenda, solid-map..
-**2**. Open a terminal, go to your folder and type those following commands:
+**2**. Open a terminal, go to your folder and type the following commands:
.. code:: bash
- #Init a npm management
+ # Init a npm management
npm init -y
- #Install a server in a developpement environement
+ # Install a server in a developpement environement
npm i -D http-server
-Then, at the root of your project create an index.html file.
+Then, at the root of your project create an ``index.html`` file.
**3**. Make an npm command available to launch your server
-Go to your `package.json` and replace the 'test' script by the following :
+Go to your ``package.json`` and replace the 'test' script by the following :
.. code:: json
"serve": "http-server"
-Your `package.json` should look like this :
+Your ``package.json`` should look like this :
.. code:: json
@@ -107,24 +108,24 @@ Your `package.json` should look like this :
**4**. Start your component
-Let's create the main JS file for your component named `solid-faq.js`.
+Let's create the main JS file for your component named ``solid-faq.js``.
Now you are ready to start :)
Choose the best method for you
=============================
-Easy method with SiBTemplateElement
+Easy method with SolidTemplateElement
-----------------------------------
-"SiBTemplateElement" is a template we've created to make component development easier.
+"SolidTemplateElement" is a template we've created to make component development easier.
If you are new in SiB, we recommand you to start with it.
- **EASY Method** => `Developping component with SiBTemplateElement <https://docs.startinblox.com/import_documentation/Developping-with-SibTemplateElement.html>`__
+ **EASY Method** => :ref:`Developing component with SolidTemplateElement <with-solid-template-element>`
Advanced method
-----------------
-This method wil lallow you to use mixins from the framework in your component.
+This method will allow you to use mixins from the framework in your component.
.. note::
If you want to learn more about mixins we recommend you `this introduction <https://javascript.info/mixins>`__.
@@ -132,7 +133,7 @@ This method wil lallow you to use mixins from the framework in your component.
.. warning::
The **MORE COMPLEX WAY** is not available yet. It's comming, stay tuned !
- **MORE COMPLEX WAY** => `Developping component without SiBTemplateElement <https://docs.startinblox.com/import_documentation/Developping-without-SibTemplateElement.html>`__
+ **MORE COMPLEX WAY** => :ref:`Developing component without SolidTemplateElement <without-solid-template-element>`
diff --git a/source/import_documentation/Mixins/counter-mixin.rst b/source/import_documentation/Mixins/counter-mixin.rst
index 435090f934ca63d5708fa47eeb437600dc3e6ae2..0d6859307000f53250cfe690eac78aa37bde3f99 100644
--- a/source/import_documentation/Mixins/counter-mixin.rst
+++ b/source/import_documentation/Mixins/counter-mixin.rst
@@ -1,13 +1,14 @@
+.. _counter-mixin:
counter-mixin
-==========
+=============
The counter mixin is a post-processor mixin, compatible with list-mixin, which provides the ability to show the number of resources of a container.
Used by:
--------
- * `solid-display <SiB-Display>`__
- * `solid-map <SiB-Map>`__
+ * :ref:`solid-display <solid-display>`
+ * :ref:`solid-map <solid-map>`
Attributes
diff --git a/source/import_documentation/Mixins/federation-mixin.rst b/source/import_documentation/Mixins/federation-mixin.rst
index 1870a93c9b41cb64a1f16ea02be2e3625985dec1..070fb43030282d0c9b2fc6e4466825b2e2c8e5bc 100644
--- a/source/import_documentation/Mixins/federation-mixin.rst
+++ b/source/import_documentation/Mixins/federation-mixin.rst
@@ -1,3 +1,4 @@
+.. _federation-mixin:
federation-mixin
================
@@ -8,4 +9,4 @@ It provides the ability to fetch all the resources of multiple containers and sh
Used by:
--------
- * `solid-display <SiB-Display>`__
+ * :ref:`solid-display <solid-display>`
diff --git a/source/import_documentation/Mixins/filter-mixin.rst b/source/import_documentation/Mixins/filter-mixin.rst
index 1c2b984c59d48c6b9676080a3aa6297edc712d1f..25d62456f6ab821f6855f1abd13ab79604010665 100644
--- a/source/import_documentation/Mixins/filter-mixin.rst
+++ b/source/import_documentation/Mixins/filter-mixin.rst
@@ -1,5 +1,6 @@
+.. _filter-mixin:
filter-mixin
-===============
+=============
The filter mixin is a post-processor mixin, compatible with list-mixin.
It provides the ability for the user to dynamically filter a list of resources.
@@ -7,8 +8,8 @@ It provides the ability for the user to dynamically filter a list of resources.
Used by:
--------
- * `solid-display <SiB-Display>`__
- * `solid-map <SiB-Map>`__
+ * :ref:`solid-display <solid-display>`
+ * :ref:`solid-map <solid-map>`
Attributes
diff --git a/source/import_documentation/Mixins/grouper-mixin.rst b/source/import_documentation/Mixins/grouper-mixin.rst
index 997471044bd435e52999468b724f3ace4ba4140b..047b670293f0622c728063caab4298fe2c2aa511 100644
--- a/source/import_documentation/Mixins/grouper-mixin.rst
+++ b/source/import_documentation/Mixins/grouper-mixin.rst
@@ -1,3 +1,4 @@
+.. _grouper-mixin:
grouper-mixin
============
@@ -7,8 +8,8 @@ It provides the ability to group resources, depending of the values of one of th
Used by:
--------
- * `solid-display <SiB-Display>`__
- * `solid-map <SiB-Map>`__
+ * :ref:`solid-display <solid-display>`
+ * :ref:`solid-map <solid-map>`
Attributes
diff --git a/source/import_documentation/Mixins/highlighter-mixin.rst b/source/import_documentation/Mixins/highlighter-mixin.rst
index b0d0735c971ba7ef7691385569059c9c2fa6f25f..1362038f7d1c014ee9af28ed74a5798499927ac4 100644
--- a/source/import_documentation/Mixins/highlighter-mixin.rst
+++ b/source/import_documentation/Mixins/highlighter-mixin.rst
@@ -1,3 +1,4 @@
+.. _highlighter-mixin:
highlighter-mixin
=================
@@ -7,7 +8,7 @@ It provides the ability to put some resources at the top of the list, depending
Used by:
--------
- * `solid-display <SiB-Display>`__
+ * :ref:`solid-display <solid-display>`
Attributes
diff --git a/source/import_documentation/Mixins/list-mixin.rst b/source/import_documentation/Mixins/list-mixin.rst
index dd7618ba9b3e5a56b6910448b829cf3cf2826c63..04d6e3b3daee191d5a7a11cac28d3755ff657f08 100644
--- a/source/import_documentation/Mixins/list-mixin.rst
+++ b/source/import_documentation/Mixins/list-mixin.rst
@@ -1,3 +1,4 @@
+.. _list-mixin:
list-mixin
==========
@@ -7,14 +8,14 @@ It can make transformations on the list by being combined with some post-process
Used by:
--------
- * `solid-display <SiB-Display>`__
- * `solid-calendar <SiB-Calendar>`__
- * `solid-map <SiB-Map>`__
+ * :ref:`solid-display <solid-display>`
+ * :ref:`solid-calendar <solid-calendar>`
+ * :ref:`solid-map <solid-map>`
Post-processors:
----------------
- * `counter-mixin <counter-mixin>`__
+ * :ref:`counter-mixin <counter-mixin>`
diff --git a/source/import_documentation/Mixins/next-mixin.rst b/source/import_documentation/Mixins/next-mixin.rst
index 9bc51c2da949c9417b4ff9b8e95afff12e7bb3aa..4dd2fa243969f32f710d219064b2ac1f88eedbb3 100644
--- a/source/import_documentation/Mixins/next-mixin.rst
+++ b/source/import_documentation/Mixins/next-mixin.rst
@@ -1,3 +1,4 @@
+.. _next-mixin:
next-mixin
==========
@@ -9,7 +10,6 @@ Used by:
* :ref:`solid-display <solid-display>`
* :ref:`solid-map <solid-map>`
* :ref:`solid-calendar <solid-calendar>`
-
* :ref:`solid-form <solid-form>`
* :ref:`solid-delete <solid-delete>`
diff --git a/source/import_documentation/Mixins/paginate-mixin.rst b/source/import_documentation/Mixins/paginate-mixin.rst
index 5a25ab1a8d04a5fe959bc144e28c893b9be4c38a..e55cf39010e2df1162497bc091e9c42394d94fc6 100644
--- a/source/import_documentation/Mixins/paginate-mixin.rst
+++ b/source/import_documentation/Mixins/paginate-mixin.rst
@@ -1,3 +1,4 @@
+.. _paginate-mixin:
paginate-mixin
===============
@@ -7,7 +8,7 @@ It provides the ability to paginate a list of resources.
Used by:
--------
- * `solid-display <SiB-Display>`__
+ * :ref:`solid-display <solid-display>`
Attributes
diff --git a/source/import_documentation/Mixins/sorter-mixin.rst b/source/import_documentation/Mixins/sorter-mixin.rst
index 0fd171e6787ee3391b87344e1ed8b13206b23295..c6a4206698b95f6cf5830c26d0fc176dade45523 100644
--- a/source/import_documentation/Mixins/sorter-mixin.rst
+++ b/source/import_documentation/Mixins/sorter-mixin.rst
@@ -1,3 +1,4 @@
+.. _sorter-mixin:
sorter-mixin
============
@@ -7,16 +8,18 @@ It provides the ability to sort some resources, depending of the values of one o
Used by:
--------
- * `solid-display <SiB-Display>`__
+ * :ref:`solid-display <solid-display>`
Attributes
----------
-``order-by``
-~~~~~~~~~~~~
+``order-asc`` or ``order-desc``
+~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
The name of the field you want to use to order the list.
+ To sort in ascending, use ``order-asc``. To sort descending, use ``order-desc``.
+
In this example, the users list will be ordered
alphabetically based on the username.
@@ -25,7 +28,7 @@ Attributes
<solid-display
data-src="http://server/users/"
fields="username"
- order-by="username"
+ order-asc="username"
></solid-display>
``order-by-random``
diff --git a/source/import_documentation/Mixins/store-mixin.rst b/source/import_documentation/Mixins/store-mixin.rst
index ca09b2124c601b5a14e9570ed49012830831dbcc..d3b7c2b63a53c49f67ee4f28c128c92cd0cbac9f 100644
--- a/source/import_documentation/Mixins/store-mixin.rst
+++ b/source/import_documentation/Mixins/store-mixin.rst
@@ -1,3 +1,4 @@
+.. _store-mixin:
store-mixin
===========
@@ -7,11 +8,11 @@ provides the data to the component.
Used by:
--------
- * `solid-display <SiB-Display>`__
- * `solid-form <SiB-Form>`__
- * `solid-map <SiB-Map>`__
- * `solid-calendar <SiB-Calendar>`__
- * `solid-ac-checker <SiB-Ac-Checker>`__
+ * :ref:`solid-display <solid-display>`
+ * :ref:`solid-form <solid-form>`
+ * :ref:`solid-map <solid-map>`
+ * :ref:`solid-calendar <solid-calendar>`
+ * :ref:`solid-ac-checker <solid-ac-checker>`
Attributes
diff --git a/source/import_documentation/Mixins/widget-mixin.rst b/source/import_documentation/Mixins/widget-mixin.rst
index 545039b2008ebdc962897d3752eb5a23cd4ae8e1..e353b04717095a578e71f17a5c367c4d4e08e1fe 100644
--- a/source/import_documentation/Mixins/widget-mixin.rst
+++ b/source/import_documentation/Mixins/widget-mixin.rst
@@ -1,3 +1,4 @@
+.. _widget-mixin:
widget-mixin
============
@@ -6,9 +7,9 @@ The widget mixin allows to create a widget in the DOM for each properties of a r
Used by:
--------
- * `solid-display <SiB-Display>`__
- * `solid-form <SiB-Form>`__
- * `solid-map <SiB-Map>`__
+ * :ref:`solid-display <solid-display>`
+ * :ref:`solid-form <solid-form>`
+ * :ref:`solid-map <solid-map>`
Attributes
@@ -42,6 +43,19 @@ Attributes
You can customize the group widget, see the `Sets widgets <https://docs.startinblox.com/import_documentation/Widgets/Reference.html>`__
page for more info.
+ **Strings**
+
+ To display static strings in the fields list, put it inside quotes.
+
+ .. code:: html
+
+ <solid-display
+ data-src="http://server/users/1/"
+ fields=" 'Email: ', email "
+ ></solid-display>
+
+ It will create a ``<span>`` element filled with the text ``Email: ``.
+
``value-[field]``
~~~~~~~~~~~~~~~~~
diff --git a/source/import_documentation/get-started.rst b/source/import_documentation/get-started.rst
index 18aaea937de22e0a6151da2a62203d6bf28490b0..2e3e8f739eee0ab932991dc4d3a0dc1fccf34a8e 100644
--- a/source/import_documentation/get-started.rst
+++ b/source/import_documentation/get-started.rst
@@ -3,7 +3,7 @@ Getting Started
With the Front
==============
-If you are familiar with React or VusJS, learning how to use Startin'blox is going to be so easy for you. It's even easier.
+If you are familiar with React or VusJS, learning how to use Startin'blox is going to be easy for you. It's even easier.
So why using Startin'blox instead of React or VueJS?
-------------------------------------------
@@ -12,7 +12,7 @@ Because it allows you to easily grasp the SOLID standards and web components las
How to set up the technology ?
----------------------------
-To start, simply import the core in your head tag of a simple html file :
+To start, simply import the core in the head tag of a simple html file:
.. code-block:: html
@@ -31,14 +31,14 @@ It enables you to use Startin’blox technology and all the base components from
></solid-display>
.. note::
- **Notes the data-src attribute**
+ **The ``data-src`` attribute**
- You will find it in almost all Startin'blox components. It is this attribute that hosts the data source you want to interact with in this component. You can go to the url (`https://apiprod.happy-dev.fr/collectives/ <https://apiprod.happy-dev.fr/collectives/>`__ ) to see what the API looks like.
+ You will find it in almost all Startin'blox components. It is the attribute that defines the data source you want to interact with in the component. You can see what the API looks like at (`https://apiprod.happy-dev.fr/collectives/ <https://apiprod.happy-dev.fr/collectives/>`__ ).
Extend Components
~~~~~~~~~~~~~~~~~
-Some usefull components aren't in the core because in order not to make it too heavy and to keep its modularity. It's the case for `Solid-Router <https://docs.startinblox.com/import_documentation/Components/SiB-Router.html>`__ or `Solid Auth <https://docs.startinblox.com/import_documentation/Components/Solid-Auth.html>`__ for example.
+Some useful components aren't in the core to keep it light and modular. It's the case for `Solid-Router <https://docs.startinblox.com/import_documentation/Components/SiB-Router.html>`__ or `Solid Auth <https://docs.startinblox.com/import_documentation/Components/Solid-Auth.html>`__ for example.
To use them, you have to import them independently.
.. code-block:: html
@@ -47,9 +47,9 @@ To use them, you have to import them independently.
<script type="module" src="https://unpkg.com/@startinblox/core"></script>
<script type="module" src="https://unpkg.com/@startinblox/router@latest"></script>
-Create a components
+Create a component
~~~~~~~~~~~~~~~~~~
-`Try the tutorial <https://docs.startinblox.com/import_documentation/How-to-make-components.html>`__, to get in to it!
+:ref:`Try the tutorial <create-components>`, to get into it!
Play with the technology
-------------------------
@@ -60,10 +60,10 @@ You can play with `the demo <https://startinblox.com/fr/technology#demo/>`__ on
Some public sources
~~~~~~~~~~~~~~~~~~~~~~~
-To make your tests with Startin'blox, here is some publics read only data sources :
+To make your tests with Startin'blox, here are some public readonly data sources:
-* `The Happy Dev event <https://apiprod.happy-dev.fr/futureevents/>`__.
-* `The Happy Dev collectifs <https://apiprod.happy-dev.fr/collectives/>`__.
+* `The Happy Dev events <https://apiprod.happy-dev.fr/futureevents/>`__.
+* `The Happy Dev collectives <https://apiprod.happy-dev.fr/collectives/>`__.
* `The Startin'blox features <https://api.startinblox.com/features/>`__.
.. note::
@@ -115,7 +115,7 @@ DjangoLDP come with packages developed and maintained by the Startin'Blox team.
That's it. You're almost ready to start :)
-Jump to the `How to install a SiB server <https://docs.startinblox.com/import_documentation/install-sib-server.html#configure-your-ldp-packages>`__ section to follow the configuration.
+Jump to the `How to install a SiB server <https://docs.startinblox.com/import_documentation/install-sib-server.html#configure-your-ldp-packages>`__ section to finish the configuration.