Skip to content

Commit 401afd5

Browse files
knollearyknolleary
committed
Refresh home page
1 parent 1cd93bd commit 401afd5

File tree

5 files changed

+319
-134
lines changed

5 files changed

+319
-134
lines changed

‎_data/contributors.yml‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
# Use https://caius.github.io/github_id/ to determine the githubId
2+
- name: Project Leads
3+
header: The creators of Node-RED, who continue to lead the project today.
4+
people:
5+
- name: Nick O'Leary
6+
githubId: '51083'
7+
links:
8+
home: https://flowfuse.com
9+
github: https://github.com/knolleary
10+
- name: Dave Conway-Jones
11+
githubId: '5375409'
12+
links:
13+
github: https://github.com/dceejay
14+
15+
- name: Core Contributors
16+
header: People who are regularly contributing to the core project or who have
17+
made notable contributions in the project's history.
18+
footer: Explore the full list <a href="https://github.com/node-red/node-red/graphs/contributors" target="_blank">here</a>
19+
20+
people:
21+
- name: Ben Hardill
22+
githubId: '1800845'
23+
links:
24+
home: https://flowfuse.com
25+
github: https://github.com/hardillb
26+
- name: Steve McLaughlin
27+
githubId: '44235289'
28+
links:
29+
home: https://flowfuse.com
30+
github: https://github.com/Steve-Mcl
31+
- name: Gauthier Dandele
32+
githubId: '92022724'
33+
links:
34+
github: https://github.com/GogoVega
35+
- name: Kazuhito Yokoi
36+
githubId: '20310935'
37+
links:
38+
home: https://hitachi.com
39+
github: https://github.com/kazuhitoyokoi
40+
- name: Hiroyasu Nishiyama
41+
githubId: '30289092'
42+
links:
43+
home: https://hitachi.com
44+
github: https://github.com/HiroyasuNishiyama
45+
- name: Mauricio Bonani
46+
githubId: '29807944'
47+
links:
48+
github: https://github.com/bonanitech

‎_data/users.yml‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
# Logo should be added under '/users/'
2+
- name: All
3+
users:
4+
- url: https://www.echounify.com/
5+
logo: echo-unify-systems.png
6+
- url: https://www.overview.ai/
7+
logo: overviewai.jpg
8+
- url: https://www.ubos.tech/
9+
logo: ubos.jpg
10+
- url: https://www.bitpool.com/
11+
logo: bitpool.png
12+
- url: https://p4nr.com/
13+
logo: p4nr.png
14+
- url: https://yoctoconnect.com/
15+
logo: connect.png
16+
- url: https://www.umh.app/
17+
logo: united-manufacturing-hub.png
18+
- url: https://www.simocowirelesssolutions.com/products/velocity/
19+
logo: simoco.jpg
20+
- url: https://www.cosmonautasoftware.com/en-us/cosmo-psim-software-platform
21+
logo: cosmo.png
22+
- url: https://www.42flows.tech
23+
logo: 42flows.jpeg
24+
- url: https://www.broadsens.com/wireless-gateway/
25+
logo: broadsens.png
26+
- url: http://chatbots.studio/
27+
logo: chatbots-studio.png
28+
- url: https://www.plathome.co.jp/product/fw4/
29+
logo: plathome.png
30+
- url: https://www.a4bee.com/
31+
logo: a4bee.png
32+
- url: https://litmus.io/
33+
logo: litmus.png
34+
- url: https://kontron-ais.com/en/
35+
logo: kontron.png
36+
- url: https://tulip.co/
37+
logo: tulip.png
38+
- url: https://iniationware.com/
39+
logo: iniationware.jpg
40+
- url: https://www.cgignite.com
41+
logo: cgignite.png
42+
- url: https://www.prescientdevices.com/
43+
logo: pdi-logo.png
44+
- url: https://handy.ai/
45+
logo: handyai.svg
46+
- url: https://simplehw.eu/
47+
logo: simplehw.png
48+
- url: https://openiap.io/
49+
logo: openiap.png
50+
- url: https://smartlight.co.jp/node-red-lighting-iot/
51+
logo: smartlight.png
52+
- url: https://www.hitachi.co.jp/products/it/oss/
53+
logo: hitachi.png
54+
- url: https://www.dialog-semiconductor.com/
55+
logo: dialog.png
56+
- url: https://zenzium.com
57+
logo: zenzium.jpg
58+
- url: https://www.vigilent.com
59+
logo: vigilent.png
60+
- url: https://entelligently.com
61+
logo: entelligently.png
62+
- url: https://st-one.io/
63+
logo: st-one.png
64+
- url: https://www.aiomeet.com/
65+
logo: aiomeet.png
66+
- url: https://www.thingtrack.com/
67+
logo: thingtrack.png
68+
- url: https://www.enebular.com/
69+
logo: enebular.svg
70+
- url: https://www.victronenergy.com/live/venus-os:large
71+
logo: victron.png
72+
- url: https://www.yellaumbrella.tv/
73+
logo: yellaUmbrella.svg
74+
- url: https://www.veritone.com/
75+
logo: veritone.png
76+
- url: https://www.flowake.com/
77+
logo: flowake.png
78+
- url: https://sensetecnic.com/
79+
logo: sensetecnic.png
80+
- url: https://agilite.io/
81+
logo: agilit-e.png
82+
- url: http://dingo-iot.io/
83+
logo: go-iot.png
84+
- url: https://www.spiritai.com/
85+
logo: spiritai.png
86+
- url: https://www.multitech.com/
87+
logo: multitech.png
88+
- url: https://www.opto22.com/
89+
logo: opto22.png
90+
- url: https://www.iaconnects.co.uk/
91+
logo: iaconnects.png
92+
- url: https://www.flowfuse.com/
93+
logo: flowfuse.svg
94+
- url: https://www.qbee.io/
95+
logo: qbee.png.webp
96+
- url: https://www.charge-unix.fr/
97+
logo: charge_unix.png

‎about/index.md‎

Lines changed: 49 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -3,31 +3,46 @@ layout: about-single
33
title: About
44
---
55

6-
Node-RED is a flow-based programming tool, originally developed by [IBM's Emerging Technology Services](https://emerging-technology.co.uk)
7-
team and now a part of the [OpenJS Foundation](https://openjsf.org/).
8-
9-
### Flow-based Programming
10-
11-
Invented by J. Paul Morrison in the 1970s, [flow-based programming](https://en.wikipedia.org/wiki/Flow-based_programming)
12-
is a way of describing an application's behavior as a network of black-boxes, or
13-
"nodes" as they are called in Node-RED. Each node has a well-defined purpose; it
14-
is given some data, it does something with that data and then it passes that
15-
data on. The network is responsible for the flow of data between the nodes.
16-
17-
It is a model that lends itself very well to a visual representation and makes
18-
it more accessible to a wider range of users. If someone can break down a problem
19-
into discrete steps they can look at a flow and get a sense of what it is doing;
20-
without having to understand the individual lines of code within each node.
21-
22-
### Runtime/Editor
23-
24-
Node-RED consists of a Node.js based runtime that you point a web browser at to
25-
access the flow editor. Within the browser you create your application by dragging
26-
nodes from your palette into a workspace and start to wire them together. With a
27-
single click, the application is deployed back to the runtime where it is run.
6+
Node-RED is a flow-based programming tool, originally developed by IBM Emerging Technology Services team and now a part of the [OpenJS Foundation](https://openjsf.org/).
7+
8+
<div class="grid" style="min-height: 0;">
9+
<div class="col-1-2">
10+
<div class="content feature" style="padding: 20px 0;"><img src="/images/nr-image-1.png" /></div>
11+
</div>
12+
<div class="col-1-2">
13+
<div class="content blurb" style="padding: 20px 0;">
14+
<h3>Browser-based flow editing</h3>
15+
<p>Node-RED provides a browser-based flow editor that makes it easy to wire together flows using the wide range of nodes in the palette. Flows can be then deployed to the runtime in a single-click.</p>
16+
<p>JavaScript functions can be created within the editor using a rich text editor.</p>
17+
<p>A built-in library allows you to save useful functions, templates or flows for re-use.</p>
18+
</div>
19+
</div>
20+
</div>
21+
<div class="grid" style="min-height: 0;">
22+
<div class="col-1-2">
23+
<div class="content blurb" style="padding: 20px 0;">
24+
<h3>Built on Node.js</h3>
25+
<p>The light-weight runtime 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>
26+
<p>It is easy to extend the range of palette nodes to add new capabilities, with over <a href="https://flows.nodered.org">5000 nodes</a> already shared by the community.</p>
27+
</div>
28+
</div>
29+
<div class="col-1-2">
30+
<div class="content feature" style="padding: 20px 0;"><img src="/images/nr-image-2.png" /></div>
31+
</div>
32+
</div>
33+
<div class="grid" style="min-height: 0;">
34+
<div class="col-1-2">
35+
<div class="content feature" style="padding: 20px 0;"><img src="/images/nr-image-3.png" /></div>
36+
</div>
37+
<div class="col-1-2">
38+
<div class="content blurb" style="padding: 20px 0;">
39+
<h3>Social Development</h3>
40+
<p>The flows created in Node-RED are stored using JSON which can be easily imported and exported for sharing with others.</p>
41+
<p>An online <a href="https://flows.nodered.org" target="_blank">flow library</a> allows you to share your best flows with the world.</p>
42+
</div>
43+
</div>
44+
</div>
2845

29-
The palette of nodes can be easily extended by installing new nodes created by
30-
the community and the flows you create can be easily shared as JSON files.
3146

3247

3348
### History
@@ -36,16 +51,20 @@ Node-RED started life in early 2013 as a side-project by Nick O'Leary and Dave
3651
Conway-Jones of IBM's Emerging Technology Services group.
3752

3853
What began as a proof-of-concept for visualising and manipulating mappings
39-
between MQTT topics, quickly became a much more general tool that could be easily
40-
extended in any direction.
54+
between MQTT topics, quickly became a much more general tool for building light-weight,
55+
event-driven applications.
4156

42-
It was open-sourced in September 2013 and has been developed in the open ever
43-
since, culminating in it being one of the founding projects of the JS Foundation
44-
in October 2016.
4557

46-
In 2019, the Node.js Foundation merged with the JS Foundation to form the
58+
Open-sourced in September 2013, Node-RED was one of the founding projects of the JS Foundation
59+
in October 2016. In 2019, the Node.js Foundation merged with the JS Foundation to form the
4760
[OpenJS Foundation](https://openjsf.org/).
4861

62+
In 2021, Nick founded <a href="https://flowfuse.com">FlowFuse, Inc.</a> to continue
63+
driving Node-RED forward, making it more accessible for enterprise use. FlowFuse was
64+
created to elevate Node-RED for enterprise contexts through a secure, professional,
65+
and scalable platform and has found particular success in industrial applications
66+
helping teams connect, collect, transform and visualize operational data.
67+
4968
<div class="doc-callout">
5069
<b>Why is it called Node-RED?</b> The name was a light-hearted play on words
5170
sounding like 'Code Red'. It stuck and was a great improvement on whatever it was

‎css/front.css‎

Lines changed: 82 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
.title {
22
background: url(../images/title-wave.png) no-repeat 0% 100% #8f0000 ;
33
border-top: 10px solid #a22222;
4-
text-align: center;
54
}
65
.intro, .nodes {
76
background: #eee;
@@ -99,31 +98,47 @@ a:hover {
9998
max-width: 445px;
10099
width: 100%;
101100
}
102-
.title .content {
103-
height: 280px;
104-
}
101+
105102
.title h1 {
106103
margin-top: 20px;
107-
margin-bottom: 10px;
108-
color: #f0f0f0;
109-
font-size: 2.5em;
104+
margin-bottom: 20px;
105+
color: #fff;
106+
font-size: 44px;
107+
line-height: 60px;
110108
font-weight: normal;
109+
margin-left: 0px;
111110
}
112111
.title h2 {
113-
margin-top: 0px;
112+
margin-top: 35px;
113+
margin-left: 0px;
114114
font-size: 20px;
115+
line-height: 28px;
115116
font-family: "Open Sans", sans-serif;
116117
font-weight: normal;
117-
color: #c19e9e;
118+
color: #e0e0e0;
118119
}
119120
.title p {
120-
color: #c19e9e;
121+
color: #e0e0e0;
122+
}
123+
.title p a {
124+
color: #e0e0e0;
121125
}
122126
.title img {
123127
margin: auto;
124128
max-width: 769px;
125129
width: 100%;
126130
}
131+
.title .box-link {
132+
margin: 20px 0;
133+
padding: 6px 24px;
134+
font-size: 18px;
135+
border-radius: 5px;
136+
color: #fff;
137+
background: #aa6767;
138+
}
139+
.title-hero {
140+
text-align: center;
141+
}
127142

128143
.nodes .content {
129144
height: auto;
@@ -273,5 +288,61 @@ a.box-link img {
273288
width: 150px;
274289
}
275290
.node-red-latest-version {
276-
color: #c19e9e;
291+
color: #e0e0e0;
292+
}
293+
294+
#contributors-list {
295+
background: #fff;
296+
border-bottom: 2px solid #a22222;
297+
}
298+
#contributors-list h3 {
299+
margin-top: 60px;
300+
margin-bottom: 5px;
301+
}
302+
.contributor-group-description {
303+
font-size: 0.9em;
304+
}
305+
ul.contributors {
306+
margin-top: 30px;
307+
display: grid;
308+
gap: 30px 20px;
309+
grid-template-columns: repeat(3, 1fr);
310+
}
311+
@media handheld, only screen and (max-width: 900px) {
312+
ul.contributors {
313+
grid-template-columns: 1fr;
314+
}
315+
}
316+
.contributor-card {
317+
font-size: 0.9em;
318+
max-width: 300px;
319+
width: 100%;
320+
display: flex;
321+
flex-direction: row;
322+
align-items: start;
323+
}
324+
.contributor-name {
325+
font-size: 1.25em;
326+
}
327+
.contributor-info {
328+
display:inline-flex;
329+
flex-direction: column;
330+
gap: 5px;
331+
}
332+
.contributor-info > span {
333+
display: flex;
334+
flex-direction: row;
335+
gap: 5px;
336+
}
337+
.contributor-info i {
338+
font-size: 1.2em;
339+
}
340+
341+
.contributor-icon {
342+
border: 2px solid #a44;
343+
border-radius: 20px;
344+
width: 80px;
345+
flex-shrink: 0;
346+
flex-grow: 0;
347+
margin-right: 10px;
277348
}

0 commit comments

Comments
 (0)