diff --git a/_includes/head.html b/_includes/head.html index a75e88f..f4c2711 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -11,4 +11,9 @@ + + diff --git a/_sass/libs/_vars.scss b/_sass/libs/_vars.scss index be9bb56..abd91ac 100644 --- a/_sass/libs/_vars.scss +++ b/_sass/libs/_vars.scss @@ -39,7 +39,7 @@ $palette: ( bg: #2e3842, fg: #fff, - fg-bold: #fff, + fb-bold: #2e3842, fg-light: rgba(255,255,255,0.5), border: #fff, border-bg: rgba(144,144,144,0.25), diff --git a/css/main.scss b/css/main.scss index 3033c8a..f10b173 100644 --- a/css/main.scss +++ b/css/main.scss @@ -32,6 +32,47 @@ $baseurl: '{{ site.baseurl }}/images'; grid: ( gutters: 1.5em ) )); +/* CSS spinner */ + .spinner { + margin: 25px auto 25px; + width: 70px; + text-align: center; + } + + .spinner > div { + width: 18px; + height: 18px; + background-color: #333; + border-radius: 100%; + display: inline-block; + -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both; + animation: sk-bouncedelay 1.4s infinite ease-in-out both; + } + + .spinner .bounce1 { + -webkit-animation-delay: -0.32s; + animation-delay: -0.32s; + } + .spinner .bounce2 { + -webkit-animation-delay: -0.16s; + animation-delay: -0.16s; + } + + @-webkit-keyframes sk-bouncedelay { + 0%, 80%, 100% { -webkit-transform: scale(0) } + 40% { -webkit-transform: scale(1.0) } + } + + @keyframes sk-bouncedelay { + 0%, 80%, 100% { + -webkit-transform: scale(0); + transform: scale(0); + } 40% { + -webkit-transform: scale(1.0); + transform: scale(1.0); + } + } + /* Basic */ @-ms-viewport { @@ -109,6 +150,16 @@ $baseurl: '{{ site.baseurl }}/images'; } } + h1 { + font-size: 1.5em; + line-height: 1.75em; + + @include breakpoint(small) { + font-size: 1.2em; + line-height: 1.65em; + } + } + h2 { font-size: 1.35em; line-height: 1.75em; diff --git a/getting_started.html b/getting_started.html new file mode 100644 index 0000000..9b0e84a --- /dev/null +++ b/getting_started.html @@ -0,0 +1,18 @@ +--- +layout: page +title: Getting started +subtitle: How to build and use the erlangpl script +--- + +
+
+
+
+
+
+
+ diff --git a/getting_started.md b/getting_started.md deleted file mode 100644 index 52308d7..0000000 --- a/getting_started.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -layout: page -title: Getting started -subtitle: How to build and use the erlangpl script ---- - -### Download prebuilt script - -The easiest way to get started is to download a prebuilt `erlangpl` script -([download link](https://github.com/erlanglab/erlangpl/releases/download/0.6.1/erlangpl.tar.gz)). - -### Build it manually - -#### Prerequisites - -For building UI you need to have following dependencies installed: -* [node](https://nodejs.org/en/) -* [yarn](https://yarnpkg.com/lang/en/) -* [elm-lang](https://guide.elm-lang.org/install.html) - -Be aware that building UI can take some time. It takes around 1 minute on stock MacBook 2015 plus dependencies -download for the first time. Second time dependencies will be cached. - -``` -$ git clone https://github.com/erlanglab/erlangpl.git -$ cd erlangpl -$ make rebar -$ make ui -$ make -$ ./bootstrap -``` - -## Running erlangpl script - -The erlangpl shell script is a self-contained escript, which can be started from a command line as long as you have Erlang/OTP installed. - -``` -$ ./erlangpl -h - -Usage: erlangpl [-n ] [-c ] [-p ] [-h] - [-v ] [-P ] [-V] [-s ] [-l ] - - -n, --node Monitored node name - -c, --cookie Overwrite ~/.erlang.cookie - -p, --plugin Path to plugins - -h, --help Show the program options - -v, --verbose Verbosity level (-v, -vv, -vvv) - -P, --port HTTP and WS port number - -V, --version Show version information - -s, --sname Start with a shortname - -l, --name Start with a longname, default erlangpl@127.0.0.1 - -$ ./erlangpl -n testnode@127.0.0.1 -c YOURCOOKIE -``` - -Once started, try visiting http://localhost:37575/ - -## Examples - -### Connecting to an Elixir iex session - -``` -$ iex --name foo@127.0.0.1 -S mix -``` - -``` -$ ./erlangpl --node foo@127.0.0.1 -``` - -### Mnesia cluster -You can generate messages between nodes by querying a distributed database Mnesia. - -To setup a Mnesia cluster, start several Erlang nodes with unique names e.g. `a@`, `b@`, `c@`, etc. and start the database on all of them: -``` -erl -name a@127.0.0.1 -(a@127.0.0.1)1> mnesia:start(). -``` -Then create a `test_table` and configure it to be replicated on all nodes: -``` -(a@127.0.0.1)2> mnesia:change_config(extra_db_nodes, ['b@127.0.0.1']). -(a@127.0.0.1)3> mnesia:change_config(extra_db_nodes, ['c@127.0.0.1']). -(a@127.0.0.1)4> mnesia:change_config(extra_db_nodes, ['d@127.0.0.1']). -(a@127.0.0.1)5> mnesia:create_table(test_table, []). -(a@127.0.0.1)6> [mnesia:add_table_copy(test_table, Node, ram_copies) || Node <- nodes()]. -``` - -Here are some behaviours you can test: -``` -[begin mnesia:transaction(fun() -> mnesia:write({test_table, Key, "value"}) end), timer:sleep(10) end || Key <- lists:seq(1,2000)]. -[begin mnesia:sync_dirty(fun() -> mnesia:write({test_table, Key, "value"}) end), timer:sleep(10) end || Key <- lists:seq(1,2000)]. -[begin mnesia:dirty_write({test_table, Key, "value"}), timer:sleep(10) end || Key <- lists:seq(1,2000)]. -``` - -Videos from those experiments were posted on [YouTube](https://www.youtube.com/channel/UCGkcbu799cC1rtMaQtAajpg) - -## Developing - -### Erlang -#### Running development release - -You can also start the tool as a regular Erlang release and connect to its console to debug the tool itself. - -``` -$ make -$ rebar -f generate -$ ./rel/erlangpl/bin/erlangpl console node=testnode@127.0.0.1 cookie=YOURCOOKIE -``` - -### User Interface - -#### Running standalone - -`erlangpl-ui` can be started standalone using Node with npm or yarn. -We are recomending [yarn](https://yarnpkg.com/lang/en/) for that. - -```shell -yarn && yarn start -``` - -Now, application can be found at `localhost:3000` and will be listening for messages from `localhost:37575` where you have to have [erlangpl](https://github.com/erlanglab/erlangpl) running. - -#### Writing Elm code - -Although `erlangpl-ui` is written in React we belive in Elm power. Because of that we support Elm in out build process. -This is possible because of [react-elm-components](https://github.com/evancz/react-elm-components) and [elm-webpack](https://github.com/elm-community/elm-webpack-loader). - -You can write any separate component in Elm and then wrap it into React component which can be integrated with whole application. Elm code should be placed in `ui/src/elm` and every component whould have main file in this directory and all files related to this component in directory with the same name. React wrapper file should have the same name as Elm component and `flow` should be disabled for this file. - -```elm --- ui/src/elm/About.elm - -module About exposing (..) - -import Html exposing (text) - -main = - text "Hello world from Elm component" -``` - - -```javascript -// ui/src/about/components/About.js - -import React from 'react'; -import Elm from 'react-elm-components'; -import { About } from '../../elm/About.elm'; - -import './About.css'; - -const AboutWrapper = () => { - return ( - - ); -}; - -export default AboutWrapper; -``` - -Have fun!