Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/huytd/kanelm
Kanban board built with Elm
https://github.com/huytd/kanelm
elm kanban trello
Last synced: 27 days ago
JSON representation
Kanban board built with Elm
- Host: GitHub
- URL: https://github.com/huytd/kanelm
- Owner: huytd
- License: bsd-2-clause
- Created: 2017-12-12T01:38:39.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-24T16:28:41.000Z (over 5 years ago)
- Last Synced: 2024-09-29T05:20:57.384Z (about 1 month ago)
- Topics: elm, kanban, trello
- Language: Elm
- Size: 433 KB
- Stars: 300
- Watchers: 15
- Forks: 29
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- Awesome-BigData - Kanban Board in Elm - A kanban board (trello-alike) built with Elm and HTML5 Drag & Drop API (Examples)
- awesome-starred - huytd/kanelm - Kanban board built with Elm (others)
README
# Kanelm - Kanban Board in Elm
![](screenshot.gif)
## Run it locally
Assume you already have Node and Elm installed, you can use either NPM or Yarn.
1. Clone this project
2. Install dependencies:
```
yarn
elm-package install
```
> :bulb: Note: Use `yarn` since the `yarn.lock` dependency file is up to date.
3. Create config file from example config:```
cp src/example.config.js src/config.js
```Create an account on https://jsonbin.io/ to obtain the Secret key, create a new JSON file on this site. Put the URL into your `config.js`. You can find your bin's URL here:
![](jsonbin-url.png)
Be sure to append a `https:` suffix to the API URL in the `config.js`, otherwise the built version in [kanban-app](https://github.com/huytd/kanban-app) won't work.
Your config should look something like this:
```javascript
module.exports = {
SECRET: 'you-api-secret-here',
URL: 'https://api.jsonbin.io/b/{id-of-jsonbin-bin}'
};
```The initial data for your JSON file should be:
```json
{"taskInput": "", "tasks": [], "movingTask": null}
```4. Start the dev server:
```
yarn start
```## Deploy it on your server
To deploy it on your server, just run `npm build` and copy the two files in `dist` folder. It run as a static HTML page, so you can even put it on Github Pages.
## Themes
To use dark theme, add `dark` class into `container**:
**src/Main.elm**
```elm
view : Model -> Html Msg
view model =
...
div [ class "container dark" ] [
...
```Light theme
![](light-theme.png)
Dark theme
![](dark-theme.png)