diff --git a/source/_static/images/import_documentation/raw-faq.png b/source/_static/images/import_documentation/raw-faq.png
new file mode 100644
index 0000000000000000000000000000000000000000..fdd77118377029b5afce4b0116c45a1d95b18b4c
Binary files /dev/null and b/source/_static/images/import_documentation/raw-faq.png differ
diff --git a/source/import_documentation/Developping-with-SibTemplateElement.rst b/source/import_documentation/Developping-with-SibTemplateElement.rst
index 30ae34fc9df03b172fd2dd723c964543c6ac2e70..4e8cbdfea24b5a4b4bc163f4ca21e1a42bdd7dea 100644
--- a/source/import_documentation/Developping-with-SibTemplateElement.rst
+++ b/source/import_documentation/Developping-with-SibTemplateElement.rst
@@ -3,7 +3,7 @@ Developping a comoponent with SiBTemplateElement
What is SiBTemplateElement ?
---------------------------
-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.
+It 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.
.. warning::
To start this tutorial, you should have followed `this first part <https://docs.startinblox.com/import_documentation/How-to-make-components.html>`__ .
@@ -41,7 +41,6 @@ To obtain this rendering, it would be enough to implement in our html page a com
1. Set the base of you component in a solid-faq.js file
-----------------------------------------------------
-
Create a component that extends SolidTemplateElement.
Here is the minimum code your component must contain that extends ``SolidTemplateElement``.
@@ -56,6 +55,10 @@ Here is the minimum code your component must contain that extends ``SolidTemplat
// Name your component and extend SolidTemplateElement
export class SolidFAQ extends SolidTemplateElement {
+ constructor() {
+ super();
+ }
+
// Define the attributes you want
static get propsDefinition() {
return {
@@ -93,7 +96,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.
+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
@@ -109,9 +112,9 @@ You are going to set your attribute in this method.
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.
+The template contains the HTML you want to render. You can pass to it parameter you want to use in.
To display the questions and answers, we are going to use `solid-display <https://docs.startinblox.com/import_documentation/Components/Solid-Display.html>`__.
-The attributes fields is used to define which datas you want to display from your data source.
+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.
@@ -192,9 +195,9 @@ Import the script of your component and set the component in your ``index.html``
</head>
<body>
<h1>Solid FAQ Demo</h1>
- <!--Import the component-->
+ <!--Implement your component-->
<solid-faq
- data-src="data-faq.jsonLD"
+ data-src="data-faq.jsonld"
recipient-email="alice@startinblox.com">
</solid-faq>
</body>
@@ -207,7 +210,14 @@ Import the script of your component and set the component in your ``index.html``
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 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.
4. Implement JS and CSS in your component
---------------------------------
@@ -314,6 +324,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.
Add at the begin of your ``solid-faq.js``, import your JS and CSS with those functions:
@@ -332,15 +343,22 @@ Add at the begin of your ``solid-faq.js``, import your JS and CSS with those fun
importJS(`./js/main.js`);
importCSS(`/css/main.css`);
- // Name your component and extend SolidTemplateElement
export class SolidFAQ extends SolidTemplateElement {
...
+**It should be better now, no ?**
+
+ .. image:: ./../../_static/images/import_documentation/faq.gif
+ :alt: A FAQ component as example
+
7. 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``.
@@ -349,7 +367,6 @@ To translate the static strings of your components, follow these steps:
.. code:: json
{
- "title": "Solid FAQ",
"label.question": "Your question is not here ?"
}
@@ -358,7 +375,10 @@ To translate the static strings of your components, follow these steps:
.. code:: js
- const base_url = "https://unpkg.com/@startinblox/solid-faq"; // url of your component
+ // 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 {
@@ -382,11 +402,11 @@ To translate the static strings of your components, follow these steps:
...
- template( { dataSrc, title, moderatorEmail } ) {
+ template( { dataSrc, recipientEmail } ) {
if (!dataSrc) return '';
let tmpl = `
...
- <a href='mailto:p.${moderatorEmail}?subject=A%20new%20question%20for%20the%20FAQ&body=Hi!'>
+ <a href='mailto:p.${recipientEmail}?subject=A%20new%20question%20for%20the%20FAQ&body=Hi!'>
${this.localize('label.question')}
</a>
`;
@@ -414,6 +434,15 @@ Like for the component, this folder should contain one file per language:
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.
diff --git a/source/import_documentation/How-to-make-components.rst b/source/import_documentation/How-to-make-components.rst
index 45999979a2f87bb6442c66b6ed8502e97e8ee335..3ba072ffe6e1218dbd4291c66ba63a4d4d30c6b8 100644
--- a/source/import_documentation/How-to-make-components.rst
+++ b/source/import_documentation/How-to-make-components.rst
@@ -74,7 +74,6 @@ 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
-Then, at the root of your project create an index.html file.
**3**. Make an npm command available to launch your server
@@ -89,7 +88,7 @@ Your `package.json` should look like this :
.. code:: json
{
- "name": "Solid FAQ",
+ "name": "solid-faq",
"version": "1.0.0",
"description": "",
"main": "index.js",
@@ -107,7 +106,7 @@ 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 at the root of your folder the main JS file for your component named `solid-faq.js` and an index.html file to make the demo.
Now you are ready to start :)
diff --git a/source/import_documentation/get-started.rst b/source/import_documentation/get-started.rst
index 18aaea937de22e0a6151da2a62203d6bf28490b0..c5a2e4abc93e448abd8db3ad1b35a0dac7e4074e 100644
--- a/source/import_documentation/get-started.rst
+++ b/source/import_documentation/get-started.rst
@@ -1,7 +1,7 @@
Getting Started
****************
-With the Front
-==============
+Creating your front App
+======================
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.
@@ -71,8 +71,8 @@ To make your tests with Startin'blox, here is some publics read only data source
To see how our API is structured, have a look to our `SOLID Introduction <https://docs.startinblox.com/import_documentation/Solid-introduction>`__
-With the back
-=============
+Creating your data sources
+=========================
Requirements
-------------