adding tab highlight and some more details in readme
This commit is contained in:
parent
ea736d8824
commit
23b90b3dd7
|
@ -1,10 +1,14 @@
|
||||||
# Depell
|
# Depell
|
||||||
|
|
||||||
Depell is a website that allows users to import/post/run hblang code and create huge dependency graphs
|
Depell is a website that allows users to import/post/run hblang code and create huge dependency graphs.
|
||||||
|
|
||||||
## Local Development
|
## Local Development
|
||||||
|
|
||||||
|
Prerequirements:
|
||||||
|
- rust nigthly toolchain: install rust from [here](https://www.rust-lang.org/tools/install)
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
rustup default nightly
|
||||||
cargo xtask watch-depell-debug
|
cargo xtask watch-depell-debug
|
||||||
# browser http://localhost:8080
|
# browser http://localhost:8080
|
||||||
```
|
```
|
||||||
|
|
|
@ -10,6 +10,7 @@ body {
|
||||||
--placeholder: #333333;
|
--placeholder: #333333;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
body {
|
body {
|
||||||
--small-gap: 5px;
|
--small-gap: 5px;
|
||||||
--font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
--font: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||||
|
@ -81,6 +82,7 @@ pre {
|
||||||
margin: 0px;
|
margin: 0px;
|
||||||
font-family: var(--monospace);
|
font-family: var(--monospace);
|
||||||
tab-size: 4;
|
tab-size: 4;
|
||||||
|
overflow-x: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
input {
|
||||||
|
@ -92,7 +94,7 @@ input {
|
||||||
}
|
}
|
||||||
|
|
||||||
input:is(:hover, :focus) {
|
input:is(:hover, :focus) {
|
||||||
background: white;
|
background: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
@ -103,7 +105,7 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
button:hover:not(:active) {
|
button:hover:not(:active) {
|
||||||
background: white;
|
background: var(--primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
div#code-editor {
|
div#code-editor {
|
||||||
|
|
|
@ -331,6 +331,13 @@ function cacheInputs(target) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function updaetTab() {
|
||||||
|
for (const elem of document.querySelectorAll("button[hx-push-url]")) {
|
||||||
|
if (elem instanceof HTMLButtonElement)
|
||||||
|
elem.disabled = elem.getAttribute("hx-push-url") === window.location.pathname;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
if (window.location.hostname === 'localhost') {
|
if (window.location.hostname === 'localhost') {
|
||||||
let id; setInterval(async () => {
|
let id; setInterval(async () => {
|
||||||
let new_id = await fetch('/hot-reload').then(reps => reps.text());
|
let new_id = await fetch('/hot-reload').then(reps => reps.text());
|
||||||
|
@ -361,8 +368,17 @@ if (window.location.hostname === 'localhost') {
|
||||||
document.body.addEventListener('htmx:afterSwap', (ev) => {
|
document.body.addEventListener('htmx:afterSwap', (ev) => {
|
||||||
if (!(ev.target instanceof HTMLElement)) never();
|
if (!(ev.target instanceof HTMLElement)) never();
|
||||||
wireUp(ev.target);
|
wireUp(ev.target);
|
||||||
|
if (ev.target.tagName == "MAIN") updaetTab();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//document.body.addEventListener('htmx:beforeSend', (ev) => {
|
||||||
|
// const target = ev.target;
|
||||||
|
// if (target instanceof HTMLButtonElement && target.hasAttribute("hx-push-url")) {
|
||||||
|
//
|
||||||
|
// document.getElementById("extra-style").textContent = `[hx-push-url="${target.getAttribute("hx-push-url")}"]{background: var(--primary)}`
|
||||||
|
// }
|
||||||
|
//});
|
||||||
|
|
||||||
getFmtInstance().then(inst => {
|
getFmtInstance().then(inst => {
|
||||||
document.body.addEventListener('htmx:configRequest', (ev) => {
|
document.body.addEventListener('htmx:configRequest', (ev) => {
|
||||||
const details = ev['detail'];
|
const details = ev['detail'];
|
||||||
|
@ -411,6 +427,6 @@ getFmtInstance().then(inst => {
|
||||||
Object.assign(window, { filterCodeDeps });
|
Object.assign(window, { filterCodeDeps });
|
||||||
});
|
});
|
||||||
|
|
||||||
|
updaetTab();
|
||||||
wireUp(document.body);
|
wireUp(document.body);
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@ use {
|
||||||
argon2::{password_hash::SaltString, PasswordVerifier},
|
argon2::{password_hash::SaltString, PasswordVerifier},
|
||||||
axum::{
|
axum::{
|
||||||
body::Bytes,
|
body::Bytes,
|
||||||
extract::Path,
|
extract::{OriginalUri, Path},
|
||||||
http::{header::COOKIE, request::Parts},
|
http::{header::COOKIE, request::Parts},
|
||||||
response::{AppendHeaders, Html},
|
response::{AppendHeaders, Html},
|
||||||
},
|
},
|
||||||
|
@ -349,8 +349,16 @@ impl Profile {
|
||||||
Profile { other: Some(name) }.render(&session)
|
Profile { other: Some(name) }.render(&session)
|
||||||
}
|
}
|
||||||
|
|
||||||
async fn get_other_page(session: Session, Path(name): Path<String>) -> Html<String> {
|
async fn get_other_page(
|
||||||
base(|b| Profile { other: Some(name) }.render_to_buf(&session, b), Some(&session))
|
session: Session,
|
||||||
|
path: axum::extract::OriginalUri,
|
||||||
|
Path(name): Path<String>,
|
||||||
|
) -> Html<String> {
|
||||||
|
base(
|
||||||
|
|b| Profile { other: Some(name) }.render_to_buf(&session, b),
|
||||||
|
path.path(),
|
||||||
|
Some(&session),
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -534,7 +542,7 @@ impl Signup {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
fn base(body: impl FnOnce(&mut String), session: Option<&Session>) -> Html<String> {
|
fn base(body: impl FnOnce(&mut String), path: &str, session: Option<&Session>) -> Html<String> {
|
||||||
let username = session.map(|s| &s.name);
|
let username = session.map(|s| &s.name);
|
||||||
|
|
||||||
let nav_button = |f: &mut String, name: &str| {
|
let nav_button = |f: &mut String, name: &str| {
|
||||||
|
@ -550,7 +558,12 @@ fn base(body: impl FnOnce(&mut String), session: Option<&Session>) -> Html<Strin
|
||||||
"<!DOCTYPE html>"
|
"<!DOCTYPE html>"
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
<meta name="charset" content="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
<link rel="stylesheet" href="/index.css">
|
<link rel="stylesheet" href="/index.css">
|
||||||
|
//<style id="extra-style">
|
||||||
|
// "[hx-push-url='" !path "']{background:var(--primary)}"
|
||||||
|
//</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<nav>
|
<nav>
|
||||||
|
@ -751,8 +764,8 @@ trait PublicPage: Default {
|
||||||
Self::default().render()
|
Self::default().render()
|
||||||
}
|
}
|
||||||
|
|
||||||
async fn page(session: Option<Session>) -> Html<String> {
|
async fn page(uri: OriginalUri, session: Option<Session>) -> Html<String> {
|
||||||
base(|s| Self::default().render_to_buf(s), session.as_ref())
|
base(|s| Self::default().render_to_buf(s), uri.path(), session.as_ref())
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -769,10 +782,13 @@ trait Page: Default {
|
||||||
Self::default().render(&session)
|
Self::default().render(&session)
|
||||||
}
|
}
|
||||||
|
|
||||||
async fn page(session: Option<Session>) -> Result<Html<String>, axum::response::Redirect> {
|
async fn page(
|
||||||
|
uri: OriginalUri,
|
||||||
|
session: Option<Session>,
|
||||||
|
) -> Result<Html<String>, axum::response::Redirect> {
|
||||||
match session {
|
match session {
|
||||||
Some(session) => {
|
Some(session) => {
|
||||||
Ok(base(|f| Self::default().render_to_buf(&session, f), Some(&session)))
|
Ok(base(|f| Self::default().render_to_buf(&session, f), uri.path(), Some(&session)))
|
||||||
}
|
}
|
||||||
None => Err(axum::response::Redirect::permanent("/login")),
|
None => Err(axum::response::Redirect::permanent("/login")),
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue