Skip to content

Commit 1bbfa45

Browse files
leonardBangleonardBang
committed
Generated docs from commit 6cb951c 
0 parents  commit 1bbfa45

File tree

1,058 files changed

+255470
-0
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

1,058 files changed

+255470
-0
lines changed

‎.nojekyll‎

Whitespace-only changes.

‎NOTICE‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
Flink CDC Site
2+
Copyright 2023 Ververica Inc.
3+
4+
This project bundles the following dependencies under the MIT license.
5+
See bundled license files for details.
6+
7+
- termynal (https://github.com/ines/termynal)
8+
-> in lib directory

‎assets/cdc-flow.png‎

538 KB
Loading

‎assets/dingtalk.png‎

140 KB
Loading

‎assets/favicon.png‎

1.12 KB
Loading

‎assets/squirrel.jpg‎

96.8 KB
Loading

‎index.html‎

Lines changed: 252 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,252 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<!-- Required meta tags -->
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<!-- Bootstrap CSS -->
9+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
11+
12+
<!-- Termynal CSS -->
13+
<link rel="stylesheet" href="lib/termynal.css">
14+
15+
<!-- Favicon of website -->
16+
<link rel="icon" type="image/x-icon" href="assets/favicon.png">
17+
18+
<title>CDC Connectors for Apache Flink&reg;</title>
19+
</head>
20+
<body>
21+
<nav class="navbar navbar-expand-lg navbar-dark px-4 py-2" style="background: #336699">
22+
<a class="navbar-brand" href="#">CDC Connectors for Apache Flink&reg;</a>
23+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent" aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">
24+
<span class="navbar-toggler-icon"></span>
25+
</button>
26+
<div class="collapse navbar-collapse justify-content-end" id="navbarContent">
27+
<ul class="navbar-nav">
28+
<li class="nav-item active">
29+
<a class="nav-link" href="https://github.com/ververica/flink-cdc-connectors/releases/">Download</a>
30+
</li>
31+
<li class="nav-item active">
32+
<a class="nav-link" href="https://ververica.github.io/flink-cdc-connectors/master/">Documentation</a>
33+
</li>
34+
<li class="nav-item active">
35+
<a class="nav-link" href="https://github.com/ververica/flink-cdc-connectors/">Source</a>
36+
</li>
37+
</ul>
38+
</div>
39+
</nav>
40+
41+
<section class="hero-banner position-relative">
42+
<div class="bg"></div>
43+
<div class="container position-relative">
44+
<div class="container py-xs-2 py-sm-3 py-md-4 py-xxl-5">
45+
<div class="row py-5">
46+
<div class="col-xl-6 col-lg-8">
47+
<h1 class="display-5 fw-bold lh-1 mb-3" style="color: #336699;">CDC Connectors for Apache Flink&reg;</h1>
48+
<h3 style="color: #336699;">Embrace Database Changes</h3>
49+
<p><a class="github-button" href="https://github.com/ververica/flink-cdc-connectors" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star ververica/flink-cdc-connectors on GitHub">Star</a></p>
50+
<p class="lead">This project provides a set of source connectors for Apache Flink&reg; directly ingesting changes coming from different databases using Change Data Capture(CDC).</p>
51+
<div class="d-grid gap-2 d-md-flex justify-content-md-start">
52+
<a role="button" class="btn btn-primary btn-lg px-4 me-md-2" href="https://github.com/ververica/flink-cdc-connectors/releases/">Download</a>
53+
<a role="button" class="btn btn-secondary btn-lg px-4" href="https://ververica.github.io/flink-cdc-connectors/master/">Documentation</a>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
</section>
60+
61+
<section class="bg-white">
62+
<div class="container py-4">
63+
<div class="row py-3">
64+
<div class="col-12 text-center"><h1>Key Features</h1></div>
65+
</div>
66+
<div class="row py-4">
67+
<div class="col-md-12 col-lg-4 px-4">
68+
<a class="no-decoration-anchor" href="https://ververica.github.io/flink-cdc-connectors/master/content/about.html#features">
69+
<div class="text-center text-primary">
70+
<h1><i class="bi bi-calculator"></i></h1>
71+
<h4>Exactly-once Semantics</h4>
72+
</div>
73+
</a>
74+
<div class="py-3">CDC Connectors for Apache Flink&reg; supports reading database snapshots and continues to read binlogs with exactly-once processing, even after failures.</div>
75+
</div>
76+
<div class="col-md-12 col-lg-4 px-4">
77+
<a class="no-decoration-anchor" href="https://ververica.github.io/flink-cdc-connectors/master/content/about.html#usage-for-table-sql-api">
78+
<div class="text-center text-primary">
79+
<h1><i class="bi bi-hdd-network"></i></h1>
80+
<h4>Table/SQL API</h4>
81+
</div>
82+
</a>
83+
<div class="py-3">Users can use SQL DDL to create a CDC source to monitor changes on a single table.</div>
84+
</div>
85+
<div class="col-md-12 col-lg-4 px-4">
86+
<a class="no-decoration-anchor" href="https://ververica.github.io/flink-cdc-connectors/master/content/about.html#usage-for-datastream-api">
87+
<div class="text-center text-primary">
88+
<h1><i class="bi bi-water"></i></h1>
89+
<h4>DataStream API</h4>
90+
</div>
91+
</a>
92+
<div class="py-3">Users can consume changes on multiple databases and tables in a single job without Debezium and Apache Kafka&reg; deployed.</div>
93+
</div>
94+
</div>
95+
</div>
96+
</section>
97+
98+
<section class="bg-dark text-light">
99+
<div class="container py-4">
100+
<div class="row py-4">
101+
<div class="col-md-12 col-lg-5 mx-auto py-4 align-self-center">
102+
<div class="pb-4 text-center"><h2>Getting Started</h2></div>
103+
<div class="py-4" style="font-size: 20px">CDC Connectors for Apache Flink&reg; provides a series of quick start demos without any dependencies or java code, only a Linux or MacOS computer with Docker installed is enough. With these demos, you can quickly feel the power and convenience of Apache Flink&reg; CDC.</div>
104+
<a role="button" class="btn btn-outline-primary btn-lg px-4" href="https://ververica.github.io/flink-cdc-connectors/master/content/quickstart/index.html">Learn More</a>
105+
</div>
106+
<div class="col-md-12 col-lg-6 mx-auto">
107+
<div class="termynal" data-termynal data-ty-typeDelay="20" data-ty-lineDelay="20">
108+
<span data-ty="input" data-ty-prompt="Flink SQL>">-- creates a mysql cdc table source</span>
109+
<span data-ty="input" data-ty-prompt="Flink SQL>">CREATE TABLE mysql_binlog (</span>
110+
<span data-ty="input" data-ty-prompt="">&nbsp;&nbsp;id INT NOT NULL,</span>
111+
<span data-ty="input" data-ty-prompt="">&nbsp;&nbsp;name STRING,</span>
112+
<span data-ty="input" data-ty-prompt="">&nbsp;&nbsp;description STRING,</span>
113+
<span data-ty="input" data-ty-prompt="">&nbsp;&nbsp;weight DECIMAL(10,3),</span>
114+
<span data-ty="input" data-ty-prompt="">&nbsp;&nbsp;PRIMARY KEY(id) NOT ENFORCED</span>
115+
<span data-ty="input" data-ty-prompt="">) WITH (</span>
116+
<span data-ty="input" data-ty-prompt="">&nbsp;&nbsp;'connector' = 'mysql-cdc',</span>
117+
<span data-ty="input" data-ty-prompt="">&nbsp;&nbsp;'hostname' = 'localhost',</span>
118+
<span data-ty="input" data-ty-prompt="">&nbsp;&nbsp;'port' = '3306',</span>
119+
<span data-ty="input" data-ty-prompt="">&nbsp;&nbsp;'username' = 'flinkuser',</span>
120+
<span data-ty="input" data-ty-prompt="">&nbsp;&nbsp;'password' = 'flinkpw',</span>
121+
<span data-ty="input" data-ty-prompt="">&nbsp;&nbsp;'database-name' = 'inventory',</span>
122+
<span data-ty="input" data-ty-prompt="">&nbsp;&nbsp;'table-name' = 'products'</span>
123+
<span data-ty="input" data-ty-prompt="">);</span>
124+
<span data-ty="input" data-ty-prompt=""></span>
125+
<span data-ty="input" data-ty-prompt="Flink SQL>">-- read snapshot and binlog data from mysql</span>
126+
<span data-ty="input" data-ty-prompt="Flink SQL>">-- and do some transformation</span>
127+
<span data-ty="input" data-ty-prompt="Flink SQL>">-- and show on the client</span>
128+
<span data-ty="input" data-ty-prompt="Flink SQL>">SELECT id, UPPER(name), description, weight FROM mysql_binlog;</span>
129+
</div>
130+
</div>
131+
</div>
132+
</div>
133+
</section>
134+
135+
<section class="bg-white">
136+
<div class="container py-4">
137+
<div class="row py-4">
138+
<div class="col-md-12 col-lg-7 text-center mx-auto" style="color: #2a3a4a;">
139+
<div class="pb-4"><h2>Connect to Your Favorite Database</h2></div>
140+
<div style="font-size: 20px;">CDC Connectors for Apache Flink&reg; supports ingesting snapshot data and real time changes from databases to Flink&reg; and then transform and sink to various downstream systems.</div>
141+
</div>
142+
<div class="col-md-12 col-lg-10 text-center mx-auto"><img src="assets/cdc-flow.png" width="100%" /></div>
143+
</div>
144+
</div>
145+
</section>
146+
147+
<section style="background-color: #ddeeff;">
148+
<div class="container py-4">
149+
<div class="row py-3">
150+
<div class="col-12 text-center"><h2>Join the Community</h2></div>
151+
</div>
152+
<div class="row py-4 justify-content-center">
153+
<div class="col-12 col-md-4 col-xl-3 px-4 align-self-center">
154+
<img src="assets/dingtalk.png" width="100%" />
155+
</div>
156+
<div class="col-12 col-md-8 col-xl-6 p-3">
157+
<a class="no-decoration-anchor" href="https://h5.dingtalk.com/circle/healthCheckin.html?dtaction=os&corpId=dinge369343b40eb68f87c231cb892228ad7&14ee9113-c3=cc3ed38a-82&cbdbhh=qwertyuiop">
158+
<div class="card border-primary my-3">
159+
<div class="card-body" style="background-color: #ddeeff">
160+
<div class="row">
161+
<div class="col-2 align-self-center text-center text-primary">
162+
<h1><i class="bi bi-envelope-paper"></i></h1>
163+
</div>
164+
<div class="col-10">
165+
<h4 class="card-title text-primary">DingTalk Group</h4>
166+
<p class="card-text">Discussion and help from your fellow users.</p>
167+
</div>
168+
</div>
169+
</div>
170+
</div>
171+
</a>
172+
<a class="no-decoration-anchor" href="https://github.com/ververica/flink-cdc-connectors">
173+
<div class="card border-primary my-3">
174+
<div class="card-body" style="background-color: #ddeeff">
175+
<div class="row">
176+
<div class="col-2 align-self-center text-center text-primary">
177+
<h1><i class="bi bi-github"></i></h1>
178+
</div>
179+
<div class="col-10">
180+
<h4 class="card-title text-primary">Github</h4>
181+
<p class="card-text">Development takes place here!</p>
182+
</div>
183+
</div>
184+
</div>
185+
</div>
186+
</a>
187+
<a class="no-decoration-anchor" href="https://github.com/ververica/flink-cdc-connectors/issues">
188+
<div class="card border-primary my-3">
189+
<div class="card-body" style="background-color: #ddeeff">
190+
<div class="row">
191+
<div class="col-2 align-self-center text-center text-primary">
192+
<h1><i class="bi bi-clipboard-check"></i></h1>
193+
</div>
194+
<div class="col-10">
195+
<h4 class="card-title text-primary">Issue Tracking</h4>
196+
<p class="card-text">Report here if you find any issue.</p>
197+
</div>
198+
</div>
199+
</div>
200+
</div>
201+
</a>
202+
</div>
203+
</div>
204+
</div>
205+
</section>
206+
207+
<!-- Copyright -->
208+
<div class="text-center p-3 bg-dark text-light">Apache Flink, Flink&reg;, Apache&reg;, the squirrel logo, and the
209+
Apache feather logo are either registered trademarks or trademarks of The Apache Software Foundation. Copyright
210+
&copy; 2023 Ververica Inc., Licensed under the <a href="https://www.apache.org/licenses/">Apache License, Version
211+
2.0</a>.
212+
</div>
213+
<!-- Copyright -->
214+
215+
<!-- Bootstrap JS -->
216+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
217+
218+
<!-- Termynal JS -->
219+
<script src="lib/termynal.js" data-termynal-container=".termynal"></script>
220+
221+
<!-- Github Buttons JS -->
222+
<script async defer src="https://buttons.github.io/buttons.js"></script>
223+
</body>
224+
225+
<style>
226+
.hero-banner {
227+
height: 475px;
228+
}
229+
230+
.hero-banner > .bg {
231+
background: no-repeat right center;
232+
background-image: linear-gradient(to left, rgba(219, 219, 221, 0.7) 0%, rgba(219, 219, 221, 0.7) 20%, rgba(219, 219, 221, 0.7) 40%), url(assets/squirrel.jpg);
233+
background-color: #dbdbdd;
234+
height: 475px;
235+
top: 0;
236+
position: absolute;
237+
right: 0;
238+
width: 100%;
239+
}
240+
241+
@media (min-width: 992px) {
242+
.hero-banner > .bg {
243+
background-image: linear-gradient(to left, rgba(219, 219, 221, 0) 0%, rgba(219, 219, 221, 0) 20%, rgba(219, 219, 221, 0.5) 40%), url(assets/squirrel.jpg);
244+
}
245+
}
246+
247+
.no-decoration-anchor {
248+
text-decoration: inherit;
249+
color: inherit;
250+
}
251+
</style>
252+
</html>

‎lib/termynal.css‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/**
2+
* termynal.js
3+
*
4+
* @author Ines Montani <[email protected]>
5+
* @version 0.0.1
6+
* @license MIT
7+
*/
8+
9+
:root {
10+
--color-bg: #252a33;
11+
--color-text: #eee;
12+
--color-text-subtle: #a2a2a2;
13+
}
14+
15+
[data-termynal] {
16+
width: 750px;
17+
max-width: 100%;
18+
background: var(--color-bg);
19+
color: var(--color-text);
20+
font-size: 14px;
21+
font-family: 'Fira Mono', Consolas, Menlo, Monaco, 'Courier New', Courier, monospace;
22+
border-radius: 4px;
23+
padding: 75px 45px 35px;
24+
position: relative;
25+
-webkit-box-sizing: border-box;
26+
box-sizing: border-box;
27+
}
28+
29+
[data-termynal]:before {
30+
content: '';
31+
position: absolute;
32+
top: 15px;
33+
left: 15px;
34+
display: inline-block;
35+
width: 15px;
36+
height: 15px;
37+
border-radius: 50%;
38+
/* A little hack to display the window buttons in one pseudo element. */
39+
background: #d9515d;
40+
-webkit-box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
41+
box-shadow: 25px 0 0 #f4c025, 50px 0 0 #3ec930;
42+
}
43+
44+
[data-termynal]:after {
45+
content: 'Flink SQL Client';
46+
position: absolute;
47+
color: var(--color-text-subtle);
48+
top: 5px;
49+
left: 0;
50+
width: 100%;
51+
text-align: center;
52+
}
53+
54+
[data-ty] {
55+
display: block;
56+
line-height: 1.5;
57+
}
58+
59+
[data-ty]:before {
60+
/* Set up defaults and ensure empty lines are displayed. */
61+
content: '';
62+
display: inline-block;
63+
vertical-align: middle;
64+
}
65+
66+
[data-ty="input"]:before,
67+
[data-ty-prompt]:before {
68+
margin-right: 0.75em;
69+
color: var(--color-text-subtle);
70+
}
71+
72+
[data-ty="input"]:before {
73+
content: '$';
74+
}
75+
76+
[data-ty][data-ty-prompt]:before {
77+
content: attr(data-ty-prompt);
78+
}
79+
80+
[data-ty-cursor]:after {
81+
content: attr(data-ty-cursor);
82+
font-family: monospace;
83+
margin-left: 0.5em;
84+
-webkit-animation: blink 1s infinite;
85+
animation: blink 1s infinite;
86+
}
87+
88+
89+
/* Cursor animation */
90+
91+
@-webkit-keyframes blink {
92+
50% {
93+
opacity: 0;
94+
}
95+
}
96+
97+
@keyframes blink {
98+
50% {
99+
opacity: 0;
100+
}
101+
}

0 commit comments

Comments
 (0)