From 961bb61553a6b7663527cc0e325ef3e007c9bd87 Mon Sep 17 00:00:00 2001 From: Ada Werefox Date: Wed, 12 Apr 2023 17:25:14 -0500 Subject: [PATCH] A lot of work just getting Dioxus to route things properly, moved compile conditions to make less repetition. --- .gitignore | 5 + public/styles/tailwind.min.css | 2 +- void-be/src/lib.rs | 33 ---- void-fe/.vscode/settings.json | 22 ++- void-fe/Cargo.toml | 5 + void-fe/src/lib.rs | 321 +++++++++++++-------------------- 6 files changed, 155 insertions(+), 233 deletions(-) diff --git a/.gitignore b/.gitignore index 8b119b5..520684a 100644 --- a/.gitignore +++ b/.gitignore @@ -11,3 +11,8 @@ Cargo.lock # Added by Dioxus **/dist/** + +# Don't sync the NodeJS files. +**/node_modules/** +**/package-lock.json +**/package.json \ No newline at end of file diff --git a/public/styles/tailwind.min.css b/public/styles/tailwind.min.css index f52dc2a..768114b 100644 --- a/public/styles/tailwind.min.css +++ b/public/styles/tailwind.min.css @@ -1 +1 @@ -/*! tailwindcss v3.2.7 | 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}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-2{margin-left:.5rem}.mr-2{margin-right:.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-2{padding:.5rem}.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)}.dark .dark\:bg-alice-werefox-grey{--tw-bg-opacity:1;background-color:rgb(36 36 36/var(--tw-bg-opacity))}.dark .dark\:bg-alice-werefox-grey-dark{--tw-bg-opacity:1;background-color:rgb(18 18 18/var(--tw-bg-opacity))}.dark .dark\:text-alice-werefox-grey-light{--tw-text-opacity:1;color:rgb(204 204 204/var(--tw-text-opacity))}.dark .dark\:ring-alice-werefox-red{--tw-ring-opacity:1;--tw-ring-color:rgb(201 52 57/var(--tw-ring-opacity))}.dark .dark\:hover\:text-alice-werefox-blue-light:hover{--tw-text-opacity:1;color:rgb(145 151 243/var(--tw-text-opacity))}.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 +/*! tailwindcss v3.3.1 | 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-auto{margin-left:auto;margin-right:auto}.ml-2{margin-left:.5rem}.mr-2{margin-right:.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-2{padding:.5rem}.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 196501a..ff2bdc1 100644 --- a/void-be/src/lib.rs +++ b/void-be/src/lib.rs @@ -99,35 +99,6 @@ pub mod web_app_backend { ) } - #[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("/")] - 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("/?")] - 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") { @@ -171,10 +142,6 @@ pub mod web_app_backend { .mount("/images", FileServer::from("public/images")) .mount("/styles", FileServer::from("public/styles")) .mount("/fonts", FileServer::from("public/fonts")) - .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![poem_list, poem]) .mount("/", routes![dark_mode, index]) .attach(Template::fairing()) diff --git a/void-fe/.vscode/settings.json b/void-fe/.vscode/settings.json index 352a626..b9d9ce2 100644 --- a/void-fe/.vscode/settings.json +++ b/void-fe/.vscode/settings.json @@ -1,5 +1,19 @@ { - "rust-analyzer.linkedProjects": [ - "./Cargo.toml" - ] -} \ No newline at end of file + "rust-analyzer.cargo.extraArgs": ["--profile", "rust-analyzer"], + // "rust-analyzer.cargo.buildScripts.invocationLocation": "root", + "rust-analyzer.cargo.target": "wasm32-unknown-unknown", + // "rust-analyzer.cargo.buildScripts.overrideCommand": ["dioxus", "build"], + "rust-analyzer.check.overrideCommand": ["cargo", "check", "--quiet", "--message-format=json"], + "rust-analyzer.check.invocationLocation": "root", + "rust-analyzer.check.targets": ["wasm32-unknown-unknown", "x86_64-unknown-linux-gnu"], + // "rust-analyzer.runnables.command": "dioxus serve", + "rust-analyzer.cargo.buildScripts.enable": false, + "rust-analyzer.linkedProjects": [ + "./Cargo.toml" + ], + "rust-analyzer.showUnlinkedFileNotification": false, + "rust-analyzer.hover.actions.run.enable": true, + "rust-analyzer.hover.actions.debug.enable": true, + "rust-analyzer.hover.documentation.enable": true, + "rust-analyzer.hover.actions.enable": true +} diff --git a/void-fe/Cargo.toml b/void-fe/Cargo.toml index 2332b44..24ab5b6 100644 --- a/void-fe/Cargo.toml +++ b/void-fe/Cargo.toml @@ -16,6 +16,11 @@ wasm-logger = "0.2.0" console_error_panic_hook = "0.1.7" log = "0.4.17" dioxus-helmet = "0.2.4" +dioxus-use-storage = "0.3.0" + +[dependencies.serde] +version = "1.0.160" +features = ["derive"] [dependencies.dioxus-router] version = "0.3.0" diff --git a/void-fe/src/lib.rs b/void-fe/src/lib.rs index f072001..3cdd1f8 100644 --- a/void-fe/src/lib.rs +++ b/void-fe/src/lib.rs @@ -12,11 +12,22 @@ pub mod void_app { use markdown::{self, Options}; use rust_embed::RustEmbed; use std::collections::VecDeque; + use dioxus_router::{Route, Router, Redirect}; #[cfg(any(target_family = "wasm"))] use dioxus_helmet::Helmet; #[cfg(any(target_family = "wasm"))] - use dioxus_router::{Link, Redirect, Route, Router}; + use dioxus_router::{Link}; + #[cfg(any(target_family = "wasm"))] + use dioxus_use_storage::use_local_storage; + #[cfg(any(target_family = "wasm"))] + use serde::Deserialize; + + #[cfg(target_family = "wasm")] + #[derive(Deserialize)] + struct CurrentPoem { + current: String, + } #[derive(PartialEq, Props)] pub struct PoemRequest { @@ -54,21 +65,41 @@ pub mod void_app { #[folder = "data/poems"] pub struct Poems; - #[cfg(target_family = "wasm")] pub fn DioxusApp(cx: Scope) -> Element { - use dioxus_router::Redirect; + // use dioxus_router::Redirect; - let poem_list = get_poem_list(); cx.render(rsx! { Router { - Route { to: "/", HomePage {} } - Route { to: "/poems/:slug/", PoemPage {} } + Route { to: "/", HomePage { dark_mode: true, } } + Route { to: "/poems/", PoemListPage { slug: "".to_string(), dark_mode: true, } } + Route { to: "/poems/:slug", PoemPage { slug: "".to_string(), dark_mode: true, } } Route { to: "", PageNotFound {} } } }) } #[cfg(target_family = "wasm")] + fn RoutePreviousPage(cx: Scope) -> Element { + let current = String::from(dioxus_router::use_route(cx) + .segment("slug") + .expect("Slug to know which poem we are at.")); + log::info!("{}", current.clone()); + let previous = current.clone(); + cx.render(rsx!{ + Redirect { to: "{previous}" } + }) + } + #[cfg(target_family = "wasm")] + fn RouteNextPage(cx: Scope) -> Element { + let current = String::from(dioxus_router::use_route(cx) + .segment("slug") + .expect("Slug to know which poem we are at.")); + let next = current.clone(); + cx.render(rsx!{ + Redirect { to: "{next}" } + }) + } + fn PageNotFound(cx: Scope) -> Element { cx.render(rsx! { p { "That page doesn't exist, sorry!" } @@ -78,65 +109,56 @@ 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", + div { class: "flex p-4 mx-auto max-w-full justify-center 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!{ + #[cfg(any(target_family = "windows", target_family = "unix"))] + return 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: "/", + }); + #[cfg(target_family = "wasm")] + return cx.render(rsx!{ + Link { 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", + to: "/", 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!{ + #[cfg(any(target_family = "windows", target_family = "unix"))] + return cx.render(rsx!{ a { class: "flex mx-auto max-w-full justify-center p-4 ml-2 mr-2 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: "{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-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", - to: slug_ref, - title_ref + }); + #[cfg(target_family = "wasm")] + return cx.render(rsx!{ + Link { class: "flex mx-auto max-w-full justify-center p-4 ml-2 mr-2 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", + to: "{slug_ref}", + div { + dangerous_inner_html: "{title_ref}", + } } - }) + }); } - #[cfg(any(target_family = "windows", target_family = "unix"))] fn DarkModeButton(cx: Scope) -> Element { let slug = cx .props @@ -145,7 +167,8 @@ pub mod void_app { .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! { + #[cfg(any(target_family = "windows", target_family = "unix"))] + return cx.render(rsx! { a { href: "/?dark_mode&callback={slug_ref}", match dark_mode { true => { @@ -164,19 +187,9 @@ pub mod void_app { }, } } - }) - } - - #[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! { + }); + #[cfg(target_family = "wasm")] + return cx.render(rsx! { Link { to: "{slug_ref}/toggle-dark-mode", match dark_mode { true => { @@ -195,50 +208,48 @@ pub mod void_app { }, } } - }) + }); } - #[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!{ + #[cfg(any(target_family = "unix", target_family = "windows"))] + return cx.render(rsx!{ a { href: "/poems/{slug_ref}", li { class: "p-4 ml-2 mr-2 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!{ + }); + #[cfg(target_family = "wasm")] + return cx.render(rsx!{ Link { to: "/poems/{slug_ref}", li { class: "p-4 ml-2 mr-2 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}" + dangerous_inner_html: "{title_ref}", } } - }) + }); } /// Renders the app and returns the rendered Element. pub fn HomePage(cx: Scope) -> Element { + #[cfg(any(target_family = "unix", target_family = "windows"))] let slug = cx.props.slug.clone().expect("Slug for dark mode redirect."); - // let slug_ref = slug.as_str(); + #[cfg(target_family = "wasm")] + let slug = "".to_string(); + let oldest_uri = format!("/poems/{}", get_oldest_entry()); + let latest_uri = format!("/poems/{}", get_latest_entry()); + let title = "A Letter to the Void".to_string(); 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-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 " + "{title}" DarkModeButton { slug: slug, dark_mode: dark_mode } } } @@ -256,8 +267,8 @@ pub mod void_app { "🖤 Alice Icehart Werefox" } } - NavigationButton { title: "See Latest Entry".to_string(), slug: "/poems/latest".to_string() } - NavigationButton { title: "See Oldest Entry".to_string(), slug: "/poems/oldest".to_string() } + NavigationButton { title: "See Latest Entry".to_string(), slug: latest_uri } + NavigationButton { title: "See Oldest Entry".to_string(), slug: oldest_uri } NavigationButton { title: "See All Entries".to_string(), slug: "/poems".to_string() } MutantStandardFooter {} } @@ -362,24 +373,30 @@ pub mod void_app { }) } - #[cfg(any(target_family = "unix", target_family = "windows"))] pub fn PoemPage(cx: Scope) -> Element { + #[cfg(any(target_family = "unix", target_family = "windows"))] let slug = cx.props.slug.clone(); - let mut oldest_uri = "#".to_string(); - if get_oldest_entry() != slug.to_string() { - oldest_uri = format!("/poems/oldest"); + #[cfg(target_family = "wasm")] + let slug = String::from( + dioxus_router::use_route(cx) + .segment("slug") + .expect("No slug specified."), + ); + let mut oldest_uri = get_oldest_entry(); + if oldest_uri == slug.to_string() { + oldest_uri = format!("/poems/{slug}#"); } - 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 previous_uri = match get_previous_entry(slug.clone()) { + Some(p) => format!("/poems/{p}"), + None => format!("/poems/{slug}#"), + }; + let next_uri = match get_next_entry(slug.clone()) { + Some(p) => format!("/poems/{p}"), + None => format!("/poems/{slug}#"), + }; + let mut latest_uri = get_latest_entry(); + if latest_uri == slug.to_string() { + latest_uri = format!("{slug}#"); } let dark_mode = cx .props @@ -404,54 +421,6 @@ pub mod void_app { }) } - #[cfg(target_family = "wasm")] - fn PoemPage(cx: Scope) -> Element { - let slug = String::from( - dioxus_router::use_route(cx) - .segment("slug") - .expect("No slug specified."), - ); - 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", - BackToHomePage {} - GetPoem { slug: slug, dark_mode: dark_mode } - BackToHomePage {} - MutantStandardFooter {} - } - } - }) - } - - // 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-2 mr-2 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 } - // }) - // } - - // 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-2 mr-2 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 { // 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 @@ -475,13 +444,6 @@ pub mod void_app { markdown::to_html_with_options(poem_content.as_str(), &Options::gfm()).unwrap(); 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 } }}) @@ -497,54 +459,26 @@ pub mod void_app { .clone() .expect("Dark mode prop not passed."); let title = cx.props.title.clone().expect("No title specified."); - cx.render(rsx!{ + #[cfg(any(target_family = "unix", target_family = "windows"))] + return cx.render(rsx!{ span { class: "p-4 ml-2 mr-2 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} " DarkModeButton { slug: callback, dark_mode: dark_mode } } } - }) + }); + #[cfg(target_family = "wasm")] + return cx.render(rsx!{ + span { class: "p-4 ml-2 mr-2 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", + div { dangerous_inner_html: "{title}", } + DarkModeButton { slug: callback, 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-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 { let content = cx.props.content.clone().expect("No content specified."); let creation_date = cx @@ -552,7 +486,8 @@ pub mod void_app { .creation_date .clone() .expect("No creation date specified."); - cx.render(rsx! { + #[cfg(any(target_family = "unix", target_family = "windows"))] + return cx.render(rsx! { div { class: "flex p-2 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-2 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", @@ -561,23 +496,19 @@ pub mod void_app { } } } - }) - } - - #[cfg(target_family = "wasm")] - fn RenderPoemElement(cx: Scope) -> Element { - let content = cx.props.content.clone().expect("No content specified."); - let creation_date = cx - .props - .creation_date - .clone() - .expect("No creation date specified."); - cx.render(rsx! { - div { - class: "font-nerd flex flex-col space-y-4 mx-4 py-4", - dangerous_inner_html: "{content}{creation_date}" + }); + #[cfg(target_family = "wasm")] + return cx.render(rsx! { + div { class: "flex p-2 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-2 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: "font-nerd flex flex-col space-y-4 py-4", + dangerous_inner_html: "{content}{creation_date}", + } + } } - }) + }); } fn MakePoem<'a>(cx: Scope<'a, PoemChildren<'a>>) -> Element {