You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@flink.apache.org by le...@apache.org on 2024/06/24 02:54:49 UTC
(flink-cdc) branch release-3.0 updated: [docs] [minor] Optimize styles of the Flink CDC website homepage and index page
This is an automated email from the ASF dual-hosted git repository.
leonard pushed a commit to branch release-3.0
in repository https://gitbox.apache.org/repos/asf/flink-cdc.git
The following commit(s) were added to refs/heads/release-3.0 by this push:
new 470e39568 [docs] [minor] Optimize styles of the Flink CDC website homepage and index page
470e39568 is described below
commit 470e3956862c2c9015cebb8402498da44019fd02
Author: Laffery <49...@users.noreply.github.com>
AuthorDate: Mon Jun 24 10:54:46 2024 +0800
[docs] [minor] Optimize styles of the Flink CDC website homepage and index page
This closes #3422.
---
docs/assets/_custom.scss | 331 ++++++++++++++++++++++++++++++++++++++++++++-
docs/content.zh/_index.md | 332 ++++++++++++++++++++++------------------------
docs/content/_index.md | 332 ++++++++++++++++++++++------------------------
3 files changed, 650 insertions(+), 345 deletions(-)
diff --git a/docs/assets/_custom.scss b/docs/assets/_custom.scss
index 33ccbb406..83b902858 100644
--- a/docs/assets/_custom.scss
+++ b/docs/assets/_custom.scss
@@ -236,4 +236,333 @@ 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 {
+ display: inline-block;
+ 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-row {
+ flex-direction: row;
+ }
+
+ .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;
+ }
+
+ .justify-between {
+ justify-content: space-between;
+ }
+
+ .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;
+ }
+
+ .ml-0 {
+ margin-left: 0;
+ }
+
+ .gap-6 {
+ margin-bottom: 1.5rem;
+ }
+
+ .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;
+ }
+
+ .py-12 {
+ padding-top: 3rem;
+ padding-bottom: 3rem;
+ }
+
+ .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;
+ }
+
+ .-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;
+ }
+ }
+
+ @media (min-width: 1280px) {
+ .xl\:mt-0 {
+ margin-top: 0;
+ }
+ .xl\:ml-16 {
+ margin-left: 4rem;
+ }
+ .xl\:items-start {
+ align-items: flex-start;
+ }
+ .xl\:text-left {
+ text-align: left;
+ }
+ .xl\:flex-row {
+ flex-direction: row;
+ }
+ .xl\:justify-between {
+ justify-content: space-between;
+ }
+ .xl\:w-\[max-content\] {
+ width: max-content;
+ }
+ .xl\:min-w-\[max-content\] {
+ min-width: max-content;
+ }
+ .xl\:my-auto {
+ margin-top: auto;
+ margin-bottom: auto;
+ }
+ }
+}
\ No newline at end of file
diff --git a/docs/content.zh/_index.md b/docs/content.zh/_index.md
index f439ee43b..dd52c5863 100644
--- a/docs/content.zh/_index.md
+++ b/docs/content.zh/_index.md
@@ -22,177 +22,165 @@ 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 (user@flink.apache.org) 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 py-12 block flex xl:items-start justify-between flex-col xl:flex-row">
+ <div class="flex flex-col w-full xl:w-[max-content] xl:min-w-[max-content] justify-center text-center xl: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>
+ <div class="text-center xl:text-left">
+ <a href="{{< ref "docs/get-started/introduction" >}}" class="mx-auto link-as-button bg-white text-black font-bold px-8">
+ Quick Start
+ </a>
+ </div>
+ </div>
+ <div class="w-full text-center mt-8 xl:mt-0 ml-0 xl:ml-16">
+ {{< 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 (user@flink.apache.org) 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..dd52c5863 100644
--- a/docs/content/_index.md
+++ b/docs/content/_index.md
@@ -22,177 +22,165 @@ 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 (user@flink.apache.org) 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 py-12 block flex xl:items-start justify-between flex-col xl:flex-row">
+ <div class="flex flex-col w-full xl:w-[max-content] xl:min-w-[max-content] justify-center text-center xl: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>
+ <div class="text-center xl:text-left">
+ <a href="{{< ref "docs/get-started/introduction" >}}" class="mx-auto link-as-button bg-white text-black font-bold px-8">
+ Quick Start
+ </a>
+ </div>
+ </div>
+ <div class="w-full text-center mt-8 xl:mt-0 ml-0 xl:ml-16">
+ {{< 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 (user@flink.apache.org) 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