info-werefox-cafe/void-fe/src/lib.rs

//! # Rust Letter Frontend
//!
//! Rendering functions for the site using [Dioxus](https://dioxuslabs.com/).

#![allow(non_snake_case)]

/// A module that handles the functions needed
/// to render the site.
pub mod void_app {
    // import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types
    pub use dioxus::prelude::*;
    use rust_embed::RustEmbed;

    // #[derive(PartialEq, Props)]
    // pub struct Poems {
    //     pub poems: Vec<String>,
    // }

    #[derive(PartialEq, Props)]
    struct PoemData {
        title: String,
        content: String,
        creation_date: String,
    }

    #[derive(PartialEq, Props)]
    struct PoemTitle {
        title: String,
    }

    #[derive(PartialEq, Props)]
    struct PoemContent {
        content: String,
        creation_date: String,
    }
    #[derive(RustEmbed)]
    #[folder = "data/poems"]
    pub struct Poems;

    /// Renders the app and returns the rendered Element.
    pub fn App(cx: Scope) -> Element {
        cx.render(rsx!(
            div { class: "min-h-screen font-nerd bg-alice-werefox-grey-light dark:bg-alice-werefox-grey",
                div { class: "container space-y-4 mx-auto p-4",
                    Poems::iter().map(|p| {
                        let creation_date = String::from(String::from("<br>Written on: ") + p.split("_").next().unwrap());
                        let poem_content = Poems::get(&p).expect("Found poem {&p:?}");
                        let mut poem_to_str = std::str::from_utf8(poem_content.data.as_ref()).expect("Title is valid UT8.").lines();
                        let poem_title = poem_to_str.next().unwrap();
                        let poem_content = poem_to_str.into_iter().collect::<Vec<&str>>().join("\n");
                        let poem_title_to_html_string = markdown::to_html(poem_title);
                        let poem_content_to_html_string = markdown::to_html(poem_content.as_str());
                        rsx!{ MakePoem{ title: poem_title_to_html_string, content: poem_content_to_html_string, creation_date: creation_date } }
                    })
                }
            }
        ))
    }

    #[cfg(any(target_family = "unix", target_family = "windows"))]
    fn RenderPoemTitle(cx: Scope<PoemTitle>) -> Element {
        cx.render(rsx!(
            span { class: "mx-auto max-w-fit flex justify-center bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4",
                "{cx.props.title}"
            }
        ))
    }

    #[cfg(target_family = "wasm")]
    fn RenderPoemTitle(cx: Scope<PoemTitle>) -> Element {
        cx.render(rsx!(
            p { class: "mx-auto max-w-fit flex justify-center bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4",
                dangerous_inner_html: "{cx.props.title}",
            }
        ))
    }

    #[cfg(any(target_family = "unix", target_family = "windows"))]
    fn RenderPoemElement(cx: Scope<PoemContent>) -> Element {
        cx.render(rsx!(
            div { class: "font-nerd flex flex-col space-y-4 mx-4 py-4", "{cx.props.content}{cx.props.creation_date}" }
        ))
    }

    #[cfg(target_family = "wasm")]
    fn RenderPoemElement(cx: Scope<PoemContent>) -> Element {
        cx.render(rsx!(div {
            class: "font-nerd flex flex-col space-y-4 mx-4 py-4",
            dangerous_inner_html: "{cx.props.content}{cx.props.creation_date}"
        }))
    }

    fn MakePoem(cx: Scope<PoemData>) -> Element {
        cx.render(rsx!(
            div { class: "flex-col space-y-4",
                RenderPoemTitle { title: cx.props.title.clone() }
                details { class: "mx-auto max-w-fit space-y-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-4 border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4",
                    summary { class: "flex justify-center border-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark border-alice-werefox-red-dark dark:border-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4",
                        "Open"
                    }
                    RenderPoemElement { content: cx.props.content.clone(), creation_date: cx.props.creation_date.clone() }
                }
            }
        ))
    }
}