This commit is contained in:
2025-10-13 13:41:34 +02:00
parent 90f10143da
commit 4b62a9a64b
23 changed files with 679 additions and 196 deletions

View File

@@ -13,4 +13,4 @@ templ base(title string) {
{ children... }
</body>
</html>
}
}

View File

@@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.943
package view
//lint:file-ignore SA4006 This context is only used if a nested component is present.

View File

@@ -9,28 +9,26 @@ templ BinPreviewPage(id, content string) {
templ BinEditorPage() {
@base("bin") {
<form action="/" method="post">
<label for="content-editor" class="sr-only">Paste Content</label>
<textarea
id="content-editor"
name="content"
placeholder="bin something"
autofocus
autocomplete="off"
autocorrent="off"
autocorrect="off"
autocapitalize="off"
spellcheck="false"
></textarea>
<button type="submit"></button>
<button type="submit">Save</button>
</form>
<script>
const form = document.querySelector('form');
const input = document.querySelector('textarea');
const button = document.querySelector('button[type="submit"]');
document.body.addEventListener('keydown', (e) => {
if (e.which === 83 && e.ctrlKey) { // ctrl + s
document.addEventListener('keydown', (e) => {
if (e.ctrlKey && e.key === 's') {
e.preventDefault();
form.submit();
document.querySelector('form').submit();
}
});
</script>
}
}
}

View File

@@ -1,6 +1,6 @@
// Code generated by templ - DO NOT EDIT.
// templ: version: v0.3.924
// templ: version: v0.3.943
package view
//lint:file-ignore SA4006 This context is only used if a nested component is present.
@@ -88,7 +88,7 @@ func BinEditorPage() templ.Component {
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<form action=\"/\" method=\"post\"><textarea name=\"content\" placeholder=\"bin something\" autofocus autocomplete=\"off\" autocorrent=\"off\" autocapitalize=\"off\" spellcheck=\"false\"></textarea> <button type=\"submit\"></button></form><script>\n const form = document.querySelector('form');\n const input = document.querySelector('textarea');\n const button = document.querySelector('button[type=\"submit\"]');\n\n document.body.addEventListener('keydown', (e) => {\n if (e.which === 83 && e.ctrlKey) { // ctrl + s\n e.preventDefault();\n form.submit();\n }\n });\n </script>")
templ_7745c5c3_Err = templruntime.WriteString(templ_7745c5c3_Buffer, 1, "<form action=\"/\" method=\"post\"><label for=\"content-editor\" class=\"sr-only\">Paste Content</label> <textarea id=\"content-editor\" name=\"content\" placeholder=\"bin something\" autofocus autocomplete=\"off\" autocorrect=\"off\" autocapitalize=\"off\" spellcheck=\"false\"></textarea> <button type=\"submit\">Save</button></form><script>\n document.addEventListener('keydown', (e) => {\n if (e.ctrlKey && e.key === 's') {\n e.preventDefault();\n document.querySelector('form').submit();\n }\n });\n </script>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}

View File

@@ -1,3 +1,12 @@
:root {
--background-color: #212121;
--text-color: #b0bec5;
--scrollbar-track-color: #2c2c2c;
--scrollbar-thumb-color: #555;
--scrollbar-thumb-hover-color: #888;
--spacing: 2rem;
}
* {
box-sizing: border-box;
}
@@ -5,90 +14,106 @@
html,
body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
font-family: monospace;
font-size: 16px;
}
body {
height: 100vh;
padding: 2rem;
background: #212121;
color: #b0bec5;
line-height: 1.5;
background: var(--background-color);
color: var(--text-color);
display: flex;
font-family: monospace;
}
body,
code,
textarea {
font-family: monospace;
flex-direction: column;
}
form {
flex: 1;
display: flex;
flex-direction: column;
flex-grow: 1;
}
textarea {
height: 100%;
width: 100%;
textarea,
pre {
flex-grow: 1;
margin: 0;
padding: var(--spacing);
background: none;
border: none;
outline: 0;
padding: 0;
outline: none;
resize: none;
overflow: auto;
color: inherit;
font-size: 1rem;
line-height: inherit;
line-height: 1.6;
font-family: inherit;
overflow: auto;
white-space: pre-wrap;
word-break: break-all;
}
pre {
background-color: transparent !important;
height: 100%;
width: 100%;
margin: 0;
overflow: auto;
font-size: 1rem;
line-height: inherit;
font-family: inherit;
}
code {
display: block;
}
button[type="submit"] {
display: none;
}
span {
min-width: 4em;
}
textarea::-webkit-scrollbar,
pre::-webkit-scrollbar {
width: 10px;
width: 12px;
height: 12px;
}
textarea::-webkit-scrollbar-track,
pre::-webkit-scrollbar-track {
background: #2c2c2c;
background: var(--scrollbar-track-color);
}
textarea::-webkit-scrollbar-thumb,
pre::-webkit-scrollbar-thumb {
background-color: #555;
background-color: var(--scrollbar-thumb-color);
border-radius: 6px;
border: 2px solid #2c2c2c;
border: 3px solid var(--scrollbar-track-color);
}
textarea::-webkit-scrollbar-thumb:hover,
pre::-webkit-scrollbar-thumb:hover {
background-color: #888;
background-color: var(--scrollbar-thumb-hover-color);
}
textarea,
pre {
scrollbar-width: thin;
scrollbar-color: #555 #2c2c2c;
scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);
}
pre > code > span > span:first-child {
display: inline-block;
width: 4em;
color: #555;
user-select: none;
-webkit-user-select: none;
}
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
@media (max-width: 768px) {
:root {
--spacing: 1rem;
}
html {
font-size: 14px;
}
}