-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
154 lines (151 loc) · 14.5 KB
/
Copy pathindex.html
File metadata and controls
154 lines (151 loc) · 14.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover">
<meta name="theme-color" content="#0052D4">
<link rel="shortcut icon" href="assets/img/favicon.png" type="image/png">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;700&family=Raleway:wght@700&family=Ubuntu+Mono&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/idea.min.css">
<link rel="stylesheet" href="assets/css/index.css">
<title>KSML</title>
<script>
//- Picture element HTML5 shiv
document.createElement( 'picture' );
</script>
<script src="https://cdn.rawgit.com/scottjehl/picturefill/3.0.2/dist/picturefill.min.js" async=""></script>
</head>
<body>
<header class="header">
<div class="container header__container"><a class="header__logo" href="/"><img src="assets/img/logo.svg" alt="KSML"></a>
<div class="header__nav">
<nav class="menu"> <a class="menu__link" href="index.html">Overview</a><a class="menu__link" href="getting-started.html">Getting Started</a><a class="menu__link" href="https://axual.github.io/ksml/">Documentation</a></nav>
</div>
<button class="header__burger" id="burger" aria-label="Menu button"><svg data-name="menu" viewBox="0 0 36 36" width="36" height="36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M34.5 19.469h-33a1.5 1.5 0 010-3h33a1.5 1.5 0 010 3zM34.5 7.969h-33a1.5 1.5 0 010-3h33a1.5 1.5 0 010 3zM34.5 30.969h-33a1.5 1.5 0 010-3h33a1.5 1.5 0 010 3z" fill="#1F2854"/></svg></button>
</div>
</header>
<div id="menu">
<button id="burgerClose" aria-label="Close"><svg data-name="close" width="36" height="36" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M28.395 30.517L5.061 7.181a1.5 1.5 0 012.121-2.121l23.334 23.334a1.5 1.5 0 01-2.12 2.122z" fill="#1F2854"/><path d="M30.517 7.182L7.181 30.516a1.5 1.5 0 01-2.121-2.12L28.395 5.06a1.5 1.5 0 012.122 2.12z" fill="#1F2854"/></svg></button>
<nav class="menu"> <a class="menu__link" href="index.html">Overview</a><a class="menu__link" href="getting-started.html">Getting Started</a><a class="menu__link" href="https://axual.github.io/ksml/">Documentation</a></nav>
</div>
<main>
<section class="home-promo">
<picture class="home-promo__illustration"><img class="d" src="assets/img/home-promo/illustration.png" alt="illustration"><img class="m" src="assets/img/home-promo/illustration-m.png" alt="illustration"></picture>
<div class="container">
<div class="home-promo__info">
<h1 class="home-promo__title">KSML:<br/>Kafka Streams for Low Code Environments</h1>
<div class="home-promo__btns"><a class="btn btn_gradient home-promo__btn" href="getting-started.html"> <span>Getting started</span></a><a class="btn btn_stroke home-promo__btn" href="https://github.com/Axual/ksml"> <svg data-name="git" width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.524 5.748a10.952 10.952 0 00-4.003-4.004C14.836.761 12.996.27 11 .27S7.164.761 5.478 1.744a10.95 10.95 0 00-4.003 4.004C.492 7.433 0 9.273 0 11.268c0 2.398.7 4.553 2.098 6.467 1.4 1.915 3.206 3.24 5.421 3.975.258.048.449.014.573-.1a.56.56 0 00.186-.43l-.007-.773c-.005-.487-.007-.912-.007-1.275l-.33.057c-.21.039-.475.055-.795.05a6.061 6.061 0 01-.995-.1 2.225 2.225 0 01-.96-.43 1.817 1.817 0 01-.63-.88l-.143-.33a3.58 3.58 0 00-.45-.73c-.206-.267-.414-.449-.624-.544l-.1-.072a1.05 1.05 0 01-.186-.172.786.786 0 01-.13-.2c-.028-.067-.004-.122.072-.165.077-.043.215-.064.416-.064l.286.042c.191.039.427.153.71.344.28.191.512.44.694.745.22.391.484.69.795.895.31.205.623.308.938.308.315 0 .587-.024.816-.072.229-.047.444-.12.645-.215.085-.64.32-1.131.701-1.475a9.812 9.812 0 01-1.468-.258 5.845 5.845 0 01-1.346-.559 3.855 3.855 0 01-1.153-.96c-.306-.381-.556-.883-.752-1.503-.196-.62-.293-1.337-.293-2.148 0-1.156.377-2.14 1.131-2.951-.353-.869-.32-1.843.1-2.922.277-.086.688-.021 1.232.194.544.214.943.399 1.196.551.253.153.456.282.609.387A10.17 10.17 0 0111 5.583c.945 0 1.862.124 2.75.372l.544-.344c.372-.229.812-.44 1.318-.63.506-.191.893-.244 1.16-.158.43 1.08.468 2.053.115 2.922.754.812 1.131 1.795 1.131 2.95 0 .812-.098 1.53-.293 2.156-.196.626-.449 1.127-.76 1.504-.31.377-.697.695-1.16.952a5.86 5.86 0 01-1.346.56c-.435.114-.924.2-1.468.257.496.43.745 1.108.745 2.034v3.022c0 .171.06.315.179.43.12.114.308.147.565.1 2.216-.736 4.023-2.06 5.422-3.975C21.3 15.82 22 13.665 22 11.268c0-1.995-.493-3.835-1.476-5.52z" fill="#1F2854"/></svg><span>To the code</span></a>
</div>
</div>
<!-- Commented out the video section, but can be introduced again when the video is ready -->
<!-- <div class="home-promo__video">-->
<!-- <div class="video" data-videoid="l-XkRJnHpTI"><a class="video__link" href="https://youtu.be/l-XkRJnHpTI">-->
<!-- <picture><img class="video__media" src="assets/img/video/video-preview.png" alt="KSML: Kafka Streams for Low Code Environments"></picture></a>-->
<!-- <button class="video__button" type="button" aria-label="Play video"><span></span><svg data-name="play"width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">-->
<!--<path d="M10.3905 34.375C9.91086 34.3741 9.43968 34.2483 9.02334 34.0101C8.08584 33.4789 7.50303 32.4476 7.50303 31.3281V8.67183C7.50303 7.54917 8.08584 6.52105 9.02334 5.9898C9.44959 5.74483 9.93382 5.61885 10.4254 5.62503C10.917 5.63122 11.3979 5.76934 11.8179 6.02495L31.1811 17.6156C31.5847 17.8686 31.9174 18.22 32.148 18.6368C32.3786 19.0536 32.4995 19.5221 32.4995 19.9984C32.4995 20.4747 32.3786 20.9432 32.148 21.36C31.9174 21.7768 31.5847 22.1282 31.1811 22.3812L11.8147 33.975C11.385 34.2348 10.8927 34.373 10.3905 34.375Z" fill="white"/>-->
<!--</svg>-->
<!-- </button>-->
<!-- </div>-->
<!-- </div>-->
</div>
</section>
<div class="home-bg">
<section class="home-about">
<div class="container">
<div class="home-about__title">KSML is...</div>
</div>
<div class="home-about__boxes">
<div class="home-about__box">
<div class="container home-about__box-wrap">
<div class="home-about__illustration"> <img src="assets/img/home-about/illustration-1.png" alt="Low code stream processing"></div>
<div class="home-about__info">
<div class="home-about__info-icon blue">
<svg data-name="modular" width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M13.929 23.36l-3.072 5.32 2.784 4.822a.996.996 0 00.863.498h4.992c.356 0 .685-.19.863-.498l2.784-4.822-3.072-5.32H13.93zM16.004 12.632v1.858l-.292-.292a.996.996 0 00-1.409 1.409l1.993 1.992a.996.996 0 001.408 0l1.992-1.992a.996.996 0 10-1.408-1.409l-.292.292v-1.858h-1.992zM13.641 10.141a.996.996 0 00.863.498h4.992c.356 0 .685-.19.863-.498l2.496-4.323a.996.996 0 000-.996L20.36.498A.996.996 0 0019.496 0h-4.992a.996.996 0 00-.863.498l-2.496 4.324a.996.996 0 000 .996l2.496 4.323zM33.794 21.867l-2.496-4.324a.996.996 0 00-.863-.498h-4.992a.996.996 0 00-.863.498l-2.783 4.822 3.07 5.32h5.568c.356 0 .685-.19.863-.499l2.496-4.323a.996.996 0 000-.996zM9.42 17.543a.996.996 0 00-.863-.498H3.565a.996.996 0 00-.863.498L.206 21.867a.996.996 0 000 .996l2.496 4.323a.996.996 0 00.863.498h5.567l3.072-5.32-2.784-4.82z" fill="#fff"/></svg></div>
<h2>Low code stream processing</h2>
<p class="p1">Write streaming applications using nothing more than YAML and some Python snippets. No Java development or build pipelines necessary. </p>
</div>
</div>
</div>
<div class="home-about__box reverse">
<div class="container home-about__box-wrap">
<div class="home-about__illustration">
<div class="code">
<div class="code__box">
<pre> <code class="language-yaml">
<pre>
streams:
ksml_sensordata_avro:
topic: ksml_sensordata_avro
keyType: string
valueType: avro:SensorData
functions:
print_message:
type: forEach
code: "print('key='+(key if isinstance(key,str) else str(key))+', value='+(value if isinstance(value,str) else str(value)))"
pipelines:
main:
from: ksml_sensordata_avro
forEach: print_message</pre>
</code></pre>
</div>
</div>
</div>
<div class="home-about__info">
<div class="home-about__info-icon yellow"><svg data-name="code" width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#prefix__clip0)" fill="#fff"><path d="M16.06 16.846a.717.717 0 00-.21-.507L4.103 4.594a.717.717 0 00-1.014 0L.21 7.472a.716.716 0 000 1.014l8.36 8.36-8.36 8.36a.718.718 0 000 1.015l2.879 2.878a.714.714 0 001.014 0L15.85 17.353a.714.714 0 00.21-.507zM33.283 25.03H15.051a.717.717 0 00-.717.716V28.9c0 .396.32.717.717.717h18.232A.717.717 0 0034 28.9v-3.154a.717.717 0 00-.717-.717z"/></g><defs><clipPath id="prefix__clip0"><path fill="#fff" d="M0 0h34v34H0z"/></clipPath></defs></svg></div>
<h2>Easy syntax: what you see is what you stream</h2>
<p class="p1">The flow of messages is easily read and modified. Inserting operations takes no more than 10 seconds, and your new app runs in under 20. </p>
</div>
</div>
</div>
<div class="home-about__box">
<div class="container home-about__box-wrap">
<div class="home-about__illustration"> <img src="assets/img/home-about/illustration-2.svg" alt="Python function libraries at your fingertips"></div>
<div class="home-about__info">
<div class="home-about__info-icon green"><svg data-name="search" width="34" height="34" viewBox="0 0 34 34" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(#prefix__clip0)" fill="#fff"><path d="M33.585 31.582l-3.598-3.599a7.04 7.04 0 001.18-3.9A7.091 7.091 0 0024.083 17 7.091 7.091 0 0017 24.083a7.091 7.091 0 007.083 7.084 7.04 7.04 0 003.9-1.18l3.599 3.598c.554.554 1.449.554 2.003 0a1.415 1.415 0 000-2.003zm-9.502-3.249a4.255 4.255 0 01-4.25-4.25 4.255 4.255 0 014.25-4.25 4.255 4.255 0 014.25 4.25 4.255 4.255 0 01-4.25 4.25z"/><path d="M24.083 14.167V7.083a1.42 1.42 0 00-1.416-1.416H21.25v-4.25A1.42 1.42 0 0019.833 0H4.25a4.265 4.265 0 00-3.003 1.247A4.24 4.24 0 000 4.25v22.667a4.262 4.262 0 004.25 4.25h12.906a9.874 9.874 0 01-2.99-7.084c0-5.468 4.449-9.916 9.917-9.916zM4.25 5.667A1.42 1.42 0 012.833 4.25c0-.78.638-1.417 1.417-1.417h14.167v2.834H4.25z"/></g><defs><clipPath id="prefix__clip0"><path fill="#fff" d="M0 0h34v34H0z"/></clipPath></defs></svg></div>
<h2>Python function <br> libraries at your fingertips</h2>
<p class="p1">KSML definitions allow Python libraries to be imported, providing a wealth of existing code to be reused in streaming apps. </p>
</div>
</div>
</div>
</div>
</section>
<section class="home-cta">
<div class="container home-cta__container">
<div class="home-cta__wrap">
<div class="home-cta__title">Create your first KSML app in minutes</div>
<div class="home-cta__btn"><a class="btn btn_white" href="getting-started.html"> <span>Getting started</span></a>
</div>
</div>
</div>
</section>
</div>
</main>
<footer class="footer">
<div class="container">
<div class="footer__wrap">
<div class="footer__top"><a class="footer__logo" href="/"><img src="assets/img/logo.svg" alt="KSML"></a>
<div class="footer__nav">
<nav class="menu"> <a class="menu__link" href="index.html">Overview</a><a class="menu__link" href="getting-started.html">Getting Started</a><a class="menu__link" href="https://axual.github.io/ksml/">Documentation</a></nav>
</div>
<div class="footer__socials" style="visibility: hidden">
<ul class="socials">
<li class="socials__item"><a href="#" title="facebook" target="_blank"><svg data-name="fb" width="8" height="16" viewBox="0 0 8 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5.826 3.327H7.76V.47H5.487v.01C2.733.58 2.169 2.127 2.119 3.752h-.005v1.426H.239v2.797h1.875v7.496h2.825V7.975h2.315l.447-2.797h-2.76v-.861c0-.55.365-.99.885-.99z"/></svg></a></li>
<li class="socials__item"><a href="#" title="linkein" target="_blank"><svg data-name="in" width="15" height="14" viewBox="0 0 15 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M.452 13.61h2.81V4.248H.451v9.362zm10.943-9.686c-1.363 0-2.583.498-3.448 1.596V4.217h-2.82v9.393h2.82V8.53c0-1.073.983-2.12 2.215-2.12 1.232 0 1.536 1.047 1.536 2.094v5.105h2.809V8.295c0-3.69-1.748-4.371-3.112-4.371zm-9.551-.612A1.407 1.407 0 101.842.5a1.407 1.407 0 00.002 2.813z"/></svg></a></li>
<li class="socials__item"><a href="#" title="youtube" target="_blank"><svg data-name="yt" width="20" height="14" viewBox="0 0 20 14" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.131 9.81L13.011 7 8.13 4.19v5.62zm10.856 1.714c.386-1.467.386-4.509.386-4.509s.015-3.057-.386-4.524A2.35 2.35 0 0017.334.84C15.868.438 10 .438 10 .438s-5.868 0-7.335.386A2.396 2.396 0 001.013 2.49C.627 3.958.627 7 .627 7s0 3.057.386 4.509c.216.803.85 1.436 1.652 1.652 1.483.402 7.335.402 7.335.402s5.867 0 7.334-.387a2.349 2.349 0 001.653-1.652z"/></svg></a></li>
</ul>
</div>
</div>
<div class="footer__bottom"> <span class="footer__license">Licensed under Apache License v2</span>
<var>|</var><span class="footer__copyright">© 2021 Axual. All rights reserved<br/>
Apache Kafka, Kafka and other trademarks, service marks, and copyrights are the property of their respective owners.</span>
</div>
</div>
</div>
</footer>
<script src="https://unpkg.com/highlightjs-badge/highlightjs/highlight.pack.js"></script>
<script src="https://unpkg.com/highlightjs-badge/highlightjs-badge.min.js"></script>
<script src="assets/js/index.js"></script>
</body>
</html>