-
Notifications
You must be signed in to change notification settings - Fork 153
/
Copy pathindex.html
160 lines (158 loc) · 7.63 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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
---
layout: barebones
title: Low-code programming for event-driven applications
---
<div class="title">
<div class="grid">
<div class="col-1-2">
<h1>Low-code programming for event-driven applications</h1>
<h2>The easiest way to collect, transform and visualize real-time data.</h2>
<p>Latest version: <a href="https://www.npmjs.com/package/node-red"><span class="node-red-latest-version">v4.0.9</span> (npm)</a></p>
<p><a class="box-link" href="#get-started">Get Started</a></p>
</div>
<div class="col-1-2 title-hero">
<iframe style="margin: 50px 0; border-radius: 10px; overflow: hidden; box-shadow: 10px 10px 30px #0005;" width="445" height="250" src="https://www.youtube.com/embed/ksGeUD26Mw0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</div>
<!-- Grid 1/2 -->
<div class="intro">
<div class="grid">
<div class="col-1-2">
<div class="content feature"><img src="images/nr-image-1.png" /></div>
</div>
<div class="col-1-2">
<div class="content blurb">
<p>Node-RED's goal is to enable anyone to build applications that collect, transform and visualize their data; building flows that can automate their world. Its low-code nature makes it accessible to users of any background, whether for home automation, industrial control systems or anything in between.</p>
</div>
</div>
</div>
</div>
<div class="features">
<div class="grid">
<div class="col-1-2">
<div class="content blurb">
<p>From home hobbyists to large scale industrial operations, Node-RED has found a place in a wide range of applications, supported by an active community that has built over <a href="https://flows.nodered.org" _target="blank">5,000 Nodes and Flows</a> to help you get started quickly.</p>
</div>
</div>
<div class="col-1-2">
<div class="content feature"><img src="images/nr-image-2.png" /></div>
</div>
</div>
</div>
<div class="platforms" id="get-started">
<div class="content">
<div class="grid">
<div class="col-1-12"> </div>
<div class="col-10-12">
<h3>Get Started</h3>
<p>Node-RED is built on Node.js, taking full advantage of its event-driven, non-blocking model. This makes it ideal to run at the edge of the network on low-cost hardware such as the Raspberry Pi as well as in the cloud.</p>
</div>
<div class="col-1-12"></div>
</div>
<div class="grid">
<div class="col-1-3 ">
<img src="images/platform-local.png">
<h4>Run locally</h4>
<ul>
<li><a href="/docs/getting-started/">Getting started</a></li>
<li><a href="/docs/platforms/docker">Docker</a></li>
</ul>
</div>
<div class="col-1-3 ">
<img src="images/platform-device.png">
<h4>On a device</h4>
<ul>
<li><a href="/docs/hardware/raspberrypi">Raspberry Pi</a></li>
<li><a href="/docs/hardware/beagleboneblack">BeagleBone Black</a></li>
<li><a href="/docs/hardware/arduino">Interacting with Arduino</a></li>
<li><a href="/docs/platforms/android">Android</a></li>
</ul>
</div>
<div class="col-1-3 ">
<img src="images/platform-cloud.png">
<h4>In the cloud</h4>
<ul>
<li><a href="https://flowfuse.com">FlowFuse</a></li>
<li><a href="/docs/platforms/aws">Amazon Web Services</a></li>
<li><a href="/docs/platforms/azure">Microsoft Azure</a></li>
</ul>
</div>
</div>
</div>
</div>
<div id="contributors-list">
<div class="grid">
<div class="content">
{% for group in site.data.contributors %}
<h3>{{ group.name }}</h3>
{% if group.header %}<span class="contributor-group-description">{{group.header}}</span>{% endif %}
<ul class="contributors">
{% for member in group.people %}
<li class="contributor-card">
<img src="https://avatars.githubusercontent.com/u/{{ member.githubId}}?v=4&s=192" class="contributor-icon"/>
<span class="contributor-info">
<span class="contributor-name">{{ member.name }}</span>
<span>
{% if member.links.home %}<a href="{{ member.links.home }}" target="_blank"><i class="fa fa-globe"></i></a>{% endif %}
{% if member.links.github %}<a href="{{ member.links.github }}" target="_blank"><i class="fa fa-github"></i></a>{% endif %}
</span>
</span>
</li>
{% endfor %}
</ul>
{% if group.footer %}<span class="contributor-group-description">{{group.footer}}</span>{% endif %}
{% endfor %}
</div>
</div>
</div>
<div class="users" id="users">
<div class="grid">
<div class="content">
<h3>Who's using Node-RED?</h3>
{% for category in site.data.users %}
<ul id="user-list">
{% for user in category.users %}
<li><a href="{{ user.url }}" target="_blank"><img src="users/{{ user.logo }}"/></a></li>
{% endfor %}
</ul>
{% endfor %}
<p style="text-align:center;"><a href="/about/community/">Want to feature here? Let us know!</a></p>
<p style="text-align:center; font-size: 0.6em; max-width: 420px; line-height: 1.2em; margin: auto; ">All logos used with permission. These links do not constitute an endorsement or approval by the Node-RED project of any of the products, services or opinions of the companies listed.</p>
</div>
</div>
</div>
<div class="community content" id="community">
<div class="grid">
<div class="col-1-2">
<div class="social">
<h3>Community <a class="box-link" href="/about/community/">more</a></h3>
<ul>
<li><a class="box-link" href="https://discourse.nodered.org"><i class="fa fa-commenting-o fa-3x"></i><br/>Forum</a></li>
<li><a class="box-link" href="/slack"><i class="fa fa-slack fa-3x"></i><br/>Slack team</a></li>
<li><a class="box-link" href="https://stackoverflow.com/questions/tagged/node-red"><i class="fa fa-stack-overflow fa-3x"></i><br/>Stack Overflow</a></li>
<li><a class="box-link" href="https://github.com/node-red"><i class="fa fa-github fa-3x"></i><br/>GitHub</a></li>
</ul>
</div>
</div>
<div class="col-1-2">
<div class="blog">
<h3>On the blog <a class="box-link" href="/blog/">more</a></h3>
<ul>
{% for post in site.posts limit:5 %}<li><a class="box-link" href="{{ post.url }}">{{ post.title }}<span class="date">{{ post.date | date_to_string }}</span></a></li>{% endfor %}
</ul>
</div>
</div>
</div>
</div>
<script>
$(function() {
var list = $("#user-list");
var items = list.children();
items.sort(function() {
return 0.5 - Math.random();
});
list.empty();
items.appendTo(list);
})
</script>