From b3da857fc2de9139d3af544523724f5a1980aab3 Mon Sep 17 00:00:00 2001
From: Alice Poggioli <alice.poggioli@paca.happy-dev.fr>
Date: Tue, 1 Sep 2020 15:34:17 +0200
Subject: [PATCH] update how to make component
---
.../Developping-with-SibTemplateElement.rst | 11 ++++----
.../How-to-make-components.rst | 28 +++++++++++++++++--
2 files changed, 31 insertions(+), 8 deletions(-)
diff --git a/source/import_documentation/Developping-with-SibTemplateElement.rst b/source/import_documentation/Developping-with-SibTemplateElement.rst
index f62b6b8..0e461c4 100644
--- a/source/import_documentation/Developping-with-SibTemplateElement.rst
+++ b/source/import_documentation/Developping-with-SibTemplateElement.rst
@@ -59,7 +59,7 @@ Here is the minimum code your component must contain that extends ``SolidTemplat
static get propsDefinition() {
return {
dataSrc: 'data-src',
- attributeCustom: 'xyz',
+ attributeCustom: 'attribute-custom',
}
}
@@ -95,6 +95,7 @@ You are going to set these attribute in your ``static get propsDefinition()`` me
3. Create your template
-----------------------
+The template contain the HTML you want to render.
To display the questions and answers, we are going to use `Solid-display <https://docs.startinblox.com/import_documentation/Components/SiB-Display.html>`__.
If a moderator's email is filled in then we display the possibility to send him an email.
@@ -256,12 +257,12 @@ Create a file named ``datas-faq.jsonld`` at the root of your project and put the
"@context": "https://cdn.happy-dev.fr/owl/hdcontext.jsonld"
}
-
+.. 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>`__.
5. Implement your component
-----------------------------
-Use the component in your ``index.html``.
-If your component uses some core component like ``solid-display``, don't forget to import it in the ``<head>`` of your file.
+Import your script and set the component in your ``index.html``.
.. code:: html
@@ -270,7 +271,7 @@ If your component uses some core component like ``solid-display``, don't forget
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- <script type="module" src="https://unpkg.com/@startinblox/core@0.10"></script>
+ <!-- import your component -->
<script src="solid-faq.js" type="module"></script>
<title>Youpi !</title>
</head>
diff --git a/source/import_documentation/How-to-make-components.rst b/source/import_documentation/How-to-make-components.rst
index bd8eb9f..8a336c1 100644
--- a/source/import_documentation/How-to-make-components.rst
+++ b/source/import_documentation/How-to-make-components.rst
@@ -15,13 +15,20 @@ Developing with Startin'Blox is an opportunity to shift your perspective regardi
Example with a FAQ component
---------------------------
-For instance, implementing a collaborative FAQ could be done with just *sib-display* and *sib-form*. Encapsulating them within an FAQ component wouldn't make your code more concise. But it permit you to share the *idea* of a FAQ.
+For instance, implementing a collaborative FAQ could be done with few 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.
**With components, you share more than code, you share resources 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 broad
+ * A skill directory
+
Let's start
=============
@@ -29,7 +36,22 @@ As we told you, if you are familiart with React or VusJS, learning SiB will be e
Requirements
-------------
-Be sur you have et least the version 6.14.5 of npm with `npm -v`.
+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.
For the more studious, who would like to revise their JavaScript, we recommend `this reading <https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript>`__.
@@ -56,7 +78,7 @@ Then, At the root of your project creat an index.html file.
**3**. Make an npm command available to launch your server
-Go to your `package.json` and add the following script :
+Go to your `package.json` and replace the 'test' script by the following :
.. code:: json
--
GitLab