You are viewing a plain text version of this content. The canonical link for it is here.
Posted to issues@flink.apache.org by "Laffery (via GitHub)" <gi...@apache.org> on 2024/04/07 04:33:15 UTC
[PR] [minor][cdc][docs] Optimize styles of the Flink CDC website docs home… [flink-cdc]
Laffery opened a new pull request, #3208:
URL: https://github.com/apache/flink-cdc/pull/3208
Optimize styles of the Flink CDC website documentation homepage:
- support responsive styles to improve reading experience under mobile device.
- optimize the background image to avoid large blank areas and increase the information content of the first screen
- highlight the`Quick Start` button to help users find it well
Take iPhone 14pm (430px, 932px) for an example
**Before:**
<img width="322" alt="image" src="https://github.com/apache/flink-cdc/assets/49607541/65005938-f4f3-4d9b-8740-24ab63fc7013">
<img width="322" alt="image" src="https://github.com/apache/flink-cdc/assets/49607541/3a2ec46f-4226-4e73-a92e-b7945bc8f37f">
<img width="322" alt="image" src="https://github.com/apache/flink-cdc/assets/49607541/b964b230-7460-4e92-a27c-78a07b9fcd4b">
**After:**
<img width="324" alt="image" src="https://github.com/apache/flink-cdc/assets/49607541/a558175a-23fb-4677-b31a-fc090da60f33">
<img width="320" alt="image" src="https://github.com/apache/flink-cdc/assets/49607541/b36f0491-7250-4f4c-9869-02140d95794e">
<img width="322" alt="image" src="https://github.com/apache/flink-cdc/assets/49607541/c1f64d82-9cd0-44f8-983b-be3fae4b19a6">
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [minor][cdc][docs] Optimize styles of the Flink CDC website docs home… [flink-cdc]
Posted by "leonardBang (via GitHub)" <gi...@apache.org>.
leonardBang merged PR #3208:
URL: https://github.com/apache/flink-cdc/pull/3208
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [minor][cdc][docs] Optimize styles of the Flink CDC website docs home… [flink-cdc]
Posted by "Laffery (via GitHub)" <gi...@apache.org>.
Laffery commented on PR #3208:
URL: https://github.com/apache/flink-cdc/pull/3208#issuecomment-2044144359
> @Laffery Please add `/` before `fig`. And ci will pass.
Thanks for your kind tips, I've finished and hope you review and trigger the CI again 🙏
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [minor][cdc][docs] Optimize styles of the Flink CDC website docs home… [flink-cdc]
Posted by "leonardBang (via GitHub)" <gi...@apache.org>.
leonardBang commented on PR #3208:
URL: https://github.com/apache/flink-cdc/pull/3208#issuecomment-2041324990
@GOODBOY008 Would you like to help review this PR？
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [minor][cdc][docs] Optimize styles of the Flink CDC website docs home… [flink-cdc]
Posted by "Laffery (via GitHub)" <gi...@apache.org>.
Laffery commented on PR #3208:
URL: https://github.com/apache/flink-cdc/pull/3208#issuecomment-2052692792
> @Laffery I left some suggestions.
Ohh it's really helpful on these details, I've commited again according to your suggestions.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
Re: [PR] [minor][cdc][docs] Optimize styles of the Flink CDC website docs home… [flink-cdc]
Posted by "GOODBOY008 (via GitHub)" <gi...@apache.org>.
GOODBOY008 commented on code in PR #3208:
URL: https://github.com/apache/flink-cdc/pull/3208#discussion_r1556997233
##########
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 (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">
+ <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">}}
Review Comment:
```suggestion
{{< img src="/fig/cdc-flow.png" alt="Flink CDC Flow" >}}
```
##########
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 (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">
+ <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.430968,15.2222694 C921.762157,3.67668179 954.732352,2.05626571 1010.21307,0 C1059.70784,1.02813285 1096.37415,2.65346824 1120.20801,4.87502229 C1160.65439,8.64517071 1207.54849,17.1083275 1234.31384,21.5189682 C1284.74314,29.8266752 1353.50909,46.2298213 1440,70.7495601 L1440,102.242647 L0,102.242647" id="path-0"></path>
+ </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">}}
Review Comment:
```suggestion
{{< img src="/fig/index-yaml-example.png" alt="Flink CDC Example" >}}
```
##########
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 (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">
+ <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">}}
Review Comment:
```suggestion
{{< img src="/fig/cdc-flow.png" alt="Flink CDC Flow" >}}
```
##########
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 (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">
+ <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.430968,15.2222694 C921.762157,3.67668179 954.732352,2.05626571 1010.21307,0 C1059.70784,1.02813285 1096.37415,2.65346824 1120.20801,4.87502229 C1160.65439,8.64517071 1207.54849,17.1083275 1234.31384,21.5189682 C1284.74314,29.8266752 1353.50909,46.2298213 1440,70.7495601 L1440,102.242647 L0,102.242647" id="path-0"></path>
+ </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">}}
Review Comment:
```suggestion
{{< img src="/fig/index-yaml-example.png" alt="Flink CDC Example" >}}
```
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: issues-unsubscribe@flink.apache.org
For queries about this service, please contact Infrastructure at:
users@infra.apache.org