Skip to content

Commit 2d3b9a3

Browse files
overflowyoverflowy
committed
Add various fixes
1 parent f320296 commit 2d3b9a3

File tree

1 file changed

+10
-85
lines changed

1 file changed

+10
-85
lines changed

‎index.html‎

Lines changed: 10 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Bash Script Formatter & Checker</title>
6+
<title>Bash Script Formatter & Linter</title>
77
<script src="https://cdn.tailwindcss.com"></script>
88
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/ace.js"></script>
99
<script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/mode-sh.min.js"></script>
@@ -27,29 +27,20 @@
2727
.ace_tooltip {
2828
white-space: pre-line !important;
2929
}
30-
31-
/* Loading spinner */
32-
.htmx-request .htmx-indicator {
33-
display: inline;
34-
}
35-
36-
.htmx-indicator {
37-
display: none;
38-
}
3930
</style>
4031
</head>
4132
<body class="bg-background min-h-screen">
4233
<div class="container mx-auto px-4 py-8 max-w-4xl">
43-
<div class="mb-8">
34+
<div class="mb-4">
4435
<h1 class="text-3xl font-semibold mb-2">Bash Script Tools</h1>
45-
<p class="text-muted-foreground">Format and check your bash scripts</p>
36+
<p class="text-muted-foreground">Format and lint your Bash scripts</p>
4637
</div>
4738

4839
<div class="space-y-4">
4940
<!-- Code Editor -->
5041
<div>
5142
<label class="block text-sm font-medium mb-2">Script</label>
52-
<div id="editor">#!/bin/bash echo "Paste your bash script here..."</div>
43+
<div id="editor"></div>
5344
</div>
5445

5546
<!-- Action Buttons -->
@@ -59,83 +50,32 @@ <h1 class="text-3xl font-semibold mb-2">Bash Script Tools</h1>
5950
class="inline-flex items-center px-4 py-2 bg-zinc-900 text-zinc-100 rounded-md hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-zinc-700 transition-colors font-medium text-sm border border-zinc-800"
6051
>
6152
<span>Format</span>
62-
<svg
63-
id="format-spinner"
64-
class="htmx-indicator ml-2 animate-spin h-4 w-4"
65-
xmlns="http://www.w3.org/2000/svg"
66-
fill="none"
67-
viewBox="0 0 24 24"
68-
>
69-
<circle
70-
class="opacity-25"
71-
cx="12"
72-
cy="12"
73-
r="10"
74-
stroke="currentColor"
75-
stroke-width="4"
76-
></circle>
77-
<path
78-
class="opacity-75"
79-
fill="currentColor"
80-
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
81-
></path>
82-
</svg>
8353
</button>
8454

8555
<button
8656
onclick="checkCode()"
8757
class="inline-flex items-center px-4 py-2 bg-zinc-900 text-zinc-100 rounded-md hover:bg-zinc-800 focus:outline-none focus:ring-2 focus:ring-zinc-700 transition-colors font-medium text-sm border border-zinc-800"
8858
>
89-
<span>Shellcheck</span>
90-
<svg
91-
id="check-spinner"
92-
class="htmx-indicator ml-2 animate-spin h-4 w-4"
93-
xmlns="http://www.w3.org/2000/svg"
94-
fill="none"
95-
viewBox="0 0 24 24"
96-
>
97-
<circle
98-
class="opacity-25"
99-
cx="12"
100-
cy="12"
101-
r="10"
102-
stroke="currentColor"
103-
stroke-width="4"
104-
></circle>
105-
<path
106-
class="opacity-75"
107-
fill="currentColor"
108-
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
109-
></path>
110-
</svg>
59+
<span>Lint</span>
11160
</button>
11261
</div>
11362

11463
<!-- Output Box -->
11564
<div>
116-
<label class="block text-sm font-medium mb-2">ShellCheck Output</label>
65+
<label class="block text-sm font-medium mb-2">Lint Output</label>
11766
<div
11867
id="output-box"
11968
class="w-full min-h-[200px] px-4 py-3 bg-black text-zinc-100 border border-zinc-800 rounded-lg overflow-auto text-xs"
12069
>
121-
<div class="text-xs text-zinc-500">Click Shellcheck to see results</div>
70+
<div class="text-xs text-zinc-500 font-mono">
71+
Paste your script in the editor above then press the Lint button
72+
</div>
12273
</div>
12374
</div>
12475
</div>
125-
126-
<div class="mt-8 pt-6 border-t border-zinc-800">
127-
<p class="text-sm text-zinc-500">
128-
<strong>Format</strong> uses
129-
<code class="px-1 py-0.5 bg-zinc-900 rounded text-xs">shfmt</code> to format your bash
130-
script. <strong>Shellcheck</strong> uses
131-
<code class="px-1 py-0.5 bg-zinc-900 rounded text-xs">shellcheck</code> to find potential
132-
issues.
133-
</p>
134-
</div>
13576
</div>
13677

13778
<script>
138-
// Configure Ace Editor
13979
ace.config.set("basePath", "https://cdnjs.cloudflare.com/ajax/libs/ace/1.32.2/");
14080

14181
const editor = ace.edit("editor");
@@ -147,17 +87,8 @@ <h1 class="text-3xl font-semibold mb-2">Bash Script Tools</h1>
14787
highlightGutterLine: true,
14888
});
14989

150-
function showSpinner(id) {
151-
document.getElementById(id).style.display = "inline";
152-
}
153-
154-
function hideSpinner(id) {
155-
document.getElementById(id).style.display = "none";
156-
}
157-
15890
async function formatCode() {
15991
const code = editor.getValue();
160-
showSpinner("format-spinner");
16192

16293
try {
16394
const response = await fetch("/format", {
@@ -172,8 +103,6 @@ <h1 class="text-3xl font-semibold mb-2">Bash Script Tools</h1>
172103
editor.moveCursorToPosition(cursor);
173104
} catch (error) {
174105
console.error("Format error:", error);
175-
} finally {
176-
hideSpinner("format-spinner");
177106
}
178107
}
179108

@@ -184,7 +113,6 @@ <h1 class="text-3xl font-semibold mb-2">Bash Script Tools</h1>
184113

185114
async function checkCode() {
186115
const code = editor.getValue();
187-
showSpinner("check-spinner");
188116
editor.session.clearAnnotations();
189117

190118
try {
@@ -198,7 +126,6 @@ <h1 class="text-3xl font-semibold mb-2">Bash Script Tools</h1>
198126
document.getElementById("output-box").innerHTML = result.html;
199127

200128
// Add click handlers to line numbers
201-
// Find corresponding annotation for column position
202129
document.querySelectorAll(".line-link").forEach((link) => {
203130
link.addEventListener("click", (e) => {
204131
e.preventDefault();
@@ -216,9 +143,7 @@ <h1 class="text-3xl font-semibold mb-2">Bash Script Tools</h1>
216143
} catch (error) {
217144
console.error("Shellcheck error:", error);
218145
document.getElementById("output-box").innerHTML =
219-
'<div class="text-sm text-red-600">Error running shellcheck</div>';
220-
} finally {
221-
hideSpinner("check-spinner");
146+
'<div class="text-xs text-red-600 font-mono">Error running ShellCheck</div>';
222147
}
223148
}
224149
</script>

0 commit comments

Comments
 (0)