This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository
https://gitbox.apache.org/repos/asf/incubator-streampipes-website.git
The following commit(s) were added to refs/heads/dev by this push:
new 6ad83a3 [STREAMPIPES-197] Add interactive tutorial page to docs
6ad83a3 is described below
commit 6ad83a3ac27013b7fda20a5980f19e9867ccd3fc
Author: Dominik Riemer <[email protected]>
AuthorDate: Tue Apr 27 10:49:37 2021 +0200
[STREAMPIPES-197] Add interactive tutorial page to docs
---
documentation/docs/01_try-installation.md | 8 +++--
documentation/docs/01_try-tutorial.md | 15 ++++++++-
documentation/docs/02_concepts_overview.md | 7 +++++
documentation/website/i18n/en.json | 4 +++
documentation/website/sidebars.json | 1 +
documentation/website/static/css/custom.css | 35 +++++++++++++++++----
.../img/01_try-tutorial/01_tutorial-welcome.png | Bin 0 -> 207843 bytes
.../img/01_try-tutorial/02_tutorial-process.png | Bin 0 -> 147621 bytes
8 files changed, 60 insertions(+), 10 deletions(-)
diff --git a/documentation/docs/01_try-installation.md
b/documentation/docs/01_try-installation.md
index 22a4827..bb0bac7 100644
--- a/documentation/docs/01_try-installation.md
+++ b/documentation/docs/01_try-installation.md
@@ -1,5 +1,7 @@
---
-id: user-guide-introduction title: Installation sidebar_label: Installation
+id: user-guide-introduction
+title: Installation
+sidebar_label: Installation
---
The easiest way to install StreamPipes is our Docker-based installation. For
production-grade deployments, we also
@@ -87,7 +89,7 @@ best experience), Firefox or Edge.
<div class="wrapper-instruction">
<div style="margin-bottom:5px;">In a command prompt, open the
folder <code>compose</code> and run <code>docker-compose up -d</code>.
<div class="row" style="margin-top:10px;">
- <div class="alert alert-info" role="alert">The folder
contains two docker-compose files: The standard file contains the so-called
_lite_ installation, which includes less pipeline elements, but also requires
for less performant hardware. The _full_ version includes also the Apache Flink
wrapper and more pipeline elements, but requires for more memory. See the
Github <a
href="https://github.com/apache/incubator-streampipes-installer/tree/master/compose";>README</a>
for [...]
+ <div class="alert alert-info" role="alert">The folder
contains two docker-compose files: The standard file contains the so-called
<i>lite</i> installation, which includes less pipeline elements, but also
requires for less performant hardware. The <i>full</i> version includes also
the Apache Flink wrapper and more pipeline elements, but requires for more
memory. See the Github <a
href="https://github.com/apache/incubator-streampipes-installer/tree/master/compose";>READM
[...]
</div>
</div>
</div>
@@ -118,7 +120,7 @@ On the login page, enter your credentials, then you should
be forwarded to the h
Congratulations! You've successfully managed to install StreamPipes. Now we're
ready to build our first pipeline!
-<div class="my-carousel">
+<div class="my-carousel docs-carousel">
<img src="/docs/img/01_try-installation/01_register_user.png" alt="Set Up
User">
<img src="/docs/img/01_try-installation/02_user_set_up.png" alt="SetUp
StreamPipes Components">
<img src="/docs/img/01_try-installation/03_login.png" alt="Go to login
page">
diff --git a/documentation/docs/01_try-tutorial.md
b/documentation/docs/01_try-tutorial.md
index 69d31dd..11e0c9d 100644
--- a/documentation/docs/01_try-tutorial.md
+++ b/documentation/docs/01_try-tutorial.md
@@ -4,4 +4,17 @@ title: Interactive Tutorial
sidebar_label: Interactive Tutorial
---
-tbd
\ No newline at end of file
+Once you've installed StreamPipes and see the home screen, you'll see a number
of modules that are part of the StreamPipes toolbox.
+As a first step, you might be interested in taking the interactive tutorial
that helps you create your first pipeline.
+Switch to the **Pipeline Editor** and you will see a dialog that asks you for
the start of the interactive tutorial:
+
+<img class="docs-image"
src="/docs/img/01_try-tutorial/01_tutorial-welcome.png" alt="Tutorial Welcome
Page">
+
+Click **Start Tour** to start the tour. In this tour, you'll build a simple
pipeline that monitors (simulated) live data from a water tank system.
+Within the tour, perform the actions as recommended and click **Next** to
trigger the next steps. Some tour steps won't require to select **Next**, but
wait for you to take the recommended action.
+You can cancel the tour anytime by clicking the **Exit Tour** button.
+
+<img class="docs-image"
src="/docs/img/01_try-tutorial/02_tutorial-process.png" alt="Tutorial Welcome
Page">
+
+Now after you've built your first pipeline, you might be interested in reading
about some of our core [concepts]()
+
diff --git a/documentation/docs/02_concepts_overview.md
b/documentation/docs/02_concepts_overview.md
new file mode 100644
index 0000000..db9f241
--- /dev/null
+++ b/documentation/docs/02_concepts_overview.md
@@ -0,0 +1,7 @@
+---
+id: concepts-overview
+title: StreamPipes Concepts
+sidebar_label: Overview
+---
+
+tbd
diff --git a/documentation/website/i18n/en.json
b/documentation/website/i18n/en.json
index ea578b9..a836b8d 100644
--- a/documentation/website/i18n/en.json
+++ b/documentation/website/i18n/en.json
@@ -13,6 +13,10 @@
"title": "Interactive Tutorial",
"sidebar_label": "Interactive Tutorial"
},
+ "concepts-overview": {
+ "title": "StreamPipes Concepts",
+ "sidebar_label": "Overview"
+ },
"concepts-adapter": {
"title": "Data Adapters",
"sidebar_label": "Data Adapters"
diff --git a/documentation/website/sidebars.json
b/documentation/website/sidebars.json
index aeedf73..40073e3 100644
--- a/documentation/website/sidebars.json
+++ b/documentation/website/sidebars.json
@@ -5,6 +5,7 @@
"try-tutorial"
],
"\uD83D\uDCA1 Concepts": [
+ "concepts-overview",
"concepts-adapter",
"concepts-data-streams",
"concepts-pipeline",
diff --git a/documentation/website/static/css/custom.css
b/documentation/website/static/css/custom.css
index 9334e4f..5acbdcd 100644
--- a/documentation/website/static/css/custom.css
+++ b/documentation/website/static/css/custom.css
@@ -22,6 +22,8 @@
}
@media only screen and (min-width: 1024px) {
+ .separateOnPageNav .wrapper, .separateOnPageNav .headerWrapper.wrapper {
+ max-width: 1600px;
}
@media only screen and (max-width: 1023px) {
@@ -42,7 +44,7 @@
}
.slick-next {
- right: -40px;
+ right: -45px;
}
.slick-next:before, .slick-prev:before {
@@ -55,7 +57,7 @@
}
.slick-prev {
- left: -40px;
+ left: -45px;
}
.slick-next:before, .slick-prev:before {
@@ -72,12 +74,12 @@
}
.slick-dots {
- bottom: 20px;
+ bottom: -25px;
}
.slick-dots li button:before {
font-size: 20px;
- color: rgb(27, 20, 100);
+ color:rgb(57, 181, 74);
border-radius: 50%;
border: 3px solid white;
line-height: 22px;
@@ -87,7 +89,7 @@
}
.slick-dots li.slick-active button:before {
- color: rgb(27, 20, 100);
+ color: rgb(57, 181, 74);
opacity: 0.9;
}
@@ -318,7 +320,7 @@ p {
}
.slick-prev:before, .slick-next:before {
- color: rgb(27, 20, 100);
+ color: #39b54a;
}
.blockElement {
@@ -386,3 +388,24 @@ p {
border: 1px solid transparent;
border-radius: .25rem;
}
+
+.docs-image {
+ max-width: 80%;
+ border: 2px solid rgb(57,181,74);
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.docs-carousel {
+ max-width: 85%;
+ border: 2px solid rgb(57,181,74);
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+ margin-bottom: 40px;
+}
+
+.slick-dotted.slick-slider {
+ margin-bottom: 40px;
+}
diff --git
a/documentation/website/static/img/01_try-tutorial/01_tutorial-welcome.png
b/documentation/website/static/img/01_try-tutorial/01_tutorial-welcome.png
new file mode 100644
index 0000000..14b935c
Binary files /dev/null and
b/documentation/website/static/img/01_try-tutorial/01_tutorial-welcome.png
differ
diff --git
a/documentation/website/static/img/01_try-tutorial/02_tutorial-process.png
b/documentation/website/static/img/01_try-tutorial/02_tutorial-process.png
new file mode 100644
index 0000000..26d35fb
Binary files /dev/null and
b/documentation/website/static/img/01_try-tutorial/02_tutorial-process.png
differ
