diff --git a/source/import_documentation/About-our-components.rst b/source/import_documentation/About-our-components.rst
new file mode 100644
index 0000000000000000000000000000000000000000..bffd12800fd68ccc3e4829be98447a001d90bf6e
--- /dev/null
+++ b/source/import_documentation/About-our-components.rst
@@ -0,0 +1,30 @@
+.. _about-our-components:
+About our components
+######################
+
+**When you should create a component**
+
+ *A component is a feature*
+
+ A component is an application service that can be re-used by multiple organizations. You can think about it as an atomic functionality that can be picked and added by people with no technical skills.
+
+ Developers often build components in order to avoid repeating the same piece of code in multiple places. As a developer, why should you make a component when you can have the same functionality with the same amount of code?
+
+ *Because you don't create a component for your technical needs but for the needs of organizations*.
+ *Our components are* **high level components**. *That is to say that it is close to the human understanding of a functionality*.
+
+ Developing with Startin'Blox is an opportunity to shift your perspective regarding who you program for. Instead of thinking just about your own requirements, you're invited to deliver features useful to both your own project and a much broader ecosystem of organizations.
+
+ **Example with a FAQ component**
+ For instance, implementing a collaborative FAQ could be done with little code. Encapsulating them within an FAQ component wouldn't make your code more concise. But it permit you to share the *idea* of a FAQ as a tool of onboarding or knowledge management.
+
+
+ *With components, you share more than code, you share tools for collaboration within and between organizations.*
+
+ So, when you develop a new feature, think about who could use it. If it can be useful to others and there's no similar component already available, make a component so that your work will be easily accessed and used by many!
+
+ **Other example :**
+ * An interactive map
+ * An agenda
+ * A job board
+ * A skill directory
diff --git a/source/import_documentation/How-to-make-components.rst b/source/import_documentation/How-to-make-components.rst
index 91312f536cf2806b8db268e56a45a5c9800f5228..30b905b7823432cd5defd04875f1814cdb61fa58 100644
--- a/source/import_documentation/How-to-make-components.rst
+++ b/source/import_documentation/How-to-make-components.rst
@@ -3,33 +3,8 @@ How to create components
######################
.. note::
- **When you should create a component**
-
- *A component is a feature*
+ If you want to know when it's relevant to create a component go to the :ref:`"About our Components" <About-our-components>` page.
- A component is an application service that can be re-used by multiple organizations. You can think about it as an atomic functionality that can be picked and added by people with no technical skills.
-
- Developers often build components in order to avoid repeating the same piece of code in multiple places. As a developer, why should you make a component when you can have the same functionality with the same amount of code?
-
- *Because you don't create a component for your technical needs but for the needs of organizations*.
- *Our components are* **high level components**. *That is to say that it is close to the human understanding of a functionality*.
-
- Developing with Startin'Blox is an opportunity to shift your perspective regarding who you program for. Instead of thinking just about your own requirements, you're invited to deliver features useful to both your own project and a much broader ecosystem of organizations.
-
- **Example with a FAQ component**
- For instance, implementing a collaborative FAQ could be done with little code. Encapsulating them within an FAQ component wouldn't make your code more concise. But it permit you to share the *idea* of a FAQ as a tool of onboarding or knowledge management.
-
-
- *With components, you share more than code, you share tools for collaboration within and between organizations.*
-
- So, when you develop a new feature, think about who could use it. If it can be useful to others and there's no similar component already available, make a component so that your work will be easily accessed and used by many!
-
- **Other example :**
- * An interactive map
- * An agenda
- * A job board
- * A skill directory
-
Let's start
=============
@@ -75,10 +50,7 @@ Let's set up a local development environment for a FAQ component as example.
# Install a server in a developpement environement
npm i -D http-server
-<<<<<<< HEAD
-=======
Then, at the root of your project create an ``index.html`` file.
->>>>>>> a4f63657c0a77bcca573b919618fe7309e3b7ceb
**3**. Make an npm command available to launch your server
diff --git a/source/import_documentation/faq.rst b/source/import_documentation/faq.rst
index b4adbc4f51c8b68cb4613d6ec8163d053917340c..44b6987913822b013e97c345f8d903fedf69013b 100644
--- a/source/import_documentation/faq.rst
+++ b/source/import_documentation/faq.rst
@@ -1,5 +1,11 @@
+.. _faq:
FAQ
****
+* **Why didn't you make a Lib React-Solid, use React Admin or React-Solid-SKD from Inrupt?**
+React is a component that works only with React.
+We make components that can be displayed in any web page in an autonomous way : that's the beauty of web components.
+React's store can't fetch resources from several servers.
+we would be forced to rewrite it.
* **How to contribute?**
Have a look on our `contribution guidelines <https://git.startinblox.com/framework/sib-core/blob/master/CONTRIBUTING.md>`__.
diff --git a/source/import_documentation/get-started.rst b/source/import_documentation/get-started.rst
index cbb2219ee7a2ad120797489d1055c24664ce971e..8f76c5a2789af4172a0b85d0a5abcfef9befffdb 100644
--- a/source/import_documentation/get-started.rst
+++ b/source/import_documentation/get-started.rst
@@ -1,7 +1,214 @@
Getting Started
****************
-Creating your front App
+
+Fisrt of all, you have to keep in mind that your front and your back are decorrelated.
+Let's begin by create your data source.
+
+Make your data sources
======================
+Before deploying any SIB applications you will need SIB servers able to provide all capabilities your application relies on.
+
+Our SiB server is called DjangoLDP which is based on Django framework and adapted to be compatible with Linked Datas convention but you can use any servers exposing data as LDP containers.
+
+DjangoLDP come with packages developed and maintained by the Startin'Blox team. You can pick up the ones you like or write your own.
+
+Requirements
+-------------
+
+The SIB server requires:
+
+* python 3.6
+* postgresql database (for production)
+
+
+
+.. warning:: if you using Windows, you may get some trouble. Please help us to improve reporting your problem on `this issue <https://git.startinblox.com/documentation/doc/issues/11/>`__
+
+1. Install SIB Manager command
+--------------------------
+
+We have developed a command to facilitate the deployment of servers : ** Sib Manager**. It is not yet perfect and if you encounter a problem, help us to improve, `open a issue <https://git.startinblox.com/framework/sib-core/issues/new?issue%5Bassignee_id%5D=&issue%5Bmilestone_id%5D=>`__.
+
+Install ``sib-manager`` that allow you to use the sib command.
+
+.. code-block:: bash
+
+ python3 -m pip install -U sib-manager
+
+
+2. Initiate the server
+--------------------
+
+Set up the server with SIB Manager where `sibserver` will be the name of your server.
+
+.. code-block:: bash
+
+ sib startproject sibserver
+ cd sibserver
+ sib install server
+
+.. notice:: For production, add the `--production` flag like this `sib startproject sibserver --production`
+
+now your architecture should look like :
+
+.. code-block:: bash
+
+ sibserver/
+ server/
+ __init__.py
+ settings.py
+ urls.py
+ wsgi.py
+ manage.py
+ packages.yml
+
+You will find in your `package.yml` the configuration of your server.
+
+On this server, you will add the package relative to the data shape you want to use in your component.
+
+.. figure:: ../_static/images/import_documentation/Overview-server.png
+ :alt: Server overview
+
+Let's now create a package.
+
+3. Create a package
+--------------------
+We are going to make a very simply data source to start which will be composed by questions and its answers.
+
+You use the SIB Manager to create a new project :
+
+.. code-block:: bash
+
+ sib startpackage djangoldp_mypack
+ cd djangoldp_mypack
+
+.. note:: All your package should respect this semantic. For example djangoldp_skills.
+
+Go to your `models.py` and set the models of datas you need :
+
+.. code-block:: python
+
+ from django.db import models
+ from djangoldp.models import Model
+
+ class FAQElement(Model):
+ question = models.CharField(max_length=128, verbose_name="Question", blank=True, null=True)
+ answer = models.CharField(max_length=128, verbose_name="Answer", blank=True, null=True)
+
+ class Meta:
+ anonymous_perms = ['']
+ authenticated_perms = ['view', 'edit', 'delete', 'add']
+ serializer_fields=["@id","question", "answer"]
+
+4. Link your package to your developpement server
+----------------------------------
+
+At the root of you Sib sever, create a symbolic link to your package :
+
+.. code-block:: bash
+
+ ln -s ../path/to/package/app/name-of-package
+
+For example :
+
+.. code-block:: bash
+
+ ln -s ../../djangoldp_mypack/djangoldp_mypack djangoldp_mypack
+
+You can check if it's well done with the `ll` command :
+
+.. figure:: ../_static/images/import_documentation/ll.png
+ :alt: You've done the symbolic link.
+
+Tell your sever, you've add a new package in the packages.yml:
+
+.. code-block:: yml
+
+ ldppackages:
+ djangoldp_mypack: djangoldp_mypack
+
+
+5. Set up your server
+-----------------------
+
+.. warning:: If you want to configure a server with a package that already exist, you will need to make the "sib install sibserver" to update your server with it.
+
+Go at the root of your developpement server at the level where reside your manage.py file.
+
+Then run this command :
+
+.. code-block:: bash
+
+ # Make the migration
+ python manage.py makemigrations
+ python manage.py migrate --run-syncdb
+
+ #Create a super user
+ python manage.py createsuperuser
+
+ #launch your server
+ python manage.py runserver
+
+
+Now access to your Django administration `http://127.0.0.1:8000/admin/ <http://127.0.0.1:8000/admin/>`__.
+You should see your model in the admin.
+
+Fill one question and answer to test.
+
+**Access your API**
+
+To access to the jsonLD API, go to `http://127.0.0.1:8000/faqelements/ <http://127.0.0.1:8000/faqelements/>`__, where faqelement is the name of you model.
+
+You should get something like this :
+
+.. code-block:: json
+
+ {
+ "@id": "http://localhost:8000/faqelements/",
+ "@type": "ldp:Container",
+ "ldp:contains": [
+ {
+ "@id": "http://localhost:8000/faqelements/1/",
+ "question": "What is SOLID ?",
+ "answer": "SOLID is a set of standard to create interoperability.",
+ "permissions": [
+ {
+ "mode": {
+ "@type": "view"
+ }
+ },
+ {
+ "mode": {
+ "@type": "delete"
+ }
+ }
+ ]
+ }
+ ],
+ "permissions": [
+ {
+ "mode": {
+ "@type": "add"
+ }
+ },
+ {
+ "mode": {
+ "@type": "view"
+ }
+ }
+ ],
+ "@context": "https://cdn.happy-dev.fr/owl/hdcontext.jsonld"
+ }
+
+Concratulation ! You've made a data source.
+
+.. note::
+
+ To see how our API is structured, have a look to our `SOLID Introduction <https://docs.startinblox.com/import_documentation/Solid-introduction>`__
+
+
+Make a font app
+===============
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.
@@ -9,10 +216,18 @@ So why using Startin'blox instead of React or VueJS?
-------------------------------------------
Because it allows you to easily grasp the SOLID standards and web components last standards. It is also lighter to install.
+See more about it in :ref:`our FAQ <faq>`.
+
How to set up the technology ?
----------------------------
-To start, simply import the core in the head tag of a simple html file:
+Fisrt set up a server for your front App using :
+
+* NPM via http-server
+* Python via `python3 -m http.server 8001`
+
+
+To start, simply import the core in the head tag of a index.html file:
.. code-block:: html
@@ -35,6 +250,23 @@ It enables you to use Startin’blox technology and all the base components from
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/>`__ ).
+For our example, let's display your data sources by remplacing the data-source below by the one you created :
+
+.. code-block:: html
+
+ <solid-display
+ data-src="http://127.0.0.1:8000/faqelements/"
+ fields="question, answer"
+ ></solid-display>
+
+.. note::
+ **Some public sources to play**
+
+ To make your tests with Startin'blox, here are some public readonly data sources:
+
+ * `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/>`__.
External Components
~~~~~~~~~~~~~~~~~~~
@@ -48,74 +280,533 @@ To use them, you have to import them independently.
<script type="module" src="https://unpkg.com/@startinblox/router@latest"></script>
Create a component
-~~~~~~~~~~~~~~~~~~
-:ref:`Try the tutorial <create-components>`, to get into it!
+====================
+
+A component should be independent from your application, so you should create a new project to developpe it.
+
+.. note::
+ If you want to know when it's relevant to create a component go to the :ref:`"About our Components" <About-our-components>` page.
+
+
+Requirements
+-------------
+Be sur you have at least the version 6.14.5 of npm with :
+
+.. code:: bash
+
+ npm -v
+
+To update your npm version :
+
+.. code:: bash
+
+ npm install -g npm@latest
+
+.. warning::
+
+ You may need to prefix these commands with sudo, especially on Linux, or OS X if you installed Node using its default installer.
+
+We will assume that you are at least comfortable with HTML, CSS and JavaScript. However, you don't really need to be an expert.
+We recommend `this good guide <https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript>`__ to get you back on track with JS.
+
+Steps
+-----
+Let's set up a local development environment for a FAQ component as example.
+
+**1**. Set the file you need .
+
+
+.. code:: bash
+
+ solid-faq
+ - index.html
+ - solid-faq.js
+
+.. note::
+ By convention, we prefix Startin'blox components with "solid". Example: solid-faq, solid-agenda, solid-map..
+
+**2**. Init npm and set your server
+Open a terminal, go to your folder and type the following commands:
+
+.. code:: bash
-Play with the technology
--------------------------
+ # Init a npm management
+ npm init -y
-Try the demonstration
-~~~~~~~~~~~~~~~~~~~~~~~
-You can play with `the demo <https://startinblox.com/fr/technology#demo/>`__ on our website.
+ # Install a server in a developpement environement
+ npm i -D http-server
-Some public sources
-~~~~~~~~~~~~~~~~~~~~~~~
-To make your tests with Startin'blox, here are some public readonly data sources:
-* `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/>`__.
+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 :
+
+.. code:: json
+
+ {
+ "name": "solid-faq",
+ "version": "1.0.0",
+ "description": "",
+ "main": "index.js",
+ "scripts": {
+ "serve": "http-server"
+ },
+ "keywords": [],
+ "author": "",
+ "license": "ISC",
+ "dependencies": {},
+ "devDependencies": {
+ "http-server": "^0.12.3"
+ }
+ }
+
+**3**. Start your component
+
+We have create SolidTemplateElement that is a class that can extend your component in order to purify your code of all useless complexity so that you can concentrate on the essential: your functionality.
+
+
+**What are we going to do?**
+
+Let's just displays questions and answers in an accordion and allows the user to submit a new question.
+
+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:
+
+.. code:: html
+
+ <solid-faq
+ data-src="https://api.startinblox.com/faqs/"
+ recipient-email="alice@startinblox.com"
+ ></solid-faq>
.. note::
+ **Remember the ``data-src`` attribute ?**
+ This attribute hosts the data source you want to interact with in this component.
- To see how our API is structured, have a look to our `SOLID Introduction <https://docs.startinblox.com/import_documentation/Solid-introduction>`__
+.. note::
+ **Want to learn more about web components ?**
+ We recommend this `introduction <https://www.webcomponents.org/introduction>`__.
+
+**Let's start !**
+
+Here is the minimum code your component must contain that extends ``SolidTemplateElement``.
+
+ .. code:: js
+
+ /**
+ * solid-faq.js
+ */
+ // Import SolidTemplateElement
+ import SolidTemplateElement from "https://unpkg.com/@startinblox/core@0.10/dist/solid-template-element.js";
+
+ // Name your component and extend SolidTemplateElement
+ export class SolidFAQ extends SolidTemplateElement {
+
+ constructor() {
+ super();
+ }
+
+ // Define the attributes you want
+ static get propsDefinition() {
+ return {
+ dataSrc: "data-src",
+ recipientEmail: "recipient-email",
+ };
+ }
+
+ // 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>
+ `;
+ }
+ return tmpl;
+ }
+ }
+
+ customElements.define("solid-faq", SolidFAQ);
+
+
+**4**. Pay attention to propsDefinition method
+------------------------------------------
+
+You are going to set your attribute in this method. `recipientEmail` is the parameter where we are going to fill in the email of our recipient.
+
+.. code:: js
+
+ static get propsDefinition() {
+ return {
+ dataSrc: 'data-src',
+ recipientEmail: 'recipient-email'
+ }
+ }
+.. note::
+ Note the syntaxe convention => recipientEmail: 'recipient-email'
+
+5. 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 :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.
+
+.. 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>
+ `;
+ }
+ return tmpl;
+ }
+
+6. Set your datas
+-----------------
+You can you here the data source you've created. Or you can just set fake datas, with those static datas in `JSON-LD <https://fr.wikipedia.org/wiki/JSON-LD>`__ by create a file named ``data-faq.jsonld`` at the root of your project.
+
+.. code:: json
+
+ {
+ "@id": "",
+ "@type": "ldp:Container",
+ "ldp:contains": [
+ {
+ "question": "What is Startin'blox ?",
+ "answer": "A cooperative and a technology to build the web of our dreams",
+ "@id": "questions-1",
+ "permissions": []
+ },
+ {
+ "question": "What is the SOLID project ?",
+ "answer": "A set of standards that allows web applications to all speak the same language and become interoperable.",
+ "@id": "questions-2",
+ "permissions": []
+ }
+ ],
+ "permissions": [],
+ "@context": "https://cdn.happy-dev.fr/owl/hdcontext.jsonld"
+ }
-Creating your data sources
-=========================
+.. note::
+ 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>`__.
+
+7. Implement your component
+-----------------------------
+Import the script of your component and set the component in your ``index.html``.
+
+.. code:: html
+
+ <!DOCTYPE html>
+ <html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <!--Import a custom font-->
+ <link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
+ <!--Import the framework-->
+ <script type="module" src="https://unpkg.com/@startinblox/core"></script>
+ <!--Import the component-->
+ <script type="module" src="/solid-faq.js"></script>
+ <title>Solid FAQ Demo</title>
+ </head>
+ <body>
+ <h1>Solid FAQ Demo</h1>
+ <!--Import the component-->
+ <solid-faq
+ data-src="data-faq.jsonLD"
+ recipient-email="alice@startinblox.com"
+ ></solid-faq>
+ </body>
+ </html>
+
+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.
+
+ .. image:: ./../../_static/images/import_documentation/raw-faq.png
+ :alt: A FAQ component as example
+
+You've almost done !
+
+Let's now add some style.
+
+7. Implement JS and CSS in your component
+-----------------------------------------
+For this example, we propose you to create a js file, like ``/js/main.js``.
+
+Add the JS you need to make your accordion work, like this:
+
+.. code:: js
+
+ /**
+ * js/main.js
+ */
+ // Select the component
+ var component = document.getElementById("faq");
+
+ // We use populate event to detect when the component is generated
+ component.addEventListener("populate", (event) => {
+
+ // Seclect each question
+ var acc = document.querySelectorAll("solid-display-value[name='question']");
+ var i;
+
+ for (i = 0; i < acc.length; i++) {
+ //For each question, if we click..
+ acc[i].addEventListener("click", function () {
+ // Add or remove the "active" class
+ this.classList.toggle("active");
+
+ // Select the answer just below the question
+ var panel = this.nextElementSibling;
+ // If the answer is opened, then close it
+ if (panel.style.maxHeight) {
+ panel.style.maxHeight = null;
+ // Otherwise, open it.
+ } else {
+ panel.style.maxHeight = panel.scrollHeight + "px";
+ }
+ });
+ }
+ })
-Requirements
--------------
+.. note::
+ **Did you notice the populate event?** It's an event that allows you to trigger javascript only after the component you want to manipulate has been generated.
+ See `the Event documentation <https://docs.startinblox.com/import_documentation/Events.html>`__ for more explanation.
-The SIB server requires:
+Here is the CSS used for the demo:
-* python 3.6
-* postgresql database (for production)
+.. code:: css
+ /**
+ * css/main.css
+ */
-Initiate the server
---------------------
-Before deploying any SIB applications you will need SIB servers able to provide all capabilities your application relies on.
+ body {
+ font-family: 'Montserrat', sans-serif;
+ background-color: #4475B8;
+ }
+ h1{
+ color : white;
+ }
-Our SiB server is called DjangoLDP which is based on Django framework and adapted to be compatible with Linked Datas convention but you can use any servers exposing data as LDP containers.
+ solid-faq {
+ max-width : 700px;
+ }
-DjangoLDP come with packages developed and maintained by the Startin'Blox team. You can pick up the ones you like or write your own.
+ solid-display-value[name='question'] {
+ cursor: pointer;
+ padding: 18px;
+ text-align: left;
+ border: none;
+ outline: none;
+ transition: 0.4s;
+ display : block;
+ background-color: white;
+ color : #4475B8;
+ }
+ solid-display-value[name='answer'] {
+ padding: 0 30px;
+ max-height: 0;
+ overflow: hidden;
+ transition: max-height 0.2s ease-out;
+ display : block;
+ background-color : #ECECEC;
+ color : #414141;
+ border : 1px #FDD17A solid;
+ line-height: 30px;
+ }
-.. warning:: if you using Windows, you may get some trouble. Please help us to improve reporting your problem on `this issue <https://git.startinblox.com/documentation/doc/issues/11/>`__
+ solid-display-value[name='question']:after {
+ content: '\02795';
+ font-size: 13px;
+ float: right;
+ margin-left: 5px;
+ }
+ solid-display-value[name='question'].active:after {
+ content: "\2796";
+ }
+ solid-faq solid-display+a{
+ color : white;
+ line-height : 50px ;
+ }
-1. Make sure you have the latest version of python 3.6.8 installed.
+**Use Helper functions**
-2. Install ``sib-manager`` that allow you to use the sib command.
+SiB framework provide you `Helpers function <https://docs.startinblox.com/import_documentation/Helpers-functions.html>`__ to add JS and CSS in your component.
-.. code-block:: bash
+Add at the begin of your ``solid-faq.js``, import your JS and CSS with those functions:
- python -m pip install -U sib-manager
+.. code:: js
-3. Create your server structure
+ ...
-.. code-block:: bash
+ // Import Helper functions
+ import {
+ importCSS,
+ importJS,
+ } from "https://unpkg.com/@startinblox/core@0.10/dist/libs/helpers.js";
- sib startproject sibserver
- cd sibserver
- sib install server
+ // Use the Helpers functions
+ importJS(`./js/main.js`);
+ importCSS(`/css/main.css`);
+
+ export class SolidFAQ extends SolidTemplateElement {
+
+ ...
+
+**It should be better now, no ?**
+
+ .. image:: ./../../_static/images/import_documentation/faq.gif
+ :alt: A FAQ component as example
+
+
+8. Translate your component
+---------------------------
+
+.. warning::
+ This part is not working and need improvement. You can jump to the step 8 :)
+
+To translate the static strings of your components, follow these steps:
+
+- In your component, create a folder which contains all the translation files. You can name it ``locales`` for example. Inside, create one file per language, with the structure ``[code_language].json``, for example: ``fr.json``.
+- In each file, add one line per string to translate. Your file should look like this:
+
+.. code:: json
+
+ {
+ "label.question": "Your question is not here ?"
+ }
+
+
+- In the constructor of your component, define the path of your folder:
+
+.. code:: js
+
+ // For the demo
+ const base_url = "./";
+ // The production url of your component =>
+ //const base_url = "https://path/to/your/component";
+
+ export class SolidFAQ extends SolidTemplateElement {
+
+ constructor() {
+ ...
+
+ this.setTranslationsPath(`${base_url}/locales`);
+ }
+
+ ...
+
+ }
+
+- Use the ``localize`` method to show the translated strings in your template:
+
+.. code:: js
+
+ const base_url = "https://unpkg.com/@startinblox/solid-faq"; // url of your component
+
+ export class SolidFAQ extends SolidTemplateElement {
+
+ ...
+
+ template( { dataSrc, recipientEmail } ) {
+ if (!dataSrc) return '';
+ let tmpl = `
+ ...
+ <a href='mailto:p.${recipientEmail}?subject=A%20new%20question%20for%20the%20FAQ&body=Hi!'>
+ ${this.localize('label.question')}
+ </a>
+ `;
+ return tmpl
+ }
+ }
+
+
+As a developer who uses a component, you can also add you own translation files by targeting you translation folder.
+Like for the component, this folder should contain one file per language:
+
+.. code:: html
+
+ <solid-conversation
+ data-src="./data/conversations.jsonld"
+ extra-translations-path="http://my_app/locales"
+ ></solid-conversation>
+
+
+9. Does it work well?
+---------------------
+
+ .. image:: ./../../_static/images/import_documentation/faq.gif
+ :alt: A FAQ component as example
+
+If you get any trouble (or any idea to improve!), please `mail me <'mailto:alice@startinblox.com?subject=A%20feedback%20from%20the%20doc>`__ :)
+
+.. note::
+ **Document your component!**
+
+ Each time you create a component, remember to document it with a README.md, especially the version of the core with which it was developed. If you create a component by default you will be considered as the maintainer. This means that you are responsible for its future updates but also that you could get support contracts on this component in the future :)
+
+ Releases are posted `here <https://git.startinblox.com/framework/sib-core/-/releases>`__.
+ Subscribe to the newsletter not to miss the next ones!
+
+
+.. warning::
+ This tutorial could be improved by adding accessibility.
+
+Go Deeper
+==========
+Discover other features of the framework playing with `the demo on the website <https://startinblox.com/fr/technology#demo>`__.
-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 finish the configuration.
diff --git a/source/index.rst b/source/index.rst
index 2ec667222d69d7298d27beac43743daaaeb2c55c..6fce2e3ee44cd49ead9c5c974a8218a6248c5dbf 100644
--- a/source/index.rst
+++ b/source/index.rst
@@ -15,7 +15,7 @@ Welcome to Startinblox's documentation
:maxdepth: 2
:caption: How it works
- import_documentation/How-to-make-components
+ import_documentation/About-our-components
import_documentation/install-sib-server
import_documentation/develop-sib-ldp-packages
import_documentation/server-architecture