Merge branch 'master' into greenkeeper/highlight.js-9.17.1

.circleci/config.yml

@@ -1,4 +1,8 @@
+# Deployment is configured following these instructions:
+# https://circleci.com/blog/deploying-documentation-to-github-pages-with-continuous-integration/
+
 version: 2
+
 jobs:
   test:
     working_directory: ~/repo
@@ -11,19 +15,88 @@ jobs:
       - restore_cache:
           keys:
             - build_cache-{{ checksum "package.json" }}-{{ checksum "shadow-cljs.edn" }}
-      - run: npm install
-      - run: npm run test
+      - run:
+          name: Install dependencies
+          command: npm install
+      - run:
+          name: Test
+          command: npm test
       - save_cache:
           paths:
             - node_modules
+            - .shadow-cljs
             - ~/.m2
+            - ~/.npm
           key: build_cache-{{ checksum "package.json" }}-{{ checksum "shadow-cljs.edn" }}
+  build:
+    working_directory: ~/repo
+    docker:
+      - image: circleci/openjdk:11-jdk-stretch-node-browsers
+    steps:
+      - checkout
+      - restore_cache:
+          keys:
+            - build_cache-{{ checksum "package.json" }}-{{ checksum "shadow-cljs.edn" }}
+      - run:
+          name: Install dependencies
+          command: npm install
+      - run: 
+          name: Build SPA
+          command: npm run build
+      - save_cache:
+          paths:
+            - node_modules
+            - .shadow-cljs
+            - ~/.m2
+            - ~/.npm
+          key: build_cache-{{ checksum "package.json" }}-{{ checksum "shadow-cljs.edn" }}
+      - persist_to_workspace:
+          root: /home/circleci/repo/public
+          paths:
+            - "*"
+  deploy:
+    working_directory: ~/repo
+    docker:
+      - image: circleci/openjdk:11-jdk-stretch-node-browsers
+    steps:
+      - add_ssh_keys:
+          fingerprints:
+            - "85:2f:28:0f:b9:45:b8:f1:0f:c2:0a:1c:5e:4d:a2:06"
+      - checkout
+      - attach_workspace:
+          at: /home/circleci/repo/public
+      - restore_cache:
+          keys:
+            - build_cache-{{ checksum "package.json" }}-{{ checksum "shadow-cljs.edn" }}
+      - run:
+          name: Install dependencies
+          command: npm install
+      - run:
+          name: Deploy to gh-pages branch
+          command: |
+            git config user.email "build@circleci.com"
+            git config user.name "ci-build"
+            npm run deploy
+
 workflows:
   version: 2
-  test:
+  test-build-deploy:
     jobs:
       - test:
           filters:
             branches:
               ignore:
                 - gh-pages
+      - build:
+          requires:
+            - test
+          filters:
+            branches:
+              ignore:
+                - gh-pages
+      - deploy:
+          requires:
+            - build
+          filters:
+            branches:
+              only: master

.travis.yml

@@ -1,11 +0,0 @@
-language: node_js
-node_js:
-  - "10"
-  - "8"
-addons:
-  chrome: stable
-cache:
-  directories:
-    - node_modules
-    - .shadow-cljs
-    - $HOME/.m2

README.md

@@ -1,8 +1,8 @@
-# Airsonic Web Client [![Build Status](https://travis-ci.org/heyarne/airsonic-ui.svg?branch=master)](https://travis-ci.org/heyarne/airsonic-ui) [![CircleCI](https://circleci.com/gh/heyarne/airsonic-ui.svg?style=svg)](https://circleci.com/gh/heyarne/airsonic-ui) [![Greenkeeper badge](https://badges.greenkeeper.io/heyarne/airsonic-ui.svg)](https://greenkeeper.io/)
+# Airsonic Web Client [![CircleCI](https://circleci.com/gh/heyarne/airsonic-ui.svg?style=svg)](https://circleci.com/gh/heyarne/airsonic-ui) [![Greenkeeper badge](https://badges.greenkeeper.io/heyarne/airsonic-ui.svg)](https://greenkeeper.io/)
 
 This repository contains an alternative web frontend for [airsonic](https://github.com/airsonic/airsonic). The goal is to eventually be able to fully replace the current web interface.
 
-## Implemented so far
+## Implemented So Far
 
 * Login with persisting credentials
 * Browse your library by newest / most recently played / starred
@@ -37,9 +37,11 @@ $ npm install
 $ npm run dev
 ```
 
-### Editor integration
+All other build tasks are defined in the `package.json` (more below).
 
-Integrating shadow-cljs with your editor helps tremendously with development. After having run `npm run dev` as described above you can connect to the REPL and get features like in-editor code execution and code completion / documentation lookup. For further information see [this part of the shadow-cljs user guide](https://shadow-cljs.github.io/docs/UsersGuide.html#_editor_integration), which contains instructions for Emacs, Atom, VSCode and other editors. Make sure to open `localhost:8080` in the browser to execute ClojureScript code.
+### Editor Integration
+
+Integrating shadow-cljs with your editor helps tremendously with development. After having run `npm run dev` as described above you can connect to the REPL and get features like in-editor code execution and code completion / documentation lookup. For further information see [this part of the shadow-cljs user guide](https://shadow-cljs.github.io/docs/UsersGuide.html#_editor_integration). Recommended editors and plugins are Calva for VSCode and CIDER for Emacs (comes with Spacemacs). Make sure to open `localhost:8080` in the browser after starting the `dev:cljs` task to execute ClojureScript code in a live REPL.
 
 ### re-frame-10x
 
@@ -51,7 +53,7 @@ It provides you with tools to inspect the state of the application, undo and rep
 
 ## Tests
 
-This project uses [karma](https://karma-runner.github.io/) for tests. Make sure to have Google Chrome installed, otherwise the watcher will time out.
+This project uses [karma](https://karma-runner.github.io/) for tests. There is a check inside `karma.conf.js` to see whether Firefox is installed (via `which firefox` which probably breaks on Windows 🤷); if that command doesn't fail it will be used as the test runner. Otherwise Chrome will be used. If you have Chromium installed, make sure to set the `CHROME_BIN` environment variable to point to Chromium.
 
 ```
 # run tests once
@@ -66,10 +68,12 @@ $ npm test
 # build and optimize the code once for production
 $ npm run build
 
-# runs npm run build and publishes everything via gh-pages
+# publishes everything via gh-pages
 $ npm run deploy
 ```
 
+There is continuous deployment set up on [circleci](https://circleci.com/gh/heyarne/airsonic-ui) that builds and deploys to `gh-pages` after a commit to the `master` branch.
+
 **Note:** If you have a continuous build running and run `npm run build` or `npm run deploy`, it will delete the compiled tests, causing the continuous tests to not run anymore. This can be fixed by running `npm test` again.
 
 All build artifacts land in `/public`. Don't change anything in there as changes will be overwritten.

karma.conf.js

@@ -1,6 +1,23 @@
+const { execSync } = require('child_process')
+
 module.exports = function (config) {
+
+  let browsers = null;
+  if (process.env.TRAVIS || process.env.CI) {
+    // custom config for continuous integration
+    browsers = ['ChromeHeadlessCI']
+  } else {
+    try {
+      // if Firefox is installed, use that as the test runner
+      execSync('which firefox')
+      browsers = ['FirefoxHeadless']
+    } catch (_) {
+      browsers = ['ChromeHeadless']
+    }
+  }
+
   const configuration = {
-    browsers: ['ChromeHeadless'],
+    browsers: browsers,
     // The tests are sometimes run before the tests were completely written
     // to disc; this is a known problem unfortunately. This is a hack to at
     // least keep the browsers connected so the tests are compiled and run
@@ -15,6 +32,7 @@ module.exports = function (config) {
     plugins: [
       'karma-cljs-test',
       'karma-chrome-launcher',
+      'karma-firefox-launcher',
       'karma-notify-reporter' // reporters are set in package.json
     ],
     colors: true,
@@ -31,10 +49,5 @@ module.exports = function (config) {
     }
   }
 
-  if (process.env.TRAVIS || process.env.CI) {
-    configuration.browsers = ['ChromeHeadlessCI']
-  }
-
-
   config.set(configuration)
 }

package.json

@@ -5,11 +5,12 @@
   "main": "index.js",
   "scripts": {
     "build:cljs": "shadow-cljs release app",
+    "build-extra:cljs-report": "shadow-cljs run shadow.cljs.build-report app public/build-report.html",
     "build:sass": "node-sass --output-style compressed src/sass/app.sass | postcss -o public/app/app.css",
-    "build": "rm -r public/*; run-p copy:* build:*",
+    "build": "mkdir -p public; rm -r public/*; run-p copy:* build:*",
     "copy:assets": "cp -R src/assets/* public/",
     "copy:icons": "cp -R node_modules/open-iconic/font/fonts public",
-    "deploy": "npm run build && gh-pages -d public -m \"Deploying $(git rev-parse --short HEAD)\"",
+    "deploy": "gh-pages -d public -m \"[skip ci] Deploying $(git rev-parse --short HEAD)\"",
     "dev:cljs": "shadow-cljs watch app test",
     "dev:sass": "node-sass -w src/sass/app.sass -o public/app",
     "dev:test": "karma start --reporters notify,progress --auto-watch",
@@ -31,7 +32,7 @@
     "create-react-class": "^15.6.3",
     "highlight.js": "9.17.1",
     "open-iconic": "^1.1.1",
-    "postcss-cli": "^6.1.2",
+    "postcss-cli": "^7.0.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-sortable-hoc": "^1.8.3"
@@ -41,6 +42,7 @@
     "karma": "^4.0.1",
     "karma-chrome-launcher": "^3.0.0",
     "karma-cljs-test": "^0.1.0",
+    "karma-firefox-launcher": "^1.2.0",
     "karma-notify-reporter": "^1.1.0",
     "node-sass": "^4.11.0",
     "npm-run-all": "^4.1.5",

src/cljs/airsonic_ui/components/artist/views.cljs

@@ -32,9 +32,9 @@
 (defn similar-artists
   "Given an artist-info response will return a list of similar artists"
   [{similar-artists :similarArtist}]
-  [:div.tags.similar-artists
+  [:div.tags.are-medium.similar-artists
    (for [{:keys [id name]} similar-artists]
-     ^{:key id} [:a.tag.is-link {:href (routes/url-for ::routes/artist.detail {:id id})} name])])
+     ^{:key id} [:a.tag.is-link.is-light {:href (routes/url-for ::routes/artist.detail {:id id})} name])])
 
 (defn detail
   "Creates a nice artist page displaying the artist's name, bio (if available and

src/cljs/airsonic_ui/views/breadcrumbs.cljs

@@ -30,7 +30,8 @@
    (case (:kind params)
      "recent" "Recently Played"
      "newest" "Newest Additions"
-     "starred" "Starred")])
+     "starred" "Starred"
+     "…")])
 
 (defmethod breadcrumbs ::routes/artist.overview [_ _]
   [bulma-breadcrumbs