Skip to content
Snippets Groups Projects
Commit d979922e authored by Alice Poggioli's avatar Alice Poggioli
Browse files

fix conflict

parents ccf4d10b 804fb33d
No related branches found
No related tags found
1 merge request!44Master to dev
Pipeline #8956 passed
Hide whitespace changes
Inline Side-by-side
source/import_documentation/Developping-with-SibTemplateElement.rst
+ 3
− 30
View file @ d979922e
......@@ -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:
......
source/import_documentation/How-to-make-components.rst deleted 100644 → 0
+ 0
− 118
View file @ ccf4d10b
.. _create-components:
How to create components
######################
.. 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.
Let's start
=============
As we told you, if you are friendly with React or Vue.JS, learning SiB will be easy for you :)
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**. Create a folder named "solid-faq"
.. 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 the following commands:
.. code:: bash
# Init a npm management
npm init -y
# 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
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"
}
}
**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 :)
Choose the best method for you
=============================
Easy method with SolidTemplateElement
-----------------------------------
"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** => :ref:`Developing component with SolidTemplateElement <with-solid-template-element>`
Advanced method
-----------------
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>`__.
.. warning::
The **MORE COMPLEX WAY** is not available yet. It's comming, stay tuned !
**MORE COMPLEX WAY** => :ref:`Developing component without SolidTemplateElement <without-solid-template-element>`
source/import_documentation/build-existing-app.rst
+ 13
− 13
View file @ d979922e
......@@ -19,19 +19,19 @@ Get the code of your app (for the example the SIB App):
Create JON file and configure the client to contact the servers:
.. code-block:: json
{
{
"xmpp": "https://jabber.happy-dev.fr/http-bind/",
"authority": "http://api.batman.happy-dev.fr/",
"clientName": "Sib App",
"authorityName": "batman",
"publicDirectory": false,
"endpoints": {
"circles": "https://api.batman.happy-dev.fr/circles/",
"users": "https://api.batman.happy-dev.fr/users/"
},
"analytics": []
}
{
"xmpp": "https://jabber.happy-dev.fr/http-bind/",
"authority": "http://api.batman.happy-dev.fr/",
"clientName": "Sib App",
"authorityName": "batman",
"publicDirectory": false,
"endpoints": {
"circles": "https://api.batman.happy-dev.fr/circles/",
"users": "https://api.batman.happy-dev.fr/users/"
},
"analytics": []
}
The parameters are:
......
source/import_documentation/devops/build_sib_application.rst deleted 100644 → 0
+ 0
− 73
View file @ ccf4d10b
Build a SIB application from sources
====================================
Requirements
------------
- npm 6.7.0
Configure the app
-----------------
Get the code of your app (for example `the SIB
App <https://git.startinblox.com/applications/sib-app>`__:
::
$ git clone https://git.happy-dev.fr/startinblox/applications/sib-app.git /tmp/sib_app
$ cd /tmp/sib_app
Create JON file and configure the client to contact the servers:
::
{
{
"xmpp": "https://jabber.happy-dev.fr/http-bind/",
"authority": "http://api.batman.happy-dev.fr/",
"clientName": "Sib App",
"authorityName": "batman",
"publicDirectory": false,
"endpoints": {
"circles": "https://api.batman.happy-dev.fr/circles/",
"users": "https://api.batman.happy-dev.fr/users/"
},
"analytics": []
}
The parameters are:
- ``xmpp``: the BOSH access of your Prosody’s server
- ``authority``: the primary OpenID authority url, for sib-auth
- ``authorityName``: the primary OpenID authority name, for sib-auth
- ``clientName``: your client name, for sib-auth
- ``endpoints``: api points to the server to contact for each
capability
In this example we are contacting the same server
(``batman.happy-dev.fr``) for all our application capabilities. Because
we installed the server with `this configuration <install_sib_server>`__
we know it supports all capabilities we need. But we could point each
capability to different servers as long as they support it.
If you use a local development server, you should use
``http://localhost:8000/`` instead.
Build the client app
--------------------
Create your application bundle:
::
$ npm run build
The application bundle is in the ``dist`` folder, ready to be deployed
everywhere as a static file.
You can ``serve`` your application locally (assuming you already have a
SIB server setup) to check its behavior:
::
$ npm run watch
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment