A contraction of hypermedia oxyhydroxide.
This library provides utilities to help develop within the hyperide stack.
hyperide! macro)Through combining these technologies, you can develop fullstack hypermedia applications entirely from within Rust.
The stack recommends using Axum optionally and Vercel for your backend.
You can learn how to use Axum by looking at it's documentation. Use hyperide!
to build your HTML responses.
rust
async fn greet(Path((name,)): Path<(String,)>) -> Html<String> {
Html(hyperide! {
<p>{"Hello, "}<strong>{name}</strong>{"!"}</p>
})
}
To use vercel, you will need to create and modify the following files:
/vercel.json
json
{
"rewrites": [{ "source": "/:path(.*)", "destination": "/api/main" }],
"functions": {
"api/main.rs": {
"runtime": "vercel-rust@4.0.2"
}
}
}
/.vercelignore
target/
/Cargo.toml
```toml
[[bin]] name = "main" path = "api/main.rs" ```
/api/main.rs
```rust use axum::{extract::Path, routing::get, Router}; use vercel_runtime::Error;
async fn main() -> Result<(), Error> { let app = todo!("Put your axum router here"); hyperide::vercel::run(app).await } ```
The stack recommends choosing between Planetscale and Turso for your database backend, as both can run in serverless environments. Alternatively, use SQLx and your favourite database.
Macros for generating HTML inside Rust. Think of it a bit like leptos, yew, or
any other crate that provides HTML in Rust, but without 99% of the
functionality. You write HTML like syntax, and you get a String back.
rust
hyperide! {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>{"Hello, world!"}</h1>
<{returns_tag()}>This is in a closed paragraph.</_>
<!-- "wildcard close tag ⬆️" -->
{my_component("Foo", "bar")}
</body>
</html>
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<h1>Hello, world!</h1>
<p>This is in a closed paragraph.</p>
<!-- "wildcard close tag ⬆️" -->
<p><strong>Foo: </strong>bar</p>
</body>
</html>
It is recommended that you set up tailwind as part
of your build step. You will need the tailwind cli installed. The script will
attempt to use tailwind as the binary by default, but you can overwrite this
with the TAILWIND_BIN environment variable.
/tailwind.config.js
js
module.exports = {
content: ["./src/**/*.rs", "./api/**/*.rs"],
plugins: [],
};
/tailwind.in.css
css
@tailwind base;
@tailwind components;
@tailwind utilities;
/build.rs
```rs use std::path::Path;
fn main() { hyperide::tailwind::bootstrap( Path::new("./tailwind.config.js"), Path::new("./tailwind.in.css"), ); } ```
Use the include_tailwind! macro in the <head> of your responses to include
the stylesheet generated by tailwind.
I recommend you read the Hypermedia Systems book
and htmx documentation. Use hyperide::htmx::include_htmx!
to add it into the <head> of your responses.
To add simple inline scripting support using
hyperscript. Use
hyperide::hyperscript::include_hyperscript! to add it into the <head> of
your responses.