This is an automated email from the ASF dual-hosted git repository.
leonard pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/flink-cdc.git
The following commit(s) were added to refs/heads/master by this push:
new 9d150c07a [docs] [minor] Optimize styles of the Flink CDC website
homepage
9d150c07a is described below
commit 9d150c07a322296db849c099cb93b76421a42990
Author: Laffery <[email protected]>
AuthorDate: Mon Apr 15 11:07:15 2024 +0800
[docs] [minor] Optimize styles of the Flink CDC website homepage
This closes #3208.
---
docs/assets/_custom.scss | 274 +++++++++++++++++++++++++++++++++++++-
docs/content.zh/_index.md | 330 ++++++++++++++++++++++------------------------
docs/content/_index.md | 330 ++++++++++++++++++++++------------------------
3 files changed, 589 insertions(+), 345 deletions(-)
diff --git a/docs/assets/_custom.scss b/docs/assets/_custom.scss
index 33ccbb406..3a5fbc159 100644
--- a/docs/assets/_custom.scss
+++ b/docs/assets/_custom.scss
@@ -236,4 +236,276 @@ pre.chroma code {
.markdown table tr:nth-child(2n) {
background: white;
-}
\ No newline at end of file
+}
+
+.index-wrapper {
+ // add custom css definitions here
+ // see https://tailwindcss.com/docs
+ .bg-purple {
+ background: linear-gradient(90deg, #c67dd6 0%, #8a77d3 100%);
+ }
+
+ svg {
+ vertical-align: middle;
+ }
+
+ .link-as-button {
+ transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1)
scaleY(1);
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 300ms;
+ border-radius: 9999px;
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+
+ &:hover {
+ transform: translate(0, 0) rotate(0) skewX(0) skewY(0) scaleX(1.05)
+ scaleY(1.05);
+ }
+ }
+
+ .header-1 {
+ font-size: 2.5rem;
+ line-height: 1;
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ .container {
+ width: 100%;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .top-container {
+ padding: 1.5rem;
+
+ .container {
+ padding-left: 0.75rem;
+ padding-right: 0.75rem;
+ align-items: center;
+ }
+ }
+
+ .flex {
+ display: flex;
+ }
+
+ .flex-wrap {
+ flex-wrap: wrap;
+ }
+
+ .flex-col {
+ flex-direction: column;
+ }
+
+ .flex-shrink {
+ flex-shrink: 1;
+ }
+ .flex-grow {
+ flex-grow: 1;
+ }
+
+ .text-center {
+ text-align: center;
+ }
+
+ .items-start {
+ align-items: flex-start;
+ }
+
+ .justify-center {
+ justify-content: center;
+ }
+
+ .w-1\/2 {
+ width: 50%;
+ }
+
+ .w-3\/4 {
+ width: 75%;
+ }
+ .w-4\/5 {
+ width: 80%;
+ }
+
+ .w-full {
+ width: 100%;
+ }
+
+ .text-3xl {
+ font-size: 1.875rem;
+ line-height: 2.25rem;
+ }
+
+ .text-xl {
+ font-size: 1.25rem;
+ line-height: 1.75rem;
+ }
+
+ .text-lg {
+ font-size: 1.125rem;
+ line-height: 1.75rem;
+ }
+
+ .text-sm {
+ font-size: 0.875rem;
+ line-height: 1.25rem;
+ }
+
+ .font-bold {
+ font-weight: 700;
+ }
+
+ .leading-normal {
+ line-height: 1.5;
+ }
+
+ .leading-tight {
+ line-height: 1.25;
+ }
+
+ .bg-white {
+ background-color: #ffffff;
+ }
+
+ .border-none {
+ border-style: none;
+ }
+
+ .mx-auto {
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .p-0 {
+ padding: 0;
+ }
+
+ .px-6 {
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ }
+
+ .px-8 {
+ padding-left: 2rem;
+ padding-right: 2rem;
+ }
+
+ .py-6 {
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
+ }
+
+ .py-8 {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ }
+
+ .m-8 {
+ margin: 2rem;
+ }
+
+ .my-0 {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+
+ .my-4 {
+ margin-top: 1rem;
+ margin-bottom: 1rem;
+ }
+
+ .mt-1 {
+ margin-top: 0.25rem;
+ }
+
+ .mt-6 {
+ margin-top: 1.5rem;
+ }
+
+ .-mt-8 {
+ margin-top: -2rem;
+ }
+
+ .absolute {
+ position: absolute;
+ }
+
+ .relative {
+ position: relative;
+ }
+
+ .bottom-0 {
+ bottom: 0;
+ }
+
+ .h-40 {
+ height: 10rem;
+ }
+
+ .basis-1\/12 {
+ flex-basis: 8.333333%;
+ }
+ .basis-10\/12 {
+ flex-basis: 83.333333%;
+ }
+
+ .opacity-50 {
+ opacity: 0.5;
+ }
+
+ h1,
+ h2 {
+ border-bottom: none !important;
+ }
+
+ .divider {
+ background: #bf74f1;
+ margin-left: auto;
+ margin-right: auto;
+ opacity: 0.25;
+ width: 75%;
+ height: 0.125rem;
+
+ &.w-1\/2 {
+ width: 50%;
+ }
+ &.opacity-50 {
+ opacity: 0.5;
+ }
+ }
+
+ .text-white {
+ color: #ffffff !important;
+ }
+
+ .text-black {
+ color: #000000 !important;
+ }
+
+ .text-primary {
+ color: #bf74f1;
+ }
+
+ @media (min-width: 768px) {
+ .md\:w-1\/2 {
+ width: 50%;
+ }
+ .md\:w-1\/3 {
+ width: 33.333333%;
+ }
+ .md\:w-3\/5 {
+ width: 60%;
+ }
+ .md\:flex-row {
+ flex-direction: row;
+ }
+ .md\:text-left {
+ text-align: left;
+ }
+ .link-as-button {
+ margin-left: 0;
+ margin-right: 0;
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/content.zh/_index.md b/docs/content.zh/_index.md
index f439ee43b..c54c1d02e 100644
--- a/docs/content.zh/_index.md
+++ b/docs/content.zh/_index.md
@@ -22,177 +22,163 @@ specific language governing permissions and limitations
under the License.
-->
-<div style="background-image: url('../fig/index-background-header.png');
size:inherit; background-size: auto 100%; overflow: hidden">
- <div style="text-align: center">
- <br><br><br><br><br><br>
- <h1 style="color: #FFFFFF">
- Flink CDC
- </h1>
- <h3 style="color: #FFFFFF">
- A streaming data integration tool
- </h3>
- <br><br><br><br><br><br>
- <br><br><br><br>
- </div>
-</div>
-
-
-<div style="display: flex;">
- <div style="flex: 1;">
- </div>
- <div style="text-align: center; flex: 8;">
- <br><br><br><br>
- {{< img src="/fig/cdc-flow.png" alt="Flink CDC Flow">}}
- <br><br><br><br>
- </div>
- <div style="flex: 1;">
- </div>
-</div>
-
-
-<div style="display: flex;">
- <div style="flex: 1;">
- </div>
- <div style="text-align: center; flex: 8;">
- <p style="color: #BF74F1; font-size: xx-large; padding: 0">What is
Flink CDC?</p>
- <hr style="background-color: #BF74F1; width: 60%">
- <br>
- <p style="text-align: center; font-size: large">
- Flink CDC is a distributed data integration tool for real time
data and batch data.
- Flink CDC brings the simplicity and elegance of data integration
via YAML to describe
- the data movement and transformation.
- </p>
- <br><br>
- {{< img src="/fig/index-yaml-example.png" alt="Flink CDC Example">}}
- <br><br>
- </div>
- <div style="flex: 1;">
- </div>
- <br><br><br><br>
-</div>
-
-
-<div style="display: flex;">
- <br><br>
- <div style="flex: 1;">
- </div>
- <div style="text-align: center; flex: 8;">
- <p style="color: #BF74F1; font-size: xx-large; padding: 0">Key
Features</p>
- </div>
- <div style="flex: 1;">
- </div>
- <br><br>
-</div>
-
-<div style="display: flex;">
- <br><br><br><br>
- <div style="flex: 5%;"></div>
- <div style="text-align: center; flex: 25%;">
- <p style="text-align: center; color: #BF74F1; font-size: large;
padding: 0">Change Data Capture</p>
- <hr style="background-color:#BF74F1; width: 60%">
- <p style="text-align: left;">
- Flink CDC supports distributed scanning of historical data of
database and then automatically switches to change data capturing. The switch
uses the incremental snapshot algorithm which ensure the switch action does not
lock the database.
- </p>
- </div>
- <div style="flex: 8%;"></div>
- <div style="text-align: center; flex: 24%;">
- <p style="text-align: center; color: #BF74F1; font-size: large;
padding: 0">Schema Evolution</p>
- <hr style="background-color:#BF74F1; width: 60%">
- <p style="text-align: left;">
- Flink CDC has the ability of automatically creating downstream
table using the inferred table structure based on upstream table, and applying
upstream DDL to downstream systems during change data capturing.</p>
- </div>
- <div style="flex: 8%;"></div>
- <div style="text-align: center; flex: 25%;">
- <p style="text-align: center; color: #BF74F1; font-size: large;
padding: 0">Streaming Pipeline</p>
- <hr style="background-color:#BF74F1; width: 60%">
- <p style="text-align: left;">
- Flink CDC jobs run in streaming mode by default, providing
sub-second end-to-end latency in real-time binlog synchronization scenarios,
effectively ensuring data freshness for downstream businesses.</p>
- </div>
- <div style="flex: 5%;"></div>
- <br><br><br><br>
- <br><br><br><br>
- <br><br><br><br>
-</div>
-
-
-<div style="display: flex;">
- <br><br><br><br>
- <div style="flex: 5%;"></div>
- <div style="text-align: center; flex: 25%;">
- <p style="text-align: center; color: #BF74F1; font-size: large;
padding: 0">Data Transformation</p>
- <hr style="background-color:#BF74F1; width: 60%">
- <p style="text-align: left;">
- Flink CDC will soon support data transform operations of ETL,
including column projection, computed column, filter expression and classical
scalar functions.</p>
- </div>
- <div style="flex: 8%;"></div>
- <div style="text-align: center; flex: 24%;">
- <p style="text-align: center; color: #BF74F1; font-size: large;
padding: 0">Full Database Sync</p>
- <hr style="background-color:#BF74F1; width: 60%">
- <p style="text-align: left;">Flink CDC supports synchronizing all
tables of source database instance to downstream in one job by configuring the
captured database list and table list.</p>
- </div>
- <div style="flex: 8%;"></div>
- <div style="text-align: center; flex: 25%;">
- <p style="text-align: center; color: #BF74F1; font-size: large;
padding: 0">Exactly-Once Semantics</p>
- <hr style="background-color:#BF74F1; width: 60%">
- <p style="text-align: left;">
- Flink CDC supports reading database historical data and
continues to read CDC events with exactly-once processing, even after job
failures.
- </p>
- </div>
- <div style="flex: 5%;">
- </div>
- <br><br><br><br>
- <br><br><br><br>
- <br><br><br><br>
-</div>
-
-<div style="display: flex;">
- <br><br><br><br><br><br>
- <div style="flex: 1;">
- </div>
- <div style="text-align: center; flex: 8;">
- <p style="color: #BF74F1; font-size: xx-large; padding: 0">Learn
More</p>
- </div>
- <div style="flex: 1;">
- </div>
- <br><br><br><br>
-</div>
-
-<div style="display: flex;">
- <br><br><br><br>
- <div style="flex: 1;">
- </div>
- <div style="text-align: left; flex: 3.5; width: 100%">
- <p style="text-align: left; color: #BF74F1; font-size: x-large;
padding: 0">Try Flink CDC</p>
- <p style="text-align: left;">
- Flink CDC provides a series of quick start demos without any
dependencies or java code. A Linux or MacOS computer with Docker installed is
enough.
- Please check out our <a href="{{< ref "docs/get-started/introduction"
>}}">Quick Start</a> for more information.
- </p>
- </div>
- <div style="flex: 1;"></div>
- <div style="text-align: left; flex: 3.5; width: 100%">
- <p style="text-align: left; color: #BF74F1; font-size: x-large;
padding: 0">Get Help with Flink CDC</p>
- <p style="text-align: left;">
- If you get stuck, check out our <a
href="https://flink.apache.org/community.html";>community support resources</a>.
- In particular, Apache Flink’s user mailing list
([email protected]) is consistently ranked as one of the most active of
- any Apache project, and is a great way to get help quickly.</p>
- </div>
- <div style="flex: 1;">
- </div>
- <br><br><br><br>
- <br><br><br><br>
- <br><br><br><br>
-</div>
-
-<div style="background-image: url('../fig/index-background-footer.png');
size:inherit; background-size: auto 100%; overflow: hidden">
- <div style="text-align: center">
- <br><br><br><br><br>
- <br><br><br><br><br>
- <h1 style="color: transparent">
- Flink CDC is developed under the umbrella of Apache Flink.
- </h1>
- <p style="color: #FFFFFF; font-size: medium; text-align:left">
- Flink CDC is developed under the umbrella
of <a style="color: #FFFFFF" href="https://flink.apache.org";>Apache Flink</a>.
+<div class="index-wrapper">
+ <div class="top-container bg-purple">
+ <div class="flex flex-col w-full md:w-3/5 justify-center items-start
text-center md:text-left">
+ <h1 class="header-1 font-bold text-white leading-tight">
+ Flink CDC
+ </h1>
+ <p class="leading-normal text-xl text-white">
+ A streaming data integration tool
+ </p>
+ <a href="{{< ref "docs/get-started/introduction" >}}"
class="link-as-button mx-auto bg-white text-black font-bold my-4 px-8">
+ Quick Start
+ </a>
+ </div>
+ <div class="w-full md:w-3/5 py-6 text-center">
+ {{< img src="/fig/cdc-flow.png" alt="Flink CDC Flow" >}}
+ </div>
+ </div>
+ <div class="relative -mt-8 bg-purple">
+ <svg viewBox="0 0 1440 135" version="1.1"
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";>
+ <g stroke="none" stroke-width="1" fill="#FFFFFF"
fill-rule="evenodd">
+ <g fill-rule="nonzero">
+ <g id="group-1">
+ <path d="M0,0 C90.7283404,0.913987361
147.912752,26.791023 291.910178,59.0372741 C387.908462,80.534775
543.605069,88.0306277 759,81.5248326 C469.336065,153.973267
216.336065,151.424573 0,73.8787497" id="path-2" opacity="0.202055432"></path>
+ <path d="M100,103.179907 C277.413333,71.1800754
426.147877,51.7578823 546.203633,44.9133275 C666.259389,38.0687728
810.524845,41.1877184 979,54.2701645 C931.069965,55.3032044
810.303266,73.752879 616.699903,109.619188 C423.096539,145.485498
250.863238,143.33907 100,103.179907 Z" id="path-1" opacity="0.100000001"></path>
+ </g>
+ <g id="group-0" transform="translate(0, 35)"
fill="#FFFFFF">
+ <path d="M0,33.0606204 C56.6001496,51.914314
97.7011995,64.3217623 123.30215,70.2800135 C180.904789,83.6900143
233.718868,88.4076191 271.437642,91.5254689 C310.739609,94.7722042
395.976162,93.8296671 460.333358,89.7584578 C486.055247,88.1321386
518.005961,84.5528588 556.1855,79.0235702 C594.986722,72.966933
621.598158,68.452987 636.017808,65.4846838 C663.117994,59.9091538
711.68124,48.2789543 726.777545,44.9584296 C779.615613,33.3380687
817.965065,21.7432881 855.4 [...]
+ </g>
+ </g>
+ </g>
+ </svg>
+ </div>
+ <div class="bg-white py-8">
+ <div class="container mx-auto">
+ <h2 class="border-none w-full text-3xl font-bold leading-tight
text-center text-primary">
+ What is Flink CDC?
+ </h2>
+ <div class="w-full my-4">
+ <div class="divider"></div>
+ </div>
+ <div class="w-full w-4/5 flex text-center">
+ <div class="basis-1/12"></div>
+ <p class="text-lg basis-10/12">
+ Flink CDC is a distributed data integration tool for real
time data and batch data. Flink CDC brings the simplicity and elegance of data
integration via YAML to describe the data movement and transformation.
+ </p>
+ <div class="basis-1/12"></div>
+ </div>
+ <div class="w-full flex justify-center ">
+ <div class="w-4/5">
+ {{< img src="/fig/index-yaml-example.png" alt="Flink CDC
Example" >}}
+ </div>
+ </div>
+ </div>
+ <div class="container mx-auto flex flex-wrap mt-6">
+ <h2 class="border-none w-full my-2 text-3xl font-bold
leading-tight text-center text-primary">
+ Key Features
+ </h2>
+ <div class="w-full my-4">
+ <div class="divider"></div>
+ </div>
+ <div class="w-full md:w-1/3 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center
text-primary">Change Data Capture</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ Flink CDC supports distributed scanning of historical data
of database and then automatically switches to change data capturing. The
switch uses the incremental snapshot algorithm which ensure the switch action
does not lock the database.
+ </p>
+ </div>
+ <div class="w-full md:w-1/3 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center
text-primary">Schema Evolution</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ Flink CDC has the ability of automatically creating
downstream table using the inferred table structure based on upstream table,
and applying upstream DDL to downstream systems during change data capturing.
+ </p>
+ </div>
+ <div class="w-full md:w-1/3 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center
text-primary">Streaming Pipeline</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ Flink CDC jobs run in streaming mode by default, providing
sub-second end-to-end latency in real-time binlog synchronization scenarios,
effectively ensuring data freshness for downstream businesses.
+ </p>
+ </div>
+ <div class="w-full md:w-1/3 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center text-primary">Data
Transformation</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ Flink CDC will soon support data transform operations of
ETL, including column projection, computed column, filter expression and
classical scalar functions.
+ </p>
+ </div>
+ <div class="w-full md:w-1/3 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center text-primary">Full
Database Sync</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ Flink CDC supports synchronizing all tables of source
database instance to downstream in one job by configuring the captured database
list and table list.
+ </p>
+ </div>
+ <div class="w-full md:w-1/3 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center
text-primary">Exactly-Once Semantics</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ Flink CDC supports reading database historical data and
continues to read CDC events with exactly-once processing, even after job
failures.
+ </p>
+ </div>
+ </div>
+ <div class="container mx-auto flex flex-wrap mt-6">
+ <h2 class="border-none w-full my-2 text-3xl font-bold
leading-tight text-center text-primary">
+ Learn More
+ </h2>
+ <div class="w-full my-4">
+ <div class="divider"></div>
+ </div>
+ <div class="w-full md:w-1/2 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center text-primary">Try
Flink CDC</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ Flink CDC provides a series of quick start demos without
any dependencies or java code. A Linux or MacOS computer with Docker installed
is enough.
+ Please check out our <a href="{{< ref
"docs/get-started/introduction" >}}">Quick Start</a> for more information.
+ </p>
+ </div>
+ <div class="w-full md:w-1/2 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center text-primary">Get
Help with Flink CDC</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ If you get stuck, check out our <a
href="https://flink.apache.org/community.html";>community support resources</a>.
+ In particular, Apache Flink’s user mailing list
([email protected]) is consistently ranked as one of the most active of
+ any Apache project, and is a great way to get help quickly.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="relative bg-purple">
+ <svg viewBox="0 0 1440 148" version="1.1"
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";>
+ <g stroke="none" stroke-width="1" fill="#FFFFFF"
fill-rule="evenodd">
+ <path d="M1440,80.1111111 C1383.555,61.3231481 1342.555,48.925
1317,42.9166667 C1259.5,29.396963 1206.707,24.3442407 1169,20.9814815
C1129.711,17.4775741 1044.426,17.6196759 980,20.9814815 C954.25,22.32525
922.25,25.5039444 884,30.5185185 C845.122,36.0376019 818.455,40.1709537
804,42.9166667 C776.833,48.0762037 728.136,58.9102778 713,61.9907407
C660.023,72.7761759 621.544,83.6674722 584,89.6481481 C517.525,100.238074
484.525,101.510315 429,103 C379.49,101.554185 342.823,9 [...]
+ <path d="M338,93.8510923 C530.95466,51.4641029
692.718283,25.7374584 823.290868,16.6711585 C953.863454,7.60485864
1110.7665,11.7362152 1294,29.0652283 C1241.87132,30.4335934
1110.52551,54.8720396 899.962579,102.380567 C689.399649,149.889094
502.078789,147.045936 338,93.8510923 Z" id="path-2" opacity="0.1"></path>
+ <path d="M681,12 C771.72834,12.927528 828.912752,39.187927
972.910178,71.9119003 C1068.90846,93.7278826 1224.60507,101.334785
1440,94.7326078 C1150.33606,168.254352 897.336065,165.6679 681,86.9732496"
id="path-3" opacity="0.1" transform="translate(1060.5, 80) scale(-1, -1)
translate(-1060.5, -80)"></path>
+ </g>
+ </svg>
+ </div>
+ <div class="px-6 bg-purple h-40 relative">
+ <p class="leading-normal text-lg text-white absolute bottom-0">
+ Flink CDC is developed under the umbrella of <a class="text-white"
href="https://flink.apache.org";>Apache Flink</a>.
</p>
- <br><br>
</div>
-</div>
+</div>
\ No newline at end of file
diff --git a/docs/content/_index.md b/docs/content/_index.md
index 15b4a314a..c54c1d02e 100644
--- a/docs/content/_index.md
+++ b/docs/content/_index.md
@@ -22,177 +22,163 @@ specific language governing permissions and limitations
under the License.
-->
-<div style="background-image: url('fig/index-background-header.png');
size:inherit; background-size: auto 100%; overflow: hidden">
- <div style="text-align: center">
- <br><br><br><br><br><br>
- <h1 style="color: #FFFFFF">
- Flink CDC
- </h1>
- <h3 style="color: #FFFFFF">
- A streaming data integration tool
- </h3>
- <br><br><br><br><br><br>
- <br><br><br><br>
- </div>
-</div>
-
-
-<div style="display: flex;">
- <div style="flex: 1;">
- </div>
- <div style="text-align: center; flex: 8;">
- <br><br><br><br>
- {{< img src="/fig/cdc-flow.png" alt="Flink CDC Flow">}}
- <br><br><br><br>
- </div>
- <div style="flex: 1;">
- </div>
-</div>
-
-
-<div style="display: flex;">
- <div style="flex: 1;">
- </div>
- <div style="text-align: center; flex: 8;">
- <p style="color: #BF74F1; font-size: xx-large; padding: 0">What is
Flink CDC?</p>
- <hr style="background-color: #BF74F1; width: 60%">
- <br>
- <p style="text-align: center; font-size: large">
- Flink CDC is a distributed data integration tool for real time
data and batch data.
- Flink CDC brings the simplicity and elegance of data integration
via YAML to describe
- the data movement and transformation.
- </p>
- <br><br>
- {{< img src="/fig/index-yaml-example.png" alt="Flink CDC Example">}}
- <br><br>
- </div>
- <div style="flex: 1;">
- </div>
- <br><br><br><br>
-</div>
-
-
-<div style="display: flex;">
- <br><br>
- <div style="flex: 1;">
- </div>
- <div style="text-align: center; flex: 8;">
- <p style="color: #BF74F1; font-size: xx-large; padding: 0">Key
Features</p>
- </div>
- <div style="flex: 1;">
- </div>
- <br><br>
-</div>
-
-<div style="display: flex;">
- <br><br><br><br>
- <div style="flex: 5%;"></div>
- <div style="text-align: center; flex: 25%;">
- <p style="text-align: center; color: #BF74F1; font-size: large;
padding: 0">Change Data Capture</p>
- <hr style="background-color:#BF74F1; width: 60%">
- <p style="text-align: left;">
- Flink CDC supports distributed scanning of historical data of
database and then automatically switches to change data capturing. The switch
uses the incremental snapshot algorithm which ensure the switch action does not
lock the database.
- </p>
- </div>
- <div style="flex: 8%;"></div>
- <div style="text-align: center; flex: 24%;">
- <p style="text-align: center; color: #BF74F1; font-size: large;
padding: 0">Schema Evolution</p>
- <hr style="background-color:#BF74F1; width: 60%">
- <p style="text-align: left;">
- Flink CDC has the ability of automatically creating downstream
table using the inferred table structure based on upstream table, and applying
upstream DDL to downstream systems during change data capturing.</p>
- </div>
- <div style="flex: 8%;"></div>
- <div style="text-align: center; flex: 25%;">
- <p style="text-align: center; color: #BF74F1; font-size: large;
padding: 0">Streaming Pipeline</p>
- <hr style="background-color:#BF74F1; width: 60%">
- <p style="text-align: left;">
- Flink CDC jobs run in streaming mode by default, providing
sub-second end-to-end latency in real-time binlog synchronization scenarios,
effectively ensuring data freshness for downstream businesses.</p>
- </div>
- <div style="flex: 5%;"></div>
- <br><br><br><br>
- <br><br><br><br>
- <br><br><br><br>
-</div>
-
-
-<div style="display: flex;">
- <br><br><br><br>
- <div style="flex: 5%;"></div>
- <div style="text-align: center; flex: 25%;">
- <p style="text-align: center; color: #BF74F1; font-size: large;
padding: 0">Data Transformation</p>
- <hr style="background-color:#BF74F1; width: 60%">
- <p style="text-align: left;">
- Flink CDC will soon support data transform operations of ETL,
including column projection, computed column, filter expression and classical
scalar functions.</p>
- </div>
- <div style="flex: 8%;"></div>
- <div style="text-align: center; flex: 24%;">
- <p style="text-align: center; color: #BF74F1; font-size: large;
padding: 0">Full Database Sync</p>
- <hr style="background-color:#BF74F1; width: 60%">
- <p style="text-align: left;">Flink CDC supports synchronizing all
tables of source database instance to downstream in one job by configuring the
captured database list and table list.</p>
- </div>
- <div style="flex: 8%;"></div>
- <div style="text-align: center; flex: 25%;">
- <p style="text-align: center; color: #BF74F1; font-size: large;
padding: 0">Exactly-Once Semantics</p>
- <hr style="background-color:#BF74F1; width: 60%">
- <p style="text-align: left;">
- Flink CDC supports reading database historical data and
continues to read CDC events with exactly-once processing, even after job
failures.
- </p>
- </div>
- <div style="flex: 5%;">
- </div>
- <br><br><br><br>
- <br><br><br><br>
- <br><br><br><br>
-</div>
-
-<div style="display: flex;">
- <br><br><br><br><br><br>
- <div style="flex: 1;">
- </div>
- <div style="text-align: center; flex: 8;">
- <p style="color: #BF74F1; font-size: xx-large; padding: 0">Learn
More</p>
- </div>
- <div style="flex: 1;">
- </div>
- <br><br><br><br>
-</div>
-
-<div style="display: flex;">
- <br><br><br><br>
- <div style="flex: 1;">
- </div>
- <div style="text-align: left; flex: 3.5; width: 100%">
- <p style="text-align: left; color: #BF74F1; font-size: x-large;
padding: 0">Try Flink CDC</p>
- <p style="text-align: left;">
- Flink CDC provides a series of quick start demos without any
dependencies or java code. A Linux or MacOS computer with Docker installed is
enough.
- Please check out our <a href="{{< ref "docs/get-started/introduction"
>}}">Quick Start</a> for more information.
- </p>
- </div>
- <div style="flex: 1;"></div>
- <div style="text-align: left; flex: 3.5; width: 100%">
- <p style="text-align: left; color: #BF74F1; font-size: x-large;
padding: 0">Get Help with Flink CDC</p>
- <p style="text-align: left;">
- If you get stuck, check out our <a
href="https://flink.apache.org/community.html";>community support resources</a>.
- In particular, Apache Flink’s user mailing list
([email protected]) is consistently ranked as one of the most active of
- any Apache project, and is a great way to get help quickly.</p>
- </div>
- <div style="flex: 1;">
- </div>
- <br><br><br><br>
- <br><br><br><br>
- <br><br><br><br>
-</div>
-
-<div style="background-image: url('fig/index-background-footer.png');
size:inherit; background-size: auto 100%; overflow: hidden">
- <div style="text-align: center">
- <br><br><br><br><br>
- <br><br><br><br><br>
- <h1 style="color: transparent">
- Flink CDC is developed under the umbrella of Apache Flink.
- </h1>
- <p style="color: #FFFFFF; font-size: medium; text-align:left">
- Flink CDC is developed under the umbrella
of <a style="color: #FFFFFF" href="https://flink.apache.org";>Apache Flink</a>.
+<div class="index-wrapper">
+ <div class="top-container bg-purple">
+ <div class="flex flex-col w-full md:w-3/5 justify-center items-start
text-center md:text-left">
+ <h1 class="header-1 font-bold text-white leading-tight">
+ Flink CDC
+ </h1>
+ <p class="leading-normal text-xl text-white">
+ A streaming data integration tool
+ </p>
+ <a href="{{< ref "docs/get-started/introduction" >}}"
class="link-as-button mx-auto bg-white text-black font-bold my-4 px-8">
+ Quick Start
+ </a>
+ </div>
+ <div class="w-full md:w-3/5 py-6 text-center">
+ {{< img src="/fig/cdc-flow.png" alt="Flink CDC Flow" >}}
+ </div>
+ </div>
+ <div class="relative -mt-8 bg-purple">
+ <svg viewBox="0 0 1440 135" version="1.1"
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";>
+ <g stroke="none" stroke-width="1" fill="#FFFFFF"
fill-rule="evenodd">
+ <g fill-rule="nonzero">
+ <g id="group-1">
+ <path d="M0,0 C90.7283404,0.913987361
147.912752,26.791023 291.910178,59.0372741 C387.908462,80.534775
543.605069,88.0306277 759,81.5248326 C469.336065,153.973267
216.336065,151.424573 0,73.8787497" id="path-2" opacity="0.202055432"></path>
+ <path d="M100,103.179907 C277.413333,71.1800754
426.147877,51.7578823 546.203633,44.9133275 C666.259389,38.0687728
810.524845,41.1877184 979,54.2701645 C931.069965,55.3032044
810.303266,73.752879 616.699903,109.619188 C423.096539,145.485498
250.863238,143.33907 100,103.179907 Z" id="path-1" opacity="0.100000001"></path>
+ </g>
+ <g id="group-0" transform="translate(0, 35)"
fill="#FFFFFF">
+ <path d="M0,33.0606204 C56.6001496,51.914314
97.7011995,64.3217623 123.30215,70.2800135 C180.904789,83.6900143
233.718868,88.4076191 271.437642,91.5254689 C310.739609,94.7722042
395.976162,93.8296671 460.333358,89.7584578 C486.055247,88.1321386
518.005961,84.5528588 556.1855,79.0235702 C594.986722,72.966933
621.598158,68.452987 636.017808,65.4846838 C663.117994,59.9091538
711.68124,48.2789543 726.777545,44.9584296 C779.615613,33.3380687
817.965065,21.7432881 855.4 [...]
+ </g>
+ </g>
+ </g>
+ </svg>
+ </div>
+ <div class="bg-white py-8">
+ <div class="container mx-auto">
+ <h2 class="border-none w-full text-3xl font-bold leading-tight
text-center text-primary">
+ What is Flink CDC?
+ </h2>
+ <div class="w-full my-4">
+ <div class="divider"></div>
+ </div>
+ <div class="w-full w-4/5 flex text-center">
+ <div class="basis-1/12"></div>
+ <p class="text-lg basis-10/12">
+ Flink CDC is a distributed data integration tool for real
time data and batch data. Flink CDC brings the simplicity and elegance of data
integration via YAML to describe the data movement and transformation.
+ </p>
+ <div class="basis-1/12"></div>
+ </div>
+ <div class="w-full flex justify-center ">
+ <div class="w-4/5">
+ {{< img src="/fig/index-yaml-example.png" alt="Flink CDC
Example" >}}
+ </div>
+ </div>
+ </div>
+ <div class="container mx-auto flex flex-wrap mt-6">
+ <h2 class="border-none w-full my-2 text-3xl font-bold
leading-tight text-center text-primary">
+ Key Features
+ </h2>
+ <div class="w-full my-4">
+ <div class="divider"></div>
+ </div>
+ <div class="w-full md:w-1/3 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center
text-primary">Change Data Capture</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ Flink CDC supports distributed scanning of historical data
of database and then automatically switches to change data capturing. The
switch uses the incremental snapshot algorithm which ensure the switch action
does not lock the database.
+ </p>
+ </div>
+ <div class="w-full md:w-1/3 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center
text-primary">Schema Evolution</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ Flink CDC has the ability of automatically creating
downstream table using the inferred table structure based on upstream table,
and applying upstream DDL to downstream systems during change data capturing.
+ </p>
+ </div>
+ <div class="w-full md:w-1/3 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center
text-primary">Streaming Pipeline</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ Flink CDC jobs run in streaming mode by default, providing
sub-second end-to-end latency in real-time binlog synchronization scenarios,
effectively ensuring data freshness for downstream businesses.
+ </p>
+ </div>
+ <div class="w-full md:w-1/3 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center text-primary">Data
Transformation</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ Flink CDC will soon support data transform operations of
ETL, including column projection, computed column, filter expression and
classical scalar functions.
+ </p>
+ </div>
+ <div class="w-full md:w-1/3 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center text-primary">Full
Database Sync</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ Flink CDC supports synchronizing all tables of source
database instance to downstream in one job by configuring the captured database
list and table list.
+ </p>
+ </div>
+ <div class="w-full md:w-1/3 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center
text-primary">Exactly-Once Semantics</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ Flink CDC supports reading database historical data and
continues to read CDC events with exactly-once processing, even after job
failures.
+ </p>
+ </div>
+ </div>
+ <div class="container mx-auto flex flex-wrap mt-6">
+ <h2 class="border-none w-full my-2 text-3xl font-bold
leading-tight text-center text-primary">
+ Learn More
+ </h2>
+ <div class="w-full my-4">
+ <div class="divider"></div>
+ </div>
+ <div class="w-full md:w-1/2 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center text-primary">Try
Flink CDC</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ Flink CDC provides a series of quick start demos without
any dependencies or java code. A Linux or MacOS computer with Docker installed
is enough.
+ Please check out our <a href="{{< ref
"docs/get-started/introduction" >}}">Quick Start</a> for more information.
+ </p>
+ </div>
+ <div class="w-full md:w-1/2 px-8 py-6 flex flex-col flex-grow
flex-shrink">
+ <div class="w-full text-lg px-6 text-center text-primary">Get
Help with Flink CDC</div>
+ <div class="w-full my-4">
+ <div class="divider w-1/2 opacity-50"></div>
+ </div>
+ <p class="text-sm my-0 text-center md:text-left">
+ If you get stuck, check out our <a
href="https://flink.apache.org/community.html";>community support resources</a>.
+ In particular, Apache Flink’s user mailing list
([email protected]) is consistently ranked as one of the most active of
+ any Apache project, and is a great way to get help quickly.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="relative bg-purple">
+ <svg viewBox="0 0 1440 148" version="1.1"
xmlns="http://www.w3.org/2000/svg"; xmlns:xlink="http://www.w3.org/1999/xlink";>
+ <g stroke="none" stroke-width="1" fill="#FFFFFF"
fill-rule="evenodd">
+ <path d="M1440,80.1111111 C1383.555,61.3231481 1342.555,48.925
1317,42.9166667 C1259.5,29.396963 1206.707,24.3442407 1169,20.9814815
C1129.711,17.4775741 1044.426,17.6196759 980,20.9814815 C954.25,22.32525
922.25,25.5039444 884,30.5185185 C845.122,36.0376019 818.455,40.1709537
804,42.9166667 C776.833,48.0762037 728.136,58.9102778 713,61.9907407
C660.023,72.7761759 621.544,83.6674722 584,89.6481481 C517.525,100.238074
484.525,101.510315 429,103 C379.49,101.554185 342.823,9 [...]
+ <path d="M338,93.8510923 C530.95466,51.4641029
692.718283,25.7374584 823.290868,16.6711585 C953.863454,7.60485864
1110.7665,11.7362152 1294,29.0652283 C1241.87132,30.4335934
1110.52551,54.8720396 899.962579,102.380567 C689.399649,149.889094
502.078789,147.045936 338,93.8510923 Z" id="path-2" opacity="0.1"></path>
+ <path d="M681,12 C771.72834,12.927528 828.912752,39.187927
972.910178,71.9119003 C1068.90846,93.7278826 1224.60507,101.334785
1440,94.7326078 C1150.33606,168.254352 897.336065,165.6679 681,86.9732496"
id="path-3" opacity="0.1" transform="translate(1060.5, 80) scale(-1, -1)
translate(-1060.5, -80)"></path>
+ </g>
+ </svg>
+ </div>
+ <div class="px-6 bg-purple h-40 relative">
+ <p class="leading-normal text-lg text-white absolute bottom-0">
+ Flink CDC is developed under the umbrella of <a class="text-white"
href="https://flink.apache.org";>Apache Flink</a>.
</p>
- <br><br>
</div>
-</div>
+</div>
\ No newline at end of file
