Manage frontend dependencies with npm/yarn and webpack

.editorconfig

@@ -10,7 +10,7 @@ trim_trailing_whitespace = true
 indent_style = space
 indent_size = 4
 
-[*.{htaccess,html,xml}]
+[*.{htaccess,html,xml,js}]
 indent_size = 2
 
 [*.php]

.eslintrc.js

@@ -0,0 +1,12 @@
+module.exports = {
+  "extends": "airbnb-base",
+  "env": {
+    "browser": true,
+  },
+  "rules": {
+    "no-param-reassign": 0, // manipulate DOM style properties
+    "no-restricted-globals": 0, // currently Shaarli uses alert/confirm, could be be improved later
+    "no-alert": 0, // currently Shaarli uses alert/confirm, could be be improved later
+    "no-cond-assign": [2, "except-parens"], // assignment in while loops is readable and avoid assignment duplication
+  }
+};

.gitattributes

@@ -25,16 +25,17 @@ Dockerfile      text
 *.mo            binary
 
 # Exclude from Git archives
-.editorconfig   export-ignore
-.gitattributes  export-ignore
-.github         export-ignore
-.gitignore      export-ignore
-.travis.yml     export-ignore
-doc/**/*.json   export-ignore
-doc/**/*.md     export-ignore
-docker/         export-ignore
-Doxyfile        export-ignore
-Makefile        export-ignore
-mkdocs.yml      export-ignore
-phpunit.xml     export-ignore
-tests/          export-ignore
+.editorconfig     export-ignore
+.gitattributes    export-ignore
+.github           export-ignore
+.gitignore        export-ignore
+.travis.yml       export-ignore
+doc/**/*.json     export-ignore
+doc/**/*.md       export-ignore
+docker/           export-ignore
+Doxyfile          export-ignore
+Makefile          export-ignore
+node_modules/     export-ignore
+mkdocs.yml        export-ignore
+phpunit.xml       export-ignore
+tests/            export-ignore

.gitignore

@@ -36,3 +36,13 @@ doc/html/
 tpl/*
 !tpl/default
 !tpl/vintage
+
+# Front end
+node_modules
+tpl/default/js
+tpl/default/css
+tpl/default/fonts
+tpl/default/img
+tpl/vintage/js
+tpl/vintage/css
+tpl/vintage/img

.travis.yml

@@ -2,20 +2,22 @@ sudo: false
 dist: trusty
 language: php
 cache:
+  yarn: true
   directories:
     - $HOME/.composer/cache
+    - $HOME/.cache/yarn
 php:
   - 7.2
   - 7.1
   - 7.0
   - 5.6
 install:
-  - composer self-update
+  - yarn install
   - composer install --prefer-dist
-  - locale -a
 before_script:
   - PATH=${PATH//:\.\/node_modules\/\.bin/}
 script:
   - make clean
   - make check_permissions
+  - make eslint
   - make all_tests

Makefile

@@ -157,15 +157,23 @@ composer_dependencies: clean
 	composer install --no-dev --prefer-dist
 	find vendor/ -name ".git" -type d -exec rm -rf {} +
 
+### download 3rd-party frontend libraries
+frontend_dependencies:
+	yarn install
+
+### Build frontend dependencies
+build_frontend: frontend_dependencies
+	yarn run build
+
 ### generate a release tarball and include 3rd-party dependencies and translations
-release_tar: composer_dependencies htmldoc translate
+release_tar: composer_dependencies htmldoc translate build_frontend
 	git archive --prefix=$(ARCHIVE_PREFIX) -o $(ARCHIVE_VERSION).tar HEAD
 	tar rvf $(ARCHIVE_VERSION).tar --transform "s|^vendor|$(ARCHIVE_PREFIX)vendor|" vendor/
 	tar rvf $(ARCHIVE_VERSION).tar --transform "s|^doc/html|$(ARCHIVE_PREFIX)doc/html|" doc/html/
 	gzip $(ARCHIVE_VERSION).tar
 
 ### generate a release zip and include 3rd-party dependencies and translations
-release_zip: composer_dependencies htmldoc translate
+release_zip: composer_dependencies htmldoc translate build_frontend
 	git archive --prefix=$(ARCHIVE_PREFIX) -o $(ARCHIVE_VERSION).zip -9 HEAD
 	mkdir -p $(ARCHIVE_PREFIX)/{doc,vendor}
 	rsync -a doc/html/ $(ARCHIVE_PREFIX)doc/html/
@@ -207,3 +215,8 @@ htmldoc:
 ### Generate Shaarli's translation compiled file (.mo)
 translate:
 	@find inc/languages/ -name shaarli.po -execdir msgfmt shaarli.po -o shaarli.mo \;
+
+### Run ESLint check against Shaarli's JS files
+eslint:
+	@yarn run eslint assets/vintage/js/
+	@yarn run eslint assets/default/js/

assets/.htaccess

@@ -0,0 +1,13 @@
+<IfModule version_module>
+  <IfVersion >= 2.4>
+     Require all denied
+  </IfVersion>
+  <IfVersion < 2.4>
+     Allow from none
+     Deny from all
+  </IfVersion>
+</IfModule>
+
+<IfModule !version_module>
+    Require all denied
+</IfModule>

assets/common/js/picwall.js

@@ -0,0 +1,10 @@
+import Blazy from 'blazy';
+
+(() => {
+  const picwall = document.getElementById('picwall_container');
+  if (picwall != null) {
+    // Suppress ESLint error because that's how bLazy works
+    /* eslint-disable no-new */
+    new Blazy();
+  }
+})();