feat: changes path assets

README.md

@@ -144,19 +144,19 @@ You can use one of the solutions:
 To add images to your article, you will need to create the folder `_assets/articles/YYYY-MM-DD-slug/` and add your images there.
 Then in the markdown content, insert the tag:
 ```md
-![alt of image]({{ site.baseurl }}/assets/YYYY-MM-DD-slug/image-name.png)
+![alt of image]({BASE_URL}/imgs/articles/YYYY-MM-DD-slug/image-name.png)
 ```
 
 To add an image with a figure and a figcaption you just need to write this syntax:
 
 ```md
-![alt of image]({{ site.baseurl }}/assets/YYYY-MM-DD-slug/image-name.png)
+![alt of image]({BASE_URL}/imgs/articles/YYYY-MM-DD-slug/image-name.png)
 Figure: *Source Github*
 ```
 
 And to specify a size on the image, you can add the arguments (`width`, `height`, `maxWidth`, `maxHeight`) after the url:
 ```md
-![alt of image]({{ site.baseurl }}/assets/YYYY-MM-DD-slug/image-name.png?width=500)
+![alt of image]({BASE_URL}/imgs/articles/YYYY-MM-DD-slug/image-name.png?width=500)
 ```
 
 > Warning: Don't add html in your markdown, you don't have to override the blog template in the markdown.

_articles/en/2016-07-13-how-to-be-best-friend-with-the-http-cache.md

@@ -157,7 +157,7 @@ It acts like the CDN, and the CDN belongs to the architecture. It often concerns
 #### The Web Server
 
 The web server also allows you to use the HTTP cache, it is generally used for the cache of assets (JS, CSS, images, etc.). Like Varnish, its advantage is to be very finely configurable.
-![Architecture Http](/_assets/articles/2016-06-29-le-cache-http-votre-meilleur-ami/untitled.png)
+![Architecture Http]({BASE_URL}/imgs/articles/2016-06-29-le-cache-http-votre-meilleur-ami/untitled.png)
 
 ### Customizing your HTTP cache
 

_articles/en/2016-07-19-behat-structure-functional-tests.md

@@ -35,7 +35,7 @@ Before we can go, please note that we will use a `Selenium` server which will r
 
 To be clear on the architecture we will use, here is a scheme that will resume the role of all elements:
 
-!["Behat architecture schema"](/_assets/articles/2016-07-19-behat-structure-functional-tests/behat_en.jpg)
+!["Behat architecture schema"]({BASE_URL}/imgs/articles/2016-07-19-behat-structure-functional-tests/behat_en.jpg)
 
 ## Behat set up
 First step is to install Behat and its extensions as dependencies in our `composer.json` file:

_articles/en/2016-09-29-mtools-mongodb.md

@@ -81,7 +81,7 @@ More info [here](https://github.com/rueckstiess/mtools/wiki/mlogfilter).
 
 Those tools allows you to generate graphics to visualize data in a human-readable format. We can see : calls distribution, type of commands, etc :
 
-![mlogvis](/_assets/articles/2016-09-29-mtools-mongodb/mlogvis.png)
+![mlogvis]({BASE_URL}/imgs/articles/2016-09-29-mtools-mongodb/mlogvis.png)
 
 More info on [Mlogvis](https://github.com/rueckstiess/mtools/wiki/mlogvis) & [Mplotqueries](https://github.com/rueckstiess/mtools/wiki/mplotqueries).
 
@@ -133,6 +133,6 @@ This command is creating a MongoDB server with 5 replicas.
 
 Compass is a desktop client allowing you to browse and analyze data from a MongoDB database. Its goal is to allow a person to manipulate data without real knowledges on MongoDB querying. However, it's only available on Windows and MacOS yet.
 
-![date-sample](/_assets/articles/2016-09-29-mtools-mongodb/date-sample.png)
+![date-sample]({BASE_URL}/imgs/articles/2016-09-29-mtools-mongodb/date-sample.png)
 
-![query-builder](/_assets/articles/2016-09-29-mtools-mongodb/query-builder.png)
+![query-builder]({BASE_URL}/imgs/articles/2016-09-29-mtools-mongodb/query-builder.png)

_articles/en/2016-09-29-symfony-workflow-component.md

@@ -119,7 +119,7 @@ $ bin/console workflow:dump pull_request
 
 The generated Graphviz will give you the following diagram:
 
-![Workflow Graphviz](/_assets/articles/2016-09-29-symfony-workflow-component/workflow.png)
+![Workflow Graphviz]({BASE_URL}/imgs/articles/2016-09-29-symfony-workflow-component/workflow.png)
 
 This one gives you a really clear vision of your workflow and allows everyone at every level (developers, product owners, customers, ...) to understand the business logic.
 The Workflow component implements methods that allow you to verify if a transition is applicable and to later apply it depending on the current status and to also list all enabled transitions.

_articles/en/2016-11-21-push-notification-website.md

@@ -36,15 +36,15 @@ At this point, you should have access to your PWA at localhost:8080. If you hav
 Before getting into sending push notifications, we are going to go through the configuration. Yes! It's not magic, we are going to ask Google for authorization.
 Let's go to [Firebase](https://console.firebase.google.com/) to create a project.
 
-![Firebase - créer un projet](/_assets/articles/2016-11-21-push-notification-website/newproject.png)
+![Firebase - créer un projet]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/newproject.png)
 
 Feel free to choose any name for the project. Once you are on the dashboard, you have to click the small wheel, and then "Project settings".
 
-![](/_assets/articles/2016-11-21-push-notification-website/settings-1.png)
+![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/settings-1.png)
 
 In the "Cloud messaging" tab you'll find your sender ID.
 
-![](/_assets/articles/2016-11-21-push-notification-website/cloud.png)
+![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/cloud.png)
 
 In the manifest.json, available in the public folder of the application, you have to add at the end of the file the "gsm_sender_id" with the value of the sender ID.
 
@@ -98,7 +98,7 @@ if('serviceWorker' in navigator) {
 
 As you would expect, if you restart your server, you'll have a request to accept the notifications.
 
-![PWA - Autoriser les notifications](/_assets/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-15.34.14.png)
+![PWA - Autoriser les notifications]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-15.34.14.png)
 
 You should also see in your console a message such as:
 
@@ -109,7 +109,7 @@ endpoint: cV2kP3sOb24:APA91bHfZgFSPQ3CXyG9LejWdq9jOT-WqQpvK4peX9ZZtrfsHCf6OPEvDe
 This is the device token, we will use it to send a push notification.
 Since we want to do something clean (even if it's just a tutorial), we are going to use Firebase to store user tokens. To do so, let's go back to the Firebase console, and click "Web setup" in the "Authentication" tab.
 
-![](/_assets/articles/2016-11-21-push-notification-website/web_setup.png)
+![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/web_setup.png)
 
 The script installation is done in the HTML code, in files public/home.html and public/article/alorscettearticle.html.
 
@@ -202,11 +202,11 @@ Before starting the server, you have to open permissions to Firebase in order fo
 }
 ```
 
-![](/_assets/articles/2016-11-21-push-notification-website/rules.png)
+![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/rules.png)
 
 If you restart the server, you will see a token stored in the DB in the "Database" tab of Firebase.
 
-![](/_assets/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-16.24.58.png)
+![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-16.24.58.png)
 
 Now that the tokens are stored in the database, we are going to prepare a message that will appear when a push notification occurs. Let's add the following code to the file public/sw.js:
 
@@ -262,15 +262,15 @@ It's almost ready! We are going to create a "/sender" url that will allow us t
 
 In the app.js file, we initialize Firebase. You are going to need a server key file. Click the wheel in Firebase, and then "Permissions". You are now taken to another console.
 
-![](/_assets/articles/2016-11-21-push-notification-website/permissions.png)
+![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/permissions.png)
 
 In "Service accounts", create a new account.
 
-![](/_assets/articles/2016-11-21-push-notification-website/account.png)
+![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/account.png)
 
 A json file will be downloaded, you need to add it to your project folder.
 
-![JsonFile - Racine](/_assets/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-17.22.04.png)
+![JsonFile - Racine]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-17.22.04.png)
 
 In the app.js file, we are going to add the route /sender that will send a request of a push notification with all the tokens.
 
@@ -330,11 +330,11 @@ app.listen(8080, function () {
 
 Be careful! The authorization key is in the first tab that we opened.
 
-![](/_assets/articles/2016-11-21-push-notification-website/cloud.png)
+![]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/cloud.png)
 
 If everything is ok, when you restart the server and go to / and then /sender, you will get a notification. If it isn't the case, clear the cache of your application in the chrome console.
 
-![Enfin - la push notification](/_assets/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-17.46.23.png)
+![Enfin - la push notification]({BASE_URL}/imgs/articles/2016-11-21-push-notification-website/capture-decran-2016-10-26-a-17.46.23.png)
 
 
 Once again, this code is only a tutorial, I invite you to open issues for any question. The finale code is available [here](https://github.com/CaptainJojo/pwa-parisjs/tree/push).

_articles/en/2016-12-05-create-atom-package.md

@@ -108,7 +108,7 @@ Atom settings allow multiple setting types (`boolean` , `color` , `integer` ,
 
 Once it is added, if you reload your package, you will see your package settings appearing into Atom settings:
 
-![Gitlab URL Parameter](/_assets/articles/2016-12-05-create-atom-package/gitlab-url.png)
+![Gitlab URL Parameter]({BASE_URL}/imgs/articles/2016-12-05-create-atom-package/gitlab-url.png)
 
 In order to retrieve the value (or default value) defined by a user for a given setting in your code, you just have to use the following line:
 
@@ -222,7 +222,7 @@ In order to run the specs tests, you just have to navigate into the following me
 
 Our package is now ready to be deployed! Let's send it.
 
-![Publish](/_assets/articles/2016-12-05-create-atom-package/publish.gif)
+![Publish]({BASE_URL}/imgs/articles/2016-12-05-create-atom-package/publish.gif)
 
 To do that, we will use the `apm`  CLI tool which comes with Atom when installing it.
 

_articles/en/2016-12-21-understanding-ssltls-part-1.md

@@ -44,7 +44,7 @@ SSL and TLS are invisible to the user, and don't require a usage of protocol of
 
 _OSI Model with SSL/TLS_
 
-![tls-in-osi](/_assets/articles/2016-12-21-understanding-ssltls-part-1/tls-in-osi.png)
+![tls-in-osi]({BASE_URL}/imgs/articles/2016-12-21-understanding-ssltls-part-1/tls-in-osi.png)
 
 _Bottom line:_
 

_articles/en/2017-01-12-mobile-development-start.md

@@ -43,7 +43,7 @@ Android's WebView is based on Chromium. For iOS, it's Safari, and it's Internet
 
 Thus, Ionic doesn't allow creating native mobile applications strictly speaking. We'll be talking about hybrid applications instead.
 
-*Ionic representation schema*:![schema1](/_assets/articles/2017-01-12-mobile-development-start/Schema1.png)
+*Ionic representation schema*:![schema1]({BASE_URL}/imgs/articles/2017-01-12-mobile-development-start/Schema1.png)
 
 I can see you coming: "AngularJS, great, I have it under control, let's go".
 
@@ -90,7 +90,7 @@ But Ionic has weaknesses as well:
 
 *Compatibility table with Cordova:*
 
-![platform-support](/_assets/articles/2017-01-12-mobile-development-start/platform-support.png)
+![platform-support]({BASE_URL}/imgs/articles/2017-01-12-mobile-development-start/platform-support.png)
 
 **Conclusion:**
 

_articles/en/2017-01-20-redux-structure-frontend-applications.md

@@ -23,7 +23,7 @@ Historically, this has been needed by [React](https://facebook.github.io/react/
 
 Here is the philosophy:
 
-![Flux Diagram](/_assets/articles/2017-01-20-redux-structure-frontend-applications/flux-diagram.png)
+![Flux Diagram]({BASE_URL}/imgs/articles/2017-01-20-redux-structure-frontend-applications/flux-diagram.png)
 
 Your application declare `actions`  for each components. These actions allow you to define the state of your data which is stored in a `store` . This stores continually maintains your `view`  up-to-date.
 We have a drawback in this case because you have to define one store per component. This is working but on large applications you can feel limited with it.

_articles/en/2017-01-31-rabbitmq-publish-consume-retry-messages.md

@@ -6,7 +6,7 @@ slug: rabbitmq-publish-consume-retry-messages
 title: 'RabbitMQ: Publish, Consume, and Retry Messages'
 excerpt: >-
   ![Swarrot
-  Logo](/_assets/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/logo.png)
+  Logo]({BASE_URL}/imgs/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/logo.png)
 categories:
   - php
 authors:
@@ -16,7 +16,7 @@ keywords:
   - rabbitmq
   - symfony
 ---
-![Swarrot Logo](/_assets/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/logo.png)
+![Swarrot Logo]({BASE_URL}/imgs/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/logo.png)
 
 RabbitMQ is a message broker, allowing to process things asynchronously. There's already an [article](https://blog.eleven-labs.com/fr/creer-rpc-rabbitmq/) written about it, if you're not familiar with RabbitMQ.
 
@@ -77,11 +77,11 @@ Create binding between exchange default and queue send_astronaut_to_space (with
 
 If you connect to the RabbitMQ management interface (ex: http://127.0.0.1:15672/), many things will appear:
 
-![Capture of exchanges created](/_assets/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/create_exchanges.png)
+![Capture of exchanges created]({BASE_URL}/imgs/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/create_exchanges.png)
 
 Click on the _Exchanges_ tab: an exchange named _default_ has been created, with a binding to our queue as indicated in our terminal.
 
-![Capture of queues created](/_assets/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/create_queues.png)
+![Capture of queues created]({BASE_URL}/imgs/articles/2017-01-23-publier-consommer-reessayer-des-messages-rabbitmq/create_queues.png)
 
 Now click on the _Queues_ tab: _send_astronaut_to_space_ is also here.
 

_articles/en/2017-02-22-consul-service-discovery-failure-detection.md

@@ -37,7 +37,7 @@ In order to clarify the rest of the article, here are the ports used by Consul:
 
 Next, we'll focus on service discovery and failure detection. To do that, we'll create a Docker Swarm cluster with the following architecture:
 
-![Consul Infrastructure Schema](/_assets/articles/2017-02-22-consul-service-discovery-failure/schema.png)
+![Consul Infrastructure Schema]({BASE_URL}/imgs/articles/2017-02-22-consul-service-discovery-failure/schema.png)
 
 As you can see, we'll have 3 Docker machines:
 
@@ -265,7 +265,7 @@ $ docker run -d \
 
 You can do the same thing on your node 02 (by paying attention to modify the `node-01`  values to `node-02` ) and you should now visualize these checks on the Consul web UI:
 
-![Consul Infrastructure Schema](/_assets/articles/2017-02-22-consul-service-discovery-failure/checks.png)
+![Consul Infrastructure Schema]({BASE_URL}/imgs/articles/2017-02-22-consul-service-discovery-failure/checks.png)
 
 You can also use the Consul API in order to verify the good health of your services:
 

_articles/en/2017-03-15-cqrs-pattern-2.md

@@ -21,7 +21,7 @@ A command is defined as a method that changes state. On the contrary, a query on
 
 The following schema shows a basic implementation of the CQRS pattern inside an application. All messages are sent through commands and events. Let's take a closer look at this.
 
-![Example of implementation of CQRS pattern](/_assets/articles/2015-04-07-cqrs-pattern/cqrs_pattern.png)
+![Example of implementation of CQRS pattern]({BASE_URL}/imgs/articles/2015-04-07-cqrs-pattern/cqrs_pattern.png)
 *Example of implementation of CQRS pattern*
 
 We can clearly see the separation between writing parts and reading ones: the user does a modification on his page, resulting in a command being executed. Once this command is fully handled, an event is dispatched to signal a modification.

_articles/en/2017-04-12-http2-future-present.md

@@ -32,7 +32,7 @@ After a first step made by Google in 2009 with the `SPDY` protocol, `HTTP/2`
 
 Nowadays, HTTP/2 protocol is supported by most browsers and it's important to point out. While writing this blog post, only Opera Mini does not implement the new protocol, as shown on the following table:
 
-![Can I use HTTP/2?](/_assets/articles/2017-04-12-http2-future-present/caniuse.jpg)
+![Can I use HTTP/2?]({BASE_URL}/imgs/articles/2017-04-12-http2-future-present/caniuse.jpg)
 
 That being said, you can consider upgrading your own web applications to HTTP/2 as soon as possible and thus offer high browsing performances to your visitors.
 
@@ -52,13 +52,13 @@ If you want more information about how to [improve SSL exchanges security](http
 
 HTTP/1 resources were loaded one by one as you can see below on a HTTP/1 application waterfall. HTTP/2 will allow to gain a lot of time on "waiting time" because multiple resources could be sent/downloaded by the client using the same HTTP stream (which is often called binary stream).
 
-![Waterfall HTTP?](/_assets/articles/2017-04-12-http2-future-present/waterfall_http.jpg)
+![Waterfall HTTP?]({BASE_URL}/imgs/articles/2017-04-12-http2-future-present/waterfall_http.jpg)
 
 Here, time passed and displayed in green color is corresponding to wait time before resource loading. Purple time is corresponding to resource loading time (TTFB - Time To First Byte) and finally the grey time is corresponding on the resource reception to the client.
 
 Here is a waterfall of resources loading using the HTTP/2 protocol:
 
-![Waterfall HTTP/2?](/_assets/articles/2017-04-12-http2-future-present/waterfall_http2.jpg)
+![Waterfall HTTP/2?]({BASE_URL}/imgs/articles/2017-04-12-http2-future-present/waterfall_http2.jpg)
 
 You can clearly see here that time allocated to wait on resources (old-green time) has disappeared completely and all resources are clearly loaded in the same time because they are in the same stream.
 

_articles/en/2017-04-20-upload-file-ajax.md

@@ -269,7 +269,7 @@ A **ProgressEvent** object passed to the **onUploadProgress** callback function.
 
 Small demo in GIF  and full code here [https://github.com/lepiaf/file-upload](https://github.com/lepiaf/file-upload)
 
-![](/_assets/articles/2017-04-20-upload-file-ajax/upload.gif)
+![]({BASE_URL}/imgs/articles/2017-04-20-upload-file-ajax/upload.gif)
 
 
 ### To conclude

_articles/en/2017-06-14-amp-web-3-0.md

@@ -24,11 +24,11 @@ Google, the undisputed leader in web services (search, pub, analytics ...), has
 
 If you follow the digital news and use google search a lot, you have very likely already seen the following "cards" in your mobile searches :
 
-![](/_assets/articles/2017-06-14-amp-web-3-0/croped-1.png)
+![]({BASE_URL}/imgs/articles/2017-06-14-amp-web-3-0/croped-1.png)
 
 Yes, that's AMP. A place of choice in Google search, but also a new way of browsing between websites. Indeed, if you click on one of the cards you will not be on the website that sent the content (you will understand why later) but you will stay at Google's, which will allow you to slide between each page of the search:
 
-![](/_assets/articles/2017-06-14-amp-web-3-0/capture-decran-2017-05-29-a-10.38.18.png)
+![]({BASE_URL}/imgs/articles/2017-06-14-amp-web-3-0/capture-decran-2017-05-29-a-10.38.18.png)
 
 Interesting don't you think? But there is more to it, if you look more carefully you will realize that the AMP website is vastly faster than your own.