alemi/upub
alemi/upub
1
0
Fork 1
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

chore(web): restructured project a little

Browse source 
less messy i think
This commit is contained in:
əlemi 2024-05-13 19:13:40 +02:00
parent be6d9bf28b
commit 4d7f99dfaa
Signed by: alemi
GPG key ID: A4895B84D311642C
17 changed files with 710 additions and 656 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
web/src/auth.rs
View file

@ -1,6 +1,5 @@
use leptos::*;
use crate::prelude::*;
use crate::URL_BASE;
pub trait AuthToken {
fn present(&self) -> bool;
@ -16,103 +15,6 @@ pub struct Auth {
pub userid: Signal<Option<String>>,
}
#[component]
pub fn LoginBox(
token_tx: WriteSignal<Option<String>>,
userid_tx: WriteSignal<Option<String>>,
home_tl: Timeline,
server_tl: Timeline,
) -> impl IntoView {
let auth = use_context::<Auth>().expect("missing auth context");
let username_ref: NodeRef<html::Input> = create_node_ref();
let password_ref: NodeRef<html::Input> = create_node_ref();
view! {
<div>
<div class="w-100" class:hidden=move || !auth.present() >
"hi "<a href={move || Uri::web(FetchKind::User, &auth.username() )} >{move || auth.username() }</a>
<input style="float:right" type="submit" value="logout" on:click=move |_| {
token_tx.set(None);
home_tl.reset(format!("{URL_BASE}/outbox/page"));
server_tl.reset(format!("{URL_BASE}/inbox/page"));
spawn_local(async move {
if let Err(e) = server_tl.more(auth).await {
logging::error!("failed refreshing server timeline: {e}");
}
});
} />
</div>
<div class:hidden=move || auth.present() >
<form on:submit=move|ev| {
ev.prevent_default();
logging::log!("logging in...");
let email = username_ref.get().map(|x| x.value()).unwrap_or("".into());
let password = password_ref.get().map(|x| x.value()).unwrap_or("".into());
spawn_local(async move {
let Ok(res) = reqwest::Client::new()
.post(format!("{URL_BASE}/auth"))
.json(&LoginForm { email, password })
.send()
.await
else { if let Some(rf) = password_ref.get() { rf.set_value("") }; return };
let Ok(auth_response) = res
.json::<AuthResponse>()
.await
else { if let Some(rf) = password_ref.get() { rf.set_value("") }; return };
logging::log!("logged in until {}", auth_response.expires);
// update our username and token cookies
let username = auth_response.user.split('/').last().unwrap_or_default().to_string();
userid_tx.set(Some(auth_response.user));
token_tx.set(Some(auth_response.token));
// reset home feed and point it to our user's inbox
home_tl.reset(format!("{URL_BASE}/users/{}/inbox/page", username));
spawn_local(async move {
if let Err(e) = home_tl.more(auth).await {
tracing::error!("failed refreshing home timeline: {e}");
}
});
// reset server feed: there may be more content now that we're authed
server_tl.reset(format!("{URL_BASE}/inbox/page"));
spawn_local(async move {
if let Err(e) = server_tl.more(auth).await {
tracing::error!("failed refreshing server timeline: {e}");
}
});
});
} >
<table class="w-100 align">
<tr>
<td colspan="2"><input class="w-100" type="text" node_ref=username_ref placeholder="username" /></td>
</tr>
<tr>
<td colspan="2"><input class="w-100" type="password" node_ref=password_ref placeholder="password" /></td>
</tr>
<tr>
<td class="w-50"><input class="w-100" type="submit" value="login" /></td>
<td class="w-50"><a href="/web/register"><input class="w-100" type="button" value="register" /></a></td>
</tr>
</table>
</form>
</div>
</div>
}
}
#[derive(Debug, serde::Serialize)]
struct LoginForm {
email: String,
password: String,
}
#[derive(Debug, Clone, serde::Deserialize)]
struct AuthResponse {
token: String,
user: String,
expires: chrono::DateTime<chrono::Utc>,
}
impl AuthToken for Auth {
fn token(&self) -> String {
self.token.get().unwrap_or_default()

98
web/src/components/login.rs Normal file
View file

@ -0,0 +1,98 @@
use leptos::*;
use crate::prelude::*;
#[component]
pub fn LoginBox(
token_tx: WriteSignal<Option<String>>,
userid_tx: WriteSignal<Option<String>>,
home_tl: Timeline,
server_tl: Timeline,
) -> impl IntoView {
let auth = use_context::<Auth>().expect("missing auth context");
let username_ref: NodeRef<html::Input> = create_node_ref();
let password_ref: NodeRef<html::Input> = create_node_ref();
view! {
<div>
<div class="w-100" class:hidden=move || !auth.present() >
"hi "<a href={move || Uri::web(FetchKind::User, &auth.username() )} >{move || auth.username() }</a>
<input style="float:right" type="submit" value="logout" on:click=move |_| {
token_tx.set(None);
home_tl.reset(format!("{URL_BASE}/outbox/page"));
server_tl.reset(format!("{URL_BASE}/inbox/page"));
spawn_local(async move {
if let Err(e) = server_tl.more(auth).await {
logging::error!("failed refreshing server timeline: {e}");
}
});
} />
</div>
<div class:hidden=move || auth.present() >
<form on:submit=move|ev| {
ev.prevent_default();
logging::log!("logging in...");
let email = username_ref.get().map(|x| x.value()).unwrap_or("".into());
let password = password_ref.get().map(|x| x.value()).unwrap_or("".into());
spawn_local(async move {
let Ok(res) = reqwest::Client::new()
.post(format!("{URL_BASE}/auth"))
.json(&LoginForm { email, password })
.send()
.await
else { if let Some(rf) = password_ref.get() { rf.set_value("") }; return };
let Ok(auth_response) = res
.json::<AuthResponse>()
.await
else { if let Some(rf) = password_ref.get() { rf.set_value("") }; return };
logging::log!("logged in until {}", auth_response.expires);
// update our username and token cookies
let username = auth_response.user.split('/').last().unwrap_or_default().to_string();
userid_tx.set(Some(auth_response.user));
token_tx.set(Some(auth_response.token));
// reset home feed and point it to our user's inbox
home_tl.reset(format!("{URL_BASE}/users/{}/inbox/page", username));
spawn_local(async move {
if let Err(e) = home_tl.more(auth).await {
tracing::error!("failed refreshing home timeline: {e}");
}
});
// reset server feed: there may be more content now that we're authed
server_tl.reset(format!("{URL_BASE}/inbox/page"));
spawn_local(async move {
if let Err(e) = server_tl.more(auth).await {
tracing::error!("failed refreshing server timeline: {e}");
}
});
});
} >
<table class="w-100 align">
<tr>
<td colspan="2"><input class="w-100" type="text" node_ref=username_ref placeholder="username" /></td>
</tr>
<tr>
<td colspan="2"><input class="w-100" type="password" node_ref=password_ref placeholder="password" /></td>
</tr>
<tr>
<td class="w-50"><input class="w-100" type="submit" value="login" /></td>
<td class="w-50"><a href="/web/register"><input class="w-100" type="button" value="register" /></a></td>
</tr>
</table>
</form>
</div>
</div>
}
}
#[derive(Debug, serde::Serialize)]
struct LoginForm {
email: String,
password: String,
}
#[derive(Debug, Clone, serde::Deserialize)]
struct AuthResponse {
token: String,
user: String,
expires: chrono::DateTime<chrono::Utc>,
}

9
web/src/components/mod.rs
View file

@ -1,12 +1,21 @@
mod login;
pub use login::*;
mod activity;
pub use activity::*;
mod navigation;
pub use navigation::*;
mod object;
pub use object::*;
mod user;
pub use user::*;
mod post;
pub use post::*;
mod timeline;
pub use timeline::*;

48
web/src/components/navigation.rs Normal file
View file

@ -0,0 +1,48 @@
use leptos::*;
use crate::prelude::*;
#[component]
pub fn Breadcrumb(
#[prop(optional)]
back: bool,
children: Children,
) -> impl IntoView {
view! {
<div class="tl-header w-100 center" >
{if back { Some(view! {
<a class="breadcrumb mr-1" href="javascript:history.back()" ><b>"<<"</b></a>
})} else { None }}
<b>{crate::NAME}</b>" :: "{children()}
</div>
}
}
#[component]
pub fn Navigator() -> impl IntoView {
let auth = use_context::<Auth>().expect("missing auth context");
let (query, set_query) = create_signal("".to_string());
view! {
<form action={move|| format!("/web/search?q={}", query.get())}>
<table class="align">
<tr>
<td class="w-100">
<input type="text" placeholder="search" class="w-100" on:input=move |ev| {
set_query.set(event_target_value(&ev))
} />
</td>
<td>
<a href={move|| format!("/web/search?q={}", query.get())}><input type="submit" value="go" /></a>
</td>
</tr>
</table>
</form>
<table class="align w-100">
<tr><td colspan="2"><a href="/web/home"><input class="w-100" type="submit" class:hidden=move || !auth.present() value="home timeline" /></a></td></tr>
<tr><td colspan="2"><a href="/web/server"><input class="w-100" type="submit" value="server timeline" /></a></td></tr>
<tr>
<td class="w-50"><a href="/web/about"><input class="w-100" type="submit" value="about" /></a></td>
<td class="w-50"><a href="/web/config"><input class="w-100" type="submit" value="config" /></a></td>
</tr>
</table>
}
}

46
web/src/control.rs → web/src/components/post.rs
View file

@ -3,36 +3,6 @@ use apb::{ActivityMut, Base, BaseMut, Object, ObjectMut};
use leptos::*;
use crate::prelude::*;
#[component]
pub fn Navigator() -> impl IntoView {
let auth = use_context::<Auth>().expect("missing auth context");
let (query, set_query) = create_signal("".to_string());
view! {
<form action={move|| format!("/web/search?q={}", query.get())}>
<table class="align">
<tr>
<td class="w-100">
<input type="text" placeholder="search" class="w-100" on:input=move |ev| {
set_query.set(event_target_value(&ev))
} />
</td>
<td>
<a href={move|| format!("/web/search?q={}", query.get())}><input type="submit" value="go" /></a>
</td>
</tr>
</table>
</form>
<table class="align w-100">
<tr><td colspan="2"><a href="/web/home"><input class="w-100" type="submit" class:hidden=move || !auth.present() value="home timeline" /></a></td></tr>
<tr><td colspan="2"><a href="/web/server"><input class="w-100" type="submit" value="server timeline" /></a></td></tr>
<tr>
<td class="w-50"><a href="/web/about"><input class="w-100" type="submit" value="about" /></a></td>
<td class="w-50"><a href="/web/config"><input class="w-100" type="submit" value="config" /></a></td>
</tr>
</table>
}
}
#[derive(Debug, Clone, Copy, Default)]
pub struct ReplyControls {
pub context: RwSignal<Option<String>>,
@ -306,22 +276,6 @@ fn get_checked(node: NodeRef<html::Input>) -> bool {
.unwrap_or_default()
}
#[component]
pub fn Breadcrumb(
#[prop(optional)]
back: bool,
children: Children,
) -> impl IntoView {
view! {
<div class="tl-header w-100 center" >
{if back { Some(view! {
<a class="breadcrumb mr-1" href="javascript:history.back()" ><b>"<<"</b></a>
})} else { None }}
<b>{crate::NAME}</b>" :: "{children()}
</div>
}
}
#[component]
fn SelectOption(is: &'static str, value: ReadSignal<String>) -> impl IntoView {
view! {

5
web/src/lib.rs
View file

@ -1,12 +1,12 @@
mod app;
mod auth;
mod app;
mod components;
mod page;
mod control;
mod config;
pub use app::App;
pub use config::Config;
pub use auth::Auth;
pub mod prelude;
@ -17,7 +17,6 @@ pub const DEFAULT_AVATAR_URL: &str = "https://cdn.alemi.dev/social/gradient.png"
pub const NAME: &str = "μ";
use std::sync::Arc;
use auth::Auth;

506
web/src/page.rs
View file

@ -1,506 +0,0 @@
use std::sync::Arc;
use apb::{ActivityMut, Actor, Base, Object, ObjectMut};
use leptos::*;
use leptos_router::*;
use crate::{prelude::*, Config, DEFAULT_AVATAR_URL};
#[component]
pub fn AboutPage() -> impl IntoView {
view! {
<div>
<Breadcrumb>about</Breadcrumb>
<div class="mt-s mb-s" >
<p><code>μpub</code>" is a micro social network powered by "<a href="">ActivityPub</a></p>
<p><i>"the "<a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a>" is an ensemble of social networks, which, while independently hosted, can communicate with each other"</i></p>
<p>content is aggregated in timelines, logged out users can only access the global server timeline</p>
<hr />
<p>"while somewhat usable, "<code>μpub</code>" is under active development and still lacks some mainstream features (such as hashtags or lists)"</p>
<p>"if you would like to contribute to "<code>μpub</code>"'s development, get in touch and check "<a href="https://github.com/alemidev/upub" target="_blank">github</a>" or "<a href="https://moonlit.technology/alemi/upub.git" target="_blank">forgejo</a></p>
</div>
</div>
}
}
#[component]
pub fn RegisterPage() -> impl IntoView {
view! {
<div>
<Breadcrumb>register</Breadcrumb>
<form>
<table class="align ma-3">
<tr>
<td>username</td>
<td><input type="email" /></td>
</tr>
<tr>
<td>password</td>
<td><input type="password" /></td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr>
<td>display name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>summary</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>avatar url</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>banner url</td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr>
<td colspan="2"><input class="w-100" type="submit" value="register" /></td>
</tr>
</table>
</form>
</div>
}
}
#[component]
pub fn ConfigPage(setter: WriteSignal<Config>) -> impl IntoView {
let config = use_context::<Signal<Config>>().expect("missing config context");
macro_rules! get_cfg {
(filter $field:ident) => {
move || config.get().filters.$field
};
($field:ident) => {
move || config.get().$field
};
}
macro_rules! set_cfg {
($field:ident) => {
move |ev| {
let mut mock = config.get();
mock.$field = event_target_checked(&ev);
setter.set(mock);
}
};
(filter $field:ident) => {
move |ev| {
let mut mock = config.get();
mock.filters.$field = event_target_checked(&ev);
setter.set(mock);
}
};
}
view! {
<div>
<Breadcrumb>config</Breadcrumb>
<p class="center mt-0"><small>config is saved in your browser local storage</small></p>
<p>
<span title="embedded video attachments will loop like gifs if this option is enabled">
<input type="checkbox" class="mr-1"
prop:checked=get_cfg!(loop_videos)
on:input=set_cfg!(loop_videos)
/> loop videos
</span>
</p>
<p>
<span title="any post with a summary is considered to have a content warning, and collapsed by default if this option is enabled">
<input type="checkbox" class="mr-1"
prop:checked=get_cfg!(collapse_content_warnings)
on:input=set_cfg!(collapse_content_warnings)
/> collapse content warnings
</span>
</p>
<hr />
<p><code title="unchecked elements won't show in timelines">filters</code></p>
<ul>
<li><span title="like activities"><input type="checkbox" prop:checked=get_cfg!(filter likes) on:input=set_cfg!(filter likes) />" likes"</span></li>
<li><span title="create activities with object"><input type="checkbox" prop:checked=get_cfg!(filter creates) on:input=set_cfg!(filter creates)/>" creates"</span></li>
<li><span title="announce activities with object"><input type="checkbox" prop:checked=get_cfg!(filter announces) on:input=set_cfg!(filter announces) />" announces"</span></li>
<li><span title="follow, accept and reject activities"><input type="checkbox" prop:checked=get_cfg!(filter follows) on:input=set_cfg!(filter follows) />" follows"</span></li>
<li><span title="objects without a related activity to display"><input type="checkbox" prop:checked=get_cfg!(filter orphans) on:input=set_cfg!(filter orphans) />" orphans"</span></li>
</ul>
<hr />
<p><a href="/web/config/dev" title="access the devtools page">devtools</a></p>
</div>
}
}
fn send_follow_request(target: String) {
let auth = use_context::<Auth>().expect("missing auth context");
spawn_local(async move {
let payload = serde_json::Value::Object(serde_json::Map::default())
.set_activity_type(Some(apb::ActivityType::Follow))
.set_object(apb::Node::link(target.clone()))
.set_to(apb::Node::links(vec![target]));
if let Err(e) = Http::post(&auth.outbox(), &payload, auth).await {
tracing::error!("failed sending follow request: {e}");
}
})
}
#[component]
pub fn UserPage(tl: Timeline) -> impl IntoView {
let params = use_params_map();
let auth = use_context::<Auth>().expect("missing auth context");
let id = params.get()
.get("id")
.cloned()
.unwrap_or_default();
let mut uid = id
.replace("/web/objects/", "")
.replacen('+', "https://", 1)
.replace('@', "/");
if !uid.starts_with("http") {
uid = format!("{URL_BASE}/web/objects/{uid}");
}
let actor = create_local_resource(move || params.get().get("id").cloned().unwrap_or_default(), move |id| {
async move {
match CACHE.get(&Uri::full(FetchKind::User, &id)) {
Some(x) => Some(x.clone()),
None => {
let user : serde_json::Value = Http::fetch(&Uri::api(FetchKind::User, &id, true), auth).await.ok()?;
let user = Arc::new(user);
CACHE.put(Uri::full(FetchKind::User, &id), user.clone());
Some(user)
},
}
}
});
view! {
<div>
<Breadcrumb back=true >
users::view
<a
class="clean ml-1" href="#"
class:hidden=move || tl.is_empty()
on:click=move |_| {
tl.reset(tl.next.get().split('?').next().unwrap_or_default().to_string());
spawn_local(async move {
if let Err(e) = tl.more(auth).await {
tracing::error!("error fetching more items for timeline: {e}");
}
})
}><span class="emoji">
"\u{1f5d8}"
</span></a>
</Breadcrumb>
<div>
{move || {
let uid = uid.clone();
match actor.get() {
None => view! { <p class="center">loading...</p> }.into_view(),
Some(None) => {
view! { <p class="center"><code>loading failed</code><sup><small><a class="clean" href={uid} target="_blank">"↗"</a></small></sup></p> }.into_view()
},
Some(Some(object)) => {
let uid = object.id().unwrap_or_default().to_string();
let avatar_url = object.icon().get().map(|x| x.url().id().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
let background_url = object.image().get().map(|x| x.url().id().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
let display_name = object.name().unwrap_or_default().to_string();
let username = object.preferred_username().unwrap_or_default().to_string();
let summary = object.summary().unwrap_or_default().to_string();
let domain = object.id().unwrap_or_default().replace("https://", "").split('/').next().unwrap_or_default().to_string();
let actor_type = object.actor_type().unwrap_or(apb::ActorType::Person);
let actor_type_tag = if actor_type == apb::ActorType::Person { None } else {
Some(view! { <sup class="ml-s"><small>"["{actor_type.as_ref().to_lowercase()}"]"</small></sup> } )
};
let created = object.published();
let following = object.following_count().unwrap_or(0);
let followers = object.followers_count().unwrap_or(0);
let statuses = object.statuses_count().unwrap_or(0);
let tl_url = format!("{}/outbox/page", Uri::api(FetchKind::User, &id.clone(), false));
if !tl.next.get().starts_with(&tl_url) {
tl.reset(tl_url);
}
let following_me = object.following_me().unwrap_or(false);
let followed_by_me = object.followed_by_me().unwrap_or(false);
let _uid = uid.clone();
view! {
<div class="ml-3 mr-3">
<div
class="banner"
style={format!("background: center / cover url({background_url});")}
>
<div style="height: 10em"></div> // TODO bad way to have it fixed height ewwww
</div>
<div class="overlap">
<table class="pl-2 pr-2 align w-100" style="table-layout: fixed">
<tr>
<td rowspan=4 style="width: 8em">
<img class="avatar-circle avatar-border mr-s" src={avatar_url} style="height: 7em; width: 7em"/>
</td>
<td rowspan=2 class="bottom">
<b class="big">{display_name}</b>{actor_type_tag}
</td>
<td rowspan=2 class="bottom rev" title="statuses">{statuses}" "<span class="emoji">"\u{1f582}"</span></td>
</tr>
<tr></tr>
<tr>
<td class="top">
<small><a class="clean hover" href={uid.clone()} target="_blank">{username.clone()}@{domain}</a></small>
</td>
<td class="rev" title="following">{following}" "<span class="emoji">"👥"</span></td>
</tr>
<tr>
<td>
<DateTime t=created />
</td>
<td class="rev" title="followers">{followers}" "<span class="emoji">"📢"</span></td>
</tr>
</table>
<div class="rev mr-1" class:hidden=move || !auth.present() || auth.user_id() == uid>
{if followed_by_me {
view! { <code class="color">following</code> }.into_view()
} else {
view! { <input type="submit" value="follow" on:click=move |_| send_follow_request(_uid.clone()) /> }.into_view()
}}
{if following_me {
Some(view! { <code class="ml-1 color">follows you</code> })
} else {
None
}}
</div>
<p class="ml-2 mt-1 center" inner_html={mdhtml::safe_html(&summary)}></p>
</div>
</div>
<TimelineFeed tl=tl />
}.into_view()
},
}
}}
</div>
</div>
}
}
#[component]
pub fn ObjectPage(tl: Timeline) -> impl IntoView {
let params = use_params_map();
let auth = use_context::<Auth>().expect("missing auth context");
let mut uid = params.get().get("id")
.cloned()
.unwrap_or_default()
.replace("/web/objects/", "")
.replacen('+', "https://", 1)
.replace('@', "/");
if !uid.starts_with("http") {
uid = format!("{URL_BASE}/web/objects/{uid}");
}
let object = create_local_resource(move || params.get().get("id").cloned().unwrap_or_default(), move |oid| {
async move {
match CACHE.get(&Uri::full(FetchKind::Object, &oid)) {
Some(x) => Some(x.clone()),
None => {
let obj = Http::fetch::<serde_json::Value>(&Uri::api(FetchKind::Object, &oid, true), auth).await.ok()?;
let obj = Arc::new(obj);
if let Some(author) = obj.attributed_to().id() {
if let Ok(user) = Http::fetch::<serde_json::Value>(
&Uri::api(FetchKind::User, &author, true), auth
).await {
CACHE.put(Uri::full(FetchKind::User, &author), Arc::new(user));
}
}
CACHE.put(Uri::full(FetchKind::Object, &oid), obj.clone());
Some(obj)
}
}
}
});
view! {
<div>
<Breadcrumb back=true >
objects::view
<a
class="clean ml-1" href="#"
class:hidden=move || tl.is_empty()
on:click=move |_| {
tl.reset(tl.next.get().split('?').next().unwrap_or_default().to_string());
spawn_local(async move {
if let Err(e) = tl.more(auth).await {
tracing::error!("error fetching more items for timeline: {e}");
}
})
}><span class="emoji">
"\u{1f5d8}"
</span></a>
</Breadcrumb>
<div class="ma-2" >
{move || match object.get() {
None => view! { <p class="center"> loading ... </p> }.into_view(),
Some(None) => {
let uid = uid.clone();
view! { <p class="center"><code>loading failed</code><sup><small><a class="clean" href={uid} target="_blank">"↗"</a></small></sup></p> }.into_view()
},
Some(Some(o)) => {
let object = o.clone();
let tl_url = format!("{}/page", Uri::api(FetchKind::Context, &o.context().id().unwrap_or_default(), false));
if !tl.next.get().starts_with(&tl_url) {
tl.reset(tl_url);
}
view!{
<Object object=object />
<div class="ml-1 mr-1 mt-2">
<TimelineReplies tl=tl root=o.id().unwrap_or_default().to_string() />
</div>
}.into_view()
},
}}
</div>
</div>
}
}
#[component]
pub fn TimelinePage(name: &'static str, tl: Timeline) -> impl IntoView {
let auth = use_context::<Auth>().expect("missing auth context");
view! {
<div>
<Breadcrumb back=false>
{name}
<a class="clean ml-1" href="#" on:click=move |_| {
tl.reset(tl.next.get().split('?').next().unwrap_or_default().to_string());
spawn_local(async move {
if let Err(e) = tl.more(auth).await {
tracing::error!("error fetching more items for timeline: {e}");
}
})
}><span class="emoji">
"\u{1f5d8}"
</span></a>
</Breadcrumb>
<div class="mt-s mb-s" >
<TimelineFeed tl=tl />
</div>
</div>
}
}
#[component]
pub fn DebugPage() -> impl IntoView {
let (object, set_object) = create_signal(Arc::new(serde_json::Value::String(
"use this view to fetch remote AP objects and inspect their content".into())
));
let cached_ref: NodeRef<html::Input> = create_node_ref();
let auth = use_context::<Auth>().expect("missing auth context");
let (query, set_query) = create_signal("".to_string());
view! {
<div>
<Breadcrumb back=true>config :: devtools</Breadcrumb>
<div class="mt-1" >
<form on:submit=move|ev| {
ev.prevent_default();
let cached = cached_ref.get().map(|x| x.checked()).unwrap_or_default();
let fetch_url = query.get();
if cached {
match CACHE.get(&fetch_url) {
Some(x) => set_object.set(x),
None => set_object.set(Arc::new(serde_json::Value::String("not in cache!".into()))),
}
} else {
let url = format!("{URL_BASE}/dbg?id={fetch_url}");
spawn_local(async move { set_object.set(Arc::new(debug_fetch(&url, auth).await)) });
}
} >
<table class="align w-100" >
<tr>
<td>
<small><a
href={move|| Uri::web(FetchKind::Object, &query.get())}
>obj</a>
" "
<a
href={move|| Uri::web(FetchKind::User, &query.get())}
>usr</a></small>
</td>
<td class="w-100"><input class="w-100" type="text" on:input=move|ev| set_query.set(event_target_value(&ev)) placeholder="AP id" /></td>
<td><input type="submit" class="w-100" value="fetch" /></td>
<td><input type="checkbox" title="cached" value="cached" node_ref=cached_ref /></td>
</tr>
</table>
</form>
</div>
<pre class="ma-1" >
{move || serde_json::to_string_pretty(object.get().as_ref()).unwrap_or("unserializable".to_string())}
</pre>
</div>
}
}
#[component]
pub fn SearchPage() -> impl IntoView {
let auth = use_context::<Auth>().expect("missing auth context");
let user = create_local_resource(
move || use_query_map().get().get("q").cloned().unwrap_or_default(),
move |q| {
let user_fetch = Uri::api(FetchKind::User, &q, true);
async move { Some(Arc::new(Http::fetch::<serde_json::Value>(&user_fetch, auth).await.ok()?)) }
}
);
let object = create_local_resource(
move || use_query_map().get().get("q").cloned().unwrap_or_default(),
move |q| {
let object_fetch = Uri::api(FetchKind::Object, &q, true);
async move { Some(Arc::new(Http::fetch::<serde_json::Value>(&object_fetch, auth).await.ok()?)) }
}
);
view! {
<Breadcrumb>search</Breadcrumb>
<blockquote class="mt-3 mb-3">
<details open>
<summary class="mb-2">
<code class="cw center color ml-s w-100">users</code>
</summary>
<div class="pb-1">
{move || match user.get() {
None => view! { <p class="center"><small>searching...</small></p> },
Some(None) => view! { <p class="center"><code>N/A</code></p> },
Some(Some(u)) => view! { <p><ActorBanner object=u /></p> },
}}
</div>
</details>
</blockquote>
<blockquote class="mt-3 mb-3">
<details open>
<summary class="mb-2">
<code class="cw center color ml-s w-100">objects</code>
</summary>
<div class="pb-1">
{move || match object.get() {
None => view! { <p class="center"><small>searching...</small></p> },
Some(None) => view!{ <p class="center"><code>N/A</code></p> },
Some(Some(o)) => view! { <p><Object object=o /></p> },
}}
</div>
</details>
</blockquote>
}
}
// this is a rather weird way to fetch but i want to see the bare error text if it fails!
async fn debug_fetch(url: &str, token: Auth) -> serde_json::Value {
match Http::request::<()>(reqwest::Method::GET, url, None, token).await {
Err(e) => serde_json::Value::String(format!("[!] failed sending request: {e}")),
Ok(res) => match res.text().await {
Err(e) => serde_json::Value::String(format!("[!] invalid response body: {e}")),
Ok(x) => match serde_json::from_str(&x) {
Err(_) => serde_json::Value::String(x),
Ok(v) => v,
},
}
}
}

19
web/src/page/about.rs Normal file
View file

@ -0,0 +1,19 @@
use leptos::*;
use crate::prelude::*;
#[component]
pub fn AboutPage() -> impl IntoView {
view! {
<div>
<Breadcrumb>about</Breadcrumb>
<div class="mt-s mb-s" >
<p><code>μpub</code>" is a micro social network powered by "<a href="">ActivityPub</a></p>
<p><i>"the "<a href="https://en.wikipedia.org/wiki/Fediverse">fediverse</a>" is an ensemble of social networks, which, while independently hosted, can communicate with each other"</i></p>
<p>content is aggregated in timelines, logged out users can only access the global server timeline</p>
<hr />
<p>"while somewhat usable, "<code>μpub</code>" is under active development and still lacks some mainstream features (such as hashtags or lists)"</p>
<p>"if you would like to contribute to "<code>μpub</code>"'s development, get in touch and check "<a href="https://github.com/alemidev/upub" target="_blank">github</a>" or "<a href="https://moonlit.technology/alemi/upub.git" target="_blank">forgejo</a></p>
</div>
</div>
}
}

67
web/src/page/config.rs Normal file
View file

@ -0,0 +1,67 @@
use leptos::*;
use crate::prelude::*;
#[component]
pub fn ConfigPage(setter: WriteSignal<crate::Config>) -> impl IntoView {
let config = use_context::<Signal<crate::Config>>().expect("missing config context");
macro_rules! get_cfg {
(filter $field:ident) => {
move || config.get().filters.$field
};
($field:ident) => {
move || config.get().$field
};
}
macro_rules! set_cfg {
($field:ident) => {
move |ev| {
let mut mock = config.get();
mock.$field = event_target_checked(&ev);
setter.set(mock);
}
};
(filter $field:ident) => {
move |ev| {
let mut mock = config.get();
mock.filters.$field = event_target_checked(&ev);
setter.set(mock);
}
};
}
view! {
<div>
<Breadcrumb>config</Breadcrumb>
<p class="center mt-0"><small>config is saved in your browser local storage</small></p>
<p>
<span title="embedded video attachments will loop like gifs if this option is enabled">
<input type="checkbox" class="mr-1"
prop:checked=get_cfg!(loop_videos)
on:input=set_cfg!(loop_videos)
/> loop videos
</span>
</p>
<p>
<span title="any post with a summary is considered to have a content warning, and collapsed by default if this option is enabled">
<input type="checkbox" class="mr-1"
prop:checked=get_cfg!(collapse_content_warnings)
on:input=set_cfg!(collapse_content_warnings)
/> collapse content warnings
</span>
</p>
<hr />
<p><code title="unchecked elements won't show in timelines">filters</code></p>
<ul>
<li><span title="like activities"><input type="checkbox" prop:checked=get_cfg!(filter likes) on:input=set_cfg!(filter likes) />" likes"</span></li>
<li><span title="create activities with object"><input type="checkbox" prop:checked=get_cfg!(filter creates) on:input=set_cfg!(filter creates)/>" creates"</span></li>
<li><span title="announce activities with object"><input type="checkbox" prop:checked=get_cfg!(filter announces) on:input=set_cfg!(filter announces) />" announces"</span></li>
<li><span title="follow, accept and reject activities"><input type="checkbox" prop:checked=get_cfg!(filter follows) on:input=set_cfg!(filter follows) />" follows"</span></li>
<li><span title="objects without a related activity to display"><input type="checkbox" prop:checked=get_cfg!(filter orphans) on:input=set_cfg!(filter orphans) />" orphans"</span></li>
</ul>
<hr />
<p><a href="/web/config/dev" title="access the devtools page">devtools</a></p>
</div>
}
}

69
web/src/page/debug.rs Normal file
View file

@ -0,0 +1,69 @@
use std::sync::Arc;
use leptos::*;
use crate::prelude::*;
#[component]
pub fn DebugPage() -> impl IntoView {
let (object, set_object) = create_signal(Arc::new(serde_json::Value::String(
"use this view to fetch remote AP objects and inspect their content".into())
));
let cached_ref: NodeRef<html::Input> = create_node_ref();
let auth = use_context::<Auth>().expect("missing auth context");
let (query, set_query) = create_signal("".to_string());
view! {
<div>
<Breadcrumb back=true>config :: devtools</Breadcrumb>
<div class="mt-1" >
<form on:submit=move|ev| {
ev.prevent_default();
let cached = cached_ref.get().map(|x| x.checked()).unwrap_or_default();
let fetch_url = query.get();
if cached {
match CACHE.get(&fetch_url) {
Some(x) => set_object.set(x),
None => set_object.set(Arc::new(serde_json::Value::String("not in cache!".into()))),
}
} else {
let url = format!("{URL_BASE}/dbg?id={fetch_url}");
spawn_local(async move { set_object.set(Arc::new(debug_fetch(&url, auth).await)) });
}
} >
<table class="align w-100" >
<tr>
<td>
<small><a
href={move|| Uri::web(FetchKind::Object, &query.get())}
>obj</a>
" "
<a
href={move|| Uri::web(FetchKind::User, &query.get())}
>usr</a></small>
</td>
<td class="w-100"><input class="w-100" type="text" on:input=move|ev| set_query.set(event_target_value(&ev)) placeholder="AP id" /></td>
<td><input type="submit" class="w-100" value="fetch" /></td>
<td><input type="checkbox" title="cached" value="cached" node_ref=cached_ref /></td>
</tr>
</table>
</form>
</div>
<pre class="ma-1" >
{move || serde_json::to_string_pretty(object.get().as_ref()).unwrap_or("unserializable".to_string())}
</pre>
</div>
}
}
// this is a rather weird way to fetch but i want to see the bare error text if it fails!
async fn debug_fetch(url: &str, token: Auth) -> serde_json::Value {
match Http::request::<()>(reqwest::Method::GET, url, None, token).await {
Err(e) => serde_json::Value::String(format!("[!] failed sending request: {e}")),
Ok(res) => match res.text().await {
Err(e) => serde_json::Value::String(format!("[!] invalid response body: {e}")),
Ok(x) => match serde_json::from_str(&x) {
Err(_) => serde_json::Value::String(x),
Ok(v) => v,
},
}
}
}

23
web/src/page/mod.rs Normal file
View file

@ -0,0 +1,23 @@
mod about;
pub use about::AboutPage;
mod config;
pub use config::ConfigPage;
mod debug;
pub use debug::DebugPage;
mod object;
pub use object::ObjectPage;
mod register;
pub use register::RegisterPage;
mod search;
pub use search::SearchPage;
mod timeline;
pub use timeline::TimelinePage;
mod user;
pub use user::UserPage;

84
web/src/page/object.rs Normal file
View file

@ -0,0 +1,84 @@
use std::sync::Arc;
use leptos::*;
use leptos_router::*;
use crate::prelude::*;
use apb::{Base, Object};
#[component]
pub fn ObjectPage(tl: Timeline) -> impl IntoView {
let params = use_params_map();
let auth = use_context::<Auth>().expect("missing auth context");
let mut uid = params.get().get("id")
.cloned()
.unwrap_or_default()
.replace("/web/objects/", "")
.replacen('+', "https://", 1)
.replace('@', "/");
if !uid.starts_with("http") {
uid = format!("{URL_BASE}/web/objects/{uid}");
}
let object = create_local_resource(move || params.get().get("id").cloned().unwrap_or_default(), move |oid| {
async move {
match CACHE.get(&Uri::full(FetchKind::Object, &oid)) {
Some(x) => Some(x.clone()),
None => {
let obj = Http::fetch::<serde_json::Value>(&Uri::api(FetchKind::Object, &oid, true), auth).await.ok()?;
let obj = Arc::new(obj);
if let Some(author) = obj.attributed_to().id() {
if let Ok(user) = Http::fetch::<serde_json::Value>(
&Uri::api(FetchKind::User, &author, true), auth
).await {
CACHE.put(Uri::full(FetchKind::User, &author), Arc::new(user));
}
}
CACHE.put(Uri::full(FetchKind::Object, &oid), obj.clone());
Some(obj)
}
}
}
});
view! {
<div>
<Breadcrumb back=true >
objects::view
<a
class="clean ml-1" href="#"
class:hidden=move || tl.is_empty()
on:click=move |_| {
tl.reset(tl.next.get().split('?').next().unwrap_or_default().to_string());
spawn_local(async move {
if let Err(e) = tl.more(auth).await {
tracing::error!("error fetching more items for timeline: {e}");
}
})
}><span class="emoji">
"\u{1f5d8}"
</span></a>
</Breadcrumb>
<div class="ma-2" >
{move || match object.get() {
None => view! { <p class="center"> loading ... </p> }.into_view(),
Some(None) => {
let uid = uid.clone();
view! { <p class="center"><code>loading failed</code><sup><small><a class="clean" href={uid} target="_blank">"↗"</a></small></sup></p> }.into_view()
},
Some(Some(o)) => {
let object = o.clone();
let tl_url = format!("{}/page", Uri::api(FetchKind::Context, &o.context().id().unwrap_or_default(), false));
if !tl.next.get().starts_with(&tl_url) {
tl.reset(tl_url);
}
view!{
<Object object=object />
<div class="ml-1 mr-1 mt-2">
<TimelineReplies tl=tl root=o.id().unwrap_or_default().to_string() />
</div>
}.into_view()
},
}}
</div>
</div>
}
}

48
web/src/page/register.rs Normal file
View file

@ -0,0 +1,48 @@
use leptos::*;
use crate::prelude::*;
#[component]
pub fn RegisterPage() -> impl IntoView {
view! {
<div>
<Breadcrumb>register</Breadcrumb>
<form>
<table class="align ma-3">
<tr>
<td>username</td>
<td><input type="email" /></td>
</tr>
<tr>
<td>password</td>
<td><input type="password" /></td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr>
<td>display name</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>summary</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>avatar url</td>
<td><input type="text" /></td>
</tr>
<tr>
<td>banner url</td>
<td><input type="text" /></td>
</tr>
<tr>
<td colspan="2"><hr /></td>
</tr>
<tr>
<td colspan="2"><input class="w-100" type="submit" value="register" /></td>
</tr>
</table>
</form>
</div>
}
}

59
web/src/page/search.rs Normal file
View file

@ -0,0 +1,59 @@
use std::sync::Arc;
use leptos::*;
use leptos_router::*;
use crate::prelude::*;
#[component]
pub fn SearchPage() -> impl IntoView {
let auth = use_context::<Auth>().expect("missing auth context");
let user = create_local_resource(
move || use_query_map().get().get("q").cloned().unwrap_or_default(),
move |q| {
let user_fetch = Uri::api(FetchKind::User, &q, true);
async move { Some(Arc::new(Http::fetch::<serde_json::Value>(&user_fetch, auth).await.ok()?)) }
}
);
let object = create_local_resource(
move || use_query_map().get().get("q").cloned().unwrap_or_default(),
move |q| {
let object_fetch = Uri::api(FetchKind::Object, &q, true);
async move { Some(Arc::new(Http::fetch::<serde_json::Value>(&object_fetch, auth).await.ok()?)) }
}
);
view! {
<Breadcrumb>search</Breadcrumb>
<blockquote class="mt-3 mb-3">
<details open>
<summary class="mb-2">
<code class="cw center color ml-s w-100">users</code>
</summary>
<div class="pb-1">
{move || match user.get() {
None => view! { <p class="center"><small>searching...</small></p> },
Some(None) => view! { <p class="center"><code>N/A</code></p> },
Some(Some(u)) => view! { <p><ActorBanner object=u /></p> },
}}
</div>
</details>
</blockquote>
<blockquote class="mt-3 mb-3">
<details open>
<summary class="mb-2">
<code class="cw center color ml-s w-100">objects</code>
</summary>
<div class="pb-1">
{move || match object.get() {
None => view! { <p class="center"><small>searching...</small></p> },
Some(None) => view!{ <p class="center"><code>N/A</code></p> },
Some(Some(o)) => view! { <p><Object object=o /></p> },
}}
</div>
</details>
</blockquote>
}
}

27
web/src/page/timeline.rs Normal file
View file

@ -0,0 +1,27 @@
use leptos::*;
use crate::prelude::*;
#[component]
pub fn TimelinePage(name: &'static str, tl: Timeline) -> impl IntoView {
let auth = use_context::<Auth>().expect("missing auth context");
view! {
<div>
<Breadcrumb back=false>
{name}
<a class="clean ml-1" href="#" on:click=move |_| {
tl.reset(tl.next.get().split('?').next().unwrap_or_default().to_string());
spawn_local(async move {
if let Err(e) = tl.more(auth).await {
tracing::error!("error fetching more items for timeline: {e}");
}
})
}><span class="emoji">
"\u{1f5d8}"
</span></a>
</Breadcrumb>
<div class="mt-s mb-s" >
<TimelineFeed tl=tl />
</div>
</div>
}
}

156
web/src/page/user.rs Normal file
View file

@ -0,0 +1,156 @@
use std::sync::Arc;
use leptos::*;
use leptos_router::*;
use crate::{prelude::*, DEFAULT_AVATAR_URL};
use apb::{Base, Actor, ActivityMut, Object, ObjectMut};
fn send_follow_request(target: String) {
let auth = use_context::<Auth>().expect("missing auth context");
spawn_local(async move {
let payload = serde_json::Value::Object(serde_json::Map::default())
.set_activity_type(Some(apb::ActivityType::Follow))
.set_object(apb::Node::link(target.clone()))
.set_to(apb::Node::links(vec![target]));
if let Err(e) = Http::post(&auth.outbox(), &payload, auth).await {
tracing::error!("failed sending follow request: {e}");
}
})
}
#[component]
pub fn UserPage(tl: Timeline) -> impl IntoView {
let params = use_params_map();
let auth = use_context::<Auth>().expect("missing auth context");
let id = params.get()
.get("id")
.cloned()
.unwrap_or_default();
let mut uid = id
.replace("/web/objects/", "")
.replacen('+', "https://", 1)
.replace('@', "/");
if !uid.starts_with("http") {
uid = format!("{URL_BASE}/web/objects/{uid}");
}
let actor = create_local_resource(move || params.get().get("id").cloned().unwrap_or_default(), move |id| {
async move {
match CACHE.get(&Uri::full(FetchKind::User, &id)) {
Some(x) => Some(x.clone()),
None => {
let user : serde_json::Value = Http::fetch(&Uri::api(FetchKind::User, &id, true), auth).await.ok()?;
let user = Arc::new(user);
CACHE.put(Uri::full(FetchKind::User, &id), user.clone());
Some(user)
},
}
}
});
view! {
<div>
<Breadcrumb back=true >
users::view
<a
class="clean ml-1" href="#"
class:hidden=move || tl.is_empty()
on:click=move |_| {
tl.reset(tl.next.get().split('?').next().unwrap_or_default().to_string());
spawn_local(async move {
if let Err(e) = tl.more(auth).await {
tracing::error!("error fetching more items for timeline: {e}");
}
})
}><span class="emoji">
"\u{1f5d8}"
</span></a>
</Breadcrumb>
<div>
{move || {
let uid = uid.clone();
match actor.get() {
None => view! { <p class="center">loading...</p> }.into_view(),
Some(None) => {
view! { <p class="center"><code>loading failed</code><sup><small><a class="clean" href={uid} target="_blank">"↗"</a></small></sup></p> }.into_view()
},
Some(Some(object)) => {
let uid = object.id().unwrap_or_default().to_string();
let avatar_url = object.icon().get().map(|x| x.url().id().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
let background_url = object.image().get().map(|x| x.url().id().unwrap_or(DEFAULT_AVATAR_URL.into())).unwrap_or(DEFAULT_AVATAR_URL.into());
let display_name = object.name().unwrap_or_default().to_string();
let username = object.preferred_username().unwrap_or_default().to_string();
let summary = object.summary().unwrap_or_default().to_string();
let domain = object.id().unwrap_or_default().replace("https://", "").split('/').next().unwrap_or_default().to_string();
let actor_type = object.actor_type().unwrap_or(apb::ActorType::Person);
let actor_type_tag = if actor_type == apb::ActorType::Person { None } else {
Some(view! { <sup class="ml-s"><small>"["{actor_type.as_ref().to_lowercase()}"]"</small></sup> } )
};
let created = object.published();
let following = object.following_count().unwrap_or(0);
let followers = object.followers_count().unwrap_or(0);
let statuses = object.statuses_count().unwrap_or(0);
let tl_url = format!("{}/outbox/page", Uri::api(FetchKind::User, &id.clone(), false));
if !tl.next.get().starts_with(&tl_url) {
tl.reset(tl_url);
}
let following_me = object.following_me().unwrap_or(false);
let followed_by_me = object.followed_by_me().unwrap_or(false);
let _uid = uid.clone();
view! {
<div class="ml-3 mr-3">
<div
class="banner"
style={format!("background: center / cover url({background_url});")}
>
<div style="height: 10em"></div> // TODO bad way to have it fixed height ewwww
</div>
<div class="overlap">
<table class="pl-2 pr-2 align w-100" style="table-layout: fixed">
<tr>
<td rowspan=4 style="width: 8em">
<img class="avatar-circle avatar-border mr-s" src={avatar_url} style="height: 7em; width: 7em"/>
</td>
<td rowspan=2 class="bottom">
<b class="big">{display_name}</b>{actor_type_tag}
</td>
<td rowspan=2 class="bottom rev" title="statuses">{statuses}" "<span class="emoji">"\u{1f582}"</span></td>
</tr>
<tr></tr>
<tr>
<td class="top">
<small><a class="clean hover" href={uid.clone()} target="_blank">{username.clone()}@{domain}</a></small>
</td>
<td class="rev" title="following">{following}" "<span class="emoji">"👥"</span></td>
</tr>
<tr>
<td>
<DateTime t=created />
</td>
<td class="rev" title="followers">{followers}" "<span class="emoji">"📢"</span></td>
</tr>
</table>
<div class="rev mr-1" class:hidden=move || !auth.present() || auth.user_id() == uid>
{if followed_by_me {
view! { <code class="color">following</code> }.into_view()
} else {
view! { <input type="submit" value="follow" on:click=move |_| send_follow_request(_uid.clone()) /> }.into_view()
}}
{if following_me {
Some(view! { <code class="ml-1 color">follows you</code> })
} else {
None
}}
</div>
<p class="ml-2 mt-1 center" inner_html={mdhtml::safe_html(&summary)}></p>
</div>
</div>
<TimelineFeed tl=tl />
}.into_view()
},
}
}}
</div>
</div>
}
}

2
web/src/prelude.rs
View file

@ -3,7 +3,5 @@ pub use crate::{
CACHE, URL_BASE,
auth::{Auth, AuthToken},
page::*,
control::*,
components::*,
auth::LoginBox,
};