feat(webserver): Vendor and reimplement main pages in leptos
This commit is contained in:
parent
aeba7301b0
commit
59fdb37222
GPG key ID:
02E935006CF2E8E7
25 changed files with 4862 additions and 176 deletions
56
pkgs/packages/webserver/src/app.rs
Normal file
56
pkgs/packages/webserver/src/app.rs
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
use leptos::prelude::*;
|
||||
use leptos_meta::{provide_meta_context, MetaTags, Stylesheet};
|
||||
use leptos_router::{
|
||||
components::{Route, Router, Routes},
|
||||
StaticSegment,
|
||||
};
|
||||
|
||||
mod homepage;
|
||||
mod mail;
|
||||
|
||||
use crate::components::Navbar;
|
||||
use homepage::HomePage;
|
||||
use mail::Mail;
|
||||
|
||||
pub fn shell(options: LeptosOptions) -> impl IntoView {
|
||||
view! {
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" data-theme="dark">
|
||||
<head>
|
||||
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
|
||||
<link rel="icon" type="image/png" href="/favicon-48.png" sizes="48x48" />
|
||||
|
||||
<meta charset="utf-8" />
|
||||
<meta name="author" content="Tristan Daniël Maat" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<AutoReload options=options.clone() />
|
||||
<HydrationScripts options />
|
||||
<MetaTags />
|
||||
</head>
|
||||
<body>
|
||||
<App />
|
||||
</body>
|
||||
</html>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn App() -> impl IntoView {
|
||||
provide_meta_context();
|
||||
|
||||
view! {
|
||||
<Stylesheet href="/pkg/tlaternet-webserver.css" />
|
||||
|
||||
<Navbar />
|
||||
|
||||
// content for this welcome page
|
||||
<Router>
|
||||
<main>
|
||||
<Routes fallback=|| "Page not found.".into_view()>
|
||||
<Route path=StaticSegment("") view=HomePage />
|
||||
<Route path=StaticSegment("mail") view=Mail />
|
||||
</Routes>
|
||||
</main>
|
||||
</Router>
|
||||
}
|
||||
}
|
||||
70
pkgs/packages/webserver/src/app/homepage.rs
Normal file
70
pkgs/packages/webserver/src/app/homepage.rs
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
use leptos::prelude::*;
|
||||
use leptos_meta::{Meta, Title};
|
||||
use markdown_view_leptos::markdown_view;
|
||||
|
||||
#[component]
|
||||
pub fn HomePage() -> impl IntoView {
|
||||
view! {
|
||||
<Meta name="description" content="tlater.net homepage" />
|
||||
<Title text="Welcome to tlater.net!" />
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-weight-normal is-family-monospace">
|
||||
"$ "<span id="typed-welcome" />
|
||||
</h1>
|
||||
|
||||
<hr />
|
||||
|
||||
<div class="columns">
|
||||
<div class="column content">
|
||||
{markdown_view!(
|
||||
r#"
|
||||
### About Me
|
||||
|
||||
Looks like you found my website. I suppose introductions are in order.
|
||||
|
||||
My name's Tristan, I'm an avid Dutch-South African software
|
||||
engineer. You probably either met me at an open source conference, a
|
||||
hackathon, a badminton session or at a roleplaying table.
|
||||
"#
|
||||
)}
|
||||
</div>
|
||||
<div class="column content">
|
||||
{markdown_view!(
|
||||
r#"### My Work
|
||||
|
||||
I'm interested in a variety of things in the open source
|
||||
world. Perhaps thanks to my pursuit of the perfect Linux desktop, this
|
||||
has revolved a lot around reproducible build and deployment systems
|
||||
for the last few years, initially starting with
|
||||
[BuildStream](https://buildstream.build/) back in ~2017. I gave a
|
||||
couple of talks on it at build meetups in the UK in subsequent years,
|
||||
though sadly most evidence of that appears to have disappeared.
|
||||
|
||||
Since then this has culminated in a strong fondness for
|
||||
[NixOS](https://nixos.org/) and Nix, as its active community makes
|
||||
private use cases much more feasible. As such, I have a vested
|
||||
interest in making this community as large as possible - I post a lot
|
||||
on the NixOS [discourse](https://discourse.nixos.org/) trying to help
|
||||
newcomers out where I can.
|
||||
|
||||
I also just enjoy Programming, my core languages for personal work are
|
||||
currently probably Rust and Python, although I have a very varied
|
||||
background. This is in part due to my former work as a consultant,
|
||||
which required new languages every few months. I have experience from
|
||||
JavaScript over Elm to Kotlin, but eventually I hope I might only need
|
||||
to write Rust ;)
|
||||
|
||||
If you're interested in seeing these things for yourself, visit my
|
||||
[Gitlab](https://gitlab.com/tlater) and
|
||||
[GitHub](https://github.com/tlater) pages.
|
||||
"#
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
}
|
||||
217
pkgs/packages/webserver/src/app/mail.rs
Normal file
217
pkgs/packages/webserver/src/app/mail.rs
Normal file
|
|
@ -0,0 +1,217 @@
|
|||
use leptos::{html::Form, logging};
|
||||
use leptos_meta::{Meta, Title};
|
||||
use leptos::{prelude::*, server_fn::codec::JsonEncoding};
|
||||
use markdown_view_leptos::markdown_view;
|
||||
use serde::{Deserialize, Serialize};
|
||||
use thiserror::Error;
|
||||
|
||||
#[server]
|
||||
async fn submit_mail(mail: String, subject: String, message: String) -> Result<String, MailError> {
|
||||
use crate::AppState;
|
||||
const NTFY_TOPIC_CREDENTIAL_NAME: &str = "ntfy-topic";
|
||||
|
||||
let mail = format!("From: {}\nSubject: {}\n{}", mail, subject, message);
|
||||
logging::log!("{}", mail);
|
||||
|
||||
let state = use_context::<AppState>().unwrap();
|
||||
let ntfy_topic = std::fs::read_to_string(
|
||||
state
|
||||
.config
|
||||
.credentials_directory
|
||||
.join(NTFY_TOPIC_CREDENTIAL_NAME),
|
||||
)?;
|
||||
let ntfy_url = state.config.ntfy_instance.join(ntfy_topic.trim())?;
|
||||
|
||||
state
|
||||
.http_client
|
||||
.post(ntfy_url)
|
||||
.body(mail)
|
||||
.send()
|
||||
.await
|
||||
.map_err(|err| err.without_url())?
|
||||
.error_for_status()
|
||||
.map_err(|err| err.without_url())?;
|
||||
|
||||
leptos_axum::redirect("/mail");
|
||||
Ok("Mail successfully sent!".to_owned())
|
||||
}
|
||||
|
||||
#[component]
|
||||
fn MailForm() -> impl IntoView {
|
||||
let form: NodeRef<Form> = NodeRef::new();
|
||||
let submit_mail = ServerAction::<SubmitMail>::new();
|
||||
let pending = submit_mail.pending();
|
||||
let flash_message = submit_mail.value();
|
||||
|
||||
Effect::new(move ||
|
||||
if flash_message.get().is_some_and(|m| m.is_ok()) {
|
||||
if let Some(form) = form.get() {
|
||||
form.reset();
|
||||
} else {
|
||||
logging::warn!("Failed to reset form");
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
view! {
|
||||
<Show when=move || { flash_message.get().is_some() }>
|
||||
<div
|
||||
class="notification is-light"
|
||||
class=("is-success", move || flash_message.get().is_some_and(|m| m.is_ok()))
|
||||
class=("is-danger", move || flash_message.get().is_some_and(|m| m.is_err()))
|
||||
>
|
||||
<button
|
||||
class="delete"
|
||||
aria-label="Close"
|
||||
on:click=move |_| {
|
||||
*flash_message.write() = None;
|
||||
}
|
||||
/>
|
||||
<span role="alert">
|
||||
{move || match flash_message.get() {
|
||||
None => "".to_owned(),
|
||||
Some(Ok(message)) => message,
|
||||
Some(Err(error)) => format!("{}", error),
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
</Show>
|
||||
|
||||
<ActionForm node_ref=form action=submit_mail>
|
||||
<fieldset disabled=move || pending.get()>
|
||||
<div class="field">
|
||||
<label class="label" for="mail">
|
||||
Email address
|
||||
</label>
|
||||
<div class="control">
|
||||
<input
|
||||
id="mail"
|
||||
class="input"
|
||||
type="email"
|
||||
placeholder="Your address"
|
||||
name="mail"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" for="subject">
|
||||
Subject
|
||||
</label>
|
||||
<div class="control">
|
||||
<input
|
||||
id="subject"
|
||||
class="input"
|
||||
type="text"
|
||||
placeholder="E.g. There's a typo on your home page!"
|
||||
name="subject"
|
||||
autocomplete="off"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="label" for="message">
|
||||
Message
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
class="textarea"
|
||||
type="text"
|
||||
rows="6"
|
||||
name="message"
|
||||
autocomplete="off"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="control">
|
||||
<div class="field">
|
||||
<button
|
||||
type="submit"
|
||||
class="button is-link"
|
||||
class=("is-loading", move || pending.get())
|
||||
>
|
||||
Send
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</ActionForm>
|
||||
}
|
||||
}
|
||||
|
||||
#[component]
|
||||
pub fn Mail() -> impl IntoView {
|
||||
view! {
|
||||
<Meta name="description" content="tlater.net mail submission" />
|
||||
<Title text="Mail submission" />
|
||||
|
||||
<section class="section">
|
||||
<div class="container">
|
||||
<h1 class="title has-text-weight-normal">Contact Me</h1>
|
||||
|
||||
<div class="columns">
|
||||
<div class="column">
|
||||
<MailForm />
|
||||
</div>
|
||||
|
||||
<div class="column content">
|
||||
{markdown_view!(
|
||||
r#"
|
||||
Any messages you enter here are directly forwarded to me. I aim to
|
||||
respond within a day.
|
||||
|
||||
Don't be upset about the form, I want to avoid the spam publishing
|
||||
your email address brings with it... And minimize the amount of mail
|
||||
that doesn't reach me, this form is an exception in all my spam
|
||||
filters, you see ;)
|
||||
"#
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(Error, Debug, Clone, Serialize, Deserialize)]
|
||||
pub enum MailError {
|
||||
#[error("This form appears to currently be broken :(")]
|
||||
Permanent,
|
||||
#[error("Mail service appears to be down; please try again later")]
|
||||
Temporary,
|
||||
#[error("Server error: {0}")]
|
||||
ServerFnError(ServerFnErrorErr),
|
||||
}
|
||||
|
||||
impl From<url::ParseError> for MailError {
|
||||
fn from(error: url::ParseError) -> Self {
|
||||
logging::error!("Invalid ntfy URL: {error}");
|
||||
Self::Permanent
|
||||
}
|
||||
}
|
||||
|
||||
impl From<std::io::Error> for MailError {
|
||||
fn from(error: std::io::Error) -> Self {
|
||||
logging::error!("Couldn't read ntfy topic secret: {error}");
|
||||
Self::Permanent
|
||||
}
|
||||
}
|
||||
|
||||
impl From<reqwest::Error> for MailError {
|
||||
fn from(error: reqwest::Error) -> Self {
|
||||
logging::error!("Failed to connect to ntfy: {error}");
|
||||
Self::Temporary
|
||||
}
|
||||
}
|
||||
|
||||
impl FromServerFnError for MailError {
|
||||
type Encoder = JsonEncoding;
|
||||
|
||||
fn from_server_fn_error(value: ServerFnErrorErr) -> Self {
|
||||
Self::ServerFnError(value)
|
||||
}
|
||||
}
|
||||
45
pkgs/packages/webserver/src/components.rs
Normal file
45
pkgs/packages/webserver/src/components.rs
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
use leptos::prelude::*;
|
||||
|
||||
#[component]
|
||||
pub fn Navbar() -> impl IntoView {
|
||||
let (active, set_active) = signal(false);
|
||||
|
||||
view! {
|
||||
<nav class="navbar" role="navigation" aria-label="main navigation">
|
||||
<div class="navbar-brand">
|
||||
<a class="navbar-item has-text-primary is-uppercase" href="/">
|
||||
tlater
|
||||
</a>
|
||||
|
||||
<a
|
||||
role="button"
|
||||
on:click=move |_| { set_active.update(|active: &mut bool| *active = !*active) }
|
||||
class="navbar-burger"
|
||||
class=("is-active", move || active.get())
|
||||
aria-label="menu"
|
||||
aria-controls="main-navigation"
|
||||
aria-expanded=move || if active.get() { "true" } else { "false" }
|
||||
>
|
||||
<span aria-hidden="true" />
|
||||
<span aria-hidden="true" />
|
||||
<span aria-hidden="true" />
|
||||
<span aria-hidden="true" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="main-navigation" class="navbar-menu" class=("is-active", move || active.get())>
|
||||
<div class="navbar-start">
|
||||
<a class="navbar-item" href="/mail">
|
||||
"E-Mail"
|
||||
</a>
|
||||
<a class="navbar-item" href="https://www.gitlab.com/tlater">
|
||||
GitLab
|
||||
</a>
|
||||
<a class="navbar-item" href="https://www.github.com/TLATER">
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
}
|
||||
}
|
||||
73
pkgs/packages/webserver/src/lib.rs
Normal file
73
pkgs/packages/webserver/src/lib.rs
Normal file
|
|
@ -0,0 +1,73 @@
|
|||
pub mod app;
|
||||
mod components;
|
||||
|
||||
#[cfg(feature = "hydrate")]
|
||||
#[wasm_bindgen::prelude::wasm_bindgen]
|
||||
pub fn hydrate() {
|
||||
use crate::app::*;
|
||||
console_error_panic_hook::set_once();
|
||||
leptos::mount::hydrate_body(App);
|
||||
}
|
||||
|
||||
#[cfg(feature = "ssr")]
|
||||
pub use appstate::{AppState, Config};
|
||||
|
||||
#[cfg(feature = "ssr")]
|
||||
mod appstate {
|
||||
use axum::extract::FromRef;
|
||||
use figment::{providers::Format, Figment};
|
||||
use leptos::config::LeptosOptions;
|
||||
use reqwest::Client;
|
||||
use serde::Deserialize;
|
||||
use std::path::PathBuf;
|
||||
use url::Url;
|
||||
|
||||
#[derive(Deserialize, Debug, Clone)]
|
||||
pub struct Config {
|
||||
pub credentials_directory: PathBuf,
|
||||
pub ntfy_instance: Url,
|
||||
}
|
||||
|
||||
impl Config {
|
||||
pub fn parse() -> Self {
|
||||
let config_path = std::env::var_os("TLATERNET_CONFIG")
|
||||
.map(PathBuf::from)
|
||||
.or_else(|| {
|
||||
std::env::current_dir()
|
||||
.map(|dir| dir.join("config.toml"))
|
||||
.ok()
|
||||
});
|
||||
|
||||
let config: Result<Config, figment::Error> = if let Some(config_path) = config_path {
|
||||
Figment::new().merge(figment::providers::Toml::file(config_path))
|
||||
} else {
|
||||
Figment::new()
|
||||
}
|
||||
.merge(figment::providers::Env::raw().only(&["CREDENTIALS_DIRECTORY"]))
|
||||
.merge(figment::providers::Env::prefixed("TLATERNET_"))
|
||||
.extract();
|
||||
|
||||
match config {
|
||||
Ok(config) => {
|
||||
if !config.credentials_directory.join("ntfy-topic").exists() {
|
||||
leptos::logging::error!("Failed to find ntfy-topic credential");
|
||||
std::process::exit(1);
|
||||
}
|
||||
|
||||
config
|
||||
}
|
||||
Err(error) => {
|
||||
leptos::logging::error!("Failed to parse configuration: {:?}", error);
|
||||
std::process::exit(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#[derive(FromRef, Debug, Clone)]
|
||||
pub struct AppState {
|
||||
pub config: Config,
|
||||
pub http_client: Client,
|
||||
pub leptos_options: LeptosOptions,
|
||||
}
|
||||
}
|
||||
54
pkgs/packages/webserver/src/main.rs
Normal file
54
pkgs/packages/webserver/src/main.rs
Normal file
|
|
@ -0,0 +1,54 @@
|
|||
#[cfg(feature = "ssr")]
|
||||
#[tokio::main]
|
||||
async fn main() {
|
||||
use axum::Router;
|
||||
use leptos::logging::log;
|
||||
use leptos::prelude::*;
|
||||
use leptos_axum::{LeptosRoutes, generate_route_list};
|
||||
use tlaternet_webserver::app::*;
|
||||
use tlaternet_webserver::{AppState, Config};
|
||||
|
||||
let config = Config::parse();
|
||||
|
||||
let (addr, leptos_options) = {
|
||||
let conf = get_configuration(None).unwrap();
|
||||
let addr = conf.leptos_options.site_addr;
|
||||
let leptos_options = conf.leptos_options;
|
||||
(addr, leptos_options)
|
||||
};
|
||||
|
||||
// Generate the list of routes in your Leptos App
|
||||
let routes = generate_route_list(App);
|
||||
let http_client = reqwest::Client::new();
|
||||
|
||||
let state = AppState {
|
||||
config,
|
||||
http_client,
|
||||
leptos_options,
|
||||
};
|
||||
|
||||
let app = Router::new()
|
||||
.leptos_routes(&state, routes, {
|
||||
let leptos_options = state.leptos_options.clone();
|
||||
move || shell(leptos_options.clone())
|
||||
})
|
||||
.fallback::<_, (_, _, axum::extract::State<AppState>, _)>(
|
||||
leptos_axum::file_and_error_handler(shell),
|
||||
)
|
||||
.with_state(state);
|
||||
|
||||
// run our app with hyper
|
||||
// `axum::Server` is a re-export of `hyper::Server`
|
||||
log!("listening on http://{}", &addr);
|
||||
let listener = tokio::net::TcpListener::bind(&addr).await.unwrap();
|
||||
axum::serve(listener, app.into_make_service())
|
||||
.await
|
||||
.unwrap();
|
||||
}
|
||||
|
||||
#[cfg(not(feature = "ssr"))]
|
||||
pub fn main() {
|
||||
// no client-side main function
|
||||
// unless we want this to work with e.g., Trunk for pure client-side testing
|
||||
// see lib.rs for hydration function instead
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue