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 deleted file mode 100644 index 30b905b7823432cd5defd04875f1814cdb61fa58..0000000000000000000000000000000000000000 --- a/source/import_documentation/How-to-make-components.rst +++ /dev/null @@ -1,118 +0,0 @@ -.. _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>` - - - diff --git a/source/import_documentation/build-existing-app.rst b/source/import_documentation/build-existing-app.rst index 79a78f8e7fde4735bf6a377bb960f634e1db165b..a23617bf4c5f45caace3e626b460af67a6d562eb 100644 --- a/source/import_documentation/build-existing-app.rst +++ b/source/import_documentation/build-existing-app.rst @@ -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: diff --git a/source/import_documentation/devops/build_sib_application.rst b/source/import_documentation/devops/build_sib_application.rst deleted file mode 100644 index a1d086c4b1af54e37d1dfc5faefb2ddb55bf5dea..0000000000000000000000000000000000000000 --- a/source/import_documentation/devops/build_sib_application.rst +++ /dev/null @@ -1,73 +0,0 @@ -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