Skip to content

Commit 99c2709

Browse files
stsewdstsewd
committed
First try to publish playground
1 parent 374529d commit 99c2709

7 files changed

+669
-0
lines changed

‎Makefile

+2
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ serve: build
1010

1111
release: build format
1212
npm run wasm
13+
# GitHub pages doesn't like symbolic links
14+
cp tree-sitter-comment.wasm docs/js/tree-sitter-comment.wasm
1315

1416
format:
1517
clang-format -i \

‎docs/.nojekyll

Whitespace-only changes.

‎docs/index.html

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
<!--
2+
Based on: https://github.com/stsewd/tree-sitter-rst/blob/master/docs/index.html
3+
4+
Assets from:
5+
- https://github.com/tree-sitter/tree-sitter/blob/c6dd5da/docs/assets/js/playground.js
6+
- tree-sitter.js, tree-sitter.wasm from https://github.com/tree-sitter/tree-sitter/releases/
7+
-->
8+
<head>
9+
<meta charset="utf-8">
10+
<title>Grammar for comment tags like TODO - tree-sitter-comment</title>
11+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.45.0/codemirror.min.css">
12+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.min.css">
13+
<link rel="icon" type="image/png" href="http://tree-sitter.github.io/tree-sitter/assets/images/favicon-32x32.png" sizes="32x32" />
14+
<link rel="icon" type="image/png" href="http://tree-sitter.github.io/tree-sitter/assets/images/favicon-16x16.png" sizes="16x16" />
15+
</head>
16+
17+
<body>
18+
<div id="playground-container" style="visibility: hidden;">
19+
<header>
20+
<div class=header-item>
21+
<bold>
22+
<a href="https://github.com/stsewd/tree-sitter-comment" target="_blank">
23+
tree-sitter-comment
24+
</a>
25+
</bold>
26+
</div>
27+
28+
<div class=header-item>
29+
<label for="logging-checkbox">log</label>
30+
<input id="logging-checkbox" type="checkbox"></input>
31+
</div>
32+
33+
<div class=header-item>
34+
<label for="query-checkbox">query</label>
35+
<input id="query-checkbox" type="checkbox"></input>
36+
</div>
37+
38+
<div class=header-item>
39+
<label for="update-time">parse time: </label>
40+
<span id="update-time"></span>
41+
</div>
42+
43+
<select id="language-select" style="display: none;">
44+
<option value="comment">Parser</option>
45+
</select>
46+
</header>
47+
48+
<main>
49+
<div id="input-pane">
50+
<div id="code-container">
51+
<textarea id="code-input"></textarea>
52+
</div>
53+
54+
<div id="query-container" style="visibility: hidden; position: absolute;">
55+
<textarea id="query-input"></textarea>
56+
</div>
57+
</div>
58+
59+
<div id="output-container-scroll">
60+
<pre id="output-container" class="highlight"></pre>
61+
</div>
62+
</main>
63+
</div>
64+
65+
<script
66+
src="https://code.jquery.com/jquery-3.3.1.min.js"
67+
crossorigin="anonymous">
68+
</script>
69+
70+
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.45.0/codemirror.min.js"></script>
71+
<script src="https://cdnjs.cloudflare.com/ajax/libs/clusterize.js/0.18.0/clusterize.min.js"></script>
72+
73+
<script>LANGUAGE_BASE_URL = "js";</script>
74+
<script src=js/tree-sitter.js></script>
75+
<script src=js/playground.js></script>
76+
77+
<script>
78+
(codeExample => {
79+
const handle = setInterval(() => {
80+
const $codeEditor = document.querySelector('.CodeMirror');
81+
if ($codeEditor) {
82+
$codeEditor.CodeMirror.setValue(codeExample);
83+
clearInterval(handle);
84+
}
85+
}, 500);
86+
})(`TODO: something needs to be done
87+
TODO(stsewd): something needs to be done by @stsewd
88+
89+
XXX: fix something else.
90+
XXX: extra white spaces.
91+
92+
(NOTE: this works too).
93+
94+
NOTE-BUG (stsewd): tags can be separated by `-`
95+
NOTE_BUG: or by \`_\`.
96+
97+
NOTE: check https://github.com/stsewd/tree-sitter-comment`);
98+
</script>
99+
100+
<style>
101+
body {
102+
margin: 0;
103+
padding: 0;
104+
}
105+
106+
#playground-container {
107+
width: 100%;
108+
height: 100%;
109+
display: flex;
110+
flex-direction: column;
111+
}
112+
113+
header {
114+
box-sizing: border-box;
115+
display: flex;
116+
padding: 20px;
117+
height: 60px;
118+
border-bottom: 1px solid #aaa;
119+
}
120+
121+
main {
122+
flex: 1;
123+
position: relative;
124+
}
125+
126+
#input-pane {
127+
position: absolute;
128+
top: 0;
129+
left: 0;
130+
bottom: 0;
131+
right: 50%;
132+
display: flex;
133+
flex-direction: column;
134+
}
135+
136+
#code-container, #query-container {
137+
flex: 1;
138+
position: relative;
139+
overflow: hidden;
140+
border-right: 1px solid #aaa;
141+
border-bottom: 1px solid #aaa;
142+
}
143+
144+
#output-container-scroll {
145+
position: absolute;
146+
top: 0;
147+
left: 50%;
148+
bottom: 0;
149+
right: 0;
150+
}
151+
152+
.header-item {
153+
margin-right: 30px;
154+
}
155+
156+
#playground-container .CodeMirror {
157+
position: absolute;
158+
top: 0;
159+
bottom: 0;
160+
left: 0;
161+
right: 0;
162+
height: 100%;
163+
}
164+
165+
#output-container-scroll {
166+
flex: 1;
167+
padding: 0;
168+
overflow: auto;
169+
}
170+
171+
#output-container {
172+
padding: 0 10px;
173+
margin: 0;
174+
}
175+
176+
#logging-checkbox {
177+
vertical-align: middle;
178+
}
179+
180+
.CodeMirror div.CodeMirror-cursor {
181+
border-left: 3px solid red;
182+
}
183+
184+
a {
185+
text-decoration: none;
186+
color: #040404;
187+
padding: 2px;
188+
}
189+
190+
a:hover {
191+
text-decoration: underline;
192+
}
193+
194+
a.highlighted {
195+
background-color: #d9d9d9;
196+
color: red;
197+
border-radius: 3px;
198+
text-decoration: underline;
199+
}
200+
201+
.query-error {
202+
text-decoration: underline red dashed;
203+
}
204+
</style>
205+
</body>

0 commit comments

Comments
 (0)