Merge branch 'master' into dpo/switch-to-skypack

2020-12-14 20:07:43 +01:00 · 2020-12-14 20:07:43 +01:00 · 732de91b8f
commit 732de91b8f
parent 32f9cf217d deb3b25520
82 changed files with 11837 additions and 9968 deletions
--- a/.babelrc
+++ b/.babelrc
@ -1,3 +0,0 @@
-{
-
-}
--- a/.gitignore
+++ b/.gitignore
@ -1,11 +1,22 @@
 **/node_modules
-config.json
 .DS_Store
 *.iml
 *.swp
-dist
+.npm
+
+# Test cache
+cache
 cypress/screenshots
 cypress/videos
-cache
-.npm
-.DS_Store
+
+# Built files
+.cache
+dist
+
+# Config specific files
+config.json
+config.*.json
+!config.sample.json
+
+# PWA Generated file
+src/manifest.webmanifest
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@ -38,7 +38,7 @@ build:

 test:e2e:
  stage: test
-  image: cypress/included:4.5.0
+  image: cypress/included:5.6.0
  services:
    - name: ${CI_REGISTRY_IMAGE}/server:0.1
  before_script:
@ -150,7 +150,7 @@ stg2:
 publish:
  stage: release
  script:
-    - npm install -g semantic-release@v17 @semantic-release/gitlab
+    - npm install -g semantic-release@v17 @semantic-release/gitlab@v6.0.5
    - semantic-release
  only:
    - master
@ -930,5 +930,41 @@ montpellier:
  only:
    - master
  when: manual
+  tags:
+    - deploy
+
+acn:
+  stage: deployment
+  environment:
+    name: acn
+    url: https://acn.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_ACN" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* acn@astral.startinblox.com:~/client/dist/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+woma:
+  stage: deployment
+  environment:
+    name: woma
+    url: https://woma.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_WOMA" > config.json
+    - echo "$SSH_DEPLOY_KEY" | tr -d '\r' > gitlab.key && chmod 600 gitlab.key
+    - npm run build
+    - scp -i gitlab.key -o StrictHostKeyChecking=no -r dist/* woma@astral.startinblox.com:~/client/dist/
+  only:
+    - master
+  when: manual
  tags:
    - deploy
--- a/.sassrc
+++ b/.sassrc
@ -0,0 +1,3 @@
+{
+  "includePaths": ["node_modules"],
+}
--- a/README.md
+++ b/README.md
@ -1,6 +1,18 @@
-# Hubl
+<h1 align="center">
+  <br>
+  <a href="http://hubl.world"><img src="https://cdn.startinblox.com/logos/hubl-logo.png" alt="Hubl" width="200"></a>
+  <br>
+</h1>

-Hubl is the magic tool that allows the Freelance Network to thrive in a decentralized way.
+<h4 align="center">A magic tool that allows the Freelance Network to thrive in a decentralized way, built on top of <a href="https://startinblox.com/" target="_blank">Startin'blox</a>.</h4>
+
+<hr>
+
+<p align="center">
+    <a href="https://git.startinblox.com/management/product-owners-sync/issues/"><img alt="create a feature request" src="https://img.shields.io/badge/%2B-feature%20request-blue" /></a>
+    <a href="https://git.startinblox.com/applications/hubl/issues/"><img alt="create an issue" src="https://img.shields.io/badge/%2B-issue-orange" /></a>
+    <a href="https://git.startinblox.com/applications/hubl/commits/master"><img alt="pipeline status" src="https://git.startinblox.com/applications/hubl/badges/master/pipeline.svg" /></a>
+</p>

 ## Getting Started

@ -43,13 +55,6 @@ npm install

 Then create a `config.json` based on your needs, see Mandatory and Optional Modules on this page. For convienence a `config.sample.json` exists in the source.

-Federated Hubl needs to use `config.sample.federated.json` example.
-
-You can quickly update your API URI from the samples:
-```
-$ sed 's/http:\/\/localhost:8000/https:\/\/api.your-server.startinblox.com/' config.sample.json  > config.json
-```
-
 Then build your new Hubl:

 ```bash
@ -66,6 +71,22 @@ Serve, watch files & rebuild on change with this command:
 npm run watch
 ```

+### Multiple config.json
+
+You can have as many `config.*.json` as you need.
+
+Watch on a custom config file:
+
+```bash
+CONFIG_PATH='config.customName.json' npm run watch
+```
+
+Build with a custom config file:
+
+```bash
+CONFIG_PATH='config.customName.json' npm run build
+```
+
 ## Mandatory modules

 By default, a Hubl includes only individual chat modules.
@ -76,14 +97,19 @@ On `config.json`:

 ```json
 {
-  "xmpp": "https://jabber.happy-dev.fr/http-bind/",
+  "xmppWebsocket": "wss://jabber.happy-dev.fr/xmpp-websocket",
  "clientName": "My local Hubl",
  "clientLogo": "/images/logo.webp",
  "authority": "http://localhost:8000/",
  "endpoints": {
-    "skills": "http://server.url/skills/",
-    "users": "http://server.url/users/",
-    "uploads": "http://server.url/upload/"
+    "get": {
+      "skills": "http://server.url/skills/",
+      "users": "http://server.url/users/"
+    },
+    "post": {
+      "users": "http://server.url/users/",
+      "uploads": "http://server.url/upload/"
+    }
  }
 }
 ```
@ -92,11 +118,11 @@ Where:

 * `clientName` is the name of your Hubl
 * `clientLogo` is an URL to an image file
-* `xmpp` is your [Prosody](https://prosody.im/) with [appropriate modules](https://git.startinblox.com/infra/prosody-modules/) configured on.
+* `xmppWebsocket` is your [Prosody](https://prosody.im/) with [appropriate modules](https://git.startinblox.com/infra/prosody-modules/) configured on.
 * `authority` is the OpenID Provider. Usually, if you use `djangoldp-account` it's the same as your djangoldp server.
-* `endpoints.users` is the API endpoints for Users on your djangoldp server. (djangoldp-account)
-* `endpoints.skills` is the API endpoints for Skills on your djangoldp server. (djangoldp-skill)
-* `endpoints.uploads` is the API endpoints for Uploads on your djangoldp server. (djangoldp-upload)
+* `endpoints.*.users` is the API endpoints for Users on your djangoldp server. (djangoldp-account)
+* `endpoints.*.skills` is the API endpoints for Skills on your djangoldp server. (djangoldp-skill)
+* `endpoints.*.uploads` is the API endpoints for Uploads on your djangoldp server. (djangoldp-upload)

 ### Communities

@ -113,9 +139,7 @@ Don't forget to set some users as admin from the Django Admin if you want to all
 On `config.json`:

 ```json
-  "clientName": "Hubl",
  "clientFavicon": "/images/favicon.webp",
-  "clientLogo": "/images/logo.webp",
  "clientLogoHeight": "32px",
  "clientCSS": "/path/to/custom.css",
  "authorityName": "djangoldp-server-name"
@ -123,9 +147,7 @@ On `config.json`:

 Where:

-* `clientName` is the name of your Hubl.
 * `clientFavicon` is an URL to a distant favicon
-* `clientLogo` is an URL to a distant logo for your client
 * `clientLogoHeight` allow a quick fix to manage different height logos
 * `clientCSS` is an URL to a distant CSS that'll be the last one loaded by the Hubl
 * `authorityName` is a visual name of your OpenID Provider
@ -156,7 +178,12 @@ On `config.json`:

 ```json
  "endpoints": {
-    "circle": "http://server.url/circles/"
+    "get": {
+      "circle": "http://server.url/circles/"
+    },
+    "post": {
+      "circle": "http://server.url/circles/"
+    },
  }
 ```

@ -170,11 +197,29 @@ On `config.json`:

 ```json
  "endpoints": {
-    "dashboard": "http://server.url/dashboard/"
+    "get": {
+      "dashboard": "http://server.url/dashboard/"
+    }
  }
 ```

-A [sample fixture](https://git.startinblox.com/djangoldp-packages/djangoldp-dashboard/blob/master/djangoldp_dashboard/fixtures/sample.json) can be loaded with `./manage.py loaddata path/to/djangoldp_dashboard/fixtures/sample.json`.
+A [sample fixture](https://git.startinblox.com/djangoldp-packages/djangoldp-dashboard/blob/master/djangoldp_dashboard/fixtures/sample.json) can be loaded with `./manage.py loaddata sample`.
+
+### Job Offers
+
+Job Offers includes a job board with conversation. To activate them, you need:
+
+On Server: `djangoldp_joboffer`, `djangoldp_skill`, `djangoldp_upload`, `djangoldp_conversation` packages
+
+On `config.json`:
+
+```json
+  "endpoints": {
+    "get": {
+      "joboffers": "http://server.url/job-offers/"
+    }
+  }
+```

 ### Project

@ -186,10 +231,12 @@ On `config.json`:

 ```json
  "endpoints": {
-    "projects": "http://server.url/projects/",
-    "customers": "http://server.url/customers/",
-    "businessproviders": "http://server.url/businessproviders/",
-    "skills": "http://server.url/skills/"
+    "get": {
+      "projects": "http://server.url/projects/"
+    },
+    "post": {
+      "projects": "http://server.url/projects/"
+    }
  }
 ```

@ -202,29 +249,10 @@ On Server: `djangoldp_skill`, `djangoldp_upload` packages
 On `config.json`:

 ```json
-  "publicDirectory": true,
-  "endpoints": {
-    "groups": "http://server.url/groups/",
-    "skills": "http://server.url/skills/",
-    "uploads": "http://server.url/upload/"
-  }
+  "publicDirectory": true
 ```

-### Job Offers
-
-Job Offers includes a job board with conversation. To activate them, you need:
-
-On Server: `djangoldp_joboffer`, `djangoldp_skill`, `djangoldp_upload`, `djangoldp_conversation` packages
-
-On `config.json`:
-
-```json
-  "endpoints": {
-    "joboffers": "http://server.url/job-offers/",
-    "skills": "http://server.url/skills/",
-    "uploads": "http://server.url/upload/"
-  }
-```
+## Optional community modules

 ### Events

@ -238,9 +266,14 @@ On `config.json`:

 ```json
  "endpoints": {
-    "events":"http://server.url/events/",
-    "typeevents":"http://server.url/typeevents/",
-    "uploads": "http://server.url/upload/"
+    "get": {
+      "events":"http://server.url/events/",
+      "typeevents":"http://server.url/typeevents/"
+    },
+    "post": {
+      "events":"http://server.url/events/",
+      "typeevents":"http://server.url/typeevents/"
+    }
  }
 ```

@ -256,10 +289,16 @@ On `config.json`:

 ```json
  "endpoints": {
-    "resources":"http://server.url/resources/",
-    "resourceskeywords":"http://server.url/keywords/",
-    "resourcestypes":"http://server.url/types/",
-    "uploads": "http://server.url/upload/"
+    "get": {
+      "resources":"http://server.url/resources/",
+      "resourceskeywords":"http://server.url/keywords/",
+      "resourcestypes":"http://server.url/types/"
+    },
+    "post": {
+      "resources":"http://server.url/resources/",
+      "resourceskeywords":"http://server.url/keywords/",
+      "resourcestypes":"http://server.url/types/"
+    }
  }
 ```

@ -273,7 +312,12 @@ On `config.json`:

 ```json
  "endpoints": {
-    "polls":"http://server.url/polls/"
+    "get": {
+      "polls":"http://server.url/polls/"
+    },
+    "post": {
+      "polls":"http://server.url/polls/"
+    }
  }
 ```

@ -305,6 +349,12 @@ docker push registry.startinblox.com/applications/hubl/server:0.1

 Note: within a Kubernetes pod all services are bound to `localhost`.

+## Troubleshooting
+
+### Circles or Projects are missing the @user list
+
+Did you properly created subscriptions on your DjangoLDP's server? You can quickly create them with `./manage.py create_subscriptions`
+
 ## Built With

-* [Sib-Core](https://git.startinblox.com/framework/sib-core/) - An awesome new framework!
+* [Sib-Core](https://git.startinblox.com/framework/sib-core/) - A SOLID-Compliant framework
--- a/STYLING.md
+++ b/STYLING.md
@ -1,23 +0,0 @@
-# Documentation
-
-## Define your own colors
-
-We use css variables to apply colors in the application.
-
-The file can be found in src/styles/etc/
-
-Example of use:
-
-```css
-:root {
-  --color-primary: #FFD759;
-  --color-secondary: #FFB700;
-  --color-complementary: #3C3F57;
-  --color-complementary-darken: #27293A;
-}
-```
-
-Users can find example files at the root of the application. Use
-
- client.sample.happy-dev.css : for a more advanced example of customization.
- client.sample.css : to set five basic colors and let the default setup apply the colors.
--- a/client.sample.happy-dev.css
+++ b/client.sample.happy-dev.css
@ -1,282 +0,0 @@
-:root {
-  --color-primary: #FFB700;
-  --color-secondary: #3C3F57;
-  --color-complementary: #6259E5;
-  --color-complementary-darken: #36383B;
-  --color-white: #FFFFFF;
-
-  --color-black-h: 216;
-  --color-black-s: 4%;
-  --color-black-l: 22%;
-
-  --color-main-background: var(--color-grey-13);
-  --color-main-text: #7A7F85;
-  --color-highlight-primary: var(--color-primary);
-  --color-user-panel: var(--color-black);
-  --color-bell: var(--color-secondary);
-  --color-avatar-background: #E4E8ED;
-  --color-title: #36383B;
-  --color-h1: var(--color-title);
-  --color-h2: var(--color-title);
-
-  /* Depreciated */
-  --color-tag-group-text: #9BA0A7;
-  --color-tag-group-border: var(--color-primary);
-  --color-label-dark: var(--color-grey-6);
-
-  /* Header's elements */
-  --color-header-background: var(--color-white);
-  --color-bell: var(--color-complementary-darken);
-  --color-notification-counter-number: black;
-  --color-notification-summary: #7A7F85;
-  --solid-notifications-theme: var(--color-primary);
-  --color-notification-item-border: #E4E8ED;
-  --color-notification-scrollbar-background: #EDF1FA;
-  --color-notification-scrollbar-track: #BDC2D7;
-  --color-user-panel-header-text: var(--color-complementary-darken);
-  --color-user-panel-header-background: var(--color-white);
-  --color-user-panel-header-text-open: var(--color-white);
-  --color-user-panel-header-background-open: var(--color-secondary);
-  --color-user-panel-list-background: var(--color-white);
-  --color-user-panel-list-text-hover: var(--color-complementary);
-  --color-user-panel-list-border: #E4E8ED;
-
-  /* Left menu */
-  --color-menu-highlight-primary: #FFD759;
-  --color-menu-background: var(--color-secondary);
-  --color-menu-text: var(--color-white);
-  --color-menu-text-active: var(--color-secondary);
-  --color-menu-background-active: var(--color-menu-highlight-primary);
-  --color-menu-badge-background: var(--color-menu-highlight-primary);
-  --color-menu-badge-text-active: var(--color-menu-highlight-primary);
-  --color-menu-badge-background-active: var(--color-secondary);
-  --color-menu-icon-background-active: var(--color-secondary);
-
-  /* Right menu */
-  --color-right-menu-background: #DAE2F3;
-  --color-right-menu-text: var(--color-secondary);
-  --color-right-menu-link-border: #BDC2D7;
-  --color-right-menu-active-text: var(--color-primary);
-  --color-right-menu-active-background: var(--color-secondary);
-  --color-right-menu-active-icon: var(--color-primary);
-
-  /* Scrollbar */
-  --color-scrollbar-right-background: var(--color-white);
-  --color-scrollbar-right-track: var(--color-grey-6);
-  --color-scrollbar-left-background: var(--color-secondary);
-  --color-scrollbar-left-track: var(--color-grey-11);
-
-  /* Tags */
-  --color-tag-admin-text: var(--color-complementary);
-  --color-tag-admin-border: var(--color-complementary);
-
-  /* Form elements */
-  --color-button-white: var(--color-white);
-  --color-button-primary: var(--color-primary);
-  --color-button-secondary: var(--color-complementary);
-  --color-button-complementary: var(--color-secondary);
-
-  --color-input-background: #EDF1FA;
-  --color-input-text: var(--color-secondary);
-  --color-input-icon: var(--color-complementary);
-  --color-input-active: var(--color-complementary);
-  --color-fieldset: var(--color-title);
-  --color-fieldset-border: #DAE2F3;
-  --color-button-modal: var(--color-title);
-  --color-select-list: var(--color-secondary);
-  --color-select-add-button: var(--color-button-secondary);
-  --color-select-add-button-background: var(--color-button-white);
-
-  --color-label-light: var(--color-grey-6);
-
-  /* Skill */
-  --color-skill-background: var(--color-primary);
-  --color-skill-text: var(--color-white);
-
-  /* Icon */
-  --color-icon: var(--color-primary);
-
-  /* Table */
-  --color-table-header-background: #BDC2D7;
-  --color-table-header-text: var(--color-white);
-  --color-table-border: #BDC2D7;
-
-  /* User thumb */
-  --color-user-thumb-name: #7A7F85;
-
-  --color-backlink: var(--color-secondary);
-  --color-content-header: #DAE2F3;
-
-  /* Chat */
-  --color-chat-white: var(--color-white);
-  --color-chat-primary: var(--color-primary);
-  --color-chat-complementary: var(--color-complementary);
-  --color-chat-secondary: var(--color-secondary);
-  --color-chat-complementary-darken: var(--color-complementary-darken);
-  --color-chat-grey-1: var(--color-grey-4);
-  --color-chat-grey-2: var(--color-grey-6);
-  --color-chat-grey-3: var(--color-grey-10);
-
-  /* Directory */
-  --color-directory-grey-4: #7A7F85 !important;
-  --color-directory-grey-5: #F0F3F6 !important;
-
-  --color-directory-avatar-background: #E4E8ED !important;
-  --color-directory-back-link: #36383B !important;
-  --color-directory-border: #DAE2F3 !important;
-  --color-directory-content-header-border: #DAE2F3 !important;
-  --color-directory-h1: var(--color-complementary-darken);
-  --color-directory-list-icon: var(--color-primary);
-  --color-directory-text: var(--color-directory-grey-4);
-
-  --color-directory-send-border: var(--color-complementary) !important;
-  --color-directory-list-icon: var(--color-primary) !important;
-  --color-directory-counter-background: var(--color-directory-grey-5) !important;
-  --color-directory-counter-border: #9BA0A7 !important;
-  --color-directory-counter-text: #4A4A4A !important;
-
-  --color-directory-paginate: #36383B !important;
-  --color-directory-paginate-disabled: #9BA0A7 !important;
-
-  --color-directory-form-input: #EDF1FA !important;
-  --color-directory-form-input-text: var(--color-directory-grey-4) !important;
-  --color-directory-form-input-active: var(--color-complementary) !important;
-  --color-directory-form-select-icon: var(--color-complementary) !important;
-}
-
-/* Text color for the beta label */
-
-#header>div.header-left>span.beta-tag {
-  color: var(--color-complementary);
-}
-
-/* Button to edit a channel or a project (in project-profile) */
-#project solid-link[next="project-edit"],
-#circle solid-link[next="circle-edit"] {
-  background: var(--color-complementary);
-  border: 1px solid var(--color-complementary);
-}
-
-#project solid-link[next="project-edit"]:hover,
-#circle solid-link[next="circle-edit"]:hover {
-  background: var(--color-white);
-  border: 1px solid var(--color-complementary);
-  color: var(--color-complementary);
-}
-
-/* Button to delete a channel */
-/* box-button is depreciated */
-#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete,
-#circle-profile>div>div.box-button>solid-ac-checker>solid-delete {
-  background: var(--color-white);
-  border: 1px solid var(--color-complementary);
-  color: var(--color-complementary);
-}
-
-#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete>button,
-#circle-profile>div>div.box-button>solid-ac-checker>solid-delete>button {
-  color: var(--color-complementary);
-}
-
-#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete:hover,
-#circle-profile>div>div.box-button>solid-ac-checker>solid-delete:hover {
-  background: var(--color-complementary);
-  border: 1px solid var(--color-complementary);
-  color: var(--color-white);
-}
-
-#circle-profile>div>div.desktop-button__end>solid-ac-checker>solid-delete:hover>button,
-#circle-profile>div>div.box-button>solid-ac-checker>solid-delete:hover>button {
-  color: var(--color-white);
-}
-
-/* Button with a pen to edit a user */
-#admin-users-list>div>div.table>solid-display>div>solid-display>div>solid-action-hd-custom>solid-ac-checker>solid-link {
-  background: var(--color-complementary);
-  border: 1px solid var(--color-complementary);
-  color: var(--color-white);
-}
-
-#admin-users-list>div>div.table>solid-display>div>solid-display>div>solid-action-hd-custom>solid-ac-checker>solid-link:hover {
-  background: var(--color-white);
-  border: 1px solid var(--color-complementary);
-  color: var(--color-complementary);
-}
-
-/* Button to join a channel */
-#admin-circle-list>div>div.table>solid-display:nth-child(5)>div>solid-display>div>admin-circle-join-button>solid-form {
-  background: var(--color-complementary);
-  border: 1px solid var(--color-complementary);
-  color: var(--color-white);
-}
-
-#admin-circle-list>div>div.table>solid-display:nth-child(5)>div>solid-display>div>admin-circle-join-button>solid-form:hover {
-  background: var(--color-white);
-  border: 1px solid var(--color-complementary);
-  color: var(--color-complementary);
-}
-
-#admin-circle-list>div>div.table>solid-display:nth-child(5)>div>solid-display>div>admin-circle-join-button>solid-form:hover input {
-  color: var(--color-complementary);
-}
-
-
-/* Directory - my profile*/
-
-/* Colors for buttons to send a message to a member and to update or remove your profile picture */
-#member-profile>div.profile-card>div.user-profile>div>solid-display>div>solid-action.button.button-primary.bordered,
-button#solid-picture-browse.button.button-primary,
-button#solid-picture-remove.button.button-primary {
-  border: 1px solid var(--color-directory-complementary) !important;
-}
-
-#member-profile solid-action.button.button-primary>solid-link,
-button#solid-picture-browse.button.button-primary,
-button#solid-picture-remove.button.button-primary {
-  color: var(--color-directory-complementary) !important;
-}
-
-#member-profile>div.profile-card>div.user-profile>div>solid-display>div>solid-action.button.button-primary.bordered>solid-link::before {
-  background-color: var(--color-directory-complementary) !important;
-}
-
-/* Hover */
-#member-profile solid-action.button.button-primary:hover,
-#member-profile solid-action.button.button-primary:hover>solid-link,
-button#solid-picture-browse.button.button-primary:hover,
-button#solid-picture-remove.button.button-primary:hover {
-  color: var(--color-directory-white) !important;
-  background-color: var(--color-directory-complementary) !important;
-}
-
-#member-profile>div.profile-card>div.user-profile>div>solid-display>div>solid-action.button.button-primary.bordered:hover>solid-link::before {
-  background-color: var(--color-directory-white) !important;
-}
-
-#members-list .send-display solid-link::before {
-    background-color: var(--color-directory-complementary)!important;
-}
-
-/* Dashboard */
-.dashboard-card>div>div>p {
-  color: var(--color-complementary) !important;
-}
-
-.dashboard-card .svg-color-secondary {
-  fill: var(--color-complementary) !important;
-}
-
-.dashboard-card i {
-  border-color: var(--color-primary) !important;
-  color: var(--color-complementary) !important;
-}
-
-.dashboard-card sib-link, .dashboard-card solid-link {
-  border-color: var(--color-complementary) !important;
-  color: var(--color-complementary) !important;
-}
-
-.dashboard-card sib-link:hover, .dashboard-card solid-link:hover {
-  background-color: var(--color-complementary) !important;
-  color: #fff !important;
-}
--- a/config.sample.federated.json
+++ b/config.sample.federated.json
@ -1,18 +0,0 @@
-{
-  "xmpp": "https://jabber.happy-dev.fr/http-bind/",
-  "authority": "http://localhost:8000/",
-  "clientName": "Hubl",
-  "clientLogo": "https://cdn.startinblox.com/logos/hubl-logo.png",
-  "endpoints": {
-    "get": {
-      "skills": "http://localhost:8000/skills/",
-      "users": "http://localhost:8000/users/",
-      "groups": "http://localhost:8000/groups/"
-    },
-    "post": {
-      "skills": "http://localhost:8000/skills/",
-      "users": "http://localhost:8000/users/",
-      "groups": "http://localhost:8000/groups/"
-    }
-  }
-}
--- a/config.sample.json
+++ b/config.sample.json
@ -1,12 +1,16 @@
 {
-  "xmpp": "https://jabber.happy-dev.fr/http-bind/",
+  "xmppWebsocket": "wss://jabber.happy-dev.fr/xmpp-websocket",
+  "clientName": "My local Hubl",
+  "clientLogo": "/images/logo.webp",
  "authority": "http://localhost:8000/",
-  "authorityName": "djangoldp-server-name",
-  "clientName": "Hubl",
-  "clientLogo": "https://cdn.startinblox.com/logos/hubl-logo.png",
  "endpoints": {
-    "groups": "http://localhost:8000/groups/",
-    "skills": "http://localhost:8000/skills/",
-    "users": "http://localhost:8000/users/"
+    "get": {
+      "skills": "http://localhost:8000/skills/",
+      "users": "http://localhost:8000/users/"
+    },
+    "post": {
+      "users": "http://localhost:8000/users/",
+      "upload": "http://localhost:8000/upload/"
+    }
  }
-}
+}
--- a/docker/config.json
+++ b/docker/config.json
@ -1,24 +0,0 @@
-{
-  "xmpp": "https://jabber.happy-dev.fr/http-bind/",
-  "authority": "$SERVER",
-  "authorityName": "djangoldp-server-name",
-  "publicDirectory": true,
-  "endpoints": {
-    "get": {
-      "circles": "$SERVER/circles/",
-      "dashboards": "$SERVER/dashboards/",
-      "groups": "$SERVER/groups/",
-      "users": "$SERVER/users/",
-      "skills": "$SERVER/skills/",
-      "uploads": "$SERVER/upload/"
-    },
-    "post": {
-      "circles": "$SERVER/circles/",
-      "dashboards": "$SERVER/dashboards/",
-      "groups": "$SERVER/groups/",
-      "users": "$SERVER/users/",
-      "skills": "$SERVER/skills/",
-      "uploads": "$SERVER/upload/"
-    }
-  }
-}
--- a/internal/assets.js
+++ b/internal/assets.js
@ -0,0 +1,21 @@
+const HTMLAsset = require('parcel-bundler/lib/assets/HTMLAsset')
+
+function shouldIgnore (file) {
+  // Ignore img(src="${...}") on pug & keep the components folder pristine
+  return /\${.+}/.test(file) || /components/.test(file) || /\/lib\/solid-/.test(file);
+}
+
+class SkipStartinbloxWidgetAsset extends HTMLAsset {
+  addDependency (name, opts) {
+    if (!shouldIgnore(opts.resolved)) {
+      return super.addDependency(name, opts)
+    }
+  }
+
+  processSingleDependency (p, opts) {
+    if (shouldIgnore(p)) return p
+    else return super.processSingleDependency(p, opts)
+  }
+}
+
+module.exports = SkipStartinbloxWidgetAsset
--- a/internal/docker/djangoldp.docker
+++ b/internal/docker/djangoldp.docker
--- a/internal/docker/docker-compose.override.yml
+++ b/internal/docker/docker-compose.override.yml
--- a/internal/docker/docker-compose.yml
+++ b/internal/docker/docker-compose.yml
--- a/internal/docker/front.docker
+++ b/internal/docker/front.docker
--- a/internal/docker/nginx.conf
+++ b/internal/docker/nginx.conf
--- a/internal/docker/packages.yml
+++ b/internal/docker/packages.yml
--- a/internal/parcel.js
+++ b/internal/parcel.js
@ -0,0 +1,79 @@
+'use strict';
+const fs = require('fs');
+const fse = require('fs-extra');
+const Bundler = require('parcel-bundler');
+
+const options = {
+  outDir: './dist',
+  outFile: 'index.html',
+  publicUrl: '/',
+  watch: process.env.NODE_ENV !== 'production',
+  cache: process.env.NODE_ENV !== 'production',
+  cacheDir: '.cache',
+  contentHash: false,
+  minify: process.env.NODE_ENV === 'production',
+  scopeHoist: false,
+  target: 'browser',
+  bundleNodeModules: false,
+  https: true,
+  logLevel: 3,
+  hmr: false,
+  hmrPort: 1235,
+  sourceMaps: true,
+  hmrHostname: '',
+  detailedReport: false,
+  autoInstall: true
+};
+
+(async function() {
+  let configPath = process.env.CONFIG_PATH || 'config.json';
+  if(!fs.existsSync(configPath)) throw `[Error] (Mandatory) Missing ${configPath} file`;
+  console.log(`Using ${configPath} config file`);
+
+  let config = JSON.parse(fs.readFileSync(configPath));
+
+  if(!config.clientName) throw `[Error] (Mandatory) Missing clientName on ${configPath}`;
+  if(!config.clientLogo) throw `[Error] (Mandatory) Missing clientLogo on ${configPath}`;
+
+  let manifest = {
+    "lang": "fr",
+    "dir": "ltr",
+    "name": config.clientName,
+    "description": `Hubl of ${config.clientName}`,
+    "short_name": config.clientName,
+    "icons": [{
+      "src": config.clientLogo,
+      "purpose": "any"
+    }, {
+      "src": "/images/hubl-icon-192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    }, {
+      "src": "/images/hubl-icon-512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }],
+    "start_url": ".",
+    "display": "standalone",
+    "orientation": "portrait",
+    "background_color": "#fff",
+    'theme_color': "white"
+  }
+
+  await fse.writeJSON('./src/manifest.webmanifest', manifest)
+  console.log(`Created manifest for ${config.clientName}`);
+
+  await fse.copy("./src/locales", "./dist/locales")
+  console.log(`Copied locales to dist folder`);
+
+  await fse.copy("./src/components", "./dist/components")
+  console.log(`Copied components to dist folder`);
+
+  const bundler = new Bundler('./src/index.pug', options);
+  bundler.addAssetType('html', require.resolve('./assets.js'));
+  if(process.env.NODE_ENV !== 'production') {
+    await bundler.serve();
+  } else {
+    await bundler.bundle();
+  }
+})();
--- a/make-webmanifest.mjs
+++ b/make-webmanifest.mjs
@ -1,39 +0,0 @@
-'use strict';
-import fs from 'fs';
-
-if(!fs.existsSync("config.json")) throw "[Error] (Mandatory) Missing config.json file";
-
-let config = JSON.parse(fs.readFileSync('config.json'));
-
-if(!config.clientName) throw "[Error] (Mandatory) Missing clientName on config.json";
-if(!config.clientLogo) throw "[Error] (Mandatory) Missing clientLogo on config.json";
-
-let manifest = {
-  "lang": "fr",
-  "dir": "ltr",
-  "name": config.clientName,
-  "description": `Hubl of ${config.clientName}`,
-  "short_name": config.clientName,
-  "icons": [{
-    "src": config.clientLogo,
-    "purpose": "any"
-  }, {
-    "src": "/images/hubl-icon-192.png",
-    "sizes": "192x192",
-    "type": "image/png"
-  }, {
-    "src": "/images/hubl-icon-512.png",
-    "sizes": "512x512",
-    "type": "image/png"
-  }],
-  "start_url": ".",
-  "display": "standalone",
-  "orientation": "portrait",
-  "background_color": "#fff",
-  'theme_color': "white"
-}
-
-fs.existsSync("dist") || fs.mkdirSync("dist");
-fs.writeFileSync('dist/manifest.webmanifest', JSON.stringify(manifest, null, 2));
-
-console.log(`Created manifest for ${config.clientName}`);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -7,42 +7,14 @@
    "url": "https://git.startinblox.com/applications/hubl.git"
  },
  "scripts": {
-    "build": "run-p copy:* build:*",
-    "build:css": "node-sass src/styles/index.scss -o dist/styles/",
-    "build:js": "babel \"src/scripts/*.js\" -o dist/scripts/index.js",
-    "build:jscomponents": "babel \"src/components/*.js\" --out-dir dist/components/",
-    "build:pug": "pug src/index.pug -o dist/ --obj config.json",
-    "build:manifest": "node --experimental-modules make-webmanifest.mjs",
-    "build:i18n": "copyfiles -u 2 src/locales/*.json dist/locales",
-    "copy:font": "copyfiles -f src/fonts/* dist/fonts",
-    "copy:image": "copyfiles -f src/images/* dist/images",
-    "copy:sw": "copyfiles -f src/sw.js dist",
-    "serve": "pushstate-server -d ./dist -p 3000",
-    "watch": "run-p build watch:* serve",
-    "watch:css": "npm-watch build:css",
-    "watch:js": "npm-watch build:js",
-    "watch:jscomponents": "npm-watch build:jscomponents",
-    "watch:manifest": "npm-watch build:manifest",
-    "watch:pug": "pug --watch src/index.pug -o dist/ --obj config.json",
-    "watch:i18n": "npm-watch build:i18n",
-    "watch:font": "npm-watch copy:font",
-    "watch:image": "npm-watch copy:image",
-    "watch:sw": "npm-watch copy:sw",
+    "prebuild": "rimraf build",
+    "build": "NODE_ENV='production' node internal/parcel.js",
+    "watch": "rimraf build && node internal/parcel.js",
    "cypress:open": "cypress open",
    "cypress:verify": "cypress verify",
    "cypress:info": "cypress info",
    "test": "cypress run"
  },
-  "watch": {
-    "build:css": "src/styles/**/*",
-    "build:manifest": "make-webmanifest.mjs",
-    "build:i18n": "src/locales/**/*",
-    "copy:images": "src/fonts/*.js",
-    "copy:fonts": "src/images/*.js",
-    "copy:sw": "src/sw.js",
-    "build:js": "src/scripts/*.js",
-    "build:jscomponents": "src/components/*.js"
-  },
  "release": {
    "branches": [
      "master"
@ -73,21 +45,15 @@
    ]
  },
  "dependencies": {
-    "@babel/cli": "^7.7.0",
-    "@babel/core": "^7.9.0",
-    "copyfiles": "^2.1.1",
-    "include-media": "^1.4.9",
-    "node-sass": "^4.14.0",
+    "fs-extra": "^9.0.1",
    "normalize.css": "^8.0.1",
-    "npm-run-all": "^4.1.5",
-    "pug": "^2.0.4",
-    "pug-cli": "^1.0.0-alpha6",
-    "pushstate-server": "^3.1.0"
+    "parcel-bundler": "^1.12.4",
+    "pug": "^3.0.0",
+    "rimraf": "^2.7.1",
+    "sass": "^1.29.0"
  },
  "devDependencies": {
-    "cypress": "^4.5.0",
-    "cypress-localstorage-commands": "^1.2.1",
-    "cypress-terminal-report": "^1.2.1",
-    "npm-watch": "^0.7.0"
+    "cypress": "^5.6.0",
+    "cypress-localstorage-commands": "^1.2.4"
  }
 }
--- a/src/components/hubl-reactivity.js
+++ b/src/components/hubl-reactivity.js
@ -1,4 +1,4 @@
-import { store, Sib, StoreMixin } from 'https://cdn.skypack.dev/@startinblox/core@0.13';
+import { store, Sib, StoreMixin } from 'https://cdn.skypack.dev/@startinblox/core@0.14';

 export const HublReactivity = {
  name: 'hubl-reactivity',
--- a/src/components/hubl-search-users.js
+++ b/src/components/hubl-search-users.js
@ -1,4 +1,4 @@
-import { widgetFactory } from 'https://cdn.skypack.dev/@startinblox/core@0.13';
+import { widgetFactory } from 'https://cdn.skypack.dev/@startinblox/core@0.14';

 const HublSearchUsers = widgetFactory(
  'hubl-search-users',
--- a/src/components/hubl-status.js
+++ b/src/components/hubl-status.js
@ -1,4 +1,4 @@
-import { widgetFactory, Helpers } from 'https://cdn.skypack.dev/@startinblox/core@0.13';
+import { widgetFactory, Helpers } from 'https://cdn.skypack.dev/@startinblox/core@0.14';
 import SlimSelect from 'https://cdn.skypack.dev/slim-select@1.23';

 const HublStatus = widgetFactory(
--- a/src/context.pug
+++ b/src/context.pug
@ -0,0 +1,10 @@
+//- Context - Fix for default context
+script(data-default-context, type="application/ld+json")
+  | {
+  |     "inbox": "http://happy-dev.fr/owl/#inbox",
+  |     "object": "http://happy-dev.fr/owl/#object",
+  |     "author": "http://happy-dev.fr/owl/#author",
+  |     "account": "http://happy-dev.fr/owl/#account",
+  |     "jabberID": "foaf:jabberID",
+  |     "picture": "foaf:depiction"
+  | }
--- a/src/dependencies.pug
+++ b/src/dependencies.pug
@ -1,70 +1,40 @@
-//- script(src="https://browser.sentry-cdn.com/5.25.0/bundle.tracing.min.js" defer)
-//- script(type="module" src="/components/sentry.js" defer)
-script(type="module" src="/components/hubl-search-users.js" defer)
-script(type="module" src="/components/hubl-status.js" defer)
-script(type="module" src="/components/hubl-reactivity.js" defer)
-
-script(type="module" src="https://cdn.skypack.dev/@startinblox/core@0.13" defer)
+script(type="module" src="https://cdn.skypack.dev/@startinblox/core@0.14" defer)
 //- script(type="module" src="/lib/sib-core/dist/index.js" defer)

-script(type="module" src="https://cdn.skypack.dev/@startinblox/oidc@0.11" defer)
+script(type="module" src="https://cdn.skypack.dev/@startinblox/oidc@0.12" defer)
 //- script(type="module" src="/lib/sib-auth/index.js" defer)

 script(type="module" src="https://cdn.skypack.dev/@startinblox/router@0.11" defer)
 //- script(type="module" src="/lib/sib-router/src/index.js" defer)

-script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notifications@0.8" defer)
+script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notifications@0.9" defer)
 //- script(type="module" src="/lib/sib-notifications/index.js" defer)

-if (endpoints.events || (endpoints.get && endpoints.get.events)) && (endpoints.typeevents || (endpoints.get && endpoints.get.typeevents))
-    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-event@1.3" defer)
-    //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer)
+if endpoints.get
+  if endpoints.get.events && endpoints.get.typeevents
+      script(type="module" src="https://cdn.skypack.dev/@startinblox/component-event@1.3" defer)
+      //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer)

-if endpoints.polls || (endpoints.get && endpoints.get.polls)
-    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-conversation@0.6" defer)
-    //- script(type="module" src="/lib/sib-conversation/sib-conversation.js" defer)
+  if endpoints.get.resources && endpoints.get.resourceskeywords && endpoints.get.resourcestypes
+      script(type="module" src="https://cdn.skypack.dev/@startinblox/component-resource@1.1" defer)
+      //- script(type="module" src="/lib/sib-resource/sib-resource.js" defer)

-if (endpoints.resources || (endpoints.get && endpoints.get.resources)) && (endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)) && (endpoints.resourcestypes || (endpoints.get && endpoints.get.resourcestypes))
-    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-resource@1.1" defer)
-    //- script(type="module" src="/lib/sib-resource/sib-resource.js" defer)
+  if endpoints.get.joboffers
+      script(type="module" src="https://cdn.skypack.dev/@startinblox/component-job-board@1.3" defer)
+      //- script(type="module" src="/lib/solid-job-board/dist/index.js" defer)

-if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
-    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-job-board@1.2" defer)
-    //- script(type="module" src="/lib/solid-job-board/dist/index.js" defer)
+  if endpoints.get.uploads && endpoints.get.skills && endpoints.get.users
+      script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@1.3" defer)
+      //- script(type="module" src="/lib/solid-directory/dist/index.js" defer)

-if (endpoints.uploads || (endpoints.get && endpoints.get.uploads)) && (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.users || (endpoints.get && endpoints.get.users))
-    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-directory@1.2" defer)
-    //- script(type="module" src="/lib/solid-directory/dist/index.js" defer)
+  if endpoints.get.dashboards
+      script(type="module" src="https://cdn.skypack.dev/@startinblox/component-dashboard@0.7" defer)
+      //- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)

-if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
-    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-dashboard@0.6" defer)
-    //- script(type="module" src="/lib/solid-dashboard/dist/index.js" defer)
+  if endpoints.get.users
+      script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@1.7" defer)
+      //- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer)

-if endpoints.users || (endpoints.get && endpoints.get.users)
-    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-chat@1.4" defer)
-    //- script(type="module" src="/lib/solid-xmpp-chat/dist/index.js" defer)
-
-if endpoints.polls || (endpoints.get && endpoints.get.polls)
-    script(type="module" src="https://cdn.skypack.dev/@startinblox/component-poll@1.1" defer)
-    //- script(type="module" src="/lib/sib-polls-component/index.js" defer)
-
-//- swal2 does not work with skypack
-script(src="https://cdn.jsdelivr.net/npm/sweetalert2@10")
-
-script(src="/scripts/index.js" defer)
-
-//- Stylesheets
-link(rel='stylesheet', href='/styles/index.css')
-link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,400,400i,600,700&amp;subset=latin-ext')
-link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i')
-
-//- Context - Fix for LDFlex
-script(data-default-context, type="application/ld+json")
-    | {
-    |     "inbox": "http://happy-dev.fr/owl/#inbox",
-    |     "object": "http://happy-dev.fr/owl/#object",
-    |     "author": "http://happy-dev.fr/owl/#author",
-    |     "account": "http://happy-dev.fr/owl/#account",
-    |     "jabberID": "foaf:jabberID",
-    |     "picture": "foaf:depiction"
-    | }
+  if endpoints.get.polls
+      script(type="module" src="https://cdn.skypack.dev/@startinblox/component-poll@1.1" defer)
+      //- script(type="module" src="/lib/sib-polls-component/index.js" defer)
--- a/src/get_config.pug
+++ b/src/get_config.pug
@ -1,5 +0,0 @@
-
-  var __env = locals[process.env.ENV]
-  for(k in __env){
-    eval(`var ${k} = __env[${JSON.stringify(k)}]`);
-  }
--- a/src/images/hubl-icon-192.png
+++ b/src/images/hubl-icon-192.png
--- a/src/images/hubl-icon-512.png
+++ b/src/images/hubl-icon-512.png
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,2 @@
+//- Automatically import every scripts
+import './scripts/**/*.js';
--- a/src/index.pug
+++ b/src/index.pug
@ -1,107 +1,137 @@
-include get_config.pug
 doctype html
 html(lang="en")
  head
    meta(charset="UTF-8")
+
    title #{clientName || "My Personal Hubl"}
+
    meta(name="viewport", content="width=device-width, initial-scale=1.0")
    meta(http-equiv="X-UA-Compatible", content="ie=edge")
+
    if clientFavicon
      link(rel="icon" type="image/png" href=`${clientFavicon}`)
    else
-      link(rel="icon" type="image/webp" href="/images/favicon.webp")
-    include dependencies.pug
+      link(rel="icon" type="image/webp" href="./images/favicon.webp")
+
+    link(rel="preconnect" href="https://fonts.gstatic.com")
+    link(rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap")
+
+    link(rel='stylesheet', href='/styles/index.scss')
+
    if clientCSS
      link(rel='stylesheet', href=`${clientCSS}`)
+
    link(rel="manifest" href="/manifest.webmanifest")
+
+    script(src="https://browser.sentry-cdn.com/5.25.0/bundle.tracing.min.js" defer)
+
+    script(type="module" src="/components/sentry.js" defer)
+    script(type="module" src="/components/hubl-search-users.js" defer)
+    script(type="module" src="/components/hubl-status.js" defer)
+    script(type="module" src="/components/hubl-reactivity.js" defer)
+
+    include dependencies.pug
+    include context.pug
+
+    //- swal2 does not work with skypack
+    script(src="https://cdn.jsdelivr.net/npm/sweetalert2@10" defer)
+
+    script(src="index.js" defer)
+
  body
+    if endpoints.get && endpoints.post

-    .wrapper
+      include views/partials/notifications.pug
+      include views/partials/widgets.pug

-      header#header.header.is-spaced(role='banner')
-        include header.pug
+      .wrapper

-      nav#main__menu.left-menu.jsLeftMenu
-        include menu-left.pug
+        header#header.header.is-spaced(role='banner')
+          include views/partials/header.pug

-      main#viewport.content.notLoggedIn
+        nav#main__menu.left-menu.jsLeftMenu
+          include views/partials/menu-left.pug

-        if endpoints.dashboards || (endpoints.get && endpoints.get.dashboards)
-          #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding
-            include page-dashboard.pug
+        main#viewport.content.notLoggedIn

-        if publicDirectory && (endpoints.users || (endpoints.get && endpoints.get.users))
-          #members(hidden, data-view="members", no-render).no-sidebar.with-padding
-            include page-directory.pug
+          if endpoints.get.dashboards
+            #dashboard(hidden, data-view="dashboard").no-sidebar.with-padding
+              include views/page-dashboard.pug

-        if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
-          #job-offers(hidden, data-view="job-offers", no-render).no-sidebar.with-padding
-            if (endpoints.post && endpoints.post.joboffers) && (endpoints.get && endpoints.get.joboffers)
+          if publicDirectory && endpoints.get.users
+            #members(hidden, data-view="members", no-render).no-sidebar.with-padding
+              include views/page-directory.pug
+
+          if endpoints.get.joboffers
+            #job-offers(hidden, data-view="job-offers", no-render).no-sidebar.with-padding
              hubl-reactivity(data-src=`${endpoints.post.joboffers}current/` target-src=`${endpoints.get.joboffers}`)
              hubl-reactivity(data-src=`${endpoints.post.joboffers}expired/` target-src=`${endpoints.get.joboffers}`)
              hubl-reactivity(data-src=`${endpoints.post.joboffers}` target-src=`${endpoints.get.joboffers}`)
-            hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
-            hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`)
-            hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
-            hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`)
-            hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
-            hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`)
-            include page-job-offers.pug
+              hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
+              hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}current/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`)
+              hubl-reactivity(data-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/` target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
+              hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}expired/`)
+              hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}`)
+              hubl-reactivity(bind-user nested-field="joboffers" target-src=`${endpoints.joboffers || endpoints.get.joboffers}current/`)
+              include views/page-job-offers.pug

-        if endpoints.projects || (endpoints.get && endpoints.get.projects)
-          #project(hidden, data-view="project", no-render).with-sidebar
-            if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
+          if endpoints.get.projects
+            #project(hidden, data-view="project", no-render).with-sidebar
+              hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.projects")
              hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${endpoints.get.projects}`)
              hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${endpoints.get.projects}`)
              hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}`)
              hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.post.projects}joinable/`)
-            hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`)
-            hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`)
-            hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`)
-            include page-project.pug
+              hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src=`${endpoints.projects || endpoints.get.projects}`)
+              hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}`)
+              hubl-reactivity(bind-user nested-field="projects" target-src=`${endpoints.projects || endpoints.get.projects}joinable/`)
+              include views/page-project.pug

-        if endpoints.circles || (endpoints.get && endpoints.get.circles)
-          #circle(hidden, data-view="circle", no-render).with-sidebar
-            if (endpoints.post && endpoints.post.circles) && (endpoints.get && endpoints.get.circles)
+          if endpoints.get.circles
+            #circle(hidden, data-view="circle", no-render).with-sidebar
+              hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.circles")
              hubl-reactivity(data-src=`${endpoints.post.circles}joinable/` target-src=`${endpoints.get.circles}`)
              hubl-reactivity(data-src=`${endpoints.post.circles}` target-src=`${endpoints.get.circles}`)
              hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}`)
              hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.post.circles}joinable/`)
-            hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || endpoints.get.circles}`)
-            hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}`)
-            hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}joinable/`)
-            include page-circle.pug
-        if endpoints.users || (endpoints.get && endpoints.get.users)
-          #messages(hidden, data-view="messages", no-render).with-sidebar
-            include page-messages.pug
-						
-        if endpoints.polls || (endpoints.get && endpoints.get.polls)
-          #polls(hidden, data-view="polls").with-sidebar
-            include page-polls.pug
+              hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}joinable/` target-src=`${endpoints.circles || endpoints.get.circles}`)
+              hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}`)
+              hubl-reactivity(bind-user nested-field="circles" target-src=`${endpoints.circles || endpoints.get.circles}joinable/`)
+              include views/page-circle.pug
+          if endpoints.get.users
+            #messages(hidden, data-view="messages", no-render).with-sidebar
+              hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.contacts")
+              include views/page-messages.pug
+              
+          if endpoints.get.polls
+            #polls(hidden, data-view="polls").with-sidebar
+              include views/page-polls.pug

-        if endpoints.events || (endpoints.get && endpoints.get.events)
-          #events(hidden, data-view="events")
-            include page-events.pug
+          if endpoints.get.events
+            #events(hidden, data-view="events")
+              include views/page-events.pug

-        if endpoints.resources || (endpoints.get && endpoints.get.resources)
-          #resources(hidden, data-view="resources")
-            include page-resources.pug
+          if endpoints.get.resources
+            #resources(hidden, data-view="resources")
+              include views/page-resources.pug

-        #admin(hidden, data-view="admin", no-render).with-sidebar
-          include page-admin.pug
+          #admin(hidden, data-view="admin", no-render).with-sidebar
+            include views/page-admin.pug

-        #about(data-view="about", no-render).no-sidebar.with-padding
-          include page-about.pug
-          
-        if (endpoints.skills || (endpoints.get && endpoints.get.skills)) && (endpoints.uploads || (endpoints.post && endpoints.post.uploads)) && (endpoints.users || (endpoints.post && endpoints.post.users))
-          #profile(hidden, data-view="profile", no-render).no-sidebar
-            include page-profile.pug
-    
-    if analytics
-      each provider in analytics
-        if provider.type && provider.url && provider.url
-            solid-analytics(
-              type=`${provider.type}`
-              url=`${provider.url}`
-              id=`${provider.id}`
-            )
+          #about(data-view="about", no-render).no-sidebar.with-padding
+            include views/page-about.pug
+            
+          if endpoints.get.skills && endpoints.post.uploads && endpoints.post.users
+            #profile(hidden, data-view="profile", no-render).no-sidebar
+              include views/page-profile.pug
+      
+      if analytics
+        each provider in analytics
+          if provider.type && provider.url && provider.url
+              solid-analytics(
+                type=`${provider.type}`
+                url=`${provider.url}`
+                id=`${provider.id}`
+              )
+    else
+      h1(style='color:red') Invalid config.json (missing `endpoints.get` or `endpoints.post`)
--- a/src/locales/en.json
+++ b/src/locales/en.json
@ -15,6 +15,11 @@
      "project": "project",
      "circle": "circle"
    },
+    "contact": {
+      "create": "Find your contacts on the",
+      "profileDir": "profile directory",
+      "create2": ""
+    },
    "dashboard": "Dashboard",
    "events": "Events",
    "gov": "Governance",
--- a/src/locales/es.json
+++ b/src/locales/es.json
@ -15,6 +15,11 @@
      "project": "proyecto",
      "circle": "círculo"
    },
+    "contact": {
+      "create": "Encuentre sus contactos en el",
+      "profileDir": "directorio de miembros",
+      "create2": ""
+    },
    "dashboard": "Panel de control",
    "events": "Eventos",
    "gov": "Gobernanza",
--- a/src/locales/fr.json
+++ b/src/locales/fr.json
@ -15,6 +15,11 @@
      "project": "projet",
      "circle": "cercle"
    },
+    "contact": {
+      "create": "Retrouve tes contacts sur",
+      "profileDir": "l'annuaire des membres",
+      "create2": ""
+    },
    "dashboard": "Tableau de bord",
    "events": "Evènements",
    "gov": "Gouvernance",
--- a/src/pug.config.js
+++ b/src/pug.config.js
@ -0,0 +1,6 @@
+let configPath = process.env.CONFIG_PATH || 'config.json';
+const config = require(`../${configPath}`);
+
+module.exports = {
+  locals: config
+};
--- a/src/scripts/intl.js
+++ b/src/scripts/intl.js
@ -187,10 +187,14 @@ document.addEventListener("DOMContentLoaded", () => {
  */
  function recursivePopulate(element) {
    Array.from(element.querySelectorAll('*')).forEach((e) => {
-      e.addEventListener("populate", (e) => {
-        recursivePopulate(e.target);
-        jsI18n.processNode(e.target);
-      });
+      if(e.content && e.content instanceof DocumentFragment) {
+        recursivePopulate(e.content);
+      } else if(e instanceof HTMLElement) {
+        e.addEventListener("populate", (el) => {
+          recursivePopulate(el.target);
+          jsI18n.processNode(el.target);
+        });
+      }
    });
  }
  // Process every children from document
--- a/src/styles/base/buttons.scss
+++ b/src/styles/base/buttons.scss
@ -0,0 +1,284 @@
+// Button global CSS
+solid-delete,
+solid-route,
+solid-link,
+button,
+input[type='submit'],
+a,
+.button {
+  background: none;
+  border: none;
+  cursor: pointer;
+  display: inline-block;
+  padding: 0;
+
+  &.button {
+    padding: 0.55rem 2.5rem;
+    border-radius: 100em;
+
+    *,
+    & {
+      font-size: 1.4rem;
+    }
+
+    &.mobile-full-width {
+      margin-bottom: 1rem;
+      padding-left: 5rem;
+      width: -webkit-fill-available;
+      width: -moz-available;
+
+      @include breakpoint(lg) {
+        margin-bottom: 0;
+        padding-left: 2.5rem;
+        width: auto;
+      }
+
+      &::before {
+        margin-left: -2.6rem;
+
+        @include breakpoint(lg) {
+          margin-left: 0;
+        }
+      }
+    }
+
+    &.desktop-btn-margin__left {
+      margin: 0;
+
+      @include breakpoint(lg) {
+        margin-left: 2.2rem;
+      }
+    }
+
+    &.small {
+
+      *,
+      & {
+        font-size: 1rem;
+      }
+    }
+
+    &.text-bold {
+
+      *,
+      & {
+        font-weight: bold;
+      }
+    }
+
+    &.text-uppercase {
+
+      *,
+      & {
+        text-transform: uppercase;
+      }
+    }
+
+    &.rounded {
+      border-radius: 50%;
+      font-size: 1.8rem;
+      padding: 1rem;
+      height: 42px;
+      width: 42px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto;
+    }
+
+    &.button-link {
+      border-radius: 100em;
+
+      *,
+      & {
+        text-decoration: underline;
+      }
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+
+    &.with-icon::before {
+      font-size: 1.6rem;
+      margin-right: 1rem;
+    }
+
+    &.button-primary{
+      background-color: var(--color-white);
+
+      *,
+      & {
+        color: var(--color-primary);
+      }
+
+      &.bordered, &.button-bordered {
+        border: 1px solid var(--color-primary);
+      }
+
+      &:hover {
+        background-color: var(--color-primary);
+
+        *,
+        & {
+          color: var(--color-white);
+        }
+      }
+    }
+
+    &.button-disabled{
+      cursor: not-allowed;
+      background-color: var(--color-white);
+
+      *,
+      & {
+        color: var(--color-grey-3);
+      }
+
+      &.bordered, &.button-bordered {
+        border: 1px solid var(--color-grey-3);
+      }
+
+      &:hover {
+        background-color: var(--color-white);
+
+        *,
+        & {
+          color: var(--color-grey-3);
+        }
+      }
+    }
+
+    &.button-secondary {
+      background-color: var(--color-white);
+
+      *,
+      & {
+        color: var(--color-secondary);
+      }
+
+      &.bordered, &.button-bordered {
+        border: 1px solid var(--color-secondary);
+      }
+
+      &:hover {
+        background-color: var(--color-secondary);
+
+        *,
+        & {
+          color: var(--color-white);
+        }
+      }
+    }
+
+    &.button-complementary {
+      color: var(--color-complementary);
+      background-color: var(--color-white);
+
+      &.bordered, &.button-bordered {
+        border: 1px solid var(--color-complementary);
+      }
+
+      &:hover {
+        background-color: var(--color-complementary);
+        color: var(--color-white);
+      }
+    }
+
+    &.flex {
+      display: flex;
+    }
+
+    &.reversed {
+      &.button-primary {
+        background-color: var(--color-primary);
+
+        *,
+        & {
+          color: var(--color-white);
+        }
+
+        &:hover {
+          background-color: var(--color-white);
+          color: var(--color-primary);
+
+          *,
+          & {
+            color: var(--color-primary);
+          }
+
+          &.bordered, &.button-bordered {
+            border: 1px solid var(--color-primary);
+          }
+        }
+      }
+
+      &.button-disabled{
+        cursor: not-allowed;
+        background-color: var(--color-grey-3);
+  
+        *,
+        & {
+          color: var(--color-white);
+        }
+  
+        &.bordered, &.button-bordered {
+          border: 1px solid var(--color-white);
+        }
+  
+        &:hover {
+          background-color: var(--color-grey-3);
+  
+          *,
+          & {
+            color: var(--color-white);
+          }
+        }
+      }
+
+      &.button-secondary {
+        background-color: var(--color-secondary);
+
+        *,
+        & {
+          color: var(--color-white);
+        }
+
+        &:hover {
+          background-color: var(--color-white);
+
+          *,
+          & {
+            color: var(--color-secondary);
+          }
+
+          &.bordered, &.button-bordered {
+            border: 1px solid var(--color-secondary);
+          }
+        }
+      }
+
+      &.button-complementary {
+        background-color: var(--color-complementary);
+
+        *,
+        & {
+          color: var(--color-white);
+        }
+
+        &:hover {
+          background-color: var(--color-white);
+
+          *,
+          & {
+            color: var(--color-complementary);
+          }
+
+          &.bordered, &.button-bordered {
+            border: 1px solid var(--color-complementary);
+          }
+        }
+      }
+    }
+  }
+}
--- a/src/styles/base/form.scss
+++ b/src/styles/base/form.scss
@ -18,13 +18,14 @@ solid-form {
  }
 }

-.button-register>form>input[type=submit] {
-  @extend .button,
-  .text-bold,
-  .text-uppercase,
-  .reversed,
-  .button-secondary,
-  .bordered;
+
+.button-register input[type=submit] {
+  @extend .button;
+  @extend .text-bold;
+  @extend .text-uppercase;
+  @extend .reversed;
+  @extend .button-secondary;
+  @extend .bordered;
  height: auto;
  position: fixed;
  bottom: 1em;
@ -100,37 +101,6 @@ textarea {
  height: 100px;
  resize: vertical;
 }
-    
-.content-box {
-  
-  &.with-form {
-
-    /*solid-set-default:not([name='user-thumb']) {
-      clear: both;
-	    display: flex!important;
-			flex-wrap: wrap;
-			max-width: 100%;
-			
-			solid-form-label-text {
-				float: left;
-				width: 50%;
-			}
-    }*/
-  }
-}
-
-/*solid-form[set-user-id-select] {
-
-  input[type="submit"] {
-    margin-left: 0;
-    margin-top: 0;
-  }
-
-  select {
-    display: none;
-  }
-}*/
-

 /* WIDGETS SIB  (let in .content-box to override default styles) */

@ -196,12 +166,12 @@ hubl-status {
    min-width: 35vw;
  }

-  input[type='submit'] {
-    @extend .button,
-    .text-bold,
-    .text-uppercase,
-    .button-complementary,
-    .bordered;
+  input[type=submit] {
+    @extend .button;
+    @extend .text-bold;
+    @extend .text-uppercase;
+    @extend .button-complementary;
+    @extend .bordered;
    margin: 10px 0;
    width: 100%;

@ -280,11 +250,11 @@ solid-form-file {
    }

    label {
-      @extend .button,
-      .text-bold,
-      .text-uppercase,
-      .button-primary,
-      .bordered;
+      @extend .button;
+      @extend .text-bold;
+      @extend .text-uppercase;
+      @extend .button-primary;
+      @extend .bordered;
      text-align: center;
      width: 100%;
      
--- a/src/styles/base/main.scss
+++ b/src/styles/base/main.scss
@ -294,11 +294,11 @@ h5 {
  }

  input[type='submit'] {
-    @extend .button,
-    .text-bold,
-    .text-uppercase,
-    .button-primary,
-    .bordered;
+    @extend .button;
+    @extend .text-bold;
+    @extend .text-uppercase;
+    @extend .button-primary;
+    @extend .bordered;
    align-self: center;
  }
 }
@ -340,11 +340,11 @@ h5 {
    }

    input {
-      @extend .button,
-      .text-bold,
-      .text-uppercase,
-      .button-primary,
-      .bordered;
+      @extend .button;
+      @extend .text-bold;
+      @extend .text-uppercase;
+      @extend .button-primary;
+      @extend .bordered;
      margin: 10px 0;
      width: 100%;

@ -618,293 +618,9 @@ h5 {
 }

 // Other base components
+@import 'buttons';
@import 'form';
@import 'table';
@import 'header';
@import 'menu-left';
@import 'user-thumb';
-
-// Button global CSS
-solid-delete,
-solid-route,
-solid-link,
-button,
-input[type='submit'],
-a,
-.button {
-  background: none;
-  border: none;
-  cursor: pointer;
-  display: inline-block;
-  padding: 0;
-
-  &.button {
-    padding: 0.55rem 2.5rem;
-    border-radius: 100em;
-
-    *,
-    & {
-      font-size: 1.4rem;
-    }
-
-    &.mobile-full-width {
-      margin-bottom: 1rem;
-      padding-left: 5rem;
-      width: -webkit-fill-available;
-      width: -moz-available;
-
-      @include breakpoint(lg) {
-        margin-bottom: 0;
-        padding-left: 2.5rem;
-        width: auto;
-      }
-
-      &::before {
-        margin-left: -2.6rem;
-
-        @include breakpoint(lg) {
-          margin-left: 0;
-        }
-      }
-    }
-
-    &.desktop-btn-margin__left {
-      margin: 0;
-
-      @include breakpoint(lg) {
-        margin-left: 2.2rem;
-      }
-    }
-
-    &.small {
-
-      *,
-      & {
-        font-size: 1rem;
-      }
-    }
-
-    &.text-bold {
-
-      *,
-      & {
-        font-weight: bold;
-      }
-    }
-
-    &.text-uppercase {
-
-      *,
-      & {
-        text-transform: uppercase;
-      }
-    }
-
-    &.rounded {
-      border-radius: 50%;
-      font-size: 1.8rem;
-      padding: 1rem;
-      height: 42px;
-      width: 42px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      margin: 0 auto;
-    }
-
-    &.button-link {
-      border-radius: 100em;
-
-      *,
-      & {
-        text-decoration: underline;
-      }
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-
-    &.with-icon::before {
-      font-size: 1.6rem;
-      margin-right: 1rem;
-    }
-
-    &.button-primary{
-      background-color: var(--color-white);
-
-      *,
-      & {
-        color: var(--color-primary);
-      }
-
-      &.bordered {
-        border: 1px solid var(--color-primary);
-      }
-
-      &:hover {
-        background-color: var(--color-primary);
-
-        *,
-        & {
-          color: var(--color-white);
-        }
-      }
-    }
-
-    &.button-disabled{
-      cursor: not-allowed;
-      background-color: var(--color-white);
-
-      *,
-      & {
-        color: var(--color-grey-3);
-      }
-
-      &.bordered {
-        border: 1px solid var(--color-grey-3);
-      }
-
-      &:hover {
-        background-color: var(--color-white);
-
-        *,
-        & {
-          color: var(--color-grey-3);
-        }
-      }
-    }
-
-    &.button-secondary {
-      background-color: var(--color-white);
-
-      *,
-      & {
-        color: var(--color-secondary);
-      }
-
-      &.bordered {
-        border: 1px solid var(--color-secondary);
-      }
-
-      &:hover {
-        background-color: var(--color-secondary);
-
-        *,
-        & {
-          color: var(--color-white);
-        }
-      }
-    }
-
-    &.button-complementary {
-      color: var(--color-complementary);
-      background-color: var(--color-white);
-
-      &.bordered {
-        border: 1px solid var(--color-complementary);
-      }
-
-      &:hover {
-        background-color: var(--color-complementary);
-        color: var(--color-white);
-      }
-    }
-
-    &.flex {
-      display: flex;
-    }
-
-    &.reversed {
-      &.button-primary {
-        background-color: var(--color-primary);
-
-        *,
-        & {
-          color: var(--color-white);
-        }
-
-        &:hover {
-          background-color: var(--color-white);
-          color: var(--color-primary);
-
-          *,
-          & {
-            color: var(--color-primary);
-          }
-
-          &.bordered {
-            border: 1px solid var(--color-primary);
-          }
-        }
-      }
-
-      &.button-disabled{
-        cursor: not-allowed;
-        background-color: var(--color-grey-3);
-  
-        *,
-        & {
-          color: var(--color-white);
-        }
-  
-        &.bordered {
-          border: 1px solid var(--color-white);
-        }
-  
-        &:hover {
-          background-color: var(--color-grey-3);
-  
-          *,
-          & {
-            color: var(--color-white);
-          }
-        }
-      }
-
-      &.button-secondary {
-        background-color: var(--color-secondary);
-
-        *,
-        & {
-          color: var(--color-white);
-        }
-
-        &:hover {
-          background-color: var(--color-white);
-
-          *,
-          & {
-            color: var(--color-secondary);
-          }
-
-          &.bordered {
-            border: 1px solid var(--color-secondary);
-          }
-        }
-      }
-
-      &.button-complementary {
-        background-color: var(--color-complementary);
-
-        *,
-        & {
-          color: var(--color-white);
-        }
-
-        &:hover {
-          background-color: var(--color-white);
-
-          *,
-          & {
-            color: var(--color-complementary);
-          }
-
-          &.bordered {
-            border: 1px solid var(--color-complementary);
-          }
-        }
-      }
-    }
-  }
-}
--- a/src/styles/base/menu-left.scss
+++ b/src/styles/base/menu-left.scss
@ -164,7 +164,7 @@
        }
      }

-      solid-display.nosub>solid-form[fields="name"]>hubl-search-users>input {
+      solid-display>solid-form[fields="contact.name"]>hubl-search-users>input {
        margin-left: 30px;
        margin-bottom: 10px;
        width: calc(80vw - 71px);
@ -182,28 +182,9 @@
        }
      }

-      solid-display.nosub>nav {
-        text-align: center;
-        overflow: hidden;
-        display: grid;
-        grid-template-columns: auto 50% auto;
-        grid-template-areas: "left middle right";
-
-        >* {
-          color: var(--color-white);
-        }
-
-        >[data-id="prev"] {
-          grid-area: left;
-        }
-
-        >[data-id="next"] {
-          grid-area: right;
-        }
-
-        >span {
-          grid-area: middle;
-        }
+      hubl-create solid-link,
+      hubl-create-contact solid-link {
+        display: inline;
      }

      hubl-menu-publicprivate {
@ -218,10 +199,6 @@
        }
      }

-      >solid-display.nosub>div>solid-display>div {
-        padding: 1rem 1rem 1rem 3rem;
-      }
-
      solid-display>div {

        .create {
@ -239,7 +216,8 @@
            cursor: pointer;

            >hubl-menu-fix-url-circle>solid-link>solid-display>div,
-            >hubl-menu-fix-url-project>solid-link>solid-display>div {
+            >hubl-menu-fix-url-project>solid-link>solid-display>div,
+            >hubl-menu-fix-url-contact>solid-link>solid-display>div {
              padding: 1rem 1rem 1rem 3rem;
            }
          }
@ -251,7 +229,8 @@

        &>solid-display[active]>div,
        &>solid-display>div>hubl-menu-fix-url-circle>solid-link>solid-display[active]>div,
-        &>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display[active]>div {
+        &>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display[active]>div,
+        &>solid-display>div>hubl-menu-fix-url-contact>solid-link>solid-display[active]>div {
          background-color: var(--color-menu-highlight-primary);
          color: var(--color-menu-text-active);
          font-weight: bold;
@ -261,13 +240,15 @@
      &.menu-notification {

        >solid-display>div>solid-display>div>hubl-menu-fix-url-circle,
-        >solid-display>div>solid-display>div>hubl-menu-fix-url-project {
+        >solid-display>div>solid-display>div>hubl-menu-fix-url-project,
+        >solid-display>div>solid-display>div>hubl-menu-fix-url-contact {
          flex: 1;
        }

        >solid-display>div>solid-display>div,
        >solid-display>div>solid-display>div>hubl-menu-fix-url-circle>solid-link>solid-display>div,
-        >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display>div {
+        >solid-display>div>solid-display>div>hubl-menu-fix-url-project>solid-link>solid-display>div,
+        >solid-display>div>solid-display>div>hubl-menu-fix-url-contact>solid-link>solid-display>div {
          display: flex;
          justify-content: space-between;
        }
--- a/src/styles/base/table.scss
+++ b/src/styles/base/table.scss
@ -154,14 +154,13 @@
  [name='button'] {

    input[type='submit'] {
-      @extend
-      .button,
-      .text-bold,
-      .text-uppercase,
-      .reversed,
-      .button-secondary,
-      .bordered,
-      .desktop-btn-margin__left;
+      @extend .button;
+      @extend .text-bold;
+      @extend .text-uppercase;
+      @extend .reversed;
+      @extend .button-secondary;
+      @extend .bordered;
+      @extend .desktop-btn-margin__left;
    }
  }

--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@ -1,28 +1,25 @@
@charset "UTF-8";

-@import '../../node_modules/include-media/dist/include-media';
-@import '../../node_modules/normalize.css/normalize';
+@import 'normalize.css';

@import 'abstracts/fonts';
@import 'abstracts/variables';
@import 'abstracts/mixins';
@import 'components/loader';
-@import 'components/icons/index';
+@import 'components/icons';
@import 'base/main';
@import 'base/about';

 #viewport {
    display: flex;
    flex: 1;
-    /*height: auto;
-    min-height: 100vh;*/
    overflow-y: auto;
-    @import 'components/index';
-    @import 'layout/members/index';
-    @import 'layout/job-offers/index';
-    @import 'layout/user/index';
-    @import 'layout/events/index';    
-    @import 'layout/resources/index';
-    @import 'layout/dashboard/index';
-    @import 'layout/polls/index';
+    @import 'components';
+    @import 'layout/members';
+    @import 'layout/job-offers';
+    @import 'layout/user';
+    @import 'layout/events';    
+    @import 'layout/resources';
+    @import 'layout/dashboard';
+    @import 'layout/polls';
 }
--- a/src/sw.js
+++ b/src/sw.js
@ -1,4 +1,4 @@
-const CACHE_NAME = 'hubl-store';
+const CACHE_NAME = 'hubl-store-cnt82i';

 self.addEventListener('install', function (e) {
  self.skipWaiting();
@ -30,84 +30,86 @@ self.addEventListener('activate', function (e) {
  self.clients.claim();
 });

-self.addEventListener('fetch', function (event) {
-  let requestURL = new URL(event.request.url);
-  if (requestURL.origin == location.origin) {
-    // Static asset, cache then network
-    event.respondWith(
-      caches.open(CACHE_NAME).then(function (cache) {
-        return cache.match(event.request).then(function (response) {
-          var fetchPromise = fetch(event.request).then(function (networkResponse) {
-            cache.put(event.request, networkResponse.clone());
-            return networkResponse;
+if(process.env.NODE_ENV === 'production'){
+  self.addEventListener('fetch', function (event) {
+    let requestURL = new URL(event.request.url);
+    if (requestURL.origin == location.origin) {
+      // Static asset, cache then network
+      event.respondWith(
+        caches.open(CACHE_NAME).then(function (cache) {
+          return cache.match(event.request).then(function (response) {
+            var fetchPromise = fetch(event.request).then(function (networkResponse) {
+              cache.put(event.request, networkResponse.clone());
+              return networkResponse;
+            });
+            return response || fetchPromise;
          });
-          return response || fetchPromise;
-        });
-      }),
-    );
-  } else {
-    if (
-      event.request.method == 'POST' ||
-      event.request.method == 'PUT'
-    ) {
-      // disabled: lead to cors errors
-      // // POST/PUT to api, rewrite the cache
-      // event.respondWith(
-      //   caches.open(CACHE_NAME + '-api').then(function (cache) {
-      //     return fetch(event.request).then(function (response) {
-      //       cache.put(event.request, response.clone());
-      //       return response;
-      //     })
-      //   }));
-      // api: no cache
-      event.respondWith(fetch(event.request));
-    } else if (
-      /matomo/.test(requestURL.origin) ||
-      /sentry/.test(requestURL.origin) ||
-      /jabber/.test(requestURL.origin) ||
-      /xmpp/.test(requestURL.origin)
-    ) {
-      // analytics, always distant
-      event.respondWith(fetch(event.request));
+        }),
+      );
    } else {
      if (
-        /unpkg/.test(requestURL.origin) ||
-        /skypack/.test(request.origin) ||
-        /jspm/.test(requestURL.origin) ||
-        /jsdeliver/.test(requestURL.origin) ||
-        /cdn/.test(requestURL.origin) ||
-        /googleapis/.test(requestURL.origin)
+        event.request.method == 'POST' ||
+        event.request.method == 'PUT'
      ) {
-        // cdn: cache then network
-        event.respondWith(
-          caches.open(CACHE_NAME + '-cdn').then(function (cache) {
-            return cache.match(event.request).then(function (response) {
-              var fetchPromise = fetch(event.request).then(function (networkResponse) {
-                cache.put(event.request, networkResponse.clone());
-                return networkResponse;
-              });
-              return response || fetchPromise;
-            });
-          }),
-        );
-      } else {
        // disabled: lead to cors errors
-        // // api: distant then cache
+        // // POST/PUT to api, rewrite the cache
        // event.respondWith(
-        //   fetch(event.request)
-        //   .then((response) => {
-        //     caches.open(CACHE_NAME + '-api').then(function (cache) {
+        //   caches.open(CACHE_NAME + '-api').then(function (cache) {
+        //     return fetch(event.request).then(function (response) {
        //       cache.put(event.request, response.clone());
        //       return response;
-        //     });
-        //   })
-        //   .catch(() => {
-        //     return caches.match(event.request);
-        //   })
-        // );
+        //     })
+        //   }));
        // api: no cache
        event.respondWith(fetch(event.request));
+      } else if (
+        /matomo/.test(requestURL.origin) ||
+        /sentry/.test(requestURL.origin) ||
+        /jabber/.test(requestURL.origin) ||
+        /xmpp/.test(requestURL.origin)
+      ) {
+        // analytics, always distant
+        event.respondWith(fetch(event.request));
+      } else {
+        if (
+          /unpkg/.test(requestURL.origin) ||
+          /skypack/.test(requestURL.origin) ||
+          /jspm/.test(requestURL.origin) ||
+          /jsdeliver/.test(requestURL.origin) ||
+          /cdn/.test(requestURL.origin) ||
+          /googleapis/.test(requestURL.origin)
+        ) {
+          // cdn: cache then network
+          event.respondWith(
+            caches.open(CACHE_NAME + '-cdn').then(function (cache) {
+              return cache.match(event.request).then(function (response) {
+                var fetchPromise = fetch(event.request).then(function (networkResponse) {
+                  cache.put(event.request, networkResponse.clone());
+                  return networkResponse;
+                });
+                return response || fetchPromise;
+              });
+            }),
+          );
+        } else {
+          // disabled: lead to cors errors
+          // // api: distant then cache
+          // event.respondWith(
+          //   fetch(event.request)
+          //   .then((response) => {
+          //     caches.open(CACHE_NAME + '-api').then(function (cache) {
+          //       cache.put(event.request, response.clone());
+          //       return response;
+          //     });
+          //   })
+          //   .catch(() => {
+          //     return caches.match(event.request);
+          //   })
+          // );
+          // api: no cache
+          event.respondWith(fetch(event.request));
+        }
      }
    }
-  }
-});
+  });
+}
--- a/src/templates/hubl-user-avatar.pug
+++ b/src/templates/hubl-user-avatar.pug
@ -1,2 +0,0 @@
-solid-widget(name='hubl-user-avatar')
-  template ${await value ? `<img src="${await value}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}
--- a/src/views/page-about.pug
+++ b/src/views/page-about.pug
--- a/src/views/page-admin.pug
+++ b/src/views/page-admin.pug
@ -1,13 +1,13 @@
 .views-container.sidebar-is-closed
  if endpoints.circles || (endpoints.get && endpoints.get.circles)
    #admin-circles(hidden, data-view="admin-circles")
-      include views/admin/page-admin-circles.pug
+      include partials/admin/page-admin-circles.pug
  if endpoints.projects || (endpoints.get && endpoints.get.projects)
    #admin-projects(hidden, data-view="admin-projects")
-      include views/admin/page-admin-projects.pug
+      include partials/admin/page-admin-projects.pug
  if (endpoints.users || (endpoints.get && endpoints.get.users))
    #admin-communities(hidden, data-view="admin-communities")
-      include views/admin/page-admin-communities.pug
+      include partials/admin/page-admin-communities.pug
 nav.jsRightMenu(role='navigation')
  solid-router(default-route='admin-circles')
    ul
--- a/src/views/page-circle.pug
+++ b/src/views/page-circle.pug
@ -13,15 +13,15 @@
    div.content-box__height
      solid-ac-checker(permission='acl:Read', bind-resources)
        #circle-chat(hidden, data-view="circle-chat")
-          include views/circle/page-circle-chat.pug
+          include partials/circle/page-circle-chat.pug
        #circle-information.content-box__height(hidden, data-view="circle-information")
-          include views/circle/page-circle-profile.pug
+          include partials/circle/page-circle-profile.pug
        #circle-events(hidden, data-view="circle-events")
-          include views/circle/page-circle-events.pug
+          include partials/circle/page-circle-events.pug
        #circle-resources(hidden, data-view="circle-resources")
-          include views/circle/page-circle-resources.pug
+          include partials/circle/page-circle-resources.pug
        #circle-polls(hidden, data-view="circle-polls")
-          include views/circle/page-circle-polls.pug
+          include partials/circle/page-circle-polls.pug

 nav.jsRightMenu(role='navigation')
  solid-router(default-route='circle-chat')
--- a/src/views/page-dashboard.pug
+++ b/src/views/page-dashboard.pug
--- a/src/views/page-directory.pug
+++ b/src/views/page-directory.pug
--- a/src/views/page-events.pug
+++ b/src/views/page-events.pug
--- a/src/views/page-job-offers.pug
+++ b/src/views/page-job-offers.pug
--- a/src/views/page-messages.pug
+++ b/src/views/page-messages.pug
--- a/src/views/page-polls.pug
+++ b/src/views/page-polls.pug
--- a/src/views/page-profile.pug
+++ b/src/views/page-profile.pug
--- a/src/views/page-project.pug
+++ b/src/views/page-project.pug
@ -17,11 +17,11 @@
    div.content-box__height
      solid-ac-checker(permission='acl:Read', bind-resources)
        #project-chat(hidden, data-view="project-chat")
-          include views/project/page-project-chat.pug
+          include partials/project/page-project-chat.pug
        #project-information.content-box__height(hidden, data-view="project-information")
-          include views/project/page-project-profile.pug
+          include partials/project/page-project-profile.pug
        #project-picture(hidden, data-view="project-picture")
-          include views/project/page-project-picture.pug
+          include partials/project/page-project-picture.pug

 nav.jsRightMenu(role='navigation')
  solid-router(default-route='project-chat')
--- a/src/views/page-resources.pug
+++ b/src/views/page-resources.pug
--- a/src/views/partials/admin/page-admin-circles-create.pug
+++ b/src/views/partials/admin/page-admin-circles-create.pug
--- a/src/views/partials/admin/page-admin-circles.pug
+++ b/src/views/partials/admin/page-admin-circles.pug
@ -11,7 +11,6 @@
  include ../circle/page-circle-left.pug

  #admin-circle-list.content-box__height(hidden, data-view="admin-circle-list")
-    include ../../templates/hubl-user-avatar.pug

    solid-widget(name='hubl-circle-owner')
      template
@ -90,7 +89,7 @@
                value-user.username='hubl-workaround-493'
                widget-user.username='solid-form-hidden'

-                submit-button='Rejoindre'
+                submit-button=''
                data-trans='submit-button=circle.list.buttonJoin'
              )
              hubl-reactivity(data-src=`${endpoints.circles || endpoints.get.circles}` target-src='${value}')
--- a/src/views/partials/admin/page-admin-communities.pug
+++ b/src/views/partials/admin/page-admin-communities.pug
--- a/src/views/partials/admin/page-admin-projects-create.pug
+++ b/src/views/partials/admin/page-admin-projects-create.pug
--- a/src/views/partials/admin/page-admin-projects.pug
+++ b/src/views/partials/admin/page-admin-projects.pug
@ -12,7 +12,6 @@
    include ../project/page-project-left.pug

  #admin-project-list.content-box__height(hidden, data-view="admin-project-list")
-    include ../../templates/hubl-user-avatar.pug

    div.content-box__info.flex
      div.admin-header.flex
--- a/src/views/partials/admin/page-admin-users-create.pug
+++ b/src/views/partials/admin/page-admin-users-create.pug
--- a/src/views/partials/circle/page-circle-chat.pug
+++ b/src/views/partials/circle/page-circle-chat.pug
--- a/src/views/partials/circle/page-circle-edit.pug
+++ b/src/views/partials/circle/page-circle-edit.pug
@ -1,7 +1,5 @@
 div.content-box__info

-  include ../../templates/hubl-user-avatar.pug
-
  solid-widget(name="circle-edit-members-delete")
    template
      solid-ac-checker(permission="acl:Delete" data-src="${src}")
--- a/src/views/partials/circle/page-circle-events.pug
+++ b/src/views/partials/circle/page-circle-events.pug
--- a/src/views/partials/circle/page-circle-left.pug
+++ b/src/views/partials/circle/page-circle-left.pug
--- a/src/views/partials/circle/page-circle-polls.pug
+++ b/src/views/partials/circle/page-circle-polls.pug
--- a/src/views/partials/circle/page-circle-profile.pug
+++ b/src/views/partials/circle/page-circle-profile.pug
--- a/src/views/partials/circle/page-circle-resources.pug
+++ b/src/views/partials/circle/page-circle-resources.pug
--- a/src/views/partials/header.pug
+++ b/src/views/partials/header.pug
@ -10,12 +10,6 @@ solid-notifications.notLoggedIn(
  bind-user
 )

-//- Templates for notifications from circles and from other users
-include views/notifications/message-circle.pug
-include views/notifications/message-private.pug
-
-include templates/hubl-user-avatar.pug
-
 details#user-controls.notLoggedIn
  summary(tabindex='0' role='button')
    solid-display#user-controls__profile(
--- a/src/views/partials/menu-left.pug
+++ b/src/views/partials/menu-left.pug
@ -12,6 +12,15 @@ solid-widget(name='hubl-menu-publicprivate')
  template
    div ${value == 'Public' ? '#' : ''}

+solid-widget(name='hubl-create-contact')
+  template
+    p.create
+      span(data-trans="menuLeft.contact.create")
+      span &nbsp;
+      solid-link(next="members" data-trans="menuLeft.contact.profileDir")
+      span &nbsp;
+      span(data-trans="menuLeft.contact.create2")
+
 solid-widget(name='hubl-create')
  template
    p.create 
@ -22,6 +31,19 @@ solid-widget(name='hubl-create')
      span &nbsp;
      solid-link(next="${value == 'projet' ? 'admin-projects' : 'admin-circles'}", data-trans="menuLeft.emptyCircleProject.adminPanel")

+solid-widget(name='hubl-menu-fix-url-contact')
+  template
+    solid-link(data-src="${value}" next="messages")
+      solid-display(
+        data-src='${value}'
+        fields='name, chatProfile.jabberID, badge'
+        value-badge='${value}'
+        widget-badge='hubl-counter'
+        widget-chatProfile.jabberID='hubl-menu-jabberid'
+        widget-name='solid-display-div'
+        order-asc='username'
+      )
+
 solid-widget(name='hubl-menu-fix-url-circle')
  template
    solid-link(data-src="${value}" next="circle")
@ -33,7 +55,7 @@ solid-widget(name='hubl-menu-fix-url-circle')
        widget-badge='hubl-counter'
        widget-jabberID='hubl-menu-jabberid'
        widget-name='solid-display-div'
-        order-by="name"
+        order-asc="name"
      )

 solid-widget(name='hubl-menu-fix-url-project')
@ -49,7 +71,7 @@ solid-widget(name='hubl-menu-fix-url-project')
        widget-jabberID='hubl-menu-jabberid'
        widget-badge='hubl-counter'
        widget-name='solid-display-div'
-        order-by="customer.name"
+        order-asc="customer.name"
      )


@ -110,7 +132,7 @@ solid-router#navbar-router(default-route='dashboard')
          empty-value=''
          data-trans="empty-value=menuLeft.emptyCircleProject.project"
          widget-project='hubl-menu-fix-url-project'
-          order-by="project.customer.name"
+          order-asc="project.customer.name"
        )
    div.divider
  if endpoints.circles || (endpoints.get && endpoints.get.circles)
@ -139,40 +161,37 @@ solid-router#navbar-router(default-route='dashboard')
          empty-value=''
          data-trans="empty-value=menuLeft.emptyCircleProject.circle"
          widget-circle='hubl-menu-fix-url-circle'
-          order-by="circle.name"
-        )
-    div.divider
-  if endpoints.users || (endpoints.get && endpoints.get.users)
-    div.menu-wrapper
-      div.menu
-        div.menu-chevron
-          div.menu-icon.icon-arrow-up
-        div.menu-label(data-trans="menuLeft.messages")
-        div.menu-icon.icon-envelope-letter
-      solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
-      div.sub-menu.menu-notification
-        div#loader-messages.loader.loader-menu
-          div
-          div
-          div
-          div
-        solid-display.nosub.message-tab(
-          data-src=`${endpoints.users || (endpoints.get && endpoints.get.users)}`
-          fields='name, chatProfile.jabberID, badge'
-          loader-id='loader-messages'
-          search-fields="name"
-          search-label-name=""
-          data-trans="search-label-name=menuLeft.search"
-          search-widget-name="hubl-search-users"
-          widget-name='solid-display-div'
-          widget-badge='hubl-counter'
-          widget-chatProfile.jabberID='hubl-menu-jabberid'
-          action-badge='badge'
-          order-by='username'
-          next='messages'
-          paginate-by='10'
+          order-asc="circle.name"
        )
    div.divider
+  div.menu-wrapper
+    div.menu
+      div.menu-chevron
+        div.menu-icon.icon-arrow-up
+      div.menu-label(data-trans="menuLeft.messages")
+      div.menu-icon.icon-envelope-letter
+    solid-route(name='messages', rdf-type='foaf:user', use-id='', hidden)
+    div.sub-menu.menu-notification
+      div#loader-messages.loader.loader-menu
+        div
+        div
+        div
+        div
+        //- search-fields="contact.name"
+        //- search-label-contact.name=""
+        //- data-trans="search-label-contact.name=menuLeft.search"
+        //- search-widget-contact.name="hubl-search-users"
+      solid-display.message-tab(
+        bind-user
+        nested-field='contacts'
+        fields='contact'
+        loader-id='loader-messages'
+        empty-widget='hubl-create-contact'
+        empty-value=''
+        widget-contact='hubl-menu-fix-url-contact'
+        order-asc="contact.username"
+      )
+  div.divider

  solid-route(name='admin', hidden)
  solid-route.menu(name='profile', hidden)
--- a/src/views/partials/notifications.pug
+++ b/src/views/partials/notifications.pug
@ -0,0 +1,4 @@
+//- Templates for notifications
+
+include notifications/message-circle.pug
+include notifications/message-private.pug
--- a/src/views/partials/notifications/message-circle.pug
+++ b/src/views/partials/notifications/message-circle.pug
--- a/src/views/partials/notifications/message-private.pug
+++ b/src/views/partials/notifications/message-private.pug
--- a/src/views/partials/project/page-project-chat.pug
+++ b/src/views/partials/project/page-project-chat.pug
--- a/src/views/partials/project/page-project-edit.pug
+++ b/src/views/partials/project/page-project-edit.pug
@ -1,7 +1,5 @@
 div.content-box__info

-  include ../../templates/hubl-user-avatar.pug
-
  solid-widget(name="project-edit-members-delete")
    template
      solid-ac-checker(permission="acl:Delete" data-src="${src}")
--- a/src/views/partials/project/page-project-left.pug
+++ b/src/views/partials/project/page-project-left.pug
--- a/src/views/partials/project/page-project-picture.pug
+++ b/src/views/partials/project/page-project-picture.pug
--- a/src/views/partials/project/page-project-profile.pug
+++ b/src/views/partials/project/page-project-profile.pug
@ -3,7 +3,6 @@ solid-router(default-route='project-profile', hidden)
  solid-route(name='project-edit')

 #project-profile(hidden, data-view="project-profile")
-  include ../../templates/hubl-captain.pug

  solid-widget(name='hubl-project-team-contact')
    template 
--- a/src/views/partials/widgets.pug
+++ b/src/views/partials/widgets.pug
@ -0,0 +1,4 @@
+//- Import your widgets from the `widget`folder here
+
+include widgets/hubl-captain.pug
+include widgets/hubl-user-avatar.pug
--- a/src/views/partials/widgets/hubl-captain.pug
+++ b/src/views/partials/widgets/hubl-captain.pug
@ -1,9 +1,7 @@
-include hubl-user-avatar.pug
-
 solid-widget(name='hubl-captain')
  template
    solid-display.user-thumb(
-      data-src="${await value}"
+      data-src="${value}"
      fields='account.picture, sup(name), sub(is_lead)'

      class-account.picture='avatar user-thumb__picture'
--- a/src/views/partials/widgets/hubl-user-avatar.pug
+++ b/src/views/partials/widgets/hubl-user-avatar.pug
@ -0,0 +1,2 @@
+solid-widget(name='hubl-user-avatar')
+  template ${value ? `<img src="${value}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}