-
-
Notifications
You must be signed in to change notification settings - Fork 4
/
index.html
115 lines (113 loc) · 4.97 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Yjs Shared Editing</title>
<meta name="Description" content="A CRDT framework with a powerful abstraction of shared data.">
<link rel="manifest" href="/manifest.webmanifest">
<link rel="icon" type="image/png" href="/images/logo/yjs-120x120.png">
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; connect-src 'self' wss://*.yjs.dev wss://y-webrtc-uchplqjsol.now.sh wss://y-webrtc-signaling-eu.herokuapp.com wss://y-webrtc-signaling-us.herokuapp.com; img-src * data:; media-src *; style-src 'self' 'unsafe-inline'; font-src 'self' data:; script-src 'self' 'sha512-s0XTn6LzHFaci2Tk4tdmWR5a2XQMewF60esMgduZ+abOeiv0GJy6h2U2AG4aqk79efGsbVt3DAKlz1m58SboNg==';">
<meta name="viewport" content="width=device-width,initial-scale=1">
<script>if ("serviceWorker" in navigator && !navigator.serviceWorker.controller) { navigator.serviceWorker.register("./service-worker.js", { scope: "./" }) }</script>
<link rel="stylesheet" href="./styles/main.css">
<script type="module" src="./dist/index.js" defer></script>
</head>
<body>
<!--
A fake / hidden checkbox is used as click reciever,
so you can use the :checked selector on it.
-->
<input id="hamburger-checkbox" type="checkbox"/>
<div id="hamburger-background"></div>
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<nav>
<div>
<ul class="nav-internal">
<li><a href="#intro">Overview</a></li>
<li><a href="#features">Features</a></li>
<li><a href="#demos">Demos</a></li>
<li><a href="#community">Community</a></li>
</ul>
<ul class="nav-external">
<li><a href="https://docs.yjs.dev" target="_blank">Documentation</a></li>
<li><a href="https://github.com/yjs/yjs-demos" target="_blank">Demos</a></li>
<li><a href="https://github.com/yjs/yjs" target="_blank">GitHub</a></li>
<li><a href="https://discuss.yjs.dev" target="_blank">Discuss</a></li>
<li><a href="https://gitter.im/Yjs/community" target="_blank">Gitter</a></li>
</ul>
</div>
</nav>
<main>
<div id="intro">
<div id="intro-name">
Your name: <div class="colorpicker"></div><input hidden type="text"
placeholder="Anonymous" maxlength="25" spellcheck="false"/>
</div>
<div id="intro-cursors"></div>
</div>
<div id="features">
<p>
Yjs is a shared editing framework. It exposes <span class="highlight">Shared Types</span> that can
be manipulated like any other data type. But they are synced
automatically!
</p>
<!--textarea id="features-typedemo" spellcheck="false">
const ymap = new Y.Map()
ymap.set(key, value)
ymap.observe(event => { console.log('The shared map has changed') })
const yarray = new Y.Array()
yarray.insert(0, [1, 2, 3])
yarray.observe(event => { console.log('The shared array has changed') })
const ytext = new Y.Text()
ytext.insert(0, 'hello world', { bold: true })
ytext.observe(event => { console.log('The shared text has changed') })
</textarea-->
<div id="features-items">
<div class="box-container">
<h5>Automatic Syncing</h5>
<p>All interactive elements on this website are built with shared
types. There are many extensions available for binding shared types to
editors like ProseMirror, Quill, and CodeMirror.</p>
</div>
<div class="box-container">
<h5>Offline Support</h5>
<p>
No waiting for slow connections. The shared data can be stored in a local
database (e.g. indexeddb) and will be available right away. Render the
information you have and sync later.
</p>
</div>
<div class="box-container">
<h5>Peer-to-Peer</h5>
<p>Even if you don't build a peer-to-peer network,
decentralized systems are faster, easier to scale, and more fault
tolerant.
</p>
</div>
</div>
</div>
<div id="demos">
<h2>Demos</h2>
<p> Open this website in several windows and observe how the content syncs.
This website, including the examples, is offline ready and connects to other peers over a peer-to-peer network using <a href="https://github.com/yjs/y-webrtc">y-webrtc</a>. The data is automatically synced when you reconnect to the internet. There are many more demos in the <a
href="https://github.com/yjs/yjs-demos">yjs-demos</a> repository.</p>
<y-demos></y-demos>
<div id="demo-content"></div>
</div>
<div id="community">
<div>
<img src="./images/logo/yjs-community.svg" alt="Yjs-community"/>
<div>
<a href="https://github.com/yjs" target="_blank">GitHub</a></span> |
<a href="https://discuss.yjs.dev" target="_blank">Discuss</a></span> |
<a href="https://gitter.im/Yjs/community" target="_blank">Gitter</a>
</div>
</div>
</div>
</main>
<div id="userlist" />
</body>
</html>