huytd / kanelm

Kanban board built with Elm

Kanelm - Kanban Board in Elm

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

💡 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:

Be sure to append a https: suffix to the API URL in the config.js, otherwise the built version in kanban-app won't work.

Your config should look something like this:

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:

{"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

view : Model -> Html Msg
view model =
  ...
      div [ class "container dark" ] [
  ...

Light theme

Dark theme

kanelm's Issues

Does not work on Safari versions older than 10

The file main.js uses arrow functions and fetch, which are not supported by Safari versions older than 10:

https://caniuse.com/#feat=fetch
https://caniuse.com/#search=arrow

Even though one can update Safari, this is an issue when building kanban-app because webview uses the rendering engine shipped with macOS. Currently, kanban-app only works on macOS 10.12+ due to the above incompatibilities.

How do you run this project ?

Hi, I am learning Elm and not aware of all the tricks to run actual projects.
Would you add in the README.md how to run kanelm locally ?

I have tried to install webpack and run webpack -p. It produces dist/dist.js with some errors afterwards:

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'elm-webpack-loader' in '/home/..../kanelm'
 @ ./src/main.js 4:12-33

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'file-loader' in '/home/..../kanelm'
 @ ./src/main.js 1:0-23

ERROR in ./src/main.js
Module not found: Error: Can't resolve 'style-loader' in '/home/..../kanelm'
 @ ./src/main.js 2:0-22

[request] Allow pasting in input

Native paste command doesn't paste anything into the input box

[request] Identify links & allow clicking them to open a new tab in the default browser

Doing some regex matching on links & autogenerating <a> tags would be super dope. I have a bit of experience doing this, so I can try to do this one too

[bug] Fail to build project

I fail to build the project due to some issue with webpack-cli.

> [email protected] build /Users/tias/Projects/kanelm
> webpack -p

/Users/tias/Projects/kanelm/node_modules/webpack-cli/bin/config-yargs.js:89
				describe: optionsSchema.definitions.output.properties.path.description,
				                                           ^

TypeError: Cannot read property 'properties' of undefined
    at module.exports (/Users/tias/Projects/kanelm/node_modules/webpack-cli/bin/config-yargs.js:89:48)
    at /Users/tias/Projects/kanelm/node_modules/webpack-cli/bin/webpack.js:60:27
    at Object.<anonymous> (/Users/tias/Projects/kanelm/node_modules/webpack-cli/bin/webpack.js:515:3)
    at Module._compile (internal/modules/cjs/loader.js:702:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:713:10)
    at Module.load (internal/modules/cjs/loader.js:612:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:551:12)
    at Function.Module._load (internal/modules/cjs/loader.js:543:3)
    at Module.require (internal/modules/cjs/loader.js:650:17)
    at require (internal/modules/cjs/helpers.js:20:18)```

Problems during install and running does not work

Environment:

• Mac OS X 10.10
• macport
• nodejs9 @9.11.1
• npm5 @5.8.0

After npm install I had to adjust PATH with "node_modules/.bin" so that elm-package could be found.

Finally starting the SW yields:

herrmann@kruger /V/H/N/h/D/D/1/1/k/kanelm> npm start

[email protected] start /Volumes/Home+BUP/NeueHeimat/herrmann/Documents/Dropbox/1_Projekte/1_10_swdev/kanban/kanelm
webpack-dev-server

Project is running at http://localhost:8081/
webpack output is served from /
Running elm-make /Volumes/Home+BUP/NeueHeimat/herrmann/Documents/Dropbox/1_Projekte/1_10_swdev/kanban/kanelm/src/Main.elm --yes --warn --output /var/folders/y8/vkf1q8wx6k71m0q8byjv1jj00000gn/T/118328-73886-8r9vmv.ak40f.js
=================================== WARNINGS ===================================

-- unused import ---------------------------------------- ./src/EventHelpers.elm

Module Html.Attributes is unused.

4| import Html.Attributes exposing (..)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Best to remove it. Don't save code quality for later!

=================================== WARNINGS ===================================

-- unused import ----------------------------------------------- ./src/Views.elm

Module Html.Events is unused.

5| import Html.Events exposing (..)
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
Best to remove it. Don't save code quality for later!

Success! Compiled 41 modules.
Successfully generated /var/folders/y8/vkf1q8wx6k71m0q8byjv1jj00000gn/T/118328-73886-8r9vmv.ak40f.js

Hash: 5d5da37d2611d622525f
Version: webpack 3.11.0
Time: 10299ms
Asset Size Chunks Chunk Names
index.html 215 bytes [emitted]
dist.js 552 kB 0 [emitted] [big] app
[2] multi (webpack)-dev-server/client?http://localhost:8081 ./src/main.js 40 bytes {0} [built]
[3] (webpack)-dev-server/client?http://localhost:8081 7.93 kB {0} [built]
[4] ./node_modules/url/url.js 23.3 kB {0} [built]
[8] ./node_modules/querystring-es3/index.js 127 bytes {0} [built]
[11] ./node_modules/strip-ansi/index.js 161 bytes {0} [built]
[12] ./node_modules/ansi-regex/index.js 135 bytes {0} [built]
[13] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
[14] (webpack)-dev-server/client/socket.js 1.08 kB {0} [built]
[16] (webpack)-dev-server/client/overlay.js 3.67 kB {0} [built]
[21] (webpack)/hot nonrecursive ^./log$ 170 bytes {0} [built]
[23] (webpack)/hot/emitter.js 77 bytes {0} [built]
[25] ./src/main.js 591 bytes {0} [built]
[26] ./src/index.html 56 bytes {0} [built]
[27] ./src/main.scss 1.14 kB {0} [built]
[32] ./src/Main.elm 209 kB {0} [built]
+ 18 hidden modules

ERROR in ./src/main.js
Module not found: Error: Can't resolve './config' in '/Volumes/Home+BUP/NeueHeimat/herrmann/Documents/Dropbox/1_Projekte/1_10_swdev/kanban/kanelm/src'
@ ./src/main.js 4:15-34
@ multi (webpack)-dev-server/client?http://localhost:8081 ./src/main.js
webpack: Failed to compile.
webpack: Compiling...
Hash: 5d5da37d2611d622525f
Version: webpack 3.11.0
Time: 20ms
Asset Size Chunks Chunk Names
index.html 215 bytes
dist.js 552 kB 0 [big] app
[2] multi (webpack)-dev-server/client?http://localhost:8081 ./src/main.js 40 bytes {0}
[3] (webpack)-dev-server/client?http://localhost:8081 7.93 kB {0}
[4] ./node_modules/url/url.js 23.3 kB {0}
[8] ./node_modules/querystring-es3/index.js 127 bytes {0}
[11] ./node_modules/strip-ansi/index.js 161 bytes {0}
[12] ./node_modules/ansi-regex/index.js 135 bytes {0}
[13] ./node_modules/loglevel/lib/loglevel.js 7.86 kB {0} [built]
[14] (webpack)-dev-server/client/socket.js 1.08 kB {0}
[16] (webpack)-dev-server/client/overlay.js 3.67 kB {0}
[21] (webpack)/hot nonrecursive ^./log$ 170 bytes {0} [built]
[23] (webpack)/hot/emitter.js 77 bytes {0}
[25] ./src/main.js 591 bytes {0}
[26] ./src/index.html 56 bytes {0}
[27] ./src/main.scss 1.14 kB {0}
[32] ./src/Main.elm 209 kB {0}
+ 18 hidden modules

ERROR in ./src/main.js
Module not found: Error: Can't resolve './config' in '/Volumes/Home+BUP/NeueHeimat/herrmann/Documents/Dropbox/1_Projekte/1_10_swdev/kanban/kanelm/src'
@ ./src/main.js 4:15-34
@ multi (webpack)-dev-server/client?http://localhost:8081 ./src/main.js
webpack: Failed to compile.

Update archived elm-package to new elm/compiler

Seems like the new binary CLI is looking for an elm.json file instead elm-package.json