diff --git a/source/import_documentation/Developping-with-SibTemplateElement.rst b/source/import_documentation/Developping-with-SibTemplateElement.rst index 4e0368aa21e550087519b22fc56081a31db6c552..c62f0dd5f73bd591d29a54cc6d55f2b6aa1b5f84 100644 --- a/source/import_documentation/Developping-with-SibTemplateElement.rst +++ b/source/import_documentation/Developping-with-SibTemplateElement.rst @@ -112,17 +112,10 @@ You are going to set your attribute in this method. `recipientEmail` is the para Note the syntaxe convention => recipientEmail: 'recipient-email' 3. Let's focus on the template -<<<<<<< HEAD ------------------------ -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 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. ->>>>>>> a4f63657c0a77bcca573b919618fe7309e3b7ceb We add a conditional rendering: if no email is filled in, the possibility to submit a question is not displayed. @@ -152,6 +145,7 @@ We add a conditional rendering: if no email is filled in, the possibility to sub 4. Set fake datas ----------------- + 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: @@ -203,19 +197,11 @@ Import the script of your component and set the component in your ``index.html`` </head> <body> <h1>Solid FAQ Demo</h1> -<<<<<<< HEAD - <!--Implement your component--> - <solid-faq - data-src="data-faq.jsonld" - recipient-email="alice@startinblox.com"> - </solid-faq> -======= <!--Import the component--> <solid-faq - data-src="data-faq.jsonLD" + data-src="data-faq.jsonld" recipient-email="alice@startinblox.com" ></solid-faq> ->>>>>>> a4f63657c0a77bcca573b919618fe7309e3b7ceb </body> </html> @@ -226,18 +212,9 @@ Import the script of your component and set the component in your ``index.html`` npm run serve -<<<<<<< HEAD -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. -======= You should be able to display your data but at the moment it's a bit ugly. Let's add some style. ->>>>>>> a4f63657c0a77bcca573b919618fe7309e3b7ceb + 4. Implement JS and CSS in your component ----------------------------------------- @@ -344,12 +321,8 @@ Here is the CSS used for the demo: } **Use Helper functions** -<<<<<<< HEAD -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. ->>>>>>> a4f63657c0a77bcca573b919618fe7309e3b7ceb Add at the begin of your ``solid-faq.js``, import your JS and CSS with those functions: diff --git a/source/import_documentation/How-to-make-components.rst b/source/import_documentation/How-to-make-components.rst index 91312f536cf2806b8db268e56a45a5c9800f5228..c6cf0b2b92a277fc72a0a0b2e5efa4692efb665b 100644 --- a/source/import_documentation/How-to-make-components.rst +++ b/source/import_documentation/How-to-make-components.rst @@ -75,10 +75,8 @@ 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 @@ -111,11 +109,7 @@ Your ``package.json`` should look like this : **4**. Start your component -<<<<<<< HEAD -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. -======= Let's create the main JS file for your component named ``solid-faq.js``. ->>>>>>> a4f63657c0a77bcca573b919618fe7309e3b7ceb Now you are ready to start :)