You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2021/05/04 08:46:46 UTC
[incubator-streampipes-website] branch dev updated:
[STREAMPIPES-197] Add new docs overview page
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 a516985 [STREAMPIPES-197] Add new docs overview page
a516985 is described below
commit a5169850c9e20464e2a5d6dee2e8c03f77f74078
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Tue May 4 10:46:33 2021 +0200
[STREAMPIPES-197] Add new docs overview page
---
documentation/docs/01_try-overview.md | 106 ++++++++++++++++++++++++++--
documentation/website/static/css/custom.css | 52 +++++++++++++-
2 files changed, 150 insertions(+), 8 deletions(-)
diff --git a/documentation/docs/01_try-overview.md b/documentation/docs/01_try-overview.md
index efc6b39..24153f6 100644
--- a/documentation/docs/01_try-overview.md
+++ b/documentation/docs/01_try-overview.md
@@ -4,15 +4,107 @@ title: Apache StreamPipes Documentation
sidebar_label: Overview
---
-<img class="docs-image" src="/docs/img/01_try-overview/01_streampipes-overview.png" alt="StreamPipes Overview">
+This is the documentation of Apache StreamPipes.
+<img class="docs-image docs-image-small" src="/docs/img/01_try-overview/01_streampipes-overview.png" alt="StreamPipes Overview">
-## Use
-
-## Learn
-
-
-## Extend & Develop
+<div class="container grid col-3">
+ <div class="column">
+ <div class="toc-box">
+ <div class="toc-header border-thin">
+ 🚀 Try
+ </div>
+ <div class="toc-content">
+ <div class="toc-section-header"><b>Your first steps with Apache StreamPipes.</b></div>
+ <a href="try-installation">Install StreamPipes</a>, <a href="try-tutorial">Interactive Tutorial</a>
+ </div>
+ </div>
+ </div>
+ <div class="column">
+ <div class="toc-box">
+ <div class="toc-header border-thin">
+ 💡 Concepts
+ </div>
+ <div class="toc-content">
+ <div class="toc-section-header"><b>Learn about some general concepts of StreamPipes.</b></div>
+ <a href="concepts-overview">Overview</a>
+ </div>
+ </div>
+ </div>
+ <div class="column">
+ <div class="toc-box">
+ <div class="toc-header border-thin">
+ 🎓 Use
+ </div>
+ <div class="toc-content">
+ <div class="toc-section-header"><b>Learn how to use the various modules of StreamPipes.</b></div>
+ <a href="use-connect">StreamPipes Connect</a>, <a href="use-pipeline-editor">Pipeline Editor</a>, <a href="use-managing-pipelines">Managing Pipelines</a>,
+ <a href="use-live-dashboard">Live Dashboard</a>, <a href="use-data-explorer">Data Explorer</a>, <a href="use-notifications">Notifications</a>
+ </div>
+ </div>
+ </div>
+ <div class="column">
+ <div class="toc-box">
+ <div class="toc-header border-thin">
+ 📚 Pipeline Elements
+ </div>
+ <div class="toc-content">
+ <div class="toc-section-header"><b>Available pipeline elements in StreamPipes.</b></div>
+ <a href="pe/org.apache.streampipes.connect.protocol.stream.kafka">Adapters</a>,
+ <a href="pe/org.apache.streampipes.processors.aggregation.flink.aggregation">Data Processors</a>,
+ <a href="pe/org.apache.streampipes.sinks.databases.jvm.couchdb">Data Sinks</a>
+ </div>
+ </div>
+ </div>
+ <div class="column">
+ <div class="toc-box">
+ <div class="toc-header border-thin">
+ âš¡ Deploy
+ </div>
+ <div class="toc-content">
+ <div class="toc-section-header"><b>How to set up StreamPipes in test and production environments.</b></div>
+ <a href="deploy-docker">Docker</a>, <a href="deploy-kubernetes">Kubernetes</a>, <a href="deploy-use-ssl">Use SSL</a>
+ </div>
+ </div>
+ </div>
+ <div class="column">
+ <div class="toc-box">
+ <div class="toc-header border-thin">
+ 💻 Extend
+ </div>
+ <div class="toc-content">
+ <div class="toc-section-header"><b>Write your own pipeline elements for StreamPipes.</b></div>
+ <a href="extend-setup">Development Setup</a>, <a href="extend-cli">CLI</a>, <a href="extend-archetypes">Maven Archetypes</a>,
+ <a href="extend-tutorial-data-sources">Tutorial Data Sources</a>, <a href="extend-tutorial-data-processors">Tutorial Data Processors</a>, <a href="extend-tutorial-data-sinks">Tutorial Data Sinks</a>,
+ <a href="extend-sdk-event-model">Event Model</a>, <a href="extend-sdk-stream-requirements">Stream Requirements</a>, <a href="extend-sdk-static-properties">Static Properties</a>,
+ <a href="extend-output-strategies">Output Strategies</a>
+ </div>
+ </div>
+ </div>
+ <div class="column">
+ <div class="toc-box">
+ <div class="toc-header border-thin">
+ 🔧 Technicals
+ </div>
+ <div class="toc-content">
+ <div class="toc-section-header"><b>Learn about technical concepts behind the curtain.</b></div>
+ <a href="technicals-architecture">Architecture</a>, <a href="technicals-user-guidance">User Guidance</a>, <a href="technicals-runtime-wrappers">Runtime Wrappers</a>,
+ <a href="technicals-messaging">Messaging</a>, <a href="technicals-configuration">Configuration</a>
+ </div>
+ </div>
+ </div>
+ <div class="column">
+ <div class="toc-box">
+ <div class="toc-header border-thin">
+ 👪 Community
+ </div>
+ <div class="toc-content">
+ <div class="toc-section-header"><b>Get support and learn how to contribute to StreamPipes.</b></div>
+ <a href="community-get-help">Get Help</a>, <a href="community-contribute">Contribute</a>
+ </div>
+ </div>
+ </div>
+</div>
diff --git a/documentation/website/static/css/custom.css b/documentation/website/static/css/custom.css
index a195746..33af8a6 100644
--- a/documentation/website/static/css/custom.css
+++ b/documentation/website/static/css/custom.css
@@ -399,9 +399,15 @@ p {
margin-right: auto;
}
+.docs-image-small {
+ max-width: 70%;
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
.docs-carousel {
max-width: 85%;
- border: 2px solid rgb(57,181,74);
+ box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
display: block;
margin-left: auto;
margin-right: auto;
@@ -411,3 +417,47 @@ p {
.slick-dotted.slick-slider {
margin-bottom: 40px;
}
+
+.grid {
+ display: grid;
+ grid-auto-flow: column;
+}
+.grid .toc-box {
+ height: 100%;
+}
+.grid.col-3 {
+ grid-gap: 1rem;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-flow: unset;
+}
+.grid.col-3 .toc-box {
+ margin: 0;
+}
+
+
+@media screen and (max-width: 600px) {
+ .col-3 {
+ width: 100%;
+ }
+}
+
+.toc-section-header {
+ margin-bottom: 10px;
+}
+
+.toc-header {
+ background: rgb(219, 219, 219);
+ color: #2d2d2d;
+ font-weight: bold;
+ padding: 10px;
+ font-size: 14pt;
+}
+
+.toc-content {
+ padding: 10px;
+}
+
+.toc-box {
+ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+ margin: 10px;
+}