kafka-commits mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From guozh...@apache.org
Subject kafka-site git commit: New landing page for Streams API
Date Tue, 11 Jul 2017 23:04:23 GMT
Repository: kafka-site
Updated Branches:
  refs/heads/asf-site ea90d4d2f -> 279d6b5ea


New landing page for Streams API

New Kafka Streams API landing page for desktop and mobile web.

![image](https://user-images.githubusercontent.com/271961/27936698-03c933d4-6267-11e7-934b-960ff00b4d14.png)

Note: There are a couple of items that need to be filled in before we launch this page.

**Fill in links. Placeholders added for:**
1. Write your first app
2. View Demo
3. Tutorials

**Add desired Scala and Java 7 code snippets**

Author: Derrick Or <derrickor@gmail.com>

Reviewers: Guozhang Wang <wangguoz@gmail.com>

Closes #66 from derrickdoo/streams-landing


Project: http://git-wip-us.apache.org/repos/asf/kafka-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/kafka-site/commit/279d6b5e
Tree: http://git-wip-us.apache.org/repos/asf/kafka-site/tree/279d6b5e
Diff: http://git-wip-us.apache.org/repos/asf/kafka-site/diff/279d6b5e

Branch: refs/heads/asf-site
Commit: 279d6b5eae47e2846eed52fdcdcf13537e04e98a
Parents: ea90d4d
Author: Derrick Or <derrickor@gmail.com>
Authored: Tue Jul 11 16:04:20 2017 -0700
Committer: Guozhang Wang <wangguoz@gmail.com>
Committed: Tue Jul 11 16:04:20 2017 -0700

----------------------------------------------------------------------
 0110/images/icons/architecture--white.png  | Bin 0 -> 812 bytes
 0110/images/icons/architecture.png         | Bin 0 -> 818 bytes
 0110/images/icons/documentation--white.png | Bin 0 -> 1758 bytes
 0110/images/icons/documentation.png        | Bin 0 -> 1642 bytes
 0110/images/icons/tutorials--white.png     | Bin 0 -> 1047 bytes
 0110/images/icons/tutorials.png            | Bin 0 -> 985 bytes
 0110/images/streams-welcome.png            | Bin 0 -> 80530 bytes
 0110/streams/architecture.html             |   4 +-
 0110/streams/core-concepts.html            |  26 ++-
 0110/streams/developer-guide.html          |   8 +-
 0110/streams/index.html                    | 238 ++++++++++++++++++-----
 0110/streams/quickstart.html               |   2 +-
 0110/streams/upgrade-guide.html            |   6 +-
 css/styles.css                             | 243 +++++++++++++++++++++++-
 images/icons/check.png                     | Bin 0 -> 642 bytes
 images/icons/slash--white.png              | Bin 0 -> 469 bytes
 images/icons/slash.png                     | Bin 0 -> 457 bytes
 17 files changed, 465 insertions(+), 62 deletions(-)
----------------------------------------------------------------------


http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/0110/images/icons/architecture--white.png
----------------------------------------------------------------------
diff --git a/0110/images/icons/architecture--white.png b/0110/images/icons/architecture--white.png
new file mode 100644
index 0000000..98b1b03
Binary files /dev/null and b/0110/images/icons/architecture--white.png differ

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/0110/images/icons/architecture.png
----------------------------------------------------------------------
diff --git a/0110/images/icons/architecture.png b/0110/images/icons/architecture.png
new file mode 100644
index 0000000..6f9fd40
Binary files /dev/null and b/0110/images/icons/architecture.png differ

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/0110/images/icons/documentation--white.png
----------------------------------------------------------------------
diff --git a/0110/images/icons/documentation--white.png b/0110/images/icons/documentation--white.png
new file mode 100644
index 0000000..1e8fd97
Binary files /dev/null and b/0110/images/icons/documentation--white.png differ

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/0110/images/icons/documentation.png
----------------------------------------------------------------------
diff --git a/0110/images/icons/documentation.png b/0110/images/icons/documentation.png
new file mode 100644
index 0000000..8d9da19
Binary files /dev/null and b/0110/images/icons/documentation.png differ

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/0110/images/icons/tutorials--white.png
----------------------------------------------------------------------
diff --git a/0110/images/icons/tutorials--white.png b/0110/images/icons/tutorials--white.png
new file mode 100644
index 0000000..97a0c04
Binary files /dev/null and b/0110/images/icons/tutorials--white.png differ

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/0110/images/icons/tutorials.png
----------------------------------------------------------------------
diff --git a/0110/images/icons/tutorials.png b/0110/images/icons/tutorials.png
new file mode 100644
index 0000000..983da6c
Binary files /dev/null and b/0110/images/icons/tutorials.png differ

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/0110/images/streams-welcome.png
----------------------------------------------------------------------
diff --git a/0110/images/streams-welcome.png b/0110/images/streams-welcome.png
new file mode 100644
index 0000000..63918c4
Binary files /dev/null and b/0110/images/streams-welcome.png differ

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/0110/streams/architecture.html
----------------------------------------------------------------------
diff --git a/0110/streams/architecture.html b/0110/streams/architecture.html
index 70c5c79..0dbb1dc 100644
--- a/0110/streams/architecture.html
+++ b/0110/streams/architecture.html
@@ -131,7 +131,7 @@
 
     <div class="pagination">
         <a href="/{{version}}/documentation/streams/core-concepts" class="pagination__btn
pagination__btn__prev">Previous</a>
-        <a href="/{{version}}/documentation/streams/developer-guide" class="pagination__btn
pagination__btn__next">Next</a>
+        <a href="/{{version}}/documentation/streams/upgrade-guide" class="pagination__btn
pagination__btn__next">Next</a>
     </div>
 </script>
 
@@ -143,7 +143,7 @@
         <!--#include virtual="../../includes/_docs_banner.htm" -->
         <ul class="breadcrumbs">
             <li><a href="/documentation">Documentation</a></li>
-            <li><a href="/documentation/streams">Streams</a></li>
+            <li><a href="/documentation/streams">Kafka Streams API</a></li>
         </ul>
         <div class="p-content"></div>
     </div>

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/0110/streams/core-concepts.html
----------------------------------------------------------------------
diff --git a/0110/streams/core-concepts.html b/0110/streams/core-concepts.html
index 8efc212..7349c3a 100644
--- a/0110/streams/core-concepts.html
+++ b/0110/streams/core-concepts.html
@@ -21,6 +21,28 @@
     <h1>Core Concepts</h1>
 
     <p>
+        Kafka Streams is a client library for processing and analyzing data stored in Kafka.
+        It builds upon important stream processing concepts such as properly distinguishing
between event time and processing time, windowing support, and simple yet efficient management
of application state.
+    </p>
+    <p>
+        Kafka Streams has a <b>low barrier to entry</b>: You can quickly write
and run a small-scale proof-of-concept on a single machine; and you only need to run additional
instances of your application on multiple machines to scale up to high-volume production workloads.
+        Kafka Streams transparently handles the load balancing of multiple instances of the
same application by leveraging Kafka's parallelism model.
+    </p>
+    <p>
+        Some highlights of Kafka Streams:
+    </p>
+
+    <ul>
+        <li>Designed as a <b>simple and lightweight client library</b>,
which can be easily embedded in any Java application and integrated with any existing packaging,
deployment and operational tools that users have for their streaming applications.</li>
+        <li>Has <b>no external dependencies on systems other than Apache Kafka
itself</b> as the internal messaging layer; notably, it uses Kafka's partitioning model
to horizontally scale processing while maintaining strong ordering guarantees.</li>
+        <li>Supports <b>fault-tolerant local state</b>, which enables very
fast and efficient stateful operations like windowed joins and aggregations.</li>
+        <li>Supports <b>exactly-once</b> processing semantics to guarantee
that each record will be processed once and only once even when there is a failure on either
Streams clients or Kafka brokers in the middle of processing.</li>
+        <li>Employs <b>one-record-at-a-time processing</b> to achieve millisecond
processing latency, and supports <b>event-time based windowing operations</b>
with late arrival of records.</li>
+        <li>Offers necessary stream processing primitives, along with a <b>high-level
Streams DSL</b> and a <b>low-level Processor API</b>.</li>
+
+    </ul>
+
+    <p>
         We first summarize the key concepts of Kafka Streams.
     </p>
 
@@ -135,7 +157,7 @@
     </p>
 
     <div class="pagination">
-        <a href="/{{version}}/documentation/streams/quickstart" class="pagination__btn
pagination__btn__prev">Previous</a>
+        <a href="/{{version}}/documentation/streams/developer-guide" class="pagination__btn
pagination__btn__prev">Previous</a>
         <a href="/{{version}}/documentation/streams/architecture" class="pagination__btn
pagination__btn__next">Next</a>
     </div>
 </script>
@@ -148,7 +170,7 @@
         <!--#include virtual="../../includes/_docs_banner.htm" -->
         <ul class="breadcrumbs">
             <li><a href="/documentation">Documentation</a></li>
-            <li><a href="/documentation/streams">Streams</a></li>
+            <li><a href="/documentation/streams">Kafka Streams API</a></li>
         </ul>
         <div class="p-content"></div>
     </div>

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/0110/streams/developer-guide.html
----------------------------------------------------------------------
diff --git a/0110/streams/developer-guide.html b/0110/streams/developer-guide.html
index 5ebea1f..6f08f38 100644
--- a/0110/streams/developer-guide.html
+++ b/0110/streams/developer-guide.html
@@ -18,7 +18,7 @@
 <script><!--#include virtual="../js/templateData.js" --></script>
 
 <script id="content-template" type="text/x-handlebars-template">
-    <h1>Developer Guide</h1>
+    <h1>Developer Manual</h1>
 
     <p>
         There is a <a href="/{{version}}/documentation/#quickstart_kafkastreams">quickstart</a>
example that provides how to run a stream processing program coded in the Kafka Streams library.
@@ -1094,8 +1094,8 @@
     </p>
 
     <div class="pagination">
-        <a href="/{{version}}/documentation/streams/architecture" class="pagination__btn
pagination__btn__prev">Previous</a>
-        <a href="/{{version}}/documentation/streams/upgrade-guide" class="pagination__btn
pagination__btn__next">Next</a>
+        <a href="/{{version}}/documentation/streams/quickstart" class="pagination__btn
pagination__btn__prev">Previous</a>
+        <a href="/{{version}}/documentation/streams/core-concepts" class="pagination__btn
pagination__btn__next">Next</a>
     </div>
 </script>
 
@@ -1107,7 +1107,7 @@
         <!--#include virtual="../../includes/_docs_banner.htm" -->
         <ul class="breadcrumbs">
             <li><a href="/documentation">Documentation</a></li>
-            <li><a href="/documentation/streams">Streams</a></li>
+            <li><a href="/documentation/streams">Kafka Streams API</a></li>
         </ul>
         <div class="p-content"></div>
     </div>

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/0110/streams/index.html
----------------------------------------------------------------------
diff --git a/0110/streams/index.html b/0110/streams/index.html
index 7a3c36b..bcaa831 100644
--- a/0110/streams/index.html
+++ b/0110/streams/index.html
@@ -18,56 +18,192 @@
 <script><!--#include virtual="../js/templateData.js" --></script>
 
 <script id="streams-template" type="text/x-handlebars-template">
-    <h1>Streams</h1>
-
-    <ol class="toc">
-        <li>
-            <a href="/{{version}}/documentation/streams/quickstart">Play with a Streams
Application</a>
-        </li>
-        <li>
-            <a href="/{{version}}/documentation/streams/core-concepts">Core Concepts</a>
-        </li>
-        <li>
-            <a href="/{{version}}/documentation/streams/architecture">Architecture</a>
-        </li>
-        <li>
-            <a href="/{{version}}/documentation/streams/developer-guide">Developer
Guide</a>
-            <ul>
-                <li><a href="/{{version}}/documentation/streams/developer-guide#streams_processor">Low-level
Processor API</a></li>
-                <li><a href="/{{version}}/documentation/streams/developer-guide#streams_dsl">High-level
Streams DSL</a></li>
-                <li><a href="/{{version}}/documentation/streams/developer-guide#streams_interactive_querie">Interactive
Queries</a></li>
-                <li><a href="/{{version}}/documentation/streams/developer-guide#streams_execute">Application
Configuration and Execution</a></li>
-            </ul>
-        </li>
-        <li>
-            <a href="/{{version}}/documentation/streams/upgrade-guide">Upgrade Guide
and API Changes</a>
-        </li>
-    </ol>
-
-    <h2>Overview</h2>
-
-    <p>
-        Kafka Streams is a client library for processing and analyzing data stored in Kafka.
-        It builds upon important stream processing concepts such as properly distinguishing
between event time and processing time, windowing support, and simple yet efficient management
of application state.
-    </p>
-    <p>
-        Kafka Streams has a <b>low barrier to entry</b>: You can quickly write
and run a small-scale proof-of-concept on a single machine; and you only need to run additional
instances of your application on multiple machines to scale up to high-volume production workloads.
-        Kafka Streams transparently handles the load balancing of multiple instances of the
same application by leveraging Kafka's parallelism model.
-    </p>
-    <p>
-        Some highlights of Kafka Streams:
-    </p>
-
-    <ul>
-        <li>Designed as a <b>simple and lightweight client library</b>,
which can be easily embedded in any Java application and integrated with any existing packaging,
deployment and operational tools that users have for their streaming applications.</li>
-        <li>Has <b>no external dependencies on systems other than Apache Kafka
itself</b> as the internal messaging layer; notably, it uses Kafka's partitioning model
to horizontally scale processing while maintaining strong ordering guarantees.</li>
-        <li>Supports <b>fault-tolerant local state</b>, which enables very
fast and efficient stateful operations like windowed joins and aggregations.</li>
-        <li>Supports <b>exactly-once</b> processing semantics to guarantee
that each record will be processed once and only once even when there is a failure on either
Streams clients or Kafka brokers in the middle of processing.</li>
-        <li>Employs <b>one-record-at-a-time processing</b> to achieve millisecond
processing latency, and supports <b>event-time based windowing operations</b>
with late arrival of records.</li>
-        <li>Offers necessary stream processing primitives, along with a <b>high-level
Streams DSL</b> and a <b>low-level Processor API</b>.</li>
+    <h1>Kafka Streams API</h1>
 
+    <h3 style="max-width: 75rem;">The easiest way to write mission-critical real-time
applications and microservices with all the benefits of Kafka's server-side cluster technology.</h3>
+
+    <div class="hero">
+        <div class="hero__diagram">
+            <img src="/{{version}}/images/streams-welcome.png" />
+        </div>
+        <div class="hero__cta">
+            <a style="display: none;" href="/{{version}}/documentation/streams/tutorial"
class="btn">Write your first app</a>
+            <a href="/{{version}}/documentation/streams/quickstart" class="btn">Play
with demo app</a>
+        </div>
+    </div>
+
+    <ul class="feature-list">
+        <li>Write standard Java applications</li>
+        <li>Exactly-once processing semantics</li>
+        <li>No seperate processing cluster required</li>
+        <li>Develop on Mac, Linux, Windows</li>
+        <li>Elastic, highly scalable, fault-tolerant</li>
+        <li>Deploy to containers, VMs, bare metal, cloud</li>
+        <li>Equally viable for small, medium, &amp; large use cases</li>
+        <li>Fully integrated with Kafka security</li>
     </ul>
 
+    <div class="cards">
+        <a class="card" href="/{{version}}/documentation/streams/developer-guide">
+            <img class="card__icon" src="/{{version}}/images/icons/documentation.png"
/>
+            <img class="card__icon card__icon--hover" src="/{{version}}/images/icons/documentation--white.png"
/>
+            <span class="card__label">Developer manual</span>
+        </a>
+        <a style="display: none;" class="card" href="/{{version}}/documentation/streams/tutorial">
+            <img class="card__icon" src="/{{version}}/images/icons/tutorials.png" />
+            <img class="card__icon card__icon--hover" src="/{{version}}/images/icons/tutorials--white.png"
/>
+            <span class="card__label">Tutorials</span>
+        </a>
+        <a class="card" href="/{{version}}/documentation/streams/core-concepts">
+            <img class="card__icon" src="/{{version}}/images/icons/architecture.png" />
+            <img class="card__icon card__icon--hover" src="/{{version}}/images/icons/architecture--white.png"
/>
+            <span class="card__label">Concepts</span>
+        </a>
+    </div>
+
+    <h3>Hello Kafka Streams</h3>
+    <p>The code example below implements a WordCount application that is elastic, highly
scalable, fault-tolerant, stateful, and ready to run in production at large scale</p>
+
+    <div class="code-example">
+        <div class="btn-group">
+            <a class="selected b-java-8" data-section="java-8">Java 8+</a>
+            <a class="b-java-7" data-section="java-7">Java 7</a>
+            <a class="b-scala" data-section="scala">Scala</a>
+        </div>
+
+        <div class="code-example__snippet b-java-8 selected">
+            <pre class="brush: java;">
+                import org.apache.kafka.common.serialization.Serdes;
+                import org.apache.kafka.streams.KafkaStreams;
+                import org.apache.kafka.streams.StreamsConfig;
+                import org.apache.kafka.streams.kstream.KStream;
+                import org.apache.kafka.streams.kstream.KStreamBuilder;
+                import org.apache.kafka.streams.kstream.KTable;
+
+                import java.util.Arrays;
+                import java.util.Properties;
+
+                public class WordCountApplication {
+
+                    public static void main(final String[] args) throws Exception {
+                        Properties config = new Properties();
+                        config.put(StreamsConfig.APPLICATION_ID_CONFIG, "wordcount-application");
+                        config.put(StreamsConfig.BOOTSTRAP_SERVERS_CONFIG, "kafka-broker1:9092");
+                        config.put(StreamsConfig.DEFAULT_KEY_SERDE_CLASS_CONFIG, Serdes.String().getClass());
+                        config.put(StreamsConfig.DEFAULT_VALUE_SERDE_CLASS_CONFIG, Serdes.String().getClass());
+
+                        KStreamBuilder builder = new KStreamBuilder();
+                        KStream&lt;String, String&gt; textLines = builder.stream("TextLinesTopic");
+                        KTable&lt;String, Long&gt; wordCounts = textLines
+                            .flatMapValues(textLine -> Arrays.asList(textLine.toLowerCase().split("\\W+")))
+                            .groupBy((key, word) -> word)
+                            .count("Counts");
+                        wordCounts.to(Serdes.String(), Serdes.Long(), "WordsWithCountsTopic");
+
+                        KafkaStreams streams = new KafkaStreams(builder, config);
+                        streams.start();
+                    }
+
+                }
+            </pre>
+        </div>
+
+        <div class="code-example__snippet b-java-7">
+            <pre class="brush: java;">
+                import org.apache.kafka.common.serialization.Serdes;
+                import org.apache.kafka.streams.KafkaStreams;
+                import org.apache.kafka.streams.StreamsConfig;
+                import org.apache.kafka.streams.kstream.KStream;
+                import org.apache.kafka.streams.kstream.KStreamBuilder;
+                import org.apache.kafka.streams.kstream.KTable;
+                import org.apache.kafka.streams.kstream.KeyValueMapper;
+                import org.apache.kafka.streams.kstream.ValueMapper;
+
+                import java.util.Arrays;
+                import java.util.Properties;
+
+                public class WordCountApplication {
+
+                    public static void main(final String[] args) throws Exception {
+                        Properties config = new Properties();
+                        config.put(StreamsConfig.APPLICATION_ID_CONFIG, "wordcount-application");
+                        config.put(StreamsConfig.BOOTSTRAP_SERVERS_CONFIG, "kafka-broker1:9092");
+                        config.put(StreamsConfig.DEFAULT_KEY_SERDE_CLASS_CONFIG, Serdes.String().getClass());
+                        config.put(StreamsConfig.DEFAULT_VALUE_SERDE_CLASS_CONFIG, Serdes.String().getClass());
+
+                        KStreamBuilder builder = new KStreamBuilder();
+                        KStream&lt;String, String&gt; textLines = builder.stream("TextLinesTopic");
+                        KTable&lt;String, Long&gt; wordCounts = textLines
+                            .flatMapValues(new ValueMapper&lt;String, Iterable&lt;String&gt;&gt;()
{
+                                @Override
+                                public Iterable&lt;String&gt; apply(String textLine)
{
+                                    return Arrays.asList(textLine.toLowerCase().split("\\W+"));
+                                }
+                            })
+                            .groupBy(new KeyValueMapper&lt;String, String, String&gt;()
{
+                                @Override
+                                public String apply(String key, String word) {
+                                    return word;
+                                }
+                            })
+                            .count("Counts");
+                        wordCounts.to(Serdes.String(), Serdes.Long(), "WordsWithCountsTopic");
+
+                        KafkaStreams streams = new KafkaStreams(builder, config);
+                        streams.start();
+                    }
+
+                }
+            </pre>
+        </div>
+
+        <div class="code-example__snippet b-scala">
+            <pre class="brush: scala;">
+                import java.lang.Long
+                import java.util.Properties
+                import java.util.concurrent.TimeUnit
+
+                import org.apache.kafka.common.serialization._
+                import org.apache.kafka.streams._
+                import org.apache.kafka.streams.kstream.{KStream, KStreamBuilder, KTable}
+
+                import scala.collection.JavaConverters.asJavaIterableConverter
+
+                object WordCountApplication {
+
+                    def main(args: Array[String]) {
+                        val config: Properties = {
+                            val p = new Properties()
+                            p.put(StreamsConfig.APPLICATION_ID_CONFIG, "wordcount-application")
+                            p.put(StreamsConfig.BOOTSTRAP_SERVERS_CONFIG, "kafka-broker1:9092")
+                            p.put(StreamsConfig.DEFAULT_KEY_SERDE_CLASS_CONFIG, Serdes.String().getClass)
+                            p.put(StreamsConfig.DEFAULT_VALUE_SERDE_CLASS_CONFIG, Serdes.String().getClass)
+                            p
+                        }
+
+                        val builder: KStreamBuilder = new KStreamBuilder()
+                        val textLines: KStream[String, String] = builder.stream("TextLinesTopic")
+                        val wordCounts: KTable[String, Long] = textLines
+                            .flatMapValues(textLine => textLine.toLowerCase.split("\\W+").toIterable.asJava)
+                            .groupBy((_, word) => word)
+                            .count("Counts")
+                        wordCounts.to(Serdes.String(), Serdes.Long(), "WordsWithCountsTopic")
+
+                        val streams: KafkaStreams = new KafkaStreams(builder, config)
+                        streams.start()
+
+                        Runtime.getRuntime.addShutdownHook(new Thread(() => {
+                            streams.close(10, TimeUnit.SECONDS)
+                        }))
+                    }
+
+                }
+            </pre>
+        </div>
+    </div>
+
+    
+
     <div class="pagination">
         <a href="#" class="pagination__btn pagination__btn__prev pagination__btn--disabled">Previous</a>
         <a href="/{{version}}/documentation/streams/quickstart" class="pagination__btn
pagination__btn__next">Next</a>
@@ -87,6 +223,7 @@
     </div>
 </div>
 <!--#include virtual="../../includes/_footer.htm" -->
+
 <script>
 $(function() {
   // Show selected style on nav item
@@ -94,5 +231,12 @@ $(function() {
 
   // Display docs subnav items
   $('.b-nav__docs').parent().toggleClass('nav__item__with__subs--expanded');
+
+  // Show selected code example
+  $('.btn-group a').click(function(){
+      var targetClass = '.b-' + $(this).data().section;
+      $('.code-example__snippet, .btn-group a').removeClass('selected');
+      $(targetClass).addClass('selected');
+  });
 });
 </script>

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/0110/streams/quickstart.html
----------------------------------------------------------------------
diff --git a/0110/streams/quickstart.html b/0110/streams/quickstart.html
index a0e8273..1c45e16 100644
--- a/0110/streams/quickstart.html
+++ b/0110/streams/quickstart.html
@@ -227,7 +227,7 @@ console consumer, as described above).
 
  <div class="pagination">
         <a href="/{{version}}/documentation/streams" class="pagination__btn pagination__btn__prev">Previous</a>
-        <a href="/{{version}}/documentation/streams/core-concepts" class="pagination__btn
pagination__btn__next">Next</a>
+        <a href="/{{version}}/documentation/streams/developer-guide" class="pagination__btn
pagination__btn__next">Next</a>
     </div>
 </script>
 

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/0110/streams/upgrade-guide.html
----------------------------------------------------------------------
diff --git a/0110/streams/upgrade-guide.html b/0110/streams/upgrade-guide.html
index f2d9332..7f2c9f6 100644
--- a/0110/streams/upgrade-guide.html
+++ b/0110/streams/upgrade-guide.html
@@ -100,7 +100,7 @@
         <li> at-least-once (default): <code>[client.Id]-StreamThread-[sequence-number]</code>
</li>
         <li> exactly-once: <code>[client.Id]-StreamThread-[sequence-number]-[taskId]</code>
</li>
     </ul>
-    <p> <code>[client.Id]</code> is either set via Streams configuration
parameter <code>client.id<code> or defaults to <code>[application.id]-[processId]</code>
(<code>[processId]</code> is a random UUID). </p>
+    <p> <code>[client.Id]</code> is either set via Streams configuration
parameter <code>client.id</code> or defaults to <code>[application.id]-[processId]</code>
(<code>[processId]</code> is a random UUID). </p>
 
     <h3><a id="streams_api_changes_01021" href="#streams_api_changes_01021">Notable
changes in 0.10.2.1</a></h3>
 
@@ -218,7 +218,7 @@
     </ul>
 
     <div class="pagination">
-        <a href="/{{version}}/documentation/streams/developer-guide" class="pagination__btn
pagination__btn__prev">Previous</a>
+        <a href="/{{version}}/documentation/streams/architecture" class="pagination__btn
pagination__btn__prev">Previous</a>
         <a href="#" class="pagination__btn pagination__btn__next pagination__btn--disabled">Next</a>
     </div>
 </script>
@@ -231,7 +231,7 @@
         <!--#include virtual="../../includes/_docs_banner.htm" -->
         <ul class="breadcrumbs">
             <li><a href="/documentation">Documentation</a></li>
-            <li><a href="/documentation/streams">Streams</a></li>
+            <li><a href="/documentation/streams">Kafka Streams API</a></li>
         </ul>
         <div class="p-content"></div>
     </div>

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/css/styles.css
----------------------------------------------------------------------
diff --git a/css/styles.css b/css/styles.css
index f98b70f..e27534b 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -9,7 +9,7 @@ body {
 	display:flex;
 	flex-direction: column;
 	min-width: 32rem;
-	font-size: 1.4rem;
+	font-size: 1.5rem;
 	line-height: 1.8;
 	font-family: 'Roboto', sans-serif;
 	margin: 0;
@@ -34,7 +34,7 @@ code {
 }
 code b, pre b,
 h1, h2, h3, h4 {
-	line-height: 1.2;
+	line-height: 1.4;
 }
 h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
 	color: #000000;
@@ -86,6 +86,7 @@ img {
 	text-align: center;
 	text-transform: capitalize;
 	padding: .9rem 2rem;
+	box-sizing: border-box;
 }
 .btn--secondary {
 	color: #0B6D88;
@@ -96,9 +97,38 @@ img {
 	padding: .5rem 1rem;
 }
 .btn:hover {
-	background-color: #0C637B;
+	background-color: #888888;
+	border-color: #888888;
 	color: #FFFFFF;
 }
+.btn-group a {
+    border: 1px solid #000000;
+    margin: 0;
+    float: left;
+    min-width: 10rem;
+    text-align: center;
+	height: 2.9rem;
+	line-height: 2.9rem;
+    margin-left: -.1rem;
+    color: #000000;
+}
+.btn-group a:hover {
+	cursor: pointer;
+	border-color: #888888;
+	background-color: #888888;
+	color: #FFFFFF;
+}
+.btn-group a:first-of-type {
+	border-radius: .2rem 0 0 .2rem;
+}
+.btn-group a:last-of-type {
+	border-radius: 0 .2rem .2rem 0;
+}
+.btn-group .selected {
+	background-color: #000000;
+	color: #ffffff;
+}
+
 ul {
 	padding-left: 2rem;
 	margin:1rem 0 1rem 0;
@@ -551,6 +581,122 @@ nav .btn {
 	opacity: .2;
 }
 
+
+/* Doc landing page */
+.hero {
+	margin: 6rem 0 5rem;
+	display: flex;
+	justify-content: space-around;
+}
+.hero__diagram {
+	max-width: 50rem;
+}
+.hero__cta {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: flex-end;
+	flex-basis: 25rem;
+	flex-shrink: 0;
+    padding-bottom: 4rem;
+}
+.hero__cta .btn {
+	height: 5.8rem;
+	width: 25rem;
+	font-size: 2rem;
+    font-weight: 700;
+	margin-top: 1rem;
+}
+.cards {
+	display: flex;
+	height: 16rem;
+	max-width: 92rem;
+	margin-top: 6rem;
+	margin-bottom: 8rem;
+}
+.card {
+	flex: 1;
+	margin-right: 2rem;
+	border: .2rem solid #000000;
+	border-radius: .4rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+}
+.card:hover {
+	border-color: #888888;
+	background: #888888 url('/images/icons/slash--white.png') no-repeat .5rem .5rem;
+	background-size: 2.5rem 2.4rem;
+}
+.cards .card:last-of-type {
+	margin-right: 0;
+}
+.card__icon, .card__label {
+	display: flex;
+}
+.card__icon {
+	width: 8.1rem
+}
+.card__icon--hover {
+	display: none;
+}
+.card__label {
+	margin-top: 1rem;
+	color: #000000;
+	text-transform: uppercase;
+}
+.card:hover .card__label {
+    color: #FFFFFF;
+}
+.card:hover .card__icon {
+	display: none;
+}
+.card:hover .card__icon--hover {
+	display: flex;
+}
+
+.code-example {
+	border: .2rem solid;
+	padding: 2rem;
+	max-width: 92rem;
+	box-sizing: border-box;
+}
+.code-example .btn-group {
+	display: inline-block;
+	margin-bottom: 2rem;
+}
+.code-example__snippet {
+	display: none;
+}
+.code-example .selected {
+	display: block;
+}
+.feature-list {
+	list-style: none;
+	padding: 0;
+	display: block;
+	overflow: hidden;
+}
+.feature-list li {
+	float: left;
+	width: 50%;
+	line-height: 3.2rem;
+	margin-bottom: 1rem;
+}
+.feature-list li::before {
+	content: '';
+	display: block;
+	height: 2.8rem;
+	width: 2.8rem;
+	border: .2rem solid;
+	border-radius: 2rem;
+	float: left;
+	margin-right: .8rem;
+	background-image: url('/images/icons/check.png');
+	background-size: contain;
+}
+
 /* Responsive styles */
 @media only screen and (max-width: 1240px) {
 	.main {
@@ -563,6 +709,19 @@ nav .btn {
 	}
 }
 
+@media only screen and (max-width: 1125px) {
+	.hero {
+		justify-content: flex-start;
+	}
+	.hero__diagram {
+		max-width: 42rem;
+		margin-right: 4rem;
+	}
+	.feature-list li {
+		width: 100%;
+	}
+}
+
 @media only screen and (max-width: 1035px) {
 	.desc {
 		margin-left: 0;
@@ -590,6 +749,28 @@ nav .btn {
 	}
 }
 
+@media only screen and (max-width: 950px) {
+	.hero {
+		flex-direction: column;
+	}
+	.hero__diagram {
+		margin: 0;
+		max-width: 100%;
+	}
+	.hero__cta {
+		flex-direction: row;
+		justify-content: center;
+		flex-basis: inherit;
+    	margin-top: 4rem;
+	}
+	.hero__cta .btn:first-of-type {
+		margin-right: 1rem;
+	}
+	.card {
+		margin-right: 1rem;
+	}
+}
+
 @media only screen and (max-width: 800px) {
 	.desc-item,
 	.desc-item:first-of-type {
@@ -610,6 +791,32 @@ nav .btn {
 	.footer__legal__two {
 		display:block;
 	}
+	.hero__cta .btn {
+		font-size: 1.5rem;
+		font-weight: 400;
+		height: auto;
+	}
+
+	.cards {
+		flex-direction: column;
+		margin-top: 4rem;
+		height: auto;
+		margin-bottom: 4rem;
+	}
+	.card {
+		margin-right: 0;
+		margin-bottom: 1rem;
+		min-height: 10rem;
+		flex-direction: row;
+		justify-content: flex-start;
+	}
+	.card__icon {
+		width: 7rem;
+		margin: 0 2rem 0 2rem;
+	}
+	.card__label {
+		margin: 0;s
+	}
 }
 
 @media only screen and (max-width: 650px) {
@@ -729,4 +936,34 @@ nav .btn {
     	left: auto !important;
 		margin-bottom: 2rem;
 	}
+
+	.btn-group a {
+		min-width: 0;
+		padding: 0 1rem;
+	}
+
+	.hero {
+		margin-bottom: 0;
+	}
+
+	.feature-list li {
+		line-height: 2.2rem;
+	}
+
+	.feature-list li:before {
+		height: 2rem;
+		width: 2rem;
+	}
+}
+
+@media only screen and (max-width: 390px) {
+	.hero__cta {
+		flex-direction: column;
+	}
+	.hero__cta .btn {
+		width: 100%;
+	}
+	.hero__cta .btn:first-of-type {
+		margin-right: 0;
+	}
 }

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/images/icons/check.png
----------------------------------------------------------------------
diff --git a/images/icons/check.png b/images/icons/check.png
new file mode 100644
index 0000000..2ae3931
Binary files /dev/null and b/images/icons/check.png differ

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/images/icons/slash--white.png
----------------------------------------------------------------------
diff --git a/images/icons/slash--white.png b/images/icons/slash--white.png
new file mode 100644
index 0000000..898e28f
Binary files /dev/null and b/images/icons/slash--white.png differ

http://git-wip-us.apache.org/repos/asf/kafka-site/blob/279d6b5e/images/icons/slash.png
----------------------------------------------------------------------
diff --git a/images/icons/slash.png b/images/icons/slash.png
new file mode 100644
index 0000000..edad353
Binary files /dev/null and b/images/icons/slash.png differ


Mime
View raw message