Klectr/KBin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update app

Browse Source
This commit is contained in:
Triston Armstrong 2024-07-07 22:12:03 -05:00
parent 5211e4623f
commit 7757ab1ee4
No known key found for this signature in database
GPG Key ID: FADE6AC6F956FC52
3 changed files with 122 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

94
src/index.html
View File

@ -14,47 +14,87 @@
<!-- Container--> <!-- Container-->
<body class="container mx-auto max-w-6xl"> <body class="container mx-auto max-w-6xl px-4 p-2 bg-gray-900 flex flex-col gap-2">
<!-- HEADER --> <!-- HEADER -->
<header class="border-b-2 flex justify-center mb-4"> <header class="flex justify-center ">
<div class="px-2 py-2 w-full max-w-6xl "> <div class="w-full max-w-6xl flex justify-between">
<h1 class="text-2xl font-bold text-gray-900 sm:text-3xl">Klectr<small class="text-blue-500">Bin</small></h1> <h1 class="font-bold text-white">Klectr<small class="text-blue-500">Bin</small></h1>
<div>
<a class="text-sm text-gray-500 hover:text-blue-500" href="settings">[ settings ]</a>
</div>
</div> </div>
</header> </header>
<hr class="border-gray-700">
<!-- MAIN--> <!-- MAIN-->
<main class="container m-auto max-w-6xl mb-8"> <main class="container m-auto max-w-6xl mb-8 flex flex-col gap-4">
<div class="rounded-lg bg-gray-200 lg:col-span-2"> <div>
<div class="rounded-lg border border-gray-200 shadow-sm"> <h1 class="text-white font-bold">What is KlectrBin?</h1>
<form hx-post="/paste"> <p class="text-gray-400">KlectrBin is your one-stop shop for storing anything in text form. Need a quick place to
<div> paste code snippets,
<input name='title' id='title' placeholder="Put title here..." brainstorm ideas, or jot down notes? KlectrBin makes it easy to capture and organize your thoughts. From syntax
class="border-none p-2 w-full focus:outline-none" /> highlighting for programmers to a clean and user-friendly interface, KlectrBin helps you get the most out of
your text.</p>
</div>
<hr class="border-gray-700">
<form hx-post="/paste">
<div class="rounded lg:col-span-2 gap-2 flex-col flex">
<div class="flex gap-2">
<div class="flex flex-col">
<label class="text-gray-400">type: </label>
<select name="type" class="bg-gray-700 text-gray-200 px-2 py-1 rounded">
<option>text</option>
<option>javascript</option>
<option>rust</option>
<option>markdown</option>
<option>html</option>
</select>
</div> </div>
<div class="flex flex-col">
<label class="text-gray-400">destroy: </label>
<select name="type" class="bg-gray-700 text-gray-200 px-2 py-1 rounded">
<option>after read</option>
<option>1 minute</option>
<option>5 minutes</option>
<option>10 minutes</option>
</select>
</div>
</div>
<div class="rounded shadow-sm">
<input name='title' id='title' placeholder="Put title here..."
class="rounded-t border-none p-2 w-full focus:outline-none bg-gray-700 text-white" />
<textarea name='content' id="content" <textarea name='content' id="content"
class="w-full resize-y border-none align-top sm:text-sm p-2 bg-gray-50 min-h-fit focus:outline-none" class="rounded-b text-white w-full resize-y border-none align-top sm:text-sm p-2 bg-gray-50 min-h-fit focus:outline-none bg-gray-800"
rows="16" placeholder="Paste your stuff here..."></textarea> rows="16" placeholder="Paste your stuff here..."></textarea>
<div class="flex items-center justify-end gap-2 bg-white p-3"> <div class="flex items-center justify-end gap-2 bg-gray-900 p-3">
<button type="button" onclick="handleClearClick()" <button type="button" onclick="handleClearClick()" class="text-sm text-gray-500 hover:text-blue-500">
class="rounded bg-gray-200 px-3 py-1.5 text-sm font-medium text-gray-700 hover:text-gray-600">
Clear Clear
</button> </button>
<p class="text-sm text-gray-500 hover:text-blue-500">/
<button type="submit" <p>
class="rounded bg-blue-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-blue-700"> <button type="submit" class="text-sm text-gray-500 hover:text-blue-500">
Submit Submit
</button> </button>
</div> </div>
</form> </div>
</div> </div>
</div> </form>
</main> </main>
<footer class="border-t-2"> <hr class="border-gray-700">
<p class="mt-2 text-center text-sm text-gray-500 ">
Copyright &copy; 2024. All rights reserved. <footer class="flex justify-between">
<p class="text-sm text-gray-500 ">
&copy; 2024 Klectr. All rights reserved.
</p> </p>
<a href="https://tristonarmstrong.com" class="text-sm text-gray-500 hover:text-blue-500">[ about us ]</a>
</footer> </footer>
</body> </body>
@ -67,4 +107,8 @@
} }
</script> </script>
<script type="text/javascript">
</script>
</html> </html>

9
src/main.rs
View File

@ -14,7 +14,7 @@ async fn retrieve(
Path(id): Path<i32>, Path(id): Path<i32>,
State(state): State<MyState>, State(state): State<MyState>,
) -> Result<impl IntoResponse, impl IntoResponse> { ) -> Result<impl IntoResponse, impl IntoResponse> {
match sqlx::query_as::<_, Paste>("SELECT * FROM todos WHERE id = $1") match sqlx::query_as::<_, Paste>("SELECT * FROM pastes WHERE id = $1")
.bind(id) .bind(id)
.fetch_one(&state.pool) .fetch_one(&state.pool)
.await .await
@ -41,8 +41,8 @@ async fn add(
} }
} }
async fn send_index() -> Html<String> { async fn send_html(file_name: String) -> Html<String> {
let path = format!("{}/{}/{}", env!("CARGO_MANIFEST_DIR"), "src", "index.html"); let path = format!("{}/{}/{}", env!("CARGO_MANIFEST_DIR"), "src", file_name);
let html = fs::read_to_string(path).expect("oof"); let html = fs::read_to_string(path).expect("oof");
Html(html) Html(html)
} }
@ -61,7 +61,8 @@ async fn main(#[shuttle_shared_db::Postgres] pool: PgPool) -> shuttle_axum::Shut
let state = MyState { pool }; let state = MyState { pool };
let router = Router::new() let router = Router::new()
.route("/", get(send_index)) .route("/", get(|| send_html("index.html".to_string())))
.route("/settings", get(|| send_html("settings.html".to_string())))
.route("/paste", post(add)) .route("/paste", post(add))
.route("/pastes/:id", get(retrieve)) .route("/pastes/:id", get(retrieve))
.with_state(state); .with_state(state);

48
src/settings.html Normal file
View File

@ -0,0 +1,48 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>KlectrSettings</title>
<script src="https://unpkg.com/htmx.org@2.0.0"
integrity="sha384-wS5l5IKJBvK6sPTKa2WZ1js3d947pvWXbPJ1OmWfEuxLgeHcEbjUUA5i9V5ZkpCw"
crossorigin="anonymous"></script>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<!-- Container-->
<body class="container mx-auto max-w-6xl px-4 p-2 bg-gray-900 flex flex-col gap-2">
<!-- HEADER -->
<header class="flex justify-center ">
<div class="w-full max-w-6xl flex justify-between">
<h1 class="font-bold text-white" onclick="goBackToHome()">Klectr<small class="text-blue-500">Bin</small></h1>
</div>
</header>
<hr class="border-gray-700">
<!-- MAIN-->
<main class="container m-auto max-w-6xl mb-8 flex flex-col gap-4">
</main>
<hr class="border-gray-700">
<footer class="flex justify-between">
<p class="text-sm text-gray-500 ">
&copy; 2024 Klectr. All rights reserved.
</p>
<a href="https://tristonarmstrong.com" class="text-sm text-gray-500 hover:text-blue-500">[ about us ]</a>
</footer>
</body>
<script type="text/javascript">
function goBackToHome() {
window.location = "/"
}
</script>
</html>