This is an automated email from the ASF dual-hosted git repository.
bbejeck pushed a commit to branch trunk
in repository https://gitbox.apache.org/repos/asf/kafka.git
The following commit(s) were added to refs/heads/trunk by this push:
new 008d1afc4d2 MINOR: Update site docs for ASF compliance (#12494)
008d1afc4d2 is described below
commit 008d1afc4d25df6b1a916c3f4d1565f6996caf7a
Author: Bill Bejeck <[email protected]>
AuthorDate: Wed Aug 24 10:45:32 2022 -0400
MINOR: Update site docs for ASF compliance (#12494)
This PR is a mirror of apache/kafka-site#433 which used placeholder images
for the Kafka Streams that users need to click in order to load the iframe with
the corresponding video.
Reviewers: Mickael Maison <[email protected]>
---
.../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 | 93 ++++++++++++++++-----
5 files changed, 72 insertions(+), 21 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 c24af4c2a30..13c81f1098d 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,26 +51,61 @@
</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>
- <hr class="separator">
- <h3>VIDEO TOUR OF THE STREAMS API</h3>
- <div class="video__series__grid">
- <div class="video__block">
- <div class="video__list">
- <p class="video__item video_list_1 active">
- <span class="video-number">1</span><a
href="https://www.youtube.com/embed/Z3JKCLG3VP4";><span
class="video__text">Intro to Streams</span></a>
- </p>
- <p class="video__item video_list_2 active">
- <span class="video-number">2</span><a
href="https://www.youtube.com/embed/LxxeXI1mPKo";><span
class="video__text">Creating a Streams Application</span></a>
- </p>
- <p class="video__item video_list_3 active">
- <span class="video-number">3</span><a
href="https://www.youtube.com/embed/7JYEEx7SBuE";><span
class="video__text">Transforming Data Pt. 1</span></a>
- </p>
- <p class="video__item video_list_4 active">
- <span class="video-number">4</span><a
href="https://www.youtube.com/embed/3kJgYIkAeHs";><span
class="video__text">Transforming Data Pt. 2</span></a>
- </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">
