- Clojure 96.1%
- Sass 2.8%
- JavaScript 0.7%
- HTML 0.4%
Arne Schlüter
29ea86479c
Squashed commit of the following:
commit b03c1ea7ed0d2fbd56f56f3273e694abc5454101
Author: Arne Schlüter <arne@schlueter.is>
Date: Wed Aug 29 11:38:32 2018 +0200
Fix bug where dropdown menus behind notifications could not be hovered
commit f4d3cd3dad89d0de84f131dbef7268422b26aa35
Author: Arne Schlüter <arne@schlueter.is>
Date: Wed Aug 29 11:16:41 2018 +0200
Move navigation to top
commit 564d972291aebb382d1ca560a21fad332d70cd0c
Author: Arne Schlüter <arne@schlueter.is>
Date: Wed Aug 29 10:23:17 2018 +0200
Move audio player into its own component
commit 382e9e88021db1506efc5fb78935b7846b8257db
Author: Arne Schlüter <arne@schlueter.is>
Date: Wed Aug 29 10:11:14 2018 +0200
Remove link to last.fm in bio
commit f248c2999ca88eeb82769d7491b1e786ee4a7c9d
Author: Arne Schlüter <arne@schlueter.is>
Date: Wed Aug 29 10:01:10 2018 +0200
Add links to external services & hero headers to album and artist pages
|
||
|---|---|---|
| docs | ||
| src | ||
| test/cljs/airsonic_ui | ||
| .gitignore | ||
| .joker | ||
| .travis.yml | ||
| karma.conf.js | ||
| package-lock.json | ||
| package.json | ||
| README.md | ||
| shadow-cljs.edn | ||
Airsonic Web Client 
This is just meant for exploration. If you want to see something more serious, take a look at airsonic-ui.
Implemented so far
- Login
- Welcome screen (most recently played)
- Artist detail
- Album detail
- Play Track w/ next and previous
- Currently playing notification
Development
The project is written in ClojureScript and uses re-frame for structure and peace of mind. The build tool is shadow-cljs, which offers nice editor integration and interoparibility with the whole JavaScript ecosystem. If you haven't worked with re-frame: I highly recommend it. Good resources are the project's docs and a post about its building blocks.
To build the project make sure you have Node.js (v6.0.0), npm and Java 8 installed in your system.
# after cloning the project, first install all dependencies
$ npm install
# start a continuous build with hot-code-reloading and continuous testing
# first build takes a while. open http://localhost:8080
$ npm run dev
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, which contains instructions for Emacs, Atom, VSCode and other editors. Make sure to open localhost:8080 in the browser to execute ClojureScript code.
re-frame-10x
re-frame-10x is a debugger that is bundled with the app in development mode. Once you have the build running, hit Ctrl + h and the re-frame-10x window will show up:
It provides you with tools to inspect the state of the application, undo and replay events, debug performance issues and more.
Tests
This project uses karma for tests. Make sure to have Google Chrome installed, otherwise the watcher will time out. If you want to run tests continuously in the background, you may want to have Growl installed to show notifications (see setup instructions).
# run tests once
$ npm test
Note: If you want nice console output in your tests, make sure to (enable-console-print!). You can call println afterwards like you're used to.
Deployment
# build and optimize the code once for production
$ npm run build
# runs npm run build and publishes everything via gh-pages
$ npm run deploy
All build artifacts will be output in /public. Don't change anything in there as changes will be overwritten.