Merge branch 'master' into dpo/some-css-fixes

.gitlab-ci.yml

@@ -624,5 +624,311 @@ lescanumeriques:
   only:
     - master
   when: manual
+  tags:
+    - deploy
+
+phares:
+  stage: deployment
+  environment:
+    name: phares
+    url: https://le.phares.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_LE_PHARES" > 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/* phares@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+esspace:
+  stage: deployment
+  environment:
+    name: esspace
+    url: https://ess.pace.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_ESSPACE" > 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/* esspace@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+grandecoco:
+  stage: deployment
+  environment:
+    name: grandecoco
+    url: https://la.grande.coco.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_COCO" > 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/* grande-coco@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+espaceimaginaire:
+  stage: deployment
+  environment:
+    name: espaceimaginaire
+    url: https://espace-imaginaire.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_ESPACEIMAGINAIRE" > 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/* espace-imaginaire@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+hallesciviques:
+  stage: deployment
+  environment:
+    name: hallesciviques
+    url: https://les.halles.civiques.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_HALLES" > 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/* halles-civiques@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+ctc:
+  stage: deployment
+  environment:
+    name: ctc
+    url: https://collectif.tansition.citoyenne.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_CTC" > 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/* collectif-tansition-citoyenne@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+studiossinguliers:
+  stage: deployment
+  environment:
+    name: studiossinguliers
+    url: https://studios-singuliers.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_SINGULIER" > 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/* studios-singuliers@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+apluscestmieux:
+  stage: deployment
+  environment:
+    name: apluscestmieux
+    url: https://apluscestmieux.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_APLUS" > 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/* apluscestmieux@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+projetlerepaire:
+  stage: deployment
+  environment:
+    name: projetlerepaire
+    url: https://projet.le.repaire.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_LEREPAIRE" > 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/* projetlerepaire@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+oxamyne:
+  stage: deployment
+  environment:
+    name: oxamyne
+    url: https://oxamyne.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_OXAMYNE" > 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/* oxamyne@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+laruchesaintgermain:
+  stage: deployment
+  environment:
+    name: laruchesaintgermain
+    url: https://la.ruche.saint-germain.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_LARUCHE" > 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/* laruche-saint-germain@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+artefacts:
+  stage: deployment
+  environment:
+    name: artefacts
+    url: https://artefacts.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_ARTEFACTS" > 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/* artefacts@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+lab01:
+  stage: deployment
+  environment:
+    name: lab01
+    url: https://le.lab01.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_LAB01" > 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/* le-lab01@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+makesense:
+  stage: deployment
+  environment:
+    name: makesense
+    url: https://makesense.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_MAKESENSE" > 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/* makesense@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+moulindepontru:
+  stage: deployment
+  environment:
+    name: moulindepontru
+    url: https://moulin.de.pont-ru.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_MOULINPONTRU" > 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/* moulin-de-pont-ru@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+latreso:
+  stage: deployment
+  environment:
+    name: latreso
+    url: https://la.treso.hubl.world
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_LATRESO" > 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/* la-treso@astral.startinblox.com:~/front/
+  only:
+    - master
+  when: manual
+  tags:
+    - deploy
+
+montpellier:
+  stage: deployment
+  environment:
+    name: montpellier
+    url: https://app.montpellier.happy-dev.fr
+  before_script:
+    - npm ci --cache .npm --prefer-offline --only=production
+  script:
+    - echo "$APP_CONFIG_MONTPELLIER" > 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/* montpellier@ssh-montpellier.happy-dev.fr:~/front/
+  only:
+    - master
+  when: manual
   tags:
     - deploy

.gitlab/issue_templates/bug.md

@@ -1,28 +1,24 @@
-/label ~BUG
+# What's happening?
 
-### What's happening?
+Describe in a few words what's happening
 
-*Describe in a few words what's happening*
+## Steps to reproduce
 
-### Steps to reproduce
+How one can reproduce the issue - this is very important
-
-*How one can reproduce the issue - this is very important*
 
 1. Step 1
 2. Step 2
 3. Step 3
 
-### Relevant logs and/or screenshots
+## Relevant logs and/or screenshots
 
-*If possible, please add a screenshot.*
+If possible, please add a screenshot.
 
-### Your Environment
+## Your Environment
 
 (Include relevant details about the environment you experienced the bug in)
 
 * Browser name and version:
 * Operating System and version (desktop or mobile):
 
-
+/label ~BUG
-
-

.gitlab/issue_templates/feature.md

@@ -1,16 +1,12 @@
-## What needs to be done?
+# What needs to be done
-
-/label ~Feature request
-
 
 ## Technical details
 
-*Are there any technical details worth mentioning?*
+Are there any technical details worth mentioning?
-
 
 ## Test cases
 
-*Describe here the tests needed in order to validate this feature*
+Describe here the tests needed in order to validate this feature
 
 1. Step 1
 2. Step 2
@@ -20,3 +16,5 @@
 
 1. Link to user story in wiki
 2. other related Gitlab issues
+
+/label ~Feature request

.gitlab/issue_templates/new_instance.md

@@ -1,40 +1,16 @@
-/label ~"New Instance"
+# Please fill all these info
-
-# Please fill all these info:
 
 ## General info
 
-- Name of the instance: 
+- Name of the instance:
-- Domain:
+- Domain: .hubl.world
-
-## Settings:
-
-- Does the instance allow people to sign up? **Yes / No**
-- Does the instance want new people to get a welcome email? **Yes / No**
-
-## Federation:
-
-- Which current instance should see this new instance data? **Please provide the info module by module and include the instance itself.**
-- Do those current instances agree to share their public data with this new instance? **Yes / No**
-
-Example:
-
-- *Instance G is the new kid in town*
-- *Instance G wants to only see their dashboard, but want to access the circles of A, B, C, D, E & F.*
-- *Instance G wants to be able to chat with users from A, B, C, D, E & F.*
-- *Instance G wants to be able to see A and B job offers*
-
-Let's say every instances agree to this scenario, the issue should describe the following: 
-
-- Dashboard: G
-- Circles: A, B, C, D, E, F & G
-- Job offers: A, B, F, G
-- Users: A, B, C, D, E, F & G
-- Profile directory: A, B, C, D, E, F & G
-- G agrees that any new instance can see their public data.
 
 ## Cosmetics
 
-- Logo: 
+- Logo:
-- Favicon: 
+
-- 4 Colors: 
+- Favicon:
+
+- 4 Colors:
+
+/label ~"New Instance"

.gitlab/merge_request_templates/checklist_before_merging.md

@@ -1,4 +1,4 @@
-## Checklist
+# Checklist
 
 <!---
 Please, make sure you have changed the topic and also
@@ -12,8 +12,6 @@ I have done ...
 - [ ] Tests for the changes have been added
 - [ ] Docs have been added or updated
 - [ ] I have assigned my architect to review this merge request
-- [ ] I have checked how to create a [merge request]()
-
 
 ## Issues
 
@@ -25,7 +23,6 @@ Format is: Closes #X or Refs #Y
 Docs: https://docs.gitlab.com/ee/user/project/issues/closing_issues.html#via-merge-request
 -->
 
-
 ## Time spent
 
 <!---
@@ -38,7 +35,6 @@ Docs: https://docs.gitlab.com/ee/workflow/time_tracking.html
 
 /spend Xh
 
-
 ## Assignee
 
 <!---
@@ -49,7 +45,6 @@ Docs: https://docs.gitlab.com/ee/user/project/quick_actions.html
 
 /assign
 
-
 ## Feedback
 
 <!---
@@ -57,5 +52,4 @@ Did you encounter any other problems you want to share with us?
 Optional. Feel free to remove this section if you don't have any feedback.
 -->
 
-
 <!--- Thank you for you contribution! -->

README.md

@@ -10,8 +10,8 @@ These instructions will get you a copy of the project up and running on your loc
 
 To install Hubl, you'll need:
 
-* A Hubl Server (djangoldp>=0.7.11) with the appropriate modules
+* A [Hubl Server](https://git.startinblox.com/djangoldp-packages/server-manager/) (djangoldp>1)
-* A Prosody Server (with [appropriate modules](https://git.startinblox.com/infra/prosody-modules/)
+* A [Prosody Server](https://prosody.im/) (with [appropriate modules](https://git.startinblox.com/infra/prosody-modules/))
 * A SMTP Server (optional)
 * NodeJS on your machine
 
@@ -23,11 +23,11 @@ Before diving in you have to check your Hubl Server supports the following LDP p
 * djangoldp_profile
 * djangoldp_skill
 * djangoldp_uploader
-* oidc_provider: 'git+https://github.com/jblemee/django-oidc-provider.git@develop'
+* oidc_provider: django-webidoidc-provider
 
 Those packages are given with the last stable version tested.
 
-Refer to the [documentation to install a Hubl Server](https://git.startinblox.com/documentation/doc/wikis/devops/install_sib_server) with this configuration.
+Refer to the [documentation to install a Hubl Server](https://docs.startinblox.com/import_documentation/install-sib-server.html) with this configuration.
 
 ## Build the application
 
@@ -77,6 +77,8 @@ On `config.json`:
 ```json
 {
   "xmpp": "https://jabber.happy-dev.fr/http-bind/",
+  "clientName": "My local Hubl",
+  "clientLogo": "/images/logo.webp",
   "authority": "http://localhost:8000/",
   "endpoints": {
     "skills": "http://server.url/skills/",
@@ -88,9 +90,13 @@ On `config.json`:
 
 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.
 * `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.
+* `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
 
@@ -108,8 +114,8 @@ On `config.json`:
 
 ```json
   "clientName": "Hubl",
-  "clientFavicon": "/images/favicon.png",
+  "clientFavicon": "/images/favicon.webp",
-  "clientLogo": "/images/logo.png",
+  "clientLogo": "/images/logo.webp",
   "clientLogoHeight": "32px",
   "clientCSS": "/path/to/custom.css",
   "authorityName": "djangoldp-server-name"
@@ -214,7 +220,7 @@ On `config.json`:
 
 ```json
   "endpoints": {
-    "joboffers": "http://server.url/joboffers/",
+    "joboffers": "http://server.url/job-offers/",
     "skills": "http://server.url/skills/",
     "uploads": "http://server.url/upload/"
   }

config.sample.federated.json

@@ -1,6 +1,8 @@
 {
   "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/",

config.sample.json

@@ -2,6 +2,8 @@
   "xmpp": "https://jabber.happy-dev.fr/http-bind/",
   "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/",

make-webmanifest.mjs

@@ -0,0 +1,39 @@
+'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}`);

package.json

@@ -11,29 +11,35 @@
     "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:html": "pug src/index.pug -o dist/ --obj config.json",
+    "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",
     "cypress:open": "cypress open",
     "cypress:verify": "cypress verify",
     "cypress:info": "cypress info",
     "test": "cypress run"
   },
   "watch": {
-    "build:css": "src/styles/*",
+    "build:css": "src/styles/**/*",
-    "build:i18n": "src/locales/*",
+    "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"
   },

src/components/hubl-reactivity.js

@@ -1,6 +1,4 @@
-import { store } from 'https://unpkg.com/@startinblox/core@0.12';
+import { store, Sib, StoreMixin } from 'https://cdn.skypack.dev/@startinblox/core@0.13';
-import { Sib } from "https://unpkg.com/@startinblox/core@0.12/dist/libs/Sib.js";
-import { StoreMixin } from "https://unpkg.com/@startinblox/core@0.12/dist/mixins/storeMixin.js";
 
 export const HublReactivity = {
   name: 'hubl-reactivity',

src/components/hubl-search-users.js

@@ -1,4 +1,4 @@
-import { widgetFactory } from 'https://unpkg.com/@startinblox/core@0.12/dist/widgets/widget-factory.js';
+import { widgetFactory } from 'https://cdn.skypack.dev/@startinblox/core@0.13';
 
 const HublSearchUsers = widgetFactory(
   'hubl-search-users',

src/components/hubl-status.js

@@ -1,6 +1,5 @@
-import { widgetFactory } from 'https://unpkg.com/@startinblox/core@0.12/dist/widgets/widget-factory.js';
+import { widgetFactory, Helpers } from 'https://cdn.skypack.dev/@startinblox/core@0.13';
-import { importCSS } from 'https://unpkg.com/@startinblox/core@0.12/dist/libs/helpers.js';
+import SlimSelect from 'https://cdn.skypack.dev/slim-select@1.23';
-import SlimSelect from 'https://dev.jspm.io/slim-select@1.23';
 
 const HublStatus = widgetFactory(
   'hubl-status',
@@ -22,7 +21,7 @@ const HublStatus = widgetFactory(
     let select = formWidget.querySelector('select');
     if (!select) return;
     const slimSelect = new SlimSelect({select: select});
-    importCSS('https://dev.jspm.io/slim-select/dist/slimselect.min.css');
+    Helpers.importCSS('https://dev.jspm.io/slim-select/dist/slimselect.min.css');
     select.addEventListener('change', () => slimSelect.render());
   },
 );

src/dependencies.pug

@@ -1,49 +1,54 @@
 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://unpkg.com/@startinblox/core@0.12" defer)
+script(type="module" src="https://cdn.skypack.dev/@startinblox/core@0.13" defer)
 //- script(type="module" src="/lib/sib-core/dist/index.js" defer)
 
-script(type="module" src="https://unpkg.com/@startinblox/oidc@0.10" defer)
+script(type="module" src="https://cdn.skypack.dev/@startinblox/oidc@0.11" defer)
 //- script(type="module" src="/lib/sib-auth/index.js" defer)
 
-script(type="module" src="https://unpkg.com/@startinblox/router@0.10" 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://unpkg.com/@startinblox/component-notifications@0.7" defer)
+script(type="module" src="https://cdn.skypack.dev/@startinblox/component-notifications@0.8" 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))
+//- DISABLED - please migrate to dev.skypack.dev + upgrade to core@0.13
-    script(type="module" src="https://unpkg.com/@startinblox/component-event@1.2" 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.2" defer)
     //- script(type="module" src="/lib/sib-event-component/sib-event.js" defer)
 
-if (endpoints.resources || (endpoints.get && endpoints.get.resources)) && (endpoints.resourceskeywords || (endpoints.get && endpoints.get.resourceskeywords)) && (endpoints.resourcestypes || (endpoints.get && endpoints.get.resourcestypes))
+//- DISABLED - please migrate to dev.skypack.dev + upgrade to core@0.13
-    script(type="module" src="https://unpkg.com/@startinblox/component-resource@1.0" 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.0" defer)
     //- script(type="module" src="/lib/sib-resource/sib-resource.js" defer)
 
 if endpoints.joboffers || (endpoints.get && endpoints.get.joboffers)
-    script(type="module" src="https://unpkg.com/@startinblox/component-job-board@1.1" defer)
+    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.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://unpkg.com/@startinblox/component-directory@1.1" defer)
+    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.dashboards || (endpoints.get && endpoints.get.dashboards)
-    script(type="module" src="https://unpkg.com/@startinblox/component-dashboard@0.5" defer)
+    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.users || (endpoints.get && endpoints.get.users)
-    script(type="module" src="https://unpkg.com/@startinblox/component-chat@1.2" defer)
+    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)
+//- DISABLED - please migrate to dev.skypack.dev + upgrade to core@0.13
-    script(type="module" src="https://unpkg.com/@startinblox/component-poll@1.0" defer)
+//- if endpoints.polls || (endpoints.get && endpoints.get.polls)
+    //- script(type="module" src="https://cdn.skypack.dev/@startinblox/component-poll@1.0" 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)

src/header.pug

@@ -1,7 +1,7 @@
 .header-left
   .logo
     solid-link(next='dashboard')
-      img(src=`${clientLogo || '/images/logo.png'}` style=`max-height:${clientLogoHeight || '32px'}`)
+      img(src=`${clientLogo || '/images/logo.webp'}` style=`max-height:${clientLogoHeight || '74px'}`)
 
   span.beta-tag(data-trans='header.beta')
 

src/index.pug

@@ -9,11 +9,11 @@ html(lang="en")
     if clientFavicon
       link(rel="icon" type="image/png" href=`${clientFavicon}`)
     else
-      link(rel="icon" type="image/png" href="/images/favicon.png")
+      link(rel="icon" type="image/webp" href="/images/favicon.webp")
     include dependencies.pug
     if clientCSS
       link(rel='stylesheet', href=`${clientCSS}`)
-
+    link(rel="manifest" href="/manifest.webmanifest")
   body
 
     .wrapper

src/page-messages.pug

@@ -3,14 +3,16 @@
   div.content-box__header
     solid-display(
       bind-resources
-      fields='name, parenthesis, username, endParenthesis'
+      fields='avatar-container(account.picture), text(name, hyphen, at, username)'
-      value-parenthesis=" ("
+      value-hyphen=" - "
-      value-endParenthesis=")"
+      value-at="@"
 
-      class-parenthesis='h1-like'
+      widget-account.picture='hubl-user-avatar'
-      class-endParenthesis='h1-like'
+      class-text="avatar-text"
+      class-avatar-container="avatar-container"
+      class-account.picture='avatar'
       class-name='h1-like'
-      class-username='h1-like'
+      class-hypen='h1-like'
     )
 
   .chat-view

src/scripts/login-element-visibility.js

@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", function (event) {
+document.addEventListener("DOMContentLoaded", function () {
   document
     .querySelector("sib-auth")
     .getUser()

src/scripts/navigate-event.js

@@ -27,10 +27,10 @@ function closeUserControls() {
     );
   }
 
-document.addEventListener("DOMContentLoaded", function(event) {
+document.addEventListener("DOMContentLoaded", function() {
   
     //- View change event
-    window.addEventListener("navigate", event => {
+    window.addEventListener("navigate", () => {
       closeLeftMenu();
       closeUserControls();
     });
@@ -63,7 +63,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
       }
     };
 
-    document.querySelector("#toggleMainMenu").addEventListener("click", event => {
+    document.querySelector("#toggleMainMenu").addEventListener("click", () => {
       let leftMenu = document.querySelector("#main__menu");
       if (leftMenu.hasAttribute("open")) {
         closeLeftMenu();
@@ -75,7 +75,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
     const rightMenus = Array.from(document.querySelectorAll("nav.jsRightMenu"));
     rightMenus.forEach(rightMenu => {
       const btnRightMenu = rightMenu.querySelector("li.jsOffsiteToggle");
-      btnRightMenu.addEventListener("click", e => {
+      btnRightMenu.addEventListener("click", () => {
         if (rightMenu.hasAttribute("open")) {
           closeRightMenu();
         } else {
@@ -86,7 +86,7 @@ document.addEventListener("DOMContentLoaded", function(event) {
 
     Array.from(document.querySelectorAll(".jsMobileSidebarOpenButton")).forEach(
       el => {
-        el.addEventListener("click", event => {
+        el.addEventListener("click", () => {
           openRightMenu();
         });
       }

src/scripts/register-sw.js

@@ -0,0 +1,11 @@
+// if('serviceWorker' in navigator) {
+  // var refreshing;
+  // navigator.serviceWorker.addEventListener('controllerchange', () => {
+  //     if (refreshing) {
+  //         return;
+  //     }
+  //     refreshing = true;
+  //     window.location.reload();
+  // });
+  // navigator.serviceWorker.register('/sw.js');
+// }

src/scripts/unreads-menu.js

@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", function (event) {
+document.addEventListener("DOMContentLoaded", function () {
   window.addEventListener('newMessage', event => {
     let jid = event.detail.jid;
     Array.from(document.querySelectorAll('[data-jabberID="' + jid + '"]')).forEach(el => {

src/scripts/widget-extension.js

@@ -44,7 +44,7 @@ function recursiveAdaptWidgets(prefix, element, user) {
   });
 }
 
-document.addEventListener("DOMContentLoaded", function (event) {
+document.addEventListener("DOMContentLoaded", function () {
   document
     .querySelector("sib-auth")
     .getUser()

src/styles/base/header.scss

@@ -47,8 +47,8 @@
         border-radius: 3px;
         background: var(--color-primary);
         color: var(--color-white);
-        position: absolute;
+        position: fixed;
-        top: -9px;
+        top: 12px;
         left: 267px;
       }
     }

src/styles/base/main.scss

@@ -406,7 +406,7 @@ h5 {
   margin: 0 1.6rem;
 
   @include breakpoint(lg) {
-  padding: 3rem;
+  padding: 2rem;
   margin: 0;
   }
 

src/styles/layout/user/_index.scss

@@ -1 +1 @@
-@import 'user-profile';
+@import 'messages';

src/styles/layout/user/messages.scss

@@ -0,0 +1,13 @@
+.avatar-container {
+  display: inline-block;
+  margin-right: 10px;
+
+  .avatar {
+    height: 40px;
+    width: 40px;
+  }
+}
+.avatar-text {
+  position: absolute;
+  top: 2.8rem;
+}

src/styles/layout/user/user-profile.scss

@@ -1,76 +0,0 @@
-/*.user-profile__container {
-
-  .user-bio {
-    display: grid;
-    grid-gap: 1rem;
-    grid-template-areas: "avatar name"
-      "avatar information";
-    grid-template-columns: minmax(300px, 400px) 2fr;
-
-    .avatar-display {
-      grid-area: avatar;
-      overflow: hidden;
-      position: relative;
-
-      img {
-        border-radius: 50%;
-        height: 300px;
-        object-fit: cover;
-        overflow: hidden;
-        object-position: center;
-        width: 300px;
-      }
-    }
-
-    .name-diplay {
-      grid-area: name;
-
-      [name='user-name-groups'] {
-        align-items: baseline;
-        align-self: end;
-        display: flex;
-
-        solid-multiple {
-          display: flex;
-          padding-left: 1.4rem;
-
-          hubl-groups-name {
-            @extend %tag-role;
-          }
-        }
-      }
-    }
-
-    .info-form {
-      grid-area: information; */
-
-      /* ces styles disparaitront lorsque l'on aura la fonctionnalité pour uploader une photo */
-      /*[name="account.picture"] {
-        margin-bottom: 1rem;
-      }
-
-      hubl-instruction {
-        margin-left: 1rem;
-
-        span {
-          color: $color-233-18-29;
-          font-weight: bold;
-        }
-
-        p {
-          margin-left: 1rem;
-        }
-      }*/
-      /* Fin commentaire sur upload photos */
-    /*}
-
-    [name^="inline-"] {
-      display: flex;
-      justify-content: flex-start;
-
-      >*:not(:last-child) {
-        margin-right: 3rem;
-      }
-    }
-  }
-}*/

src/sw.js

@@ -0,0 +1,113 @@
+const CACHE_NAME = 'hubl-store';
+
+self.addEventListener('install', function (e) {
+  self.skipWaiting();
+  e.waitUntil(
+    caches.open(CACHE_NAME).then(function (cache) {
+      return cache.addAll([
+        '/locales/es.json',
+        '/locales/fr.json',
+        '/scripts/index.js',
+        '/syles/index.css',
+        '/index.html',
+        '/'
+      ]);
+    })
+  );
+});
+
+self.addEventListener('activate', function (e) {
+  // invalidate older versions
+  e.waitUntil(
+    caches.keys()
+    .then(function (keyList) {
+      return Promise.all(keyList.map(function (key) {
+        if (key !== CACHE_NAME && key !== (CACHE_NAME + "-cdn") && key !== (CACHE_NAME + "-api")) {
+          return caches.delete(key);
+        }
+      }));
+    }));
+  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;
+          });
+          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)
+      ) {
+        // 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));
+      }
+    }
+  }
+});