-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
110 lines (102 loc) · 5.72 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
---
layout: default
---
<section class='hero'>
<div class='wrapper'>
<h1 class='hero-intro'>FiniteMachine is a minimal finite state machine with a straightforward and intuitive syntax.</h1>
<div class="browser-window">
<div class='top-bar'>
<div class="circles">
<div class="circle circle--red"></div>
<div class="circle circle--yellow"></div>
<div class="circle circle--green"></div>
</div>
</div>
<div class="browser-container">
<div class="line-numbers">
<ol><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li></ol>
</div>
<div class="window-content">
{% highlight ruby %}
fm = FiniteMachine.new do
initial :red
event :ready, :red => :yellow
event :go, :yellow => :green
event :stop, :green => :red
on_before(:ready) { |event| ... }
on_after(:go) { |event| ... }
on_enter(:yellow) { |event| ... }
on_transition { |event| ... }
on_exit(:green) { |event| ... }
end
fm.current # => :red
fm.ready
fm.current # => :yellow
{% endhighlight %}
</div>
</div>
</div>
</div>
</section>
<section class='features'>
<div class='wrapper'>
<h2 class='title'>Powerful state machine features </h2>
<ul class='feature-items'>
<li class='feature-item'>
<div class='feature-icon'>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path d="M256,50c-57.861,49.195-96.167,57-156.5,57c0,0,0,116.921,0,192.528c0,79,56.996,99.629,156.5,162.472 c99.504-62.843,156.5-83.472,156.5-162.472c0-75.607,0-192.528,0-192.528C352.167,107,313.861,99.195,256,50z M158.067,348.581 c-11.145-11.566-18.567-24.334-18.567-49.053v-41.445H256V100.867c40.768,29.345,75.684,40.771,116.5,44.536v112.68H256v156.812 C211.745,387.728,177.041,368.271,158.067,348.581z"/>
</svg>
</div>
<h2 class="feature-title">ORM agnostic</h2>
<p>Value flexibility and maintainabilty? Since FiniteMachine is just an object it allows for easy integration with the rest of the system.</p>
</li>
<li class='feature-item'>
<div class='feature-icon'>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve">
<path d="M379.417,142.776H133.583v25h245.834V142.776z M379.417,187.776H133.583v25h245.834V187.776z M379.417,232.776H133.583v25h245.834V232.776z M252,277.776H133.583v25H252V277.776z M50,63.237v318.525h412V63.237H50z M419.891,339.654H92.109l-0.001-234.308l327.782-0.002V339.654z M314.393,406.655l42.107,42.107h-201l42.107-42.107H314.393z"/>
</svg>
</div>
<h2 class="feature-title">Expressive syntax</h2>
<p>If you want simplicity and readability, FiniteMachine provides a natural DSL for declaring events, callbacks and exception handlers.</p>
</li>
<li class='feature-item'>
<div class='feature-icon'>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<path d="M50,364.9l97.099,97.1L462,147.099L364.885,50L50,364.9z M413.434,147.116L147.116,413.45L98.55,364.885 l17.854-17.318l36.429,36.43l12.137-12.139l-36.429-36.428l24.275-24.275l24.274,24.275l12.154-12.138l-24.275-24.274l24.275-24.275 l24.275,24.275l12.137-12.138l-24.274-24.274l24.274-24.275l36.43,36.412l12.137-12.137l-36.412-36.413l24.275-24.275l24.274,24.275 l12.138-12.137l-24.275-24.275l24.275-24.275l24.274,24.275l12.138-12.137l-24.275-24.275l24.275-24.292l36.412,36.429 l12.137-12.137l-36.412-36.429l17.838-18.391L413.434,147.116z M134.626,231.725L50,147.099L147.099,50l84.626,84.626 l-48.818,48.818l-12.137-12.154l24.274-24.274l-18.474-18.475l-24.006,24.007l-12.138-12.138l24.007-24.006l-17.318-17.854 L98.55,147.116l60.352,60.334L134.626,231.725z M328.557,329.092l12.137,12.138l24.275-24.274l17.954,17.955l-24.292,24.258 l12.138,12.137l24.292-24.258l18.391,17.838l-48.566,48.549l-60.335-60.335l-24.274,24.274L364.901,462L462,364.885l-84.626-84.61 L328.557,329.092z"/>
</svg>
</div>
<h2 class="feature-title">Highly flexible</h2>
<p>Transition guard conditions paired with dynamic conditional branching allow for modelling any state flows.</p>
</li>
</ul>
</div>
</section>
<section class='installation'>
<div class='wrapper'>
<h2 class='heading'>Getting started</h2>
<ol>
<li><p>If you are using <a href="http://bundler.io/">bundler</a> then add the following line to your Gemfile</p></li>
<li><code>gem 'finite_machine'</code></li>
<li><p>And then execute command</p></li>
<li><code>bundle</code></p></li>
<li><p>Install FiniteMachine using <a href="http://rubygems.org">rubygems</a> package manager by running shell command:</p></li>
</ol>
<div class="browser-window browser-window--terminal">
<div class='top-bar'>
<div class="circles">
<div class="circle circle--red"></div>
<div class="circle circle--yellow"></div>
<div class="circle circle--green"></div>
</div>
</div>
<div class="browser-container">
<div class="window-content window-content--terminal">
{% highlight bash %}
$ gem install finite_machine
{% endhighlight %}
</div>
</div>
</div>
</div>
</section>