-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·132 lines (120 loc) · 6.81 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
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>BashType | Editor </title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/Navigation-with-Button.css">
<link rel="stylesheet" href="assets/css/styles.css">
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-light navbar-expand-md navigation-clean-button">
<div class="container"><a class="navbar-brand" href="#">BashType</a><button data-toggle="collapse" class="navbar-toggler" data-target="#navcol-1"><span class="sr-only">Toggle navigation</span><span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse"
id="navcol-1">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item" role="presentation"></li>
<li class="nav-item" role="presentation"></li>
<li class="nav-item dropdown"><a class="dropdown-toggle nav-link" data-toggle="dropdown" aria-expanded="false" href="#">Examples </a>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" role="presentation" href="#" onclick="loadEx('arithmetic/basic.ts')">Basic Arithmetic</a>
<a class="dropdown-item" role="presentation" href="#" onclick="loadEx('string/basicStrings.ts')">Basic Strings</a>
<a class="dropdown-item" role="presentation" href="#" onclick="loadEx('branch/ifelse.ts')">Branch | if-else</a>
<a class="dropdown-item" role="presentation" href="#" onclick="loadEx('loop/while.ts')">Loops | while</a>
<a class="dropdown-item" role="presentation" href="#" onclick="loadEx('program/fibonacci.ts')">Program | Fibonacci</a>
<a class="dropdown-item" role="presentation" href="#" onclick="loadEx('extra/richprint.ts')">Extras | Rich Print</a>
</div>
</li>
<li class="nav-item" role="presentation"><a type="button" class="nav-link" data-toggle="modal" data-target="#exampleModal">
FAQ
</a></li>
</ul>
<!-- <span class="navbar-text actions"> <a class="btn btn-light action-button" role="button" href="#">Github</a></span></div>-->
</div>
</div>
</nav>
<div class="row">
<div class="col-md-6" id="editor"></div>
<div class="col-md-6" id="output"></div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.12/ace.js" ></script>
<script src="bundle.js"></script>
<script>
let output = ace.edit("output");
output.setTheme("ace/theme/monokai");
output.session.setMode("ace/mode/sh");
let editor = ace.edit("editor");
editor.setTheme("ace/theme/monokai");
editor.on("change", function(e){
localStorage.setItem("enteredCode", editor.getValue());
setTimeout(function () {
let bashTxt = BashType.transpile(editor.getValue());
output.setValue(bashTxt,-1) // moves cursor to the start
}, 500);
});
let previouslyTypedCode = localStorage.getItem("enteredCode");
if(previouslyTypedCode!=null){
editor.setValue(previouslyTypedCode,-1)
}else{
editor.setValue(`
/*
____ _ _____
| __ ) __ _ ___| |_|_ _| _ _ __ ___
| _ \\ / _\` / __| '_ \\| || | | | '_ \\ / _ \\
| |_) | (_| \\__ \\ | | | || |_| | |_) | __/
|____/ \\__,_|___/_| |_|_| \\__, | .__/ \\___|
|___/|_|
*/
//choose an example from the menu.`,-1)
}
editor.session.setMode("ace/mode/javascript");
async function loadEx(location) {
let response = await fetch('/tests/'+location);
let data = await response.text();
editor.setValue(data,-1)
}
</script>
<!-- Modal -->
<div class="modal fade modal-xl" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Common Questions</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>
<b>Oh god! why?</b><br/>
We as developers are used to seeing JS everywhere but we don't often see Bash and everytime we need it,
we re-learn the syntax and forget all about it till we need it again in 3 months. So I thought, why
not make a transpiler which converts an often used language to a not so often used one. Initially I made it for
my own use
but then a few colleagues started using it and then a few more so I ended up creating this basic UI
so anyone could use it online.
</p>
<p>
<b>How far is it from being complete?</b><br/>
Well, There are new JS RFCs coming up every day so my target isn't 100% coverage.
The idea here is to make something that is just enough to make it usable so that it helps
you get your work done with Bash. The major TODO here is to support Arrays and I/O.
You might also find that there are some very trivial pieces of code
that might not work, let me know if it is important to you and why and I'll try and make it happen.
</p>
<p>
<b>How can I reach you?</b><br/>
you can message on <a target="_blank" href="https://twitter.com/filedotavi">Twitter</a> or
<a href="https://www.linkedin.com/in/avinashdsilva/" target="_blank">LinkedIn</a>
</p>
</div>
</div>
</div>
</div>
</body>
</html>