You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@kafka.apache.org by gu...@apache.org on 2017/10/09 17:05:09 UTC
kafka-site git commit: Redesign of Streams page - includes video &
customer logos
Repository: kafka-site
Updated Branches:
refs/heads/asf-site 450fdd86e -> 863f436ef
Redesign of Streams page - includes video & customer logos
derrickdoo Please review.
Author: Manjula K <ma...@kafka-summit.org>
Reviewers: Guozhang Wang <wa...@gmail.com>
Closes #92 from manjuapu/asf-site
Project: http://git-wip-us.apache.org/repos/asf/kafka-site/repo
Commit: http://git-wip-us.apache.org/repos/asf/kafka-site/commit/863f436e
Tree: http://git-wip-us.apache.org/repos/asf/kafka-site/tree/863f436e
Diff: http://git-wip-us.apache.org/repos/asf/kafka-site/diff/863f436e
Branch: refs/heads/asf-site
Commit: 863f436ef258475f41a293fc548606104e1b7695
Parents: 450fdd8
Author: Manjula K <ma...@kafka-summit.org>
Authored: Mon Oct 9 10:05:06 2017 -0700
Committer: Guozhang Wang <wa...@gmail.com>
Committed: Mon Oct 9 10:05:06 2017 -0700
----------------------------------------------------------------------
0110/streams/index.html | 558 ++++++------
css/styles.css | 1824 +++++++++++++++++++++++---------------
css/syntax-highlighting.css | 8 +
images/powered-by/line.svg | 15 +
index.html | 2 +-
5 files changed, 1417 insertions(+), 990 deletions(-)
----------------------------------------------------------------------
http://git-wip-us.apache.org/repos/asf/kafka-site/blob/863f436e/0110/streams/index.html
----------------------------------------------------------------------
diff --git a/0110/streams/index.html b/0110/streams/index.html
index 919c60b..20e162d 100644
--- a/0110/streams/index.html
+++ b/0110/streams/index.html
@@ -1,275 +1,311 @@
<!--
- Licensed to the Apache Software Foundation (ASF) under one or more
- contributor license agreements. See the NOTICE file distributed with
- this work for additional information regarding copyright ownership.
- The ASF licenses this file to You under the Apache License, Version 2.0
- (the "License"); you may not use this file except in compliance with
- the License. You may obtain a copy of the License at
-
- http://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in writing, software
- distributed under the License is distributed on an "AS IS" BASIS,
- WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing permissions and
- limitations under the License.
--->
-
-<script><!--#include virtual="../js/templateData.js" --></script>
-
+ Licensed to the Apache Software Foundation (ASF) under one or more
+ contributor license agreements. See the NOTICE file distributed with
+ this work for additional information regarding copyright ownership.
+ The ASF licenses this file to You under the Apache License, Version 2.0
+ (the "License"); you may not use this file except in compliance with
+ the License. You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+ -->
+<script>
+ <!--#include virtual="../js/templateData.js" -->
+</script>
<script id="streams-template" type="text/x-handlebars-template">
- <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" />
+ <h1>Kafka Streams API</h1>
+ <div class="sub-nav-sticky">
+ <div class="sticky-top">
+ <div style="height:35px">
+ <a class="active-menu-item" href="#">Introduction</a>
+ <a href="/{{version}}/documentation/streams/developer-guide">Developers Guide</a>
+ <a href="/{{version}}/documentation/streams/core-concepts">Concepts</a>
+ <a href="/{{version}}/documentation/streams/quickstart">Run Demo App</a>
+ <a href="/{{version}}/documentation/streams/tutorial">Tutorial: Write App</a>
</div>
- <div class="hero__cta">
- <a 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, & 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 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>
+
</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<String, String> textLines = builder.stream("TextLinesTopic");
- KTable<String, Long> 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>
+ <h3 class="streams_intro">The easiest way to write mission-critical real-time applications and microservices</h3>
+ <p class="streams__description">Kafka Streams is a client library for building applications and microservices, where the input and output data are stored in Kafka clusters. It combines the simplicity of writing and deploying standard Java and Scala applications on the client side with the benefits of Kafka's server-side cluster technology.</p>
+ <div class="video__series__grid">
+ <div class="yt__video__block">
+ <div class="yt__video__inner__block">
+ <iframe class="yt_series video_1 active" style="display:block" src="https://www.youtube.com/embed/Z3JKCLG3VP4?&modestbranding=1&controls=2&showinfo=1" frameborder="0" allowfullscreen></iframe>
+ <iframe class="yt_series video_2" src="https://www.youtube.com/embed/LxxeXI1mPKo?&modestbranding=1&controls=2&showinfo=1" frameborder="0" allowfullscreen></iframe>
+ <iframe class="yt_series video_3" src="https://www.youtube.com/embed/7JYEEx7SBuE?&modestbranding=1&controls=2&showinfo=1" frameborder="0" allowfullscreen></iframe>
+ <iframe class="yt_series video_4" src="https://www.youtube.com/embed/3kJgYIkAeHs?&modestbranding=1&controls=2&showinfo=1" frameborder="0" allowfullscreen></iframe>
+ </div>
</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<String, String> textLines = builder.stream("TextLinesTopic");
- KTable<String, Long> wordCounts = textLines
- .flatMapValues(new ValueMapper<String, Iterable<String>>() {
- @Override
- public Iterable<String> apply(String textLine) {
- return Arrays.asList(textLine.toLowerCase().split("\\W+"));
- }
- })
- .groupBy(new KeyValueMapper<String, String, String>() {
- @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 class="video__block">
+ <h3>TOUR OF THE STREAMS API</h3>
+ <div class="video__list">
+ <p class="video__item active" onclick="$('.video__item').removeClass('active'); $(this).addClass('active');$('.yt_series').hide();$('.video_1').show();">
+ <span class="number">1</span><span class="video__text">Intro to Streams</span>
+ </p>
+ <p class="video__item" onclick="$('.video__item').removeClass('active'); $(this).addClass('active');$('.yt_series').hide();$('.video_2').show();">
+ <span class="number">2</span><span class="video__text">Creating a Streams Application</span>
+ </p>
+ <p class="video__item" onclick="$('.video__item').removeClass('active'); $(this).addClass('active');$('.yt_series').hide();$('.video_3').show();">
+ <span class="number">3</span><span class="video__text">Transforming Data Pt. 1</span>
+ </p>
+ <p class="video__item" onclick="$('.video__item').removeClass('active'); $(this).addClass('active');$('.yt_series').hide();$('.video_4').show();">
+ <span class="number">4</span><span class="video__text">Transforming Data Pt. 11</span>
+ </p>
+ </div>
</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>
- <h3 class="customer-title">See how Kafka Streams is being used</h3>
- <div class="customer__cards">
- <div class="customer__card">
- <div class="customer__card__icon">
- <img src="/{{version}}/images/icons/NYT.jpg" style="max-width:35%">
- </div>
- <span class="customer__card__label">The New York Times uses Apache Kafka and the Kafka Streams API to store and distribute, in real-time, published content to the various applications and systems that make it available to the readers.</span>
- <a href="https://www.confluent.io/blog/publishing-apache-kafka-new-york-times/">Learn More</a>
-
+ </div>
+ <hr class="separator">
+ <div class="use-item-section">
+ <div class="use__list__sec">
+ <h3>Why you'll love using Kafka Streams!</h3>
+ <ul class="use-feature-list">
+ <li>Elastic, highly scalable, fault-tolerant</li>
+ <li>Deploy to containers, VMs, bare metal, cloud</li>
+ <li>Equally viable for small, medium, & large use cases</li>
+ <li>Fully integrated with Kafka security</li>
+ <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>
+
+ </ul>
+ </div>
+ <div class="first__app__cta">
+ <a href="/{{version}}/documentation/streams/tutorial" class="first__app__btn">Write your first app</a>
+ </div>
+ </div>
+ <hr class="separator">
+ <h3 class="stream__text">Streams API use cases</h3>
+ <div class="customers__grid">
+ <div class="customer__grid">
+ <div class="customer__item streams_logo_grid streams__ny__grid">
+ <a href="https://www.nytimes.com" target="_blank" class="grid__logo__link">
+ <span class="grid__item__logo" style="background-image: url('/images/powered-by/NYT.jpg');"></span>
+ </a>
+ <p class="grid__item__customer__description">
+ <a href="https://www.confluent.io/blog/publishing-apache-kafka-new-york-times/">The New York Times uses Apache Kafka </a>and the Kafka Streams API to store and distribute, in real-time, published content to the various applications and systems that make it available to the readers.
+ </p>
+ </div>
+ </div>
+ <div class="customer__grid">
+ <div class="customer__item streams_logo_grid streams__line__grid">
+ <a href="https://linecorp.com/" target="_blank" class="grid__logo__link">
+ <span class="grid__item__logo" style="background-image: url('/images/powered-by/line.svg');width:9rem"></span>
+ </a>
+ <p class="grid__item__customer__description">LINE uses Apache Kafka as a central datahub for our services to communicate to one another. Hundreds of billions of messages are produced daily and are used to execute various business logic, threat detection, search indexing and data analysis. LINE leverages Kafka Streams to reliably transform and filter topics enabling sub topics consumers can efficiently consume, meanwhile retaining easy maintainability thanks to its sophisticated yet minimal code base.</p>
+ </div>
+ </div>
+ <div class="customer__grid">
+ <div class="customer__item streams_logo_grid streams__zalando__grid">
+ <a href="http://www.zalando.com" target="_blank" class="grid__logo__link">
+ <span class="grid__item__logo" style="background-image: url('/images/powered-by/zalando.jpg');"></span>
+ </a>
+ <p class="grid__item__customer__description">As the leading online fashion retailer in Europe, Zalando uses Kafka as an ESB (Enterprise Service Bus), which helps us in transitioning from a monolithic to a micro services architecture. Using Kafka for processing
+ <a href="" 'https:="" kafka-summit.org="" sessions="" using-kstreams-ktables-calculate-real-time-domain-rankings="" '="" target="blank'"> event streams</a> enables our technical team to do near-real time business intelligence.
+ </p>
+ </div>
+ </div>
+ <div class="customer__grid">
+ <div class="customer__item streams_logo_grid streams__rabobank__grid">
+ <a href="https://www.rabobank.com" target="_blank" class="grid__logo__link">
+ <span class="grid__item__logo" style="background-image: url('/images/powered-by/rabobank.jpg');"></span>
+ </a>
+ <p class="grid__item__customer__description">Rabobank is one of the 3 largest banks in the Netherlands. Its digital nervous system, the Business Event Bus, is powered by Apache Kafka. It is used by an increasing amount of financial processes and services, one which is Rabo Alerts. This service alerts customers in real-time upon financial events and is built using Kafka Streams.</p>
+ </div>
+ </div>
</div>
- <div class="customer__card customer-right" >
- <div class="customer__card__icon">
- <img style="max-width:60%" src="../../images/powered-by/rabobank.jpg">
- </div>
- <span class="customer__card__label">Rabobank is one of the 3 largest banks in the Netherlands. Its digital nervous system, the Business Event Bus, is powered by Apache Kafka. It is used by an increasing amount of financial processes and services, one which is Rabo Alerts. This service alerts customers in real-time upon financial events and is built using Kafka Streams.
- </span>
- <a href="https://www.confluent.io/blog/real-time-financial-alerts-rabobank-apache-kafkas-streams-api/">Learn More</a>
- </div>
- </div>
- <div class="customer_cards_2">
- <div class="customer__card customer_z">
- <div class="customer__card__icon" >
- <img style="max-width:60%" src="../../images/powered-by/zalando.jpg">
- </div>
- <span class="customer__card__label">As the leading online fashion retailer in Europe, Zalando uses Apache Kafka as an ESB (Enterprise Service Bus), which helps us in transitioning from a monolithic to a micro services architecture. Using Kafka for processing event streams enables our technical team to do near-real time business intelligence.</span>
- <a href="https://kafka-summit.org/sessions/using-kstreams-ktables-calculate-real-time-domain-rankings/">Learn More</a>
- </div>
- <div class="customer__card">
- <div class="customer__card__icon green_card">
- <img src="/{{version}}/images/icons/line.png">
- </div>
- <span class="customer__card__label">LINE uses Apache Kafka as a central datahub for our services to communicate to one another. Hundreds of billions of messages are produced daily and are used to execute various business logic, threat detection, search indexing and data analysis. LINE leverages Kafka Streams to reliably transform and filter topics enabling sub topics consumers can efficiently consume, meanwhile retaining easy maintainability thanks to its sophisticated yet minimal code base.</span>
- <a href="https://engineering.linecorp.com/en/blog/detail/80">Learn More</a>
- </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>
- </div>
+ <h3 style="margin-top: 5.3rem;">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<String, String> textLines = builder.stream("TextLinesTopic");
+ KTable<String, Long> 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<String, String> textLines = builder.stream("TextLinesTopic");
+ KTable<String, Long> wordCounts = textLines
+ .flatMapValues(new ValueMapper<String, Iterable<String>>() {
+ @Override
+ public Iterable<String> apply(String textLine) {
+ return Arrays.asList(textLine.toLowerCase().split("\\W+"));
+ }
+ })
+ .groupBy(new KeyValueMapper<String, String, String>() {
+ @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>
+ </div>
</script>
-
<!--#include virtual="../../includes/_header.htm" -->
<!--#include virtual="../../includes/_top.htm" -->
<div class="content documentation documentation--current">
- <!--#include virtual="../../includes/_nav.htm" -->
- <div class="right">
- <!--#include virtual="../../includes/_docs_banner.htm" -->
- <ul class="breadcrumbs">
- <li><a href="/documentation">Documentation</a></li>
- </ul>
- <div class="p-streams"></div>
- </div>
+ <!--#include virtual="../../includes/_nav.htm" -->
+ <div class="right">
+ <!--#include virtual="../../includes/_docs_banner.htm" -->
+ <ul class="breadcrumbs">
+ <li><a href="/documentation">Documentation</a>
+ </li>
+ </ul>
+ <div class="p-streams"></div>
+ </div>
</div>
<!--#include virtual="../../includes/_footer.htm" -->
-
<script>
-$(function() {
- // Show selected style on nav item
- $('.b-nav__streams').addClass('selected');
-
- // 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>
+ $(function() {
+ // Show selected style on nav item
+ $('.b-nav__streams').addClass('selected');
+
+
+ //sticky secondary nav
+ var $navbar = $(".sub-nav-sticky"),
+ y_pos = $navbar.offset().top,
+ height = $navbar.height();
+
+ $(window).scroll(function() {
+ var scrollTop = $(window).scrollTop();
+
+ if (scrollTop > y_pos - height) {
+ $navbar.addClass("navbar-fixed")
+ } else if (scrollTop <= y_pos) {
+ $navbar.removeClass("navbar-fixed")
+ }
+ });
+
+ // 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>
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/kafka-site/blob/863f436e/css/styles.css
----------------------------------------------------------------------
diff --git a/css/styles.css b/css/styles.css
index 8e3deb9..81ec99f 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1,105 +1,118 @@
/* globals */
-html, body {
- height: 100%;
+
+html,
+body {
+ height: 100%;
}
html {
- font-size: 62.5%;
+ font-size: 62.5%;
}
body {
- display:flex;
- flex-direction: column;
- min-width: 32rem;
- font-size: 1.5rem;
- line-height: 1.8;
- font-family: 'Roboto', sans-serif;
- margin: 0;
+ display: flex;
+ flex-direction: column;
+ min-width: 32rem;
+ font-size: 1.5rem;
+ line-height: 1.8;
+ font-family: 'Roboto', sans-serif;
+ margin: 0;
}
-code, pre {
- font-family: Menlo, Consolas, monospace;
+code,
+pre {
+ font-family: Menlo, Consolas, monospace;
}
pre {
- border-style: solid;
- border-color: #E5E5E5;
- border-width: .1rem .5rem;
- overflow-x: scroll;
- padding: 1rem 2rem 1.5rem;
- color: #444444;
- margin: 2rem 0;
+ border-style: solid;
+ border-color: #E5E5E5;
+ border-width: .1rem .5rem;
+ overflow-x: scroll;
+ padding: 1rem 2rem 1.5rem;
+ color: #444444;
+ margin: 2rem 0;
}
code {
- border: .1rem solid #E5E5E5;
- margin: 0 .3rem;
- padding: .2rem .4rem;
- background-color: #F4F9F9;
-}
-code b, pre b,
-h1, h2, h3, h4 {
- line-height: 1.4;
-}
-h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
- color: #000000;
+ border: .1rem solid #E5E5E5;
+ margin: 0 .3rem;
+ padding: .2rem .4rem;
+ background-color: #F4F9F9;
+}
+code b,
+pre b,
+h1,
+h2,
+h3,
+h4 {
+ line-height: 1.4;
+}
+h1 a,
+h2 a,
+h3 a,
+h4 a,
+h5 a,
+h6 a {
+ color: #000000;
}
h1 {
- font-size: 5.6rem;
- font-weight: 900;
- margin: 0;
+ font-size: 5.6rem;
+ font-weight: 900;
+ margin: 0;
}
h2 {
- text-transform: uppercase;
- font-size: 2rem;
- font-weight: 700;
- margin: 0;
+ text-transform: uppercase;
+ font-size: 2rem;
+ font-weight: 700;
+ margin: 0;
}
-h3, h4 {
- font-size: 2rem;
- font-weight: 700;
+h3,
+h4 {
+ font-size: 2rem;
+ font-weight: 700;
}
h5 {
- font-size: 1.6rem;
+ font-size: 1.6rem;
}
h3.bullet {
- margin-bottom: 1rem;
+ margin-bottom: 1rem;
}
h3.bullet::after {
- content: "";
- display: block;
- background-color: #000000;
- height: .2rem;
- width: 5rem;
+ content: "";
+ display: block;
+ background-color: #000000;
+ height: .2rem;
+ width: 5rem;
}
a {
- color: #0B6D88;
- text-decoration: none;
+ color: #0B6D88;
+ text-decoration: none;
}
a:hover {
- color: #0C637B;
+ color: #0C637B;
}
img {
- max-width: 100%;
+ max-width: 100%;
}
.btn {
- background-color: #0B6D88;
- color: #FFFFFF;
- border-radius: .2rem;
- -moz-border-radius: .2rem;
- -webkit-border-radius: .2rem;
- text-align: center;
- text-transform: capitalize;
- padding: .9rem 2rem;
- box-sizing: border-box;
+ background-color: #0B6D88;
+ color: #FFFFFF;
+ border-radius: .2rem;
+ -moz-border-radius: .2rem;
+ -webkit-border-radius: .2rem;
+ text-align: center;
+ text-transform: capitalize;
+ padding: .9rem 2rem;
+ box-sizing: border-box;
}
.btn--secondary {
- color: #0B6D88;
- border: .2rem solid #0B6D88;
- background-color: transparent;
+ color: #0B6D88;
+ border: .2rem solid #0B6D88;
+ background-color: transparent;
}
.btn--sm {
- padding: .5rem 1rem;
+ padding: .5rem 1rem;
}
.btn:hover {
- background-color: #888888;
- border-color: #888888;
- color: #FFFFFF;
+ background-color: #888888;
+ border-color: #888888;
+ color: #FFFFFF;
}
.btn-group a {
border: 1px solid #000000;
@@ -107,907 +120,908 @@ img {
float: left;
min-width: 10rem;
text-align: center;
- height: 2.9rem;
- line-height: 2.9rem;
+ 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;
+ cursor: pointer;
+ border-color: #888888;
+ background-color: #888888;
+ color: #FFFFFF;
}
.btn-group a:first-of-type {
- border-radius: .2rem 0 0 .2rem;
+ border-radius: .2rem 0 0 .2rem;
}
.btn-group a:last-of-type {
- border-radius: 0 .2rem .2rem 0;
+ border-radius: 0 .2rem .2rem 0;
}
.btn-group .selected {
- background-color: #000000;
- color: #ffffff;
+ background-color: #000000;
+ color: #ffffff;
}
-
ul {
- padding-left: 2rem;
- margin:1rem 0 1rem 0;
+ padding-left: 2rem;
+ margin: 1rem 0 1rem 0;
}
.toc {
- padding: 0;
- list-style: none;
- text-transform: uppercase;
- margin-bottom: 5rem;
+ padding: 0;
+ list-style: none;
+ text-transform: uppercase;
+ margin-bottom: 5rem;
}
.toc li {
- margin-bottom: .5rem;
+ margin-bottom: .5rem;
}
.toc > li {
- margin-bottom: .6rem;
+ margin-bottom: .6rem;
}
.toc a {
- color: #000000;
+ color: #000000;
}
.toc ul {
- padding: .5rem 1.7rem 0;
- text-transform: none;
- font-weight: 400;
- margin: 0 0 2rem;
+ padding: .5rem 1.7rem 0;
+ text-transform: none;
+ font-weight: 400;
+ margin: 0 0 2rem;
}
.toc a:hover,
.toc ul a {
- color: #0B6D88;
+ color: #0B6D88;
}
.toc ul ul {
- padding: 0 1.8rem;
- margin-bottom: 0;
+ padding: 0 1.8rem;
+ margin-bottom: 0;
}
ol.toc {
- list-style: decimal;
- padding: 0 0 0 2rem;
+ list-style: decimal;
+ padding: 0 0 0 2rem;
}
ol.toc > li {
- padding-left: .2rem;
+ padding-left: .2rem;
}
.data-table {
- display: block;
- border: none;
- border-collapse: collapse;
- width: 100%;
- overflow-x: scroll;
- margin: 2rem 0;
+ display: block;
+ border: none;
+ border-collapse: collapse;
+ width: 100%;
+ overflow-x: scroll;
+ margin: 2rem 0;
}
.data-table tbody {
- border-style: solid;
- border-color: #E5E5E5;
- border-width: 0 .5rem;
+ border-style: solid;
+ border-color: #E5E5E5;
+ border-width: 0 .5rem;
}
-.data-table td, .data-table th {
- border: .1rem solid #cccccc;
- padding: .5rem 1rem;
- min-width: 10rem;
+.data-table td,
+.data-table th {
+ border: .1rem solid #cccccc;
+ padding: .5rem 1rem;
+ min-width: 10rem;
}
.data-table th {
- text-align: left;
- background-color: #000000;
- border: .1rem solid #222222;
- color: #ffffff;
- font-weight: 400;
- padding: 1rem;
- text-transform: uppercase;
- overflow: hidden;
+ text-align: left;
+ background-color: #000000;
+ border: .1rem solid #222222;
+ color: #ffffff;
+ font-weight: 400;
+ padding: 1rem;
+ text-transform: uppercase;
+ overflow: hidden;
}
.data-table td {
- /* These are technically the same, but use both */
- overflow-wrap: break-word;
- word-wrap: break-word;
-
- -ms-word-break: break-all;
- /* This is the dangerous one in WebKit, as it breaks things wherever */
- word-break: break-all;
- /* Instead use this non-standard one: */
- word-break: break-word;
-
- /* Adds a hyphen where the word breaks, if supported (No Blink) */
- -ms-hyphens: auto;
- -moz-hyphens: auto;
- -webkit-hyphens: auto;
- hyphens: auto;
+ /* These are technically the same, but use both */
+
+ overflow-wrap: break-word;
+ word-wrap: break-word;
+ -ms-word-break: break-all;
+ /* This is the dangerous one in WebKit, as it breaks things wherever */
+
+ word-break: break-all;
+ /* Instead use this non-standard one: */
+
+ word-break: break-word;
+ /* Adds a hyphen where the word breaks, if supported (No Blink) */
+
+ -ms-hyphens: auto;
+ -moz-hyphens: auto;
+ -webkit-hyphens: auto;
+ hyphens: auto;
}
.data-table tr td:first-of-type {
- -ms-hyphens: none;
- -moz-hyphens: none;
- -webkit-hyphens: none;
- hyphens: none;
+ -ms-hyphens: none;
+ -moz-hyphens: none;
+ -webkit-hyphens: none;
+ hyphens: none;
}
-
/* helper classes */
+
.centered {
- display: block;
- margin: auto;
+ display: block;
+ margin: auto;
}
.pb-10 {
- display: inline-block;
- padding-bottom: 1rem;
+ display: inline-block;
+ padding-bottom: 1rem;
}
-
/* components */
+
.main {
- margin: 0 auto;
- width: 120rem;
- padding: 0 2rem 8rem 2rem;
+ margin: 0 auto;
+ width: 120rem;
+ padding: 0 2rem 8rem 2rem;
}
.header {
- padding: 2rem 0 1rem;
- background-color: #FFFFFF;
+ padding: 2rem 0 1rem;
+ background-color: #FFFFFF;
}
.footer {
- flex: 1;
- position: relative;
+ flex: 1;
+ position: relative;
}
.footer__inner {
- position: absolute;
- bottom: 0;
- left: 0;
- width: 100%;
- border-top: .1rem solid #dedede;
- font-size: .9rem;
- line-height: 1.2rem;
- color: #888888;
- padding: 2rem 0;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ border-top: .1rem solid #dedede;
+ font-size: .9rem;
+ line-height: 1.2rem;
+ color: #888888;
+ padding: 2rem 0;
}
.footer__legal {
- margin: 0 2rem;
+ margin: 0 2rem;
}
.footer__legal a {
- color: #666666;
+ color: #666666;
}
.sub-header {
- overflow: hidden;
- margin: 3rem 0 1rem;
+ overflow: hidden;
+ margin: 3rem 0 1rem;
}
.breadcrumbs {
- list-style: none;
+ list-style: none;
padding: 0;
text-transform: uppercase;
- margin-bottom: 0;
- display: flex;
+ margin-bottom: 0;
+ display: flex;
}
.breadcrumbs li {
- display: flex;
- align-items: center;
- margin-right: .8rem;
+ display: flex;
+ align-items: center;
+ margin-right: .8rem;
}
.breadcrumbs li::after {
- content: '\00BB';
+ content: '\00BB';
margin-left: .6rem;
- height: 1rem;
+ height: 1rem;
line-height: .9rem;
}
.breadcrumbs a {
- color: #000000;
+ color: #000000;
}
.breadcrumbs a:hover {
- color: #0B6D88;
+ color: #0B6D88;
}
.content {
- margin-top: 3rem;
+ margin-top: 3rem;
}
nav {
- float: left;
- text-transform: uppercase;
- width: 16rem;
+ float: left;
+ text-transform: uppercase;
+ width: 16rem;
}
.nav__item,
.nav__item__with__subs {
- color: #000000;
- border-right: 2px solid #000000;
- display: block;
- padding-top: 1.5rem;
- position: relative;
+ color: #000000;
+ border-right: 2px solid #000000;
+ display: block;
+ padding-top: 1.5rem;
+ position: relative;
}
.nav__item__with__subs {
- padding-top: 0;
+ padding-top: 0;
}
.nav__sub__anchor,
.nav__sub__item {
- border-right: none;
+ border-right: none;
}
.nav__sub__item {
- display: none;
- color: #888888;
- font-size: 1.2rem;
- text-transform: capitalize;
+ display: none;
+ color: #888888;
+ font-size: 1.2rem;
+ text-transform: capitalize;
}
.nav__item__with__subs--expanded .nav__sub__item {
- display: block;
+ display: block;
}
.nav__item:first-of-type {
- padding-top: 0;
+ padding-top: 0;
}
.nav__item__with__subs .nav__item:first-of-type {
- padding-top: 1.5rem;
+ padding-top: 1.5rem;
}
.nav__item::after {
- content: "";
- display: block;
- height: 1.1rem;
- width: 1.1rem;
- border-radius: 1rem;
- -moz-border-radius: 1rem;
- -webkit-border-radius: 1rem;
- border: 2px solid #000000;
- background: #FFFFFF;
- position: absolute;
- right: -.9rem;
- top: 1.7rem;
- opacity: 0;
- transition: opacity .2s ease-out;
+ content: "";
+ display: block;
+ height: 1.1rem;
+ width: 1.1rem;
+ border-radius: 1rem;
+ -moz-border-radius: 1rem;
+ -webkit-border-radius: 1rem;
+ border: 2px solid #000000;
+ background: #FFFFFF;
+ position: absolute;
+ right: -.9rem;
+ top: 1.7rem;
+ opacity: 0;
+ transition: opacity .2s ease-out;
}
.nav__item.selected::after {
- opacity: 1;
+ opacity: 1;
}
.nav__item.selected:first-of-type::after {
- top: .2rem;
+ top: .2rem;
}
.nav__item__with__subs .nav__item:first-of-type::after {
- top: 1.7rem;
+ top: 1.7rem;
}
nav .btn {
- display: block;
- margin-top: 4rem;
+ display: block;
+ margin-top: 4rem;
}
.social-links {
- margin: 2rem 0 3rem;
- font-size: 1.2rem;
+ margin: 2rem 0 3rem;
+ font-size: 1.2rem;
}
.twitter {
- color: #888888;
- text-transform: none;
- background-image: url(/images/twitter_logo.png);
- background-size: contain;
- background-repeat: no-repeat;
- padding-left: 1.9rem;
+ color: #888888;
+ text-transform: none;
+ background-image: url(/images/twitter_logo.png);
+ background-size: contain;
+ background-repeat: no-repeat;
+ padding-left: 1.9rem;
}
.twitter:hover {
- color: #888888;
- opacity: 0.8;
+ color: #888888;
+ opacity: 0.8;
}
.right {
- margin-left: 22rem;
- min-height: 60rem;
- overflow: hidden;
+ margin-left: 22rem;
+ min-height: 60rem;
+ overflow: hidden;
}
.apache-feather {
- position: absolute;
- bottom: 2rem;
- right: 2rem;
-
+ position: absolute;
+ bottom: 2rem;
+ right: 2rem;
}
.apache-feather:hover {
- -webkit-animation-name: spin;
- -webkit-animation-duration: 200ms;
- -webkit-animation-iteration-count: infinite;
- -webkit-animation-timing-function: linear;
- -moz-animation-name: spin;
- -moz-animation-duration: 200ms;
- -moz-animation-iteration-count: infinite;
- -moz-animation-timing-function: linear;
- -ms-animation-name: spin;
- -ms-animation-duration: 200ms;
- -ms-animation-iteration-count: infinite;
- -ms-animation-timing-function: linear;
-
- animation-name: spin;
- animation-duration: 200ms;
- animation-iteration-count: infinite;
- animation-timing-function: linear;
+ -webkit-animation-name: spin;
+ -webkit-animation-duration: 200ms;
+ -webkit-animation-iteration-count: infinite;
+ -webkit-animation-timing-function: linear;
+ -moz-animation-name: spin;
+ -moz-animation-duration: 200ms;
+ -moz-animation-iteration-count: infinite;
+ -moz-animation-timing-function: linear;
+ -ms-animation-name: spin;
+ -ms-animation-duration: 200ms;
+ -ms-animation-iteration-count: infinite;
+ -ms-animation-timing-function: linear;
+ animation-name: spin;
+ animation-duration: 200ms;
+ animation-iteration-count: infinite;
+ animation-timing-function: linear;
}
-
-
@-ms-keyframes spin {
- from { -ms-transform: rotate(0deg); }
- to { -ms-transform: rotate(360deg); }
+ from {
+ -ms-transform: rotate(0deg);
+ }
+ to {
+ -ms-transform: rotate(360deg);
+ }
}
@-moz-keyframes spin {
- from { -moz-transform: rotate(0deg); }
- to { -moz-transform: rotate(360deg); }
+ from {
+ -moz-transform: rotate(0deg);
+ }
+ to {
+ -moz-transform: rotate(360deg);
+ }
}
@-webkit-keyframes spin {
- from { -webkit-transform: rotate(0deg); }
- to { -webkit-transform: rotate(360deg); }
+ from {
+ -webkit-transform: rotate(0deg);
+ }
+ to {
+ -webkit-transform: rotate(360deg);
+ }
}
@keyframes spin {
from {
- transform:rotate(0deg);
+ transform: rotate(0deg);
}
to {
- transform:rotate(360deg);
+ transform: rotate(360deg);
}
}
-
/* pages */
+
.index {
- text-align: center;
- padding-right: 25%;
+ text-align: center;
+ padding-right: 25%;
}
.desc {
- margin-left: 3rem;
- margin-bottom: 6rem;
- overflow: hidden;
+ margin-left: 3rem;
+ margin-bottom: 6rem;
+ overflow: hidden;
}
.desc-item {
- float: left;
- width: 24rem;
- margin-left: 4.2rem;
+ float: left;
+ width: 24rem;
+ margin-left: 4.2rem;
}
.desc-item:first-of-type {
- margin-left: 0;
+ margin-left: 0;
}
.desc-item h2,
.desc-item p {
- color: #000000;
+ color: #000000;
}
.desc-item p {
- margin: 0;
- width: 20rem;
+ margin: 0;
+ width: 20rem;
}
.desc-item__cta {
- margin-top: .5rem;
- display: block;
+ margin-top: .5rem;
+ display: block;
}
.desc-item p:before {
- content: "";
- border-top: 2px solid #000000;
- display: block;
- -webkit-transition: width .5s;
+ content: "";
+ border-top: 2px solid #000000;
+ display: block;
+ -webkit-transition: width .5s;
transition: width .5s;
- width: 5rem;
- margin: .2rem 0 1rem;
+ width: 5rem;
+ margin: .2rem 0 1rem;
}
.desc-item:hover p:before {
- border-color: #0C637B;
- width: 22rem;
+ border-color: #0C637B;
+ width: 22rem;
}
.desc-item:hover h2,
-.desc-item:hover p
- {
- color: #0C637B;
+.desc-item:hover p {
+ color: #0C637B;
}
.callout {
- background-color: #F0F0F0;
- padding: 1.5rem 2rem 3rem;
- width: 33rem;
- margin: 2rem auto 0;
- position: relative;
- text-align: center;
+ background-color: #F0F0F0;
+ padding: 1.5rem 2rem 3rem;
+ width: 33rem;
+ margin: 2rem auto 0;
+ position: relative;
+ text-align: center;
}
.callout--basic {
- width: auto;
+ width: auto;
}
.callout::before {
- content: "";
- width: 0;
- height: 0;
- border-style: solid;
- border-width: 8rem 0 0 5rem;
- border-color: transparent transparent transparent #F0F0F0;
- top: -6rem;
- right: 10rem;
- position: absolute;
- -ms-transform: rotate(-10deg);
- -webkit-transform: rotate(-10deg);
- transform: rotate(-10deg);
+ content: "";
+ width: 0;
+ height: 0;
+ border-style: solid;
+ border-width: 8rem 0 0 5rem;
+ border-color: transparent transparent transparent #F0F0F0;
+ top: -6rem;
+ right: 10rem;
+ position: absolute;
+ -ms-transform: rotate(-10deg);
+ -webkit-transform: rotate(-10deg);
+ transform: rotate(-10deg);
}
.callout--basic::before {
- display: none;
+ display: none;
}
.callout__action {
- display: inline-block;
- width: 10rem;
+ display: inline-block;
+ width: 10rem;
}
-
.documentation__banner {
- background-color: rgba(0,0,0,0.8);
- color: #ffffff;
- display: block;
- padding: 1.5rem 2rem;
- margin-bottom: 3rem
+ background-color: rgba(0, 0, 0, 0.8);
+ color: #ffffff;
+ display: block;
+ padding: 1.5rem 2rem;
+ margin-bottom: 3rem
}
-
.documentation__banner:hover {
- background-color: #888888;
- color: #ffffff;
- cursor: pointer;
+ background-color: #888888;
+ color: #ffffff;
+ cursor: pointer;
}
-
.documentation--current .documentation__banner {
- display: none;
+ display: none;
}
-
.grid {
- margin-top: 2rem;
+ margin-top: 2rem;
}
-
.grid__item {
- width: 20rem;
- margin: .5rem;
- border-radius: .4rem;
- overflow: hidden;
- border: 1px solid #888888;
+ width: 20rem;
+ margin: .5rem;
+ border-radius: .4rem;
+ overflow: hidden;
+ border: 1px solid #888888;
}
-
.grid__item__link {
- display: block;
- height: 8rem;
- margin-bottom: -.1rem;
- text-align: center;
- padding-top: 2rem;
+ display: block;
+ height: 8rem;
+ margin-bottom: -.1rem;
+ text-align: center;
+ padding-top: 2rem;
}
-
.grid__item__link:hover {
- opacity: .8;
+ opacity: .8;
}
-
.grid__item__logo {
- margin: auto;
- width: 16rem;
- height: 6rem;
- display: block;
- background-size: contain;
+ margin: auto;
+ width: 16rem;
+ height: 6rem;
+ display: block;
+ background-size: contain;
background-repeat: no-repeat;
background-position: center center;
}
-
.grid__item__description {
- margin: 0 2rem 2rem;
- padding-top: 2rem;
- border-top: 1px solid #888888;
+ margin: 0 2rem 2rem;
+ padding-top: 2rem;
+ border-top: 1px solid #888888;
}
-
.pagination {
- margin-top: 5rem;
- margin-bottom: 8rem;
- display: flex;
- justify-content: space-between;
+ margin-top: 5rem;
+ margin-bottom: 8rem;
+ display: flex;
+ justify-content: space-between;
}
-
.pagination__btn {
- border: .1rem solid #0B6D88;
- border-radius: .2rem;
- padding: .3rem;
- width: 8rem;
- display: flex;
- align-items: center;
- justify-content: center;
+ border: .1rem solid #0B6D88;
+ border-radius: .2rem;
+ padding: .3rem;
+ width: 8rem;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
-
.pagination__btn__next::after {
content: '\00BB';
margin-left: .6rem;
height: 1rem;
line-height: .9rem;
}
-
.pagination__btn__prev::before {
content: '\00AB';
margin-right: .6rem;
height: 1rem;
line-height: .9rem;
}
-
.pagination__btn:hover {
- opacity: .7;
+ opacity: .7;
}
-
.pagination__btn--disabled {
- opacity: .2;
+ opacity: .2;
}
-
-
/* Doc landing page */
+
.hero {
- margin: 6rem 0 5rem;
- display: flex;
- justify-content: space-around;
+ margin: 6rem 0 5rem;
+ display: flex;
+ justify-content: space-around;
}
.hero__diagram {
- max-width: 50rem;
+ max-width: 50rem;
}
.hero__cta {
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: flex-end;
- flex-basis: 25rem;
- flex-shrink: 0;
+ 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;
+ height: 5.8rem;
+ width: 25rem;
+ font-size: 2rem;
font-weight: 700;
- margin-top: 1rem;
+ margin-top: 1rem;
}
.cards {
- display: flex;
- height: 16rem;
- max-width: 92rem;
- margin-top: 6rem;
- margin-bottom: 8rem;
+ 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;
+ 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;
+ 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;
+ margin-right: 0;
}
-.card__icon, .card__label {
- display: flex;
+.card__icon,
+.card__label {
+ display: flex;
}
.card__icon {
- width: 8.1rem
+ width: 8.1rem
}
.card__icon--hover {
- display: none;
+ display: none;
}
.card__label {
- margin-top: 1rem;
- color: #000000;
- text-transform: uppercase;
+ margin-top: 1rem;
+ color: #000000;
+ text-transform: uppercase;
}
.card:hover .card__label {
color: #FFFFFF;
}
.card:hover .card__icon {
- display: none;
+ display: none;
}
.card:hover .card__icon--hover {
- display: flex;
+ display: flex;
}
-
.code-example {
- border: .2rem solid;
- padding: 2rem;
- max-width: 92rem;
- box-sizing: border-box;
+ border: .2rem solid;
+ padding: 2rem;
+ max-width: 92rem;
+ box-sizing: border-box;
}
.code-example .btn-group {
- display: inline-block;
- margin-bottom: 2rem;
+ display: inline-block;
+ margin-bottom: 2rem;
}
.code-example__snippet {
- display: none;
+ display: none;
}
.code-example .selected {
- display: block;
+ display: block;
}
.feature-list {
- list-style: none;
- padding: 0;
- display: block;
- overflow: hidden;
+ list-style: none;
+ padding: 0;
+ display: block;
+ overflow: hidden;
}
.feature-list li {
- float: left;
- width: 50%;
- line-height: 3.2rem;
- margin-bottom: 1rem;
+ 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;
+ 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 {
- width: auto;
- max-width: 100%;
- margin: 0 2rem;
- }
- .footer__legal__one {
- display:block;
- }
+ .main {
+ width: auto;
+ max-width: 100%;
+ margin: 0 2rem;
+ }
+ .footer__legal__one {
+ display: block;
+ }
+}
+@media only screen and (min-width: 1126px) {
+ .video__series__grid {
+ flex-direction: row;
+ }
}
-
@media only screen and (max-width: 1125px) {
- .right {
- margin-left: 32rem;
- }
- .desc {
- margin-left: 0;
- margin-bottom: 3rem;
- }
- .desc-item,
- .desc-item:first-of-type {
- float: none;
- width: auto;
- margin-left: 0;
- display: block;
- margin-bottom: 4rem;
- }
- .desc-item p {
- width: auto;
- }
- .index {
- padding-right: 0;
- text-align: left;
- }
- .callout {
- margin: 2rem 1.5rem;
- }
- .hero {
- justify-content: flex-start;
- }
- .hero__diagram {
- max-width: 42rem;
- margin-right: 4rem;
- }
- .feature-list li {
- width: 100%;
- }
+ .video__block {
+ padding-left: 0px!important;
+ padding-top: 15px;
+ }
+ .video__series__grid {
+ flex-direction: column;
+ margin: 0 auto 40px;
+ }
+ ul.video-list {
+ padding-left: 21px!important;
+ }
+ .right {
+ margin-left: 22rem;
+ }
+ .right-home {
+ margin-left: 32rem;
+ }
+ .desc {
+ margin-left: 0;
+ margin-bottom: 3rem;
+ }
+ .desc-item,
+ .desc-item:first-of-type {
+ float: none;
+ width: auto;
+ margin-left: 0;
+ display: block;
+ margin-bottom: 4rem;
+ }
+ .desc-item p {
+ width: auto;
+ }
+ .index {
+ padding-right: 0;
+ text-align: left;
+ }
+ .callout {
+ margin: 2rem 1.5rem;
+ }
+ .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) {
- .apache-feather {
- bottom: 2.8rem;
- }
+ .apache-feather {
+ bottom: 2.8rem;
+ }
}
-
@media only screen and (max-width: 950px) {
- .right {
- margin-left: 22rem;
- }
- .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;
- }
+ .right {
+ margin-left: 22rem;
+ }
+ .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) {
- .kafka-diagram {
- width: 80%;
- min-width: 28rem;
- height: auto;
- }
- .callout {
- width: 60%;
- min-width: 21rem;
- }
- .callout::before {
- right: 25%;
- }
- .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
- }
+ .kafka-diagram {
+ width: 80%;
+ min-width: 28rem;
+ height: auto;
+ }
+ .callout {
+ width: 60%;
+ min-width: 21rem;
+ }
+ .callout::before {
+ right: 25%;
+ }
+ .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) {
- html, body {
- overflow-y: auto;
- -webkit-overflow-scrolling: touch;
- }
- .main {
- padding: 0 1rem;
- margin: 0;
- }
- .kafka-diagram {
- display: block;
- margin: 0 auto;
- }
- .callout {
- margin: 2rem auto;
- }
- .right {
- padding-bottom: 10rem;
- }
- .navindicator {
- min-width: 32rem;
- position: absolute;
- top: -0.8rem;
- left: 0;
- width: 100%;
- text-align: center;
- z-index: 2;
- }
- .navindicator__item {
- height: .2rem;
- width: calc(79% / 12); /* Note: width of mobile nav indicator should be divided by number of top level pages */
- background-color: #888888;
- display: inline-block;
- margin: 0 .5%;
- }
- .navindicator__item.selected {
- background-color: #FFFFFF;
- }
- nav {
- display: block;
- position: fixed;
- background-color: #000000;
- bottom: 0;
- left: 0;
- z-index: 1;
- width: 100%;
- }
- .nav-scroller {
- white-space: nowrap;
- overflow-y: hidden;
- overflow-x: scroll;
- -webkit-overflow-scrolling: touch;
- box-shadow: 0 0 1rem rgba(0,0,0,0.3);
- }
- .nav__inner {
- width: 2000px;
- }
- .nav__item,
- .nav__item:first-of-type {
- color: #888888;
- float: left;
- padding: 2.6rem 1.1rem 1.8rem;
- border: none;
- }
- .nav__item.selected,
- .nav__item:hover {
- color: #FFFFFF;
- }
- .nav__item::after,
- .nav__item.selected::after,
- nav.hovering .nav__item:hover::after,
- nav .btn,
- .social-links,
- .footer {
- display: none;
- }
- .nav__item__with__subs .nav__item:first-of-type,
- .nav__item .nav__item {
- padding: 0;
- }
- .nav__sub__item {
- margin-left: 2rem;
- line-height: 2.2rem;
- }
- .right {
- margin: 0;
- min-height: auto;
- }
+ html,
+ body {
+ overflow-y: auto;
+ -webkit-overflow-scrolling: touch;
+ }
+ .main {
+ padding: 0 1rem;
+ margin: 0;
+ }
+ .kafka-diagram {
+ display: block;
+ margin: 0 auto;
+ }
+ .callout {
+ margin: 2rem auto;
+ }
+ .right {
+ padding-bottom: 10rem;
+ }
+ .navindicator {
+ min-width: 32rem;
+ position: absolute;
+ top: -0.8rem;
+ left: 0;
+ width: 100%;
+ text-align: center;
+ z-index: 2;
+ }
+ .navindicator__item {
+ height: .2rem;
+ width: calc(79% / 12);
+ /* Note: width of mobile nav indicator should be divided by number of top level pages */
+
+ background-color: #888888;
+ display: inline-block;
+ margin: 0 .5%;
+ }
+ .navindicator__item.selected {
+ background-color: #FFFFFF;
+ }
+ nav {
+ display: block;
+ position: fixed;
+ background-color: #000000;
+ bottom: 0;
+ left: 0;
+ z-index: 1;
+ width: 100%;
+ }
+ .nav-scroller {
+ white-space: nowrap;
+ overflow-y: hidden;
+ overflow-x: scroll;
+ -webkit-overflow-scrolling: touch;
+ box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
+ }
+ .nav__inner {
+ width: 2000px;
+ }
+ .nav__item,
+ .nav__item:first-of-type {
+ color: #888888;
+ float: left;
+ padding: 2.6rem 1.1rem 1.8rem;
+ border: none;
+ }
+ .nav__item.selected,
+ .nav__item:hover {
+ color: #FFFFFF;
+ }
+ .nav__item::after,
+ .nav__item.selected::after,
+ nav.hovering .nav__item:hover::after,
+ nav .btn,
+ .social-links,
+ .footer {
+ display: none;
+ }
+ .nav__item__with__subs .nav__item:first-of-type,
+ .nav__item .nav__item {
+ padding: 0;
+ }
+ .nav__sub__item {
+ margin-left: 2rem;
+ line-height: 2.2rem;
+ }
+ .right {
+ margin: 0;
+ min-height: auto;
+ }
}
-
@media only screen and (max-width: 460px) {
- body {
- font-size: 1.2rem;
- }
- h1 {
- font-size: 3.6rem;
- }
- h2, h3, h4 {
- font-size: 1.6rem;
- }
- .logo {
- width: 21.667rem;
- height: auto;
- }
- .desc-item,
- .desc-item:first-of-type {
- margin-bottom: 2rem;
- }
-
- .grid__item {
- width: 96% !important;
- position: relative !important;
- float: left !important;
- top: auto !important;
- 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;
- }
+ body {
+ font-size: 1.2rem;
+ }
+ h1 {
+ font-size: 3.6rem;
+ }
+ h2,
+ h3,
+ h4 {
+ font-size: 1.6rem;
+ }
+ .logo {
+ width: 21.667rem;
+ height: auto;
+ }
+ .desc-item,
+ .desc-item:first-of-type {
+ margin-bottom: 2rem;
+ }
+ .grid__item {
+ width: 96% !important;
+ position: relative !important;
+ float: left !important;
+ top: auto !important;
+ 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;
- }
+ .hero__cta {
+ flex-direction: column;
+ }
+ .hero__cta .btn {
+ width: 100%;
+ }
+ .hero__cta .btn:first-of-type {
+ margin-right: 0;
+ }
}
-
.customer__cards {
display: flex;
height: 30rem;
max-width: 92rem;
-
}
-
-.customer_cards_2{
+.customer_cards_2 {
margin-top: 4.2rem;
display: flex;
height: 40rem;
max-width: 92rem;
}
-
.customer__card {
flex: 1;
margin-right: 2rem;
@@ -1015,14 +1029,12 @@ nav .btn {
display: flex;
flex-direction: column;
align-items: left;
- text-align:justify;
+ text-align: justify;
}
-
-.customer-right{
- margin-right:0rem;
+.customer-right {
+ margin-right: 0rem;
}
-
-.customer__card__icon{
+.customer__card__icon {
align-items: center;
border: 1px solid #888;
border-radius: 4px;
@@ -1031,50 +1043,406 @@ nav .btn {
justify-content: center;
width: 268px;
}
-
-.green_card{
+.green_card {
background-color: #00b900;
}
-
.customer__card__label {
color: #000000;
margin-top: 2.4rem;
display: flex;
}
+/* Streams page - adding video & cusomter logos*/
-@media only screen and (max-width: 1109px) {
- .customer__cards {
- height: 35rem;
-
- }
- .customer_cards_2 {
- height: 45rem;
- }
-
+.sticky-top .active-menu-item {
+ width: 108px;
+ height: 2px;
+ border-bottom: solid 4px #000000;
+ color: #000!important;
+ padding-bottom: 7px;
+}
+.sticky-top a {
+ color: #8c8888;
+ margin-top: 16px;
+ height: 28px;
+ font-family: Roboto;
+ font-size: 15px;
+ line-height: 1.87;
+ text-align: left;
+ margin-right: 30px;
+ text-transform: uppercase;
+}
+.sticky-top {
+ white-space: nowrap;
+ overflow-y: hidden;
+ overflow-x: scroll;
+ -webkit-overflow-scrolling: touch;
+}
+.video__series__grid {
+ width: 92%;
+ display: -webkit-flex;
+ /* Safari */
+
+ display: flex;
+ margin-bottom: 60px;
+ /*flex-direction: row;*/
+}
+.video-list li {
+ display: list-item;
+ font-family: Roboto;
+ font-size: 15px;
+ line-height: 2.67;
+ text-align: left;
+ color: #d8d8d8;
+ text-transform: capitalize;
+}
+.video-list .active {
+ color: #000;
+}
+.video-list .active:before {
+ background-color: #000;
+ border: solid 2px #000;
+}
+ul.video-list {
+ list-style-type: none;
+ /* Setup the counter. */
+
+ counter-reset: num;
+ padding-left: 0px;
+}
+.video-list {
+ margin-bottom: 1rem;
}
+.video-list li:before {
+ /* Advance the number. */
+
+ counter-increment: num;
+ /* Use the counter number as content. */
+
+ content: counter(num);
+ color: #fff;
+ background-color: #d8d8d8;
+ width: 50px;
+ border-radius: 50%;
+ padding: 5px 10px;
+ margin-right: .8rem;
+}
+.grid__item__customer__description {
+ margin: 0 2rem 2rem;
+ padding-top: 0rem;
+}
+.stream__text {
+ margin-top: 5.2rem;
+ margin-bottom: 3.2rem;
+}
+.video__block h3 {
+ font-size: 15px;
+ line-height: 1.87;
+ font-family: Roboto;
+}
+.video__block {
+ padding-left: 42px;
+}
+.streams_intro {
+ margin-top: 42px;
+ margin-bottom: 15px;
+}
+.streams__description {
+ font-family: Roboto;
+ font-size: 15px;
+ line-height: 1.87;
+ text-align: justify;
+ color: #000000;
+ margin-bottom: 54px;
+ max-width: 91rem;
+}
+.separator {
+ width: 920px;
+ margin-right: 153px;
+}
+.customers__grid * {
+ box-sizing: border-box;
+}
+.customer__grid {
+ margin: 0;
+ padding-bottom: 20px;
+}
+.customer__item {
+ border-radius: 10px;
+ overflow: hidden;
+ padding: 0px;
+ width: 100%;
+}
+.streams_logo_grid {
+ border: solid 1px #888888;
+}
+.streams__ny__grid,
+.streams__line__grid,
+.streams__rabobank__grid,
+.streams__zalando__grid {
+ height: auto;
+}
+.grid__logo__link {
+ display: block;
+ height: 8rem;
+ margin-bottom: 2rem;
+ text-align: center;
+ padding-top: 2rem;
+}
+.navbar-fixed {
+ position: fixed;
+ background-color: #fff;
+ color: #fff;
+ margin-top: 0px;
+ padding: 10px 0px 20px;
+ /*width: 92rem;*/
+
+ z-index: 1000;
+ top: 0px;
+ overflow: auto;
+ width: 95%;
+}
+@media only screen and (max-width: 650px) {
+ .navbar-fixed {
+ position: fixed!important;
+ background-color: #fff;
+ color: #fff;
+ margin-top: 0px;
+ padding: 10px 0px 20px;
+ /*width: 92rem;*/
+
+ z-index: 1000;
+ top: 0px;
+ left: 0;
+ z-index: 1;
+ width: 100%;
+ }
+ .sticky-top {
+ white-space: nowrap;
+ overflow-y: hidden;
+ overflow-x: scroll;
+ -webkit-overflow-scrolling: touch;
+ }
+}
+.yt_series {
+ display: none;
+ width: 420px;
+ height: 315px;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ "
+ border: none;
+}
+.video__series_grid .active {
+ display: block;
+}
+.first__app__btn {
+ background-color: #0B6D88;
+ color: #FFFFFF;
+ border-radius: .2rem;
+ -moz-border-radius: .2rem;
+ -webkit-border-radius: .2rem;
+ text-align: center;
+ text-transform: capitalize;
+ padding: .9rem 2rem;
+ box-sizing: border-box;
+}
+.first__app__btn:hover {
+ background-color: #888888;
+ border-color: #888888;
+ color: #FFFFFF;
+}
+/* Doc landing page */
-@media only screen and (max-width: 1023px) {
+.use-item-section {
+ margin: 2.2rem 0 3.8rem;
+ display: flex;
+ justify-content: flex-start;
+}
+.use__list__sec {
+ max-width: 50rem;
+}
+.first__app__cta {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ flex-basis: 25rem;
+ flex-shrink: 0;
+ padding-bottom: 4rem;
+}
+.first__app__cta .first__app__btn {
+ height: 5.8rem;
+ width: 25rem;
+ font-size: 2rem;
+ font-weight: 700;
+ margin-top: 1rem;
+}
+.use-feature-list {
+ list-style: none;
+ padding: 0;
+ display: block;
+ overflow: hidden;
+ padding-left: 1.5rem;
+}
+.use-feature-list li {
+ float: left;
+ line-height: 3rem;
+ margin-bottom: 1rem;
+}
+.use-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;
+}
+.number {
+ background-color: #d8d8d8;
+ color: #fff;
+ width: 50px;
+ border-radius: 50%;
+ padding: 5px 10px;
+ margin-right: .8rem;
+}
+.video__text {
+ font-family: Roboto;
+ font-size: 15px;
+ line-height: 2.67;
+ text-align: left;
+ color: #d8d8d8;
+ text-transform: capitalize;
+}
+.video__list .active .number {
+ background-color: #000;
+ color: #fff;
+}
+.video__list .active .video__text {
+ color: #000;
+}
+.video__item {
+ margin: 0px;
+}
+.yt__video__block {
+ -webkit-flex: 1;
+ /* Safari 6.1+ */
+
+ -ms-flex: 1;
+ /* IE 10 */
+
+ flex: 1;
+}
+.yt__video__inner__block {
+ position: relative;
+ padding-bottom: 56.25%;
+ padding-top: 0px;
+ height: 0;
+ overflow: hidden;
+}
+/* Responsive styles */
- .customer__cards{
- height: 65rem;
- flex-direction: column;
- }
- .customer_cards_2 {
- height: 75rem;
- flex-direction: column;
- margin-top: 5.2rem;
- }
- .customer-right{
- margin-right:2rem;
- }
- .customer_cards_2{
- margin-top: 0rem;
+@media only screen and (max-width: 1125px) {
+ .use-item-section {
+ justify-content: flex-start;
}
-
+ .use__list__sec {
+ max-width: 42rem;
+ margin-right: 4rem;
}
- .customer-title{
- margin-top:62px;
- margin-bottom: 4.2rem;
+ .use-feature-list li {
+ width: 100%;
}
-
}
+@media only screen and (max-width: 950px) {
+ .use-item-section {
+ flex-direction: column-reverse;
+ margin: 0rem;
+ }
+ .use__list__sec {
+ margin: 0;
+ text-align: center;
+ max-width: 100%;
+ }
+ .use-feature-list li::before {
+ content: none;
+ }
+ .first__app__cta {
+ flex-direction: row;
+ justify-content: center;
+ flex-basis: inherit;
+ margin-top: 4rem;
+ }
+ .first__app__cta .first__app_btn:first-of-type {
+ margin-right: 1rem;
+ }
+}
+@media only screen and (max-width: 800px) {
+ .first__app__cta .first__app_btn {
+ font-size: 1.5rem;
+ font-weight: 400;
+ height: auto;
+ }
+}
+@media only screen and (max-width: 460px) {
+ .use-item-section {
+ margin-bottom: 0;
+ }
+ .use-feature-list li {
+ line-height: 2.2rem;
+ }
+ .use-feature-list li:before {
+ height: 2rem;
+ width: 2rem;
+ }
+}
+@media only screen and (max-width: 390px) {
+ .first__app__cta {
+ flex-direction: column;
+ }
+ .first__app__cta .first__app_btn {
+ width: 100%;
+ }
+ .first__app__cta .first__app_btn:first-of-type {
+ margin-right: 0;
+ }
+}
+@media only screen and (max-width: 1125px) {
+ .video__text {
+ display: none;
+ }
+ .video__list {
+ margin: 0 auto;
+ width: 200px;
+ padding-top: 20px;
+ text-align: center;
+ }
+ .video__item {
+ display: inline-block;
+ }
+ iframe {
+ width: 100%;
+ }
+}
+@media only screen and (min-width: 1126px) {
+ .customers__grid {
+ -webkit-column-count: 2;
+ -moz-column-count: 2;
+ column-count: 2;
+ max-width: 92rem;
+ }
+}
+@media only screen and (max-width: 1125px) {
+ .video__block h3 {
+ display: none;
+ }
+ .video-list {
+ display: none;
+ }
+}
\ No newline at end of file
http://git-wip-us.apache.org/repos/asf/kafka-site/blob/863f436e/css/syntax-highlighting.css
----------------------------------------------------------------------
diff --git a/css/syntax-highlighting.css b/css/syntax-highlighting.css
index d608c48..45dfba1 100644
--- a/css/syntax-highlighting.css
+++ b/css/syntax-highlighting.css
@@ -268,3 +268,11 @@
.syntaxhighlighter .gutter .line.highlighted {
background-color: #898989 !important;
color: white !important; }
+
+@media only screen and (max-width: 800px) {
+ .syntaxhighlighter a, .syntaxhighlighter div, .syntaxhighlighter code, .syntaxhighlighter table, .syntaxhighlighter table td, .syntaxhighlighter table tr, .syntaxhighlighter table tbody, .syntaxhighlighter table thead, .syntaxhighlighter table caption, .syntaxhighlighter textarea
+ {
+
+ font-size:1.2rem!important;
+ }
+ }
http://git-wip-us.apache.org/repos/asf/kafka-site/blob/863f436e/images/powered-by/line.svg
----------------------------------------------------------------------
diff --git a/images/powered-by/line.svg b/images/powered-by/line.svg
new file mode 100644
index 0000000..b4e92aa
--- /dev/null
+++ b/images/powered-by/line.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64" height="23" viewBox="0 0 64 23">
+ <defs>
+ <path id="a" d="M.253 22.395h14.612V.273H.253v22.122z"/>
+ </defs>
+ <g fill="none" fill-rule="evenodd" transform="translate(-160 -29)">
+ <rect width="402" height="380" x=".5" y=".5" stroke="#888" rx="4"/>
+ <path fill="#00B900" d="M182.107 30h-3.214a.897.897 0 0 0-.893.902v20.197c0 .497.4.901.893.901h3.214a.897.897 0 0 0 .893-.901V30.902c0-.498-.4-.902-.893-.902M205.06 30h-3.383c-.52 0-.94.404-.94.902V42.9l-9.632-12.5a.888.888 0 0 0-.074-.09l-.006-.007a.836.836 0 0 0-.056-.055l-.017-.015a1.377 1.377 0 0 0-.075-.059.756.756 0 0 0-.048-.032l-.029-.016a.9.9 0 0 0-.134-.063l-.03-.01a1.063 1.063 0 0 0-.232-.049.615.615 0 0 0-.05-.002l-.03-.002h-3.384c-.52 0-.94.404-.94.902v20.197c0 .497.42.901.94.901h3.384c.518 0 .94-.404.94-.901V39.104l9.643 12.515c.067.09.148.164.238.223l.01.007a1.125 1.125 0 0 0 .086.047l.044.022.045.018a1.626 1.626 0 0 0 .093.03l.013.003c.077.02.158.031.24.031h3.384c.52 0 .94-.404.94-.901V30.902c0-.498-.42-.902-.94-.902M174.086 46.942h-8.958v-16.04a.909.909 0 0 0-.915-.902h-3.297a.909.909 0 0 0-.916.902v20.196c0 .242.098.462.256.624l.012.013.014.013a.917.917 0 0 0 .633.252h13.171a.909.909 0 0 0 .914-.903v-3.252a.909.909 0 0 0-.914-.903"/>
+ <g transform="translate(209 29)">
+ <mask id="b" fill="#fff">
+ <use xlink:href="#a"/>
+ </mask>
+ <path fill="#00B900" d="M13.975 5.358a.9.9 0 0 0 .89-.908V1.18a.9.9 0 0 0-.89-.907H1.143a.877.877 0 0 0-.619.255l-.01.01-.015.016a.91.91 0 0 0-.246.625V21.488a.91.91 0 0 0 .248.627l.013.014.013.012c.16.157.377.254.616.254h12.832a.9.9 0 0 0 .89-.909v-3.269a.9.9 0 0 0-.89-.908H5.248v-3.433h8.727a.9.9 0 0 0 .89-.908v-3.27a.899.899 0 0 0-.89-.907H5.248V5.358h8.727z" mask="url(#b)"/>
+ </g>
+ </g>
+</svg>
http://git-wip-us.apache.org/repos/asf/kafka-site/blob/863f436e/index.html
----------------------------------------------------------------------
diff --git a/index.html b/index.html
index 1170063..5172331 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,7 @@
<!--#include virtual="includes/_top.htm" -->
<div class="content">
<!--#include virtual="includes/_nav.htm" -->
- <div class="right">
+ <div class="right right-home">
<div class="desc">
<a href="/documentation/#producerapi" class="desc-item">
<h2>Publish & subscribe</h2>