This is an automated email from the ASF dual-hosted git repository.
bbejeck pushed a commit to branch 3.3
in repository https://gitbox.apache.org/repos/asf/kafka.git
The following commit(s) were added to refs/heads/3.3 by this push:
new 7de861c9fcb resolve merge conflict
7de861c9fcb is described below
commit 7de861c9fcbab3f83e14a7d05ca04da21cff5d3e
Author: Bill Bejeck <bbej...@gmail.com>
AuthorDate: Wed Aug 24 10:45:32 2022 -0400
resolve merge conflict
---
.../images/creating-streams-iframe-placeholder.png | Bin 0 -> 54371 bytes
.../images/intro_to_streams-iframe-placeholder.png | Bin 0 -> 40352 bytes
.../transforming_part_1-iframe-placeholder.png | Bin 0 -> 47515 bytes
.../transforming_part_2-iframe-placeholder.png | Bin 0 -> 43720 bytes
docs/streams/index.html | 101 +++++++++++++++------
5 files changed, 73 insertions(+), 28 deletions(-)
diff --git a/docs/images/creating-streams-iframe-placeholder.png
b/docs/images/creating-streams-iframe-placeholder.png
new file mode 100644
index 00000000000..479a830760d
Binary files /dev/null and
b/docs/images/creating-streams-iframe-placeholder.png differ
diff --git a/docs/images/intro_to_streams-iframe-placeholder.png
b/docs/images/intro_to_streams-iframe-placeholder.png
new file mode 100644
index 00000000000..462ec036e2d
Binary files /dev/null and
b/docs/images/intro_to_streams-iframe-placeholder.png differ
diff --git a/docs/images/transforming_part_1-iframe-placeholder.png
b/docs/images/transforming_part_1-iframe-placeholder.png
new file mode 100644
index 00000000000..e959f0e972f
Binary files /dev/null and
b/docs/images/transforming_part_1-iframe-placeholder.png differ
diff --git a/docs/images/transforming_part_2-iframe-placeholder.png
b/docs/images/transforming_part_2-iframe-placeholder.png
new file mode 100644
index 00000000000..008ec16bb46
Binary files /dev/null and
b/docs/images/transforming_part_2-iframe-placeholder.png differ
diff --git a/docs/streams/index.html b/docs/streams/index.html
index e38b3890af9..5f4ac6a84f9 100644
--- a/docs/streams/index.html
+++ b/docs/streams/index.html
@@ -16,8 +16,24 @@
<!--#include virtual="../js/templateData.js" -->
</script>
<style>
- .video__item{cursor:pointer;}
+ .video__item{cursor:pointer;}
+ .yt__placeholder{display: none;cursor: pointer;}
+ .third-party{display: none;}
</style>
+<script type="text/javascript">
+ function loadVideo (divId, code, classToAdd) {
+ var videoPlaceholder = document.getElementById(divId);
+ var iframe = document.createElement('iframe');
+ iframe.src="https://www.youtube.com/embed/"+code;
+ iframe.frameborder="0";
+ iframe.allow="accelerometer; autoplay; encrypted-media; gyroscope;
picture-in-picture";
+ iframe.setAttribute('allowFullScreen', '');
+ iframe.setAttribute('class', 'yt_series yt__placeholder ' +
classToAdd);
+ iframe.style="display:block";
+ videoPlaceholder.parentNode.replaceChild(iframe, videoPlaceholder);
+ document.getElementById(classToAdd+'_warn').remove();
+ }
+</script>
<script id="streams-template" type="text/x-handlebars-template">
<h1>Kafka Streams</h1>
<div class="sub-nav-sticky">
@@ -35,33 +51,62 @@
</div>
<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?rel=0&showinfo=0&end=602";
frameborder="0" allowfullscreen></iframe>
- <iframe class="yt_series video_2"
src="https://www.youtube.com/embed/LxxeXI1mPKo?rel=0&showinfo=0&end=622";
frameborder="0" allowfullscreen></iframe>
- <iframe class="yt_series video_3"
src="https://www.youtube.com/embed/7JYEEx7SBuE?rel=0&showinfo=0end=557";
frameborder="0" allowfullscreen></iframe>
- <iframe class="yt_series video_4"
src="https://www.youtube.com/embed/3kJgYIkAeHs?rel=0&showinfo=0&end=564";
frameborder="0" allowfullscreen></iframe>
- </div>
- </div>
- <div class="video__block">
- <h3>TOUR OF THE STREAMS API</h3>
- <div class="video__list">
- <p class="video__item video_list_1 active"
onclick="$('.video__item').removeClass('active');
$(this).addClass('active');$('.yt_series').hide();$('.video_1').show();">
- <span class="video-number">1</span><span
class="video__text">Intro to Streams</span>
- </p>
- <p class="video__item video_list_2"
onclick="$('.video__item').removeClass('active');
$(this).addClass('active');$('.yt_series').hide();$('.video_2').show();">
- <span class="video-number">2</span><span
class="video__text">Creating a Streams Application</span>
- </p>
- <p class="video__item video_list_3"
onclick="$('.video__item').removeClass('active');
$(this).addClass('active');$('.yt_series').hide();$('.video_3').show();">
- <span class="video-number">3</span><span
class="video__text">Transforming Data Pt. 1</span>
- </p>
- <p class="video__item video_list_4"
onclick="$('.video__item').removeClass('active');
$(this).addClass('active');$('.yt_series').hide();$('.video_4').show();">
- <span class="video-number">4</span><span
class="video__text">Transforming Data Pt. 11</span>
- </p>
- </div>
- </div>
- </div>
+
+ <div class="video__series__grid">
+ <div class="yt__video__block">
+ <div class="yt__video__inner__block">
+ <img id="iframe-placeholder-intro"
+ border="1px"
+ class="yt__placeholder video_1"
+ style="display:block"
+
src="/{{version}}/images/intro_to_streams-iframe-placeholder.png"
+ onclick="loadVideo('iframe-placeholder-intro',
'Z3JKCLG3VP4?rel=0&showinfo=0&end=602', 'video_1')"/>
+ <span class="third-party" style="display:block"
id="video_1_warn">(Clicking the image will load a video from YouTube)</span>
+
+ <img id="iframe-placeholder-creating"
+ border="1px"
+ class="yt__placeholder video_2"
+
src="/{{version}}/images/creating-streams-iframe-placeholder.png"
+ onclick="loadVideo('iframe-placeholder-creating',
'LxxeXI1mPKo?rel=0&showinfo=0&end=622', 'video_2')"/>
+ <span class="third-party" id="video_2_warn">(Clicking the image
will load a video from YouTube)</span>
+
+ <img id="iframe-placeholder-transforming"
+ border="1px"
+ class="yt__placeholder video_3"
+
src="/{{version}}/images/transforming_part_1-iframe-placeholder.png"
+ onclick="loadVideo('iframe-placeholder-transforming',
'7JYEEx7SBuE?rel=0&showinfo=0end=557', 'video_3')"/>
+ <span class="third-party" id="video_3_warn">(Clicking the image
will load a video from YouTube)</span>
+
+ <img id="iframe-placeholder-transforming-two"
+ border="1px"
+ class="yt__placeholder video_4"
+
src="/{{version}}/images/transforming_part_2-iframe-placeholder.png"
+ onclick="loadVideo('iframe-placeholder-transforming-two',
'3kJgYIkAeHs?rel=0&showinfo=0&end=564', 'video_4')"/>
+ <span class="third-party" id="video_4_warn">(Clicking the image
will load a video from YouTube)</span>
+ </div>
+ </div>
+ <div class="video__block">
+ <h3>TOUR OF THE STREAMS API</h3>
+ <div class="video__list">
+ <p class="video__item video_list_1 active"
+ onclick="$('.video__item').removeClass('active');
$(this).addClass('active');$('.yt__placeholder').hide();$('.video_1').show();
$('.third-party').hide(); $('#video_1_warn').show()">
+ <span class="video-number">1</span><span
class="video__text">Intro to Streams</span>
+ </p>
+ <p class="video__item video_list_2"
+ onclick="$('.video__item').removeClass('active');
$(this).addClass('active'); $('.yt__placeholder').hide();$('.video_2').show();
$('.third-party').hide(); $('#video_2_warn').show()">
+ <span class="video-number">2</span><span
class="video__text">Creating a Streams Application</span>
+ </p>
+ <p class="video__item video_list_3"
+ onclick="$('.video__item').removeClass('active');
$(this).addClass('active'); $('.yt__placeholder').hide();$('.video_3').show();
$('.third-party').hide(); $('#video_3_warn').show()">
+ <span class="video-number">3</span><span
class="video__text">Transforming Data Pt. 1</span>
+ </p>
+ <p class="video__item video_list_4"
+ onclick="$('.video__item').removeClass('active');
$(this).addClass('active'); $('.yt__placeholder').hide();$('.video_4').show();
$('.third-party').hide(); $('#video_4_warn').show()">
+ <span class="video-number">4</span><span
class="video__text">Transforming Data Pt. 2</span>
+ </p>
+ </div>
+ </div>
+ </div>
<hr class="separator">
<div class="use-item-section">
<div class="use__list__sec">
