Skip to content

Commit 773acc1

Browse files
jfhamlinjfhamlin
authored
Improvements to github pages REPL (#63)
* Add docs Signed-off-by: James Hamlin <[email protected]> * Fix loading Signed-off-by: James Hamlin <[email protected]> * Fix doc columns Signed-off-by: James Hamlin <[email protected]> * Improve repl behavior on enter Signed-off-by: James Hamlin <[email protected]> --------- Signed-off-by: James Hamlin <[email protected]>
1 parent c8c5f84 commit 773acc1

File tree

3 files changed

+127
-11
lines changed

3 files changed

+127
-11
lines changed

‎doc/favicon.png‎

2.13 KB
Loading

‎doc/index.html‎

Lines changed: 125 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33

44
<head>
55
<meta charset="utf-8">
6-
<title>Glojure</title>
6+
<title>Glojure REPL</title>
7+
<link rel="icon" type="image/x-icon" href="/favicon.png">
8+
79
<script src="https://cdn.tailwindcss.com"></script>
810
<script>
911
window.onmessage = function(event) {
@@ -13,36 +15,152 @@
1315
}
1416
};
1517
</script>
18+
19+
<script>
20+
const DOCS = [
21+
{
22+
title:'Useful Functions',
23+
sections: [
24+
{
25+
title: 'MATH',
26+
items: ['+', '-', '*', '/', 'quot', 'rem', 'mod', 'inc', 'dec', 'max', 'min', 'rand'],
27+
},
28+
{
29+
title: 'COMPARISON',
30+
items: ['=', '==', 'not=', '<', '>', '<=', '>='],
31+
},
32+
{
33+
title: 'PREDICATES',
34+
items: ['nil?', 'identical?', 'zero?', 'pos?', 'neg?', 'even?', 'odd?',
35+
'true?', 'false?', 'distinct?', 'empty?', 'every?', 'not-every?',
36+
'some', 'not-any?'],
37+
},
38+
],
39+
},
40+
{
41+
title: 'Sequences',
42+
sections: [
43+
{
44+
title: 'CREATION',
45+
items: ['vec', 'hash-map', 'set', 'for', 'list', 'list*',
46+
'sorted-map', 'repeat', 'range', 'cycle', 'seq', 'rseq'],
47+
},
48+
{
49+
title: 'INSPECTION',
50+
items: ['first', 'last', 'rest', 'next', 'get', 'get-in', 'count',
51+
'keys', 'vals', 'nth', 'contains?', 'find'],
52+
},
53+
{
54+
title: 'MANIPULATION',
55+
items: ['into', 'conj',, 'cons', 'assoc', 'flatten', 'merge',
56+
'assoc-in', 'dissoc', 'zipmap', 'partition', 'update-in',
57+
'reverse', 'take', 'drop', 'distinct'],
58+
},
59+
],
60+
},
61+
{
62+
title: 'Go Interop',
63+
sections: [
64+
{
65+
title: 'LIBRARY USE',
66+
examples: [
67+
'(fmt.Sprintf "Hello %s!" "World")',
68+
'(math$rand.Intn 10)',
69+
'(strings.ToUpper "The quick brown fox")',
70+
],
71+
},
72+
{
73+
title: 'METHOD CALL',
74+
examples: [
75+
'(.String (time.Now))',
76+
'(.Format (time.Now) "2006-01-02")',
77+
],
78+
},
79+
{
80+
title: 'FIELD ACCESS',
81+
examples: [
82+
'(.Handler (net$http.Server))',
83+
],
84+
},
85+
],
86+
},
87+
];
88+
function addDocs() {
89+
DOCS.forEach((doc) => {
90+
const div = document.createElement('div');
91+
div.classList.add('flex-1', 'p-5', 'bg-gray-200', 'rounded-lg', 'mb-5');
92+
const sectionsHtml = (doc.sections ?? []).map((section) => {
93+
const sectionButtons = (section.items ?? []).map((button) => {
94+
return `
95+
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold m-1 py-2 px-4 rounded">
96+
${button}
97+
</button>
98+
`;
99+
});
100+
const sectionExamples = (section.examples ?? []).map((example) => {
101+
return `
102+
<div class="bg-gray-100 p-2 rounded-lg mb-2">
103+
<code>${example}</code>
104+
</div>
105+
`;
106+
});
107+
return `
108+
<div class="grid grid-cols-4">
109+
<div class="col-span-1 font-semibold mr-5">${section.title}</div>
110+
<div class="col-span-3 flex flex-wrap">
111+
${sectionButtons.join('')}
112+
<div>${sectionExamples.join('')}</div>
113+
</div>
114+
</div>
115+
`;
116+
});
117+
div.innerHTML = `
118+
<h2 class="text-2xl font-semibold">${doc.title}</h2>
119+
<div>
120+
${sectionsHtml.join('')}
121+
</div>
122+
`;
123+
document.getElementById('docs').appendChild(div);
124+
});
125+
}
126+
window.onload = addDocs;
127+
</script>
16128
</head>
17129

18130
<body>
19-
<nav class="bg-white border-gray-200 dark:bg-gray-900">
20-
<div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
131+
<nav class="bg-white border-gray-200 dark:bg-gray-900 mb-2">
132+
<div class="max-w-screen-xl flex flex-col flex-wrap items-center justify-center mx-auto p-4">
21133
<a href="https://github.com/glojurelang/glojure"
134+
target="_blank"
22135
class="flex items-center space-x-3 rtl:space-x-reverse">
23136
<img src="logo_small.webp"
24137
class="h-8 border-2 border-black rounded-full"
25138
alt="Glojure Logo" />
26139
<span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Glojure</span>
27140
</a>
141+
<div class="self-center whitespace-nowrap dark:text-white">
142+
A Clojure dialect hosted in Go.
143+
</div>
28144
</div>
29145
</nav>
30146

31147
<div class="mx-10">
32-
33-
<div class="relative"
148+
<div class="relative flex justify-center"
34149
width="800px" height="500px">
35150
<div id="loading"
36-
class="absolute inset-0 h-full w-[800px] text-white flex flex-col justify-center align-center items-center">
151+
class="absolute l-0 r-0 h-full w-[800px] text-white flex flex-col justify-center align-center items-center">
37152
<img src="logo_small.webp"
38153
class="h-8 border-2 border-white rounded-full w-8 animate-spin"
39154
alt="Glojure Logo" />
40155
<p>Loading REPL...</p>
41156
<p class="text-sm">This may take a few seconds</p>
42157
</div>
43-
<iframe src="./repl" width="800px" height="500px" frameborder="0" />
158+
<iframe src="./repl" width="800px" height="500px" frameborder="0"></iframe>
44159
</div>
45160

161+
<div id="docs"
162+
class="flex flex-col my-5 md:flex-row md:space-x-4">
163+
</div>
46164
</div>
47165

48166
</body>

‎doc/repl/index.html‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,8 +61,6 @@
6161
let mod, inst;
6262

6363
async function run() {
64-
console.clear();
65-
6664
const decoder = new TextDecoder("utf-8");
6765
globalThis.fs.writeSync = function(fd, buf) {
6866
window.top.postMessage({ type: "repl", value: decoder.decode(buf) });
@@ -77,7 +75,7 @@
7775
output.insertBefore(span, inputLine);
7876

7977
// scroll to bottom
80-
inputLine.scrollIntoView();
78+
inputLine.scrollIntoViewIfNeeded();
8179

8280
return buf.length;
8381
};
@@ -102,7 +100,7 @@
102100
document.getElementById('inputLine').addEventListener('keydown', function(event) {
103101
if (event.key === 'Enter') {
104102
event.preventDefault();
105-
let input = this.innerText;
103+
let input = this.innerText.trim();
106104
this.innerText = "";
107105
processInput(input);
108106
if (input !== "") {

0 commit comments

Comments
 (0)