From 4830f0a600e6f9015061a431d0935e321c657b56 Mon Sep 17 00:00:00 2001 From: Ada Werefox Date: Tue, 11 Apr 2023 19:42:46 -0500 Subject: [PATCH] previous and next entries, major refactoring on Dioxus frontend, more reliable routing on backend, some minor style adjustments. --- Dockerfile | 25 ++ Rocket.toml | 2 +- docker-compose.yml | 10 + public/styles/tailwind.min.css | 2 +- void-be/src/lib.rs | 114 +++-- void-fe/.vscode/settings.json | 5 + void-fe/src/components/MakePoem.rs | 0 void-fe/src/lib.rs | 607 ++++++++++++++++----------- void-fe/src/utils/file_management.rs | 0 9 files changed, 480 insertions(+), 285 deletions(-) create mode 100644 Dockerfile create mode 100644 docker-compose.yml create mode 100644 void-fe/.vscode/settings.json create mode 100644 void-fe/src/components/MakePoem.rs create mode 100644 void-fe/src/utils/file_management.rs diff --git a/Dockerfile b/Dockerfile new file mode 100644 index 0000000..16609e1 --- /dev/null +++ b/Dockerfile @@ -0,0 +1,25 @@ +FROM rust:alpine + +WORKDIR /usr/src/app + +RUN apk add git musl-dev + +COPY public/ public/ +COPY void-be/ void-be/ + +# We don't need all the front end directory files +RUN mkdir void-fe +COPY void-fe/src/ void-fe/src/ +COPY void-fe/data/ void-fe/data/ +COPY void-fe/Cargo.toml void-fe/Cargo.toml + +COPY src/ src/ +COPY templates/ templates/ +COPY Cargo.toml . +COPY Rocket.toml . + +RUN cargo install --config "net.git-fetch-with-cli=true" --path . + +ENV RUST_ADDRESS=0.0.0.0 + +CMD ["cargo", "run", "--release"] diff --git a/Rocket.toml b/Rocket.toml index de3a982..55e9da0 100644 --- a/Rocket.toml +++ b/Rocket.toml @@ -1,5 +1,5 @@ [default] -port = 3469 +port = 8345 # workers = 16 # max_blocking = 512 # keep_alive = 5 diff --git a/docker-compose.yml b/docker-compose.yml new file mode 100644 index 0000000..726e408 --- /dev/null +++ b/docker-compose.yml @@ -0,0 +1,10 @@ +--- +version: "3" + +services: + app: + image: void-werefox-cafe:latest + build: + context: . + ports: + - "8345:8345" diff --git a/public/styles/tailwind.min.css b/public/styles/tailwind.min.css index 96c35c6..907fa21 100644 --- a/public/styles/tailwind.min.css +++ b/public/styles/tailwind.min.css @@ -1 +1 @@ -/*! tailwindcss v3.3.0 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-4{margin-left:1rem;margin-right:1rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.mr-4{margin-right:1rem}.mr-6{margin-right:1.5rem}.flex{display:flex}.min-h-screen{min-height:100vh}.max-w-fit{max-width:-moz-fit-content;max-width:fit-content}.max-w-full{max-width:100%}.grow{flex-grow:1}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.justify-center{justify-content:center}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.bg-alice-werefox-grey-light{--tw-bg-opacity:1;background-color:rgb(204 204 204/var(--tw-bg-opacity))}.bg-alice-werefox-grey-lightest{--tw-bg-opacity:1;background-color:rgb(238 238 238/var(--tw-bg-opacity))}.p-4{padding:1rem}.py-4{padding-top:1rem;padding-bottom:1rem}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-nerd{font-family:OpenDyslexic}.text-lg{font-size:1.125rem}.text-lg,.text-xl{line-height:1.75rem}.text-xl{font-size:1.25rem}.text-alice-werefox-red-dark{--tw-text-opacity:1;color:rgb(128 0 8/var(--tw-text-opacity))}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-2,.ring-4{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-alice-werefox-red-dark{--tw-ring-opacity:1;--tw-ring-color:rgb(128 0 8/var(--tw-ring-opacity))}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@font-face{font-family:OpenDyslexic;src:url(/fonts/OpenDyslexic-Regular.otf)}.before\:content-\[\'Open\'\]:before{--tw-content:"Open";content:var(--tw-content)}@keyframes yip{0%,to{transform:scale(1)}50%{transform:scale(1.01)}}.hover\:animate-yip:hover{animation:yip .1s ease-in-out}.hover\:text-alice-werefox-blue-dark:hover{--tw-text-opacity:1;color:rgb(51 0 255/var(--tw-text-opacity))}.hover\:ring-alice-werefox-blue:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(27 41 224/var(--tw-ring-opacity))}.group[open] .group-open\:before\:content-\[\'Close\'\]:before{--tw-content:"Close";content:var(--tw-content)}:is(.dark .dark\:bg-alice-werefox-grey){--tw-bg-opacity:1;background-color:rgb(36 36 36/var(--tw-bg-opacity))}:is(.dark .dark\:bg-alice-werefox-grey-dark){--tw-bg-opacity:1;background-color:rgb(18 18 18/var(--tw-bg-opacity))}:is(.dark .dark\:text-alice-werefox-red-light){--tw-text-opacity:1;color:rgb(224 133 135/var(--tw-text-opacity))}:is(.dark .dark\:ring-alice-werefox-red){--tw-ring-opacity:1;--tw-ring-color:rgb(201 52 57/var(--tw-ring-opacity))}:is(.dark .dark\:hover\:text-alice-werefox-blue-light:hover){--tw-text-opacity:1;color:rgb(145 151 243/var(--tw-text-opacity))}:is(.dark .dark\:hover\:ring-alice-werefox-blue:hover){--tw-ring-opacity:1;--tw-ring-color:rgb(27 41 224/var(--tw-ring-opacity))} \ No newline at end of file +/*! tailwindcss v3.3.0 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:initial}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;font-weight:inherit;line-height:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;background-color:initial;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:initial}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]{display:none}*,::backdrop,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#3b82f680;--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-4{margin-left:1rem;margin-right:1rem}.mx-auto{margin-left:auto;margin-right:auto}.ml-4{margin-left:1rem}.ml-6{margin-left:1.5rem}.mr-4{margin-right:1rem}.mr-6{margin-right:1.5rem}.flex{display:flex}.grid{display:grid}.min-h-screen{min-height:100vh}.max-w-fit{max-width:-moz-fit-content;max-width:fit-content}.max-w-full{max-width:100%}.grow{flex-grow:1}.grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}.grid-rows-4{grid-template-rows:repeat(4,minmax(0,1fr))}.flex-row{flex-direction:row}.flex-col{flex-direction:column}.justify-center{justify-content:center}.gap-y-4{row-gap:1rem}.space-y-4>:not([hidden])~:not([hidden]){--tw-space-y-reverse:0;margin-top:calc(1rem*(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem*var(--tw-space-y-reverse))}.bg-alice-werefox-grey-light{--tw-bg-opacity:1;background-color:rgb(204 204 204/var(--tw-bg-opacity))}.bg-alice-werefox-grey-lightest{--tw-bg-opacity:1;background-color:rgb(238 238 238/var(--tw-bg-opacity))}.p-4{padding:1rem}.py-4{padding-top:1rem;padding-bottom:1rem}.text-center{text-align:center}.align-middle{vertical-align:middle}.font-nerd{font-family:OpenDyslexic}.text-lg{font-size:1.125rem}.text-lg,.text-xl{line-height:1.75rem}.text-xl{font-size:1.25rem}.text-alice-werefox-grey-dark{--tw-text-opacity:1;color:rgb(18 18 18/var(--tw-text-opacity))}.ring-2{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-2,.ring-4{box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000)}.ring-4{--tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color)}.ring-alice-werefox-red-dark{--tw-ring-opacity:1;--tw-ring-color:rgb(128 0 8/var(--tw-ring-opacity))}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,-webkit-backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter,-webkit-backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}@font-face{font-family:OpenDyslexic;src:url(/fonts/OpenDyslexic-Regular.otf)}.before\:content-\[\'Open\'\]:before{--tw-content:"Open";content:var(--tw-content)}@keyframes yip{0%,to{transform:scale(1)}50%{transform:scale(1.01)}}.hover\:animate-yip:hover{animation:yip .1s ease-in-out}.hover\:text-alice-werefox-blue-dark:hover{--tw-text-opacity:1;color:rgb(51 0 255/var(--tw-text-opacity))}.hover\:ring-alice-werefox-blue:hover{--tw-ring-opacity:1;--tw-ring-color:rgb(27 41 224/var(--tw-ring-opacity))}.group[open] .group-open\:before\:content-\[\'Close\'\]:before{--tw-content:"Close";content:var(--tw-content)}:is(.dark .dark\:bg-alice-werefox-grey){--tw-bg-opacity:1;background-color:rgb(36 36 36/var(--tw-bg-opacity))}:is(.dark .dark\:bg-alice-werefox-grey-dark){--tw-bg-opacity:1;background-color:rgb(18 18 18/var(--tw-bg-opacity))}:is(.dark .dark\:text-alice-werefox-grey-light){--tw-text-opacity:1;color:rgb(204 204 204/var(--tw-text-opacity))}:is(.dark .dark\:ring-alice-werefox-red){--tw-ring-opacity:1;--tw-ring-color:rgb(201 52 57/var(--tw-ring-opacity))}:is(.dark .dark\:hover\:text-alice-werefox-blue-light:hover){--tw-text-opacity:1;color:rgb(145 151 243/var(--tw-text-opacity))}:is(.dark .dark\:hover\:ring-alice-werefox-blue:hover){--tw-ring-opacity:1;--tw-ring-color:rgb(27 41 224/var(--tw-ring-opacity))}@media (min-width:768px){.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.md\:grid-rows-1{grid-template-rows:repeat(1,minmax(0,1fr))}} \ No newline at end of file diff --git a/void-be/src/lib.rs b/void-be/src/lib.rs index f923ab4..d9908a4 100644 --- a/void-be/src/lib.rs +++ b/void-be/src/lib.rs @@ -8,24 +8,34 @@ extern crate rocket; /// A module that handles the backend for the site. pub mod web_app_backend { - use std::path::{PathBuf, Path}; - use rocket::fs::FileServer; use rocket::http::{Cookie, CookieJar}; use rocket::response::Redirect; use rocket::{Build, Rocket}; use rocket_dyn_templates::{context, Template}; - use void_fe::void_app::{self, PoemRequest, VirtualDom, HomeProps}; + use void_fe::void_app::{self, DarkModeProps, PoemRequest, VirtualDom}; #[get("/")] async fn index(cookies: &CookieJar<'_>) -> Template { let dark_mode = match cookies.get("dark-mode") { - Some(_) => true, + Some(c) => { + if c.value() == "true" { + true + } else if c.value() == "false" { + false + } else { + false + } + } None => false, }; - let mut vdom = VirtualDom::new_with_props(void_app::HomePage, HomeProps { - dark_mode: dark_mode, - }); + let mut vdom = VirtualDom::new_with_props( + void_app::HomePage, + DarkModeProps { + slug: Some(String::new()), + dark_mode, + }, + ); let _ = vdom.rebuild(); let output = dioxus_ssr::render(&vdom); Template::render( @@ -42,7 +52,7 @@ pub mod web_app_backend { ) } - #[get("/?set-dark-mode")] + #[get("/toggle-dark-mode")] async fn dark_mode_root(cookies: &CookieJar<'_>) -> Redirect { match cookies.get("dark-mode") { Some(_) => cookies.remove(Cookie::named("dark-mode")), @@ -51,15 +61,27 @@ pub mod web_app_backend { Redirect::to("/") } - #[get("/poems")] + #[get("/")] async fn poem_list(cookies: &CookieJar<'_>) -> Template { let dark_mode = match cookies.get("dark-mode") { - Some(_) => true, + Some(c) => { + if c.value() == "true" { + true + } else if c.value() == "false" { + false + } else { + false + } + } None => false, }; - let mut vdom = VirtualDom::new_with_props(void_app::PoemListPage, HomeProps { - dark_mode: dark_mode, - }); + let mut vdom = VirtualDom::new_with_props( + void_app::PoemListPage, + DarkModeProps { + slug: Some(String::from("/poems")), + dark_mode, + }, + ); let _ = vdom.rebuild(); let output = dioxus_ssr::render(&vdom); Template::render( @@ -76,45 +98,65 @@ pub mod web_app_backend { ) } - #[get("/poems?set-dark-mode")] + #[get("/toggle-dark-mode")] async fn poems_dark_mode(cookies: &CookieJar<'_>) -> Redirect { - dark_mode(cookies, PathBuf::new()).await - } - - - #[get("/poems/?set-dark-mode")] - async fn entry_dark_mode(cookies: &CookieJar<'_>, entry: PathBuf) -> Redirect { - dark_mode(cookies, entry).await - } - - async fn dark_mode(cookies: &CookieJar<'_>, entry: PathBuf) -> Redirect { match cookies.get("dark-mode") { Some(_) => cookies.remove(Cookie::named("dark-mode")), None => cookies.add(Cookie::new("dark-mode", "true")), }; - let path_str = String::from(Path::new("/poems/").join(entry).to_str().expect("valid path")); - let _angy = path_str.as_str().to_owned(); - Redirect::to(path_str.as_str().to_owned().clone()) + Redirect::to("/poems/") } - #[get("/poems/latest")] + #[get("//toggle-dark-mode")] + async fn entry_dark_mode(cookies: &CookieJar<'_>, entry: &str) -> Redirect { + match cookies.get("dark-mode") { + Some(_) => cookies.remove(Cookie::named("dark-mode")), + None => cookies.add(Cookie::new("dark-mode", "true")), + }; + Redirect::to(format!("/poems/{entry}")) + } + + #[get("/")] async fn latest_entry() -> Redirect { let slug = void_app::get_latest_entry(); let uri = String::from("/poems/".to_string() + slug.as_str()); Redirect::to(uri) } - #[get("/poems/oldest")] + #[get("/")] async fn oldest_entry() -> Redirect { let slug = void_app::get_oldest_entry(); let uri = String::from("/poems/".to_string() + slug.as_str()); Redirect::to(uri) } - #[get("/poems/")] + #[get("/?")] + async fn previous_entry(current: &str) -> Redirect { + let previous = + void_app::get_previous_entry(current.to_string()).expect("There is a previous entry."); + let uri = String::from("/poems/".to_string() + previous.as_str()); + Redirect::to(uri) + } + + #[get("/?")] + async fn next_entry(current: &str) -> Redirect { + let next = void_app::get_next_entry(current.to_string()).expect("There is a next entry."); + let uri = String::from("/poems/".to_string() + next.as_str()); + Redirect::to(uri) + } + + #[get("/")] async fn poem(cookies: &CookieJar<'_>, entry: &str) -> Template { let dark_mode = match cookies.get("dark-mode") { - Some(_) => true, + Some(c) => { + if c.value() == "true" { + true + } else if c.value() == "false" { + false + } else { + false + } + } None => false, }; let mut vdom = VirtualDom::new_with_props( @@ -146,7 +188,15 @@ pub mod web_app_backend { .mount("/images", FileServer::from("public/images")) .mount("/styles", FileServer::from("public/styles")) .mount("/fonts", FileServer::from("public/fonts")) - .mount("/", routes![dark_mode_root, index, poems_dark_mode, poem_list, latest_entry, oldest_entry, entry_dark_mode, poem]) + .mount("/poems/oldest", routes![oldest_entry]) + .mount("/poems/previous", routes![previous_entry]) + .mount("/poems/next", routes![next_entry]) + .mount("/poems/latest", routes![latest_entry]) + .mount( + "/poems", + routes![poems_dark_mode, poem_list, entry_dark_mode, poem], + ) + .mount("/", routes![dark_mode_root, index]) .attach(Template::fairing()) } } diff --git a/void-fe/.vscode/settings.json b/void-fe/.vscode/settings.json new file mode 100644 index 0000000..352a626 --- /dev/null +++ b/void-fe/.vscode/settings.json @@ -0,0 +1,5 @@ +{ + "rust-analyzer.linkedProjects": [ + "./Cargo.toml" + ] +} \ No newline at end of file diff --git a/void-fe/src/components/MakePoem.rs b/void-fe/src/components/MakePoem.rs new file mode 100644 index 0000000..e69de29 diff --git a/void-fe/src/lib.rs b/void-fe/src/lib.rs index 595f327..d730031 100644 --- a/void-fe/src/lib.rs +++ b/void-fe/src/lib.rs @@ -9,9 +9,9 @@ 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 std::collections::VecDeque; use markdown::{self, Options}; use rust_embed::RustEmbed; + use std::collections::VecDeque; #[cfg(any(target_family = "wasm"))] use dioxus_helmet::Helmet; @@ -25,8 +25,15 @@ pub mod void_app { } #[derive(PartialEq, Props)] - pub struct HomeProps { + pub struct DarkModeProps { pub dark_mode: bool, + pub slug: Option, + } + + #[derive(PartialEq, Props)] + struct ButtonProps { + title: String, + slug: String, } #[derive(PartialEq, Props)] @@ -38,6 +45,11 @@ pub mod void_app { dark_mode: Option, } + #[derive(Props)] + struct PoemChildren<'a> { + children: Element<'a>, + } + #[derive(RustEmbed)] #[folder = "data/poems"] pub struct Poems; @@ -64,39 +76,173 @@ pub mod void_app { }) } + fn MutantStandardFooter(cx: Scope) -> Element { + cx.render(rsx!{ + div { class: "flex p-4 text-md text-center ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light", + "This site uses Mutant Standard emoji, which are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License" + } + }) + } + + #[cfg(any(target_family = "windows", target_family = "unix"))] + fn BackToHomePage(cx: Scope) -> Element { + cx.render(rsx!{ + a { class: "flex justify-center p-4 text-xl text-center ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", + href: "/", + p { + "Back to the homepage" + } + } + }) + } + + #[cfg(target_family = "wasm")] + fn BackToHomePage(cx: Scope) -> Element { + cx.render(rsx!{ + Link { to: "flex justify-center p-4 text-xl text-center ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", + href: "/", + p { + "Back to the homepage" + } + } + }) + } + + #[cfg(any(target_family = "windows", target_family = "unix"))] + fn NavigationButton(cx: Scope) -> Element { + let title = cx.props.title.clone(); + let title_ref = title.as_str(); + let slug = cx.props.slug.clone(); + let slug_ref = slug.as_str(); + cx.render(rsx!{ + a { class: "flex mx-auto max-w-full justify-center p-4 ml-6 mr-6 text-xl text-center ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", + href: "{slug_ref}", + "{title_ref}" + } + }) + } + + #[cfg(target_family = "wasm")] + fn NavigationButton(cx: Scope) -> Element { + let title = cx.props.title.clone(); + let title_ref = title.as_str(); + let slug = cx.props.slug.clone(); + let slug_ref = slug.as_str(); + cx.render(rsx!{ + Link { class: "flex mx-auto max-w-full justify-center p-4 text-xl text-center ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", + to: slug_ref, + title_ref + } + }) + } + + #[cfg(any(target_family = "windows", target_family = "unix"))] + fn DarkModeButton(cx: Scope) -> Element { + let slug = cx + .props + .slug + .clone() + .expect("Slug found to know where to redirect after dark mode setting."); + let slug_ref = slug.as_str(); + let dark_mode = cx.props.dark_mode; + cx.render(rsx! { + a { href: "{slug_ref}/toggle-dark-mode", + match dark_mode { + true => { + rsx! { + img { src: "/images/white_square_button.png", + alt: "A white square button that can toggle dark mode.", + } + } + }, + false => { + rsx! { + img { src: "/images/black_square_button.png", + alt: "A black square button that can toggle dark mode.", + } + } + }, + } + } + }) + } + + #[cfg(target_family = "wasm")] + fn DarkModeButton(cx: Scope) -> Element { + let slug = cx + .props + .slug + .clone() + .expect("Slug found to know where to redirect after dark mode setting."); + let slug_ref = slug.as_str(); + let dark_mode = cx.props.dark_mode; + cx.render(rsx! { + Link { to: "{slug_ref}/toggle-dark-mode", + match dark_mode { + true => { + rsx! { + img { src: "/images/white_square_button.png", + alt: "A white square button that can toggle dark mode.", + } + } + }, + false => { + rsx! { + img { src: "/images/black_square_button.png", + alt: "A black square button that can toggle dark mode.", + } + } + }, + } + } + }) + } + + #[cfg(any(target_family = "unix", target_family = "windows"))] + fn PoemButton(cx: Scope) -> Element { + let title = cx.props.title.clone(); + let title_ref = title.as_str(); + let slug = cx.props.slug.clone(); + let slug_ref = slug.as_str(); + cx.render(rsx!{ + a { href: "/poems/{slug_ref}", + li { class: "p-4 ml-6 mr-6 text-xl text-center ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", + "{title_ref}" + } + } + }) + } + + #[cfg(target_family = "wasm")] + fn PoemButton(cx: Scope) -> Element { + let title = cx.props.title.clone(); + let title_ref = title.as_str(); + let slug = cx.props.slug.clone(); + let slug_ref = slug.as_str(); + cx.render(rsx!{ + Link { to: "/poems/{slug_ref}", + li { class: "p-4 ml-6 mr-6 text-xl text-center ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", + dangerous_inner_html: "{title_ref}" + } + } + }) + } + /// Renders the app and returns the rendered Element. - pub fn HomePage(cx: Scope) -> Element { + pub fn HomePage(cx: Scope) -> Element { + let slug = cx.props.slug.clone().expect("Slug for dark mode redirect."); + // let slug_ref = slug.as_str(); let dark_mode = cx.props.dark_mode.clone(); 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", - div { class: "p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light", + div { class: "p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light", p { class: "flex flex-row mx-auto max-w-full justify-center text-xl text-center", "A Letter to the Void " - a { class: "max-h-sm", - href: "?set-dark-mode", - match dark_mode { - true => { - rsx! { - img { class: "", - src: "/images/white_square_button.png", - alt: "A white square button that can toggle dark mode.", - } - } - }, - false => { - rsx! { - img { class: "", - src: "/images/black_square_button.png", - alt: "A black square button that can toggle dark mode.", - } - } - }, - } - } + DarkModeButton { slug: slug, dark_mode: dark_mode } } } - div { class: "flex p-4 ml-6 mr-6 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light", + div { class: "flex p-4 ml-6 mr-6 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light", p { class: "text-lg text-center", "Welcome, and I hope you enjoy your stay!" "\"A Letter to the Void\" is a passion project of mine in which I wrote poems about my past life experiences, present, and hopes for the future throughout my transition." @@ -108,39 +254,10 @@ pub mod void_app { "🖤 Alice Icehart Werefox" } } - div { class: "flex mx-auto max-w-full justify-center", - a { class: "p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", - href: "/poems/latest", - div { class: "", - p { class: "text-xl text-center", - "See Latest Entry" - } - } - } - } - div { class: "flex mx-auto max-w-full justify-center", - a { class: "p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", - href: "/poems/oldest", - div { class: "", - p { class: "text-xl text-center", - "See Oldest Entry" - } - } - } - } - div { class: "flex mx-auto max-w-full justify-center", - a { class: "p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", - href: "/poems", - div { class: "", - p { class: "text-xl text-center", - "See All Entries" - } - } - } - } - div { class: "flex p-4 text-md text-center ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light", - "This site uses Mutant Standard emoji, which are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License" - } + NavigationButton { title: "See Earliest Entry".to_string(), slug: "/poems/latest".to_string() } + NavigationButton { title: "See Oldest Entry".to_string(), slug: "/poems/oldest".to_string() } + NavigationButton { title: "See All Entries".to_string(), slug: "/poems".to_string() } + MutantStandardFooter {} } } }) @@ -165,66 +282,66 @@ pub mod void_app { pub fn get_oldest_entry() -> String { let mut poem_list = VecDeque::from(get_poem_list()); - poem_list.pop_front().expect("There is an entry in this list of poems.").1 + poem_list + .pop_front() + .expect("There is an entry in this list of poems.") + .1 } pub fn get_latest_entry() -> String { let mut poem_list = get_poem_list(); - poem_list.pop().expect("There is an entry in this list of poems.").1 + poem_list + .pop() + .expect("There is an entry in this list of poems.") + .1 } + pub fn get_previous_entry(slug: String) -> Option { + let poem_list = get_poem_list(); + poem_list.iter().enumerate().find_map(|(index, p)| { + if p.1 == slug { + if index != 0 { + Some(poem_list[index - 1].1.clone()) + } else { + None + } + } else { + None + } + }) + } + + pub fn get_next_entry(slug: String) -> Option { + let poem_list = get_poem_list(); + poem_list.iter().enumerate().find_map(|(index, p)| { + if p.1 == slug { + if index != poem_list.len() - 1 { + Some(poem_list[index + 1].1.clone()) + } else { + None + } + } else { + None + } + }) + } /// Renders the app and returns the rendered Element. - pub fn PoemListPage(cx: Scope) -> Element { + pub fn PoemListPage(cx: Scope) -> Element { + let slug = cx.props.slug.clone().expect("Slug for dark mode redirect."); let dark_mode = cx.props.dark_mode.clone(); 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", - div { class: "p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light", + div { class: "p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light", p { class: "flex flex-row mx-auto max-w-full justify-center text-lg text-center", "A Letter to the Void " - a { class: "max-h-sm", - href: "?set-dark-mode", - match dark_mode { - true => { - rsx! { - img { class: "", - src: "/images/white_square_button.png", - alt: "A white square button that can toggle dark mode.", - } - } - }, - false => { - rsx! { - img { class: "", - src: "/images/black_square_button.png", - alt: "A black square button that can toggle dark mode.", - } - } - }, - } - } + DarkModeButton { slug: slug, dark_mode: dark_mode } } } - a { class: "flex p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", - href: "/", - div { class: "mx-auto max-w-full justify-center", - p { class: "text-lg text-center", - "Back to the homepage" - } - } - } + BackToHomePage {} PoemList {} - a { class: "flex p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", - href: "/", - div { class: "mx-auto max-w-full justify-center", - p { class: "text-lg text-center", - "Back to the homepage" - } - } - } - div { class: "flex p-4 text-md text-center ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light", - "This site uses Mutant Standard emoji, which are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License" - } + BackToHomePage {} + MutantStandardFooter {} } } }) @@ -233,10 +350,10 @@ pub mod void_app { fn PoemList(cx: Scope) -> Element { let poem_list = get_poem_list(); cx.render(rsx! { - ul { class: "space-y-4", + ul { class: "flex flex-col space-y-4", poem_list.into_iter().map(|p| { rsx!{ - div { PoemButton { title: p.0, slug: p.1 } } + PoemButton { title: p.0, slug: p.1 } } }) } @@ -245,31 +362,41 @@ pub mod void_app { #[cfg(any(target_family = "unix", target_family = "windows"))] pub fn PoemPage(cx: Scope) -> Element { - let slug = String::from(cx.props.slug.clone()); - let dark_mode = cx.props.dark_mode.clone().expect("Dark mode prop not passed."); + let slug = cx.props.slug.clone(); + let mut oldest_uri = "#".to_string(); + if get_oldest_entry() != slug.to_string() { + oldest_uri = format!("/poems/oldest"); + } + let mut previous_uri = "#".to_string(); + if let Some(_) = get_previous_entry(slug.clone()) { + previous_uri = format!("/poems/previous/?current={slug}"); + } + let mut next_uri = "#".to_string(); + if let Some(_) = get_next_entry(slug.clone()) { + next_uri = format!("/poems/next/?current={slug}"); + } + let mut latest_uri = "#".to_string(); + if get_latest_entry() != slug.to_string() { + latest_uri = format!("/poems/latest"); + } + let dark_mode = cx + .props + .dark_mode + .clone() + .expect("Dark mode prop not passed."); 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", - a { class: "flex p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", - href: "/", - div { class: "mx-auto max-w-full justify-center", - p { class: "text-lg text-center", - "Back to the homepage" - } - } - } - GetPoem { slug: slug, dark_mode: dark_mode } - a { class: "flex p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", - href: "/", - div { class: "mx-auto max-w-full justify-center", - p { class: "text-lg text-center", - "Back to the homepage" - } - } - } - div { class: "p-4 text-md text-center ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light", - "This site uses Mutant Standard emoji, which are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License" + BackToHomePage {} + GetPoem { slug: slug, dark_mode: dark_mode } + div { class: "grid md:grid-cols-4 md:grid-rows-1 grid-cols-1 grid-rows-4 gap-y-4", + NavigationButton { title: "Oldest".to_string(), slug: oldest_uri } + NavigationButton { title: "Previous".to_string(), slug: previous_uri } + NavigationButton { title: "Next".to_string(), slug: next_uri } + NavigationButton { title: "Latest".to_string(), slug: latest_uri } } + BackToHomePage {} + MutantStandardFooter {} } } }) @@ -282,61 +409,56 @@ pub mod void_app { .segment("slug") .expect("No slug specified."), ); - let dark_mode = cx.props.dark_mode.clone().expect("Dark mode prop not passed."); + let dark_mode = cx + .props + .dark_mode + .clone() + .expect("Dark mode prop not passed."); 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", - Link { to: "/" - div { class: "p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", - p { class: "text-lg text-center", - "Back to the homepage" - } - } - } + BackToHomePage {} GetPoem { slug: slug, dark_mode: dark_mode } - div { class: "p-4 text-md text-center ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light", - "This site uses Mutant Standard emoji, which are licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License" - } + BackToHomePage {} + MutantStandardFooter {} } } }) } - #[cfg(any(target_family = "unix", target_family = "windows"))] - fn PoemButton(cx: Scope) -> Element { - let title = cx.props.title.clone().expect("No title specified."); - let slug = cx.props.slug.clone().expect("No slug specified."); - let slug_ref = slug.as_str(); - cx.render(rsx!{ - a { href: "/poems/{slug_ref}", - li { class: "p-4 ml-6 mr-6 ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", - div { class: "text-xl text-center", "{title}" } - } - } - }) - } + // fn PoemButton(cx: Scope) -> Element { + // let title = cx.props.title.clone().expect("No title specified."); + // let slug = cx.props.slug.clone().expect("No slug specified."); + // let class = String::from("p-4 ml-6 mr-6 text-xl text-center ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition"); + // cx.render(rsx!{ + // PoemButtonLink { title: title, slug: slug, classes: class } + // }) + // } - #[cfg(target_family = "wasm")] - fn PoemButton(cx: Scope) -> Element { - let title = cx.props.title.clone().expect("No title specified."); - let slug = cx.props.slug.clone().expect("No slug specified."); - let slug_ref = slug.as_str(); - cx.render(rsx!{ - Link { to: "/poems/{slug_ref}", - li { class: "p-4 ml-6 mr-6 ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", - div { class: "mx-auto max-w-fit flex justify-center text-lg text-center", - dangerous_inner_html: "{title}" - } - } - } - }) - } + // fn PoemButton(cx: Scope) -> Element { + // let title = cx.props.title.clone().expect("No title specified."); + // let slug = cx.props.slug.clone().expect("No slug specified."); + // let slug_ref = slug.as_str(); + // cx.render(rsx!{ + // Link { to: "/poems/{slug_ref}", + // li { class: "p-4 ml-6 mr-6 ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", + // div { class: "mx-auto max-w-fit flex justify-center text-lg text-center", + // dangerous_inner_html: "{title}" + // } + // } + // } + // }) + // } fn GetPoem(cx: Scope) -> Element { - let dark_mode = cx.props.dark_mode.clone().expect("Dark mode prop not passed."); + // It would be good to implement some kind of "get_poem_data" or "into" functionality for the struct, so I don't have to write all this here. + let dark_mode = cx + .props + .dark_mode + .clone() + .expect("Dark mode prop not passed."); let slug = String::from(cx.props.slug.clone().expect("No slug specified.")); - let filename = - String::from(String::from(slug.clone()) + ".md"); + let filename = String::from(String::from(slug.clone()) + ".md"); let creation_date = String::from(String::from("
Written on: ") + filename.split("_").next().unwrap()); let poem_content = Poems::get(&filename).expect("Found poem {filename:?}"); @@ -349,82 +471,75 @@ pub mod void_app { markdown::to_html_with_options(poem_title, &Options::gfm()).unwrap(); let poem_content_to_html_string = markdown::to_html_with_options(poem_content.as_str(), &Options::gfm()).unwrap(); - cx.render(rsx!{ - MakePoem{ title: poem_title_to_html_string, content: poem_content_to_html_string, creation_date: creation_date, slug: slug, dark_mode: dark_mode } } - ) + cx.render(rsx! { + MakePoem{ + // data: PoemData{ + // title: None, + // content: Some(poem_content_to_html_string.clone()), + // creation_date: Some(creation_date.clone()), + // slug: Some(slug.clone()), + // dark_mode: Some(dark_mode), + // }, + RenderPoemTitle { title: poem_title_to_html_string, slug: slug, dark_mode: dark_mode } + RenderPoemElement { content: poem_content_to_html_string, creation_date: creation_date } + }}) } - #[cfg(any(target_family = "unix", target_family = "windows"))] + // #[cfg(any(target_family = "unix", target_family = "windows"))] fn RenderPoemTitle(cx: Scope) -> Element { let slug = cx.props.slug.clone().expect("Slug prop was not passed."); - let dark_mode = cx.props.dark_mode.clone().expect("Dark mode prop not passed."); + let dark_mode = cx + .props + .dark_mode + .clone() + .expect("Dark mode prop not passed."); let title = cx.props.title.clone().expect("No title specified."); cx.render(rsx!{ - span { class: "p-4 ml-4 mr-4 flex text-xl text-center ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light", + span { class: "p-4 ml-4 mr-4 flex text-xl text-center ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light", span { class: "flex flex-row align-middle mx-auto max-w-full justify-center", "{title} " - a { class: "", - href: "/poems/{slug}?set-dark-mode", - match dark_mode { - true => { - rsx! { - img { class: "", - src: "/images/white_square_button.png", - alt: "A white square button that can toggle dark mode.", - } - } - }, - false => { - rsx! { - img { class: "", - src: "/images/black_square_button.png", - alt: "A black square button that can toggle dark mode.", - } - } - }, - } - } + DarkModeButton { slug: slug, dark_mode: dark_mode } } } }) } - #[cfg(target_family = "wasm")] - fn RenderPoemTitle(cx: Scope) -> Element { - let slug = cx.props.slug.clone().expect("Slug prop was not passed."); - let dark_mode = cx.props.dark_mode.clone().expect("Dark mode prop not passed."); - let title = cx - .props - .title - .clone() - .expect("This poem has an empty title."); - cx.render(rsx!{ - p { class: "mx-auto max-w-fit flex flex-row justify-center bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light p-4", - dangerous_inner_html: "{title} ", - a { class: "", - href: "/poems/{slug}?set-dark-mode", - match dark_mode { - true => { - rsx! { - img { class: "", - src: "/images/white_square_button.png", - alt: "A white square button that can toggle dark mode.", - } - } - }, - false => { - rsx! { - img { class: "", - src: "/images/black_square_button.png", - alt: "A black square button that can toggle dark mode.", - } - } - }, - } - } - } - }) - } + // #[cfg(target_family = "wasm")] + // fn RenderPoemTitle(cx: Scope) -> Element { + // let slug = cx.props.slug.clone().expect("Slug prop was not passed."); + // let dark_mode = cx.props.dark_mode.clone().expect("Dark mode prop not passed."); + // let title = cx + // .props + // .title + // .clone() + // .expect("This poem has an empty title."); + // cx.render(rsx!{ + // p { class: "mx-auto max-w-fit flex flex-row justify-center bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light p-4", + // dangerous_inner_html: "{title} ", + // a { class: "", + // href: "/poems/{slug}/toggle-dark-mode", + // match dark_mode { + // true => { + // rsx! { + // img { class: "", + // src: "/images/white_square_button.png", + // alt: "A white square button that can toggle dark mode.", + // } + // } + // }, + // false => { + // rsx! { + // img { class: "", + // src: "/images/black_square_button.png", + // alt: "A black square button that can toggle dark mode.", + // } + // } + // }, + // } + // } + // } + // }) + // } #[cfg(any(target_family = "unix", target_family = "windows"))] fn RenderPoemElement(cx: Scope) -> Element { @@ -435,7 +550,13 @@ pub mod void_app { .clone() .expect("No creation date specified."); cx.render(rsx! { - div { class: "font-nerd flex flex-col space-y-4 mx-4 py-4", "{content}{creation_date} " + div { class: "flex p-4 ml-6 mr-6 mx-auto max-w-full justify-center", + details { class: "group p-4 max-w-fit space-y-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-4 ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light", + summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-grey-dark dark:text-alice-werefox-grey-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", + } + div { class: "font-nerd flex flex-col space-y-4 mx-4 py-4", "{content}{creation_date}" + } + } } }) } @@ -456,26 +577,10 @@ pub mod void_app { }) } - fn MakePoem(cx: Scope) -> Element { - let slug = String::from(cx.props.slug.clone().expect("Slug prop was not passed.")); - let dark_mode = cx.props.dark_mode.clone().expect("Dark mode prop not passed."); - let title = cx.props.title.clone().expect("No title specified."); - let creation_date = cx - .props - .creation_date - .clone() - .expect("No creation date specified."); - let content = cx.props.content.clone().expect("No content specified."); - cx.render(rsx!{ + fn MakePoem<'a>(cx: Scope<'a, PoemChildren<'a>>) -> Element { + cx.render(rsx! { div { class: "flex-col space-y-4", - RenderPoemTitle { title: title.clone(), slug: slug, dark_mode: dark_mode } - div { class: "flex p-4 ml-6 mr-6 mx-auto max-w-full justify-center", - details { class: "group p-4 max-w-fit space-y-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-4 ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light", - summary { class: "group-open:before:content-['Close'] before:content-['Open'] flex justify-center p-4 ring-4 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark ring-alice-werefox-red-dark dark:ring-alice-werefox-red text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue dark:hover:ring-alice-werefox-blue hover:animate-yip transition", - } - RenderPoemElement { content: content.clone(), creation_date: creation_date.clone() } - } - } + &cx.props.children } }) } diff --git a/void-fe/src/utils/file_management.rs b/void-fe/src/utils/file_management.rs new file mode 100644 index 0000000..e69de29