diff --git a/public/styles/tailwind.min.css b/public/styles/tailwind.min.css index 768114b..65f7cec 100644 --- a/public/styles/tailwind.min.css +++ b/public/styles/tailwind.min.css @@ -1 +1 @@ -/*! 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 +/*! 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-dark{--tw-bg-opacity:1;background-color:rgb(18 18 18/var(--tw-bg-opacity))}.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))}.text-alice-werefox-grey-light{--tw-text-opacity:1;color:rgb(204 204 204/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{--tw-ring-opacity:1;--tw-ring-color:rgb(201 52 57/var(--tw-ring-opacity))}.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\:text-alice-werefox-blue-light:hover{--tw-text-opacity:1;color:rgb(145 151 243/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)}@media (prefers-color-scheme:dark){.dark\:bg-alice-werefox-grey{--tw-bg-opacity:1;background-color:rgb(36 36 36/var(--tw-bg-opacity))}.dark\:bg-alice-werefox-grey-dark{--tw-bg-opacity:1;background-color:rgb(18 18 18/var(--tw-bg-opacity))}.dark\:text-alice-werefox-grey-light{--tw-text-opacity:1;color:rgb(204 204 204/var(--tw-text-opacity))}.dark\:ring-alice-werefox-red{--tw-ring-opacity:1;--tw-ring-color:rgb(201 52 57/var(--tw-ring-opacity))}.dark\:hover\:text-alice-werefox-blue-light:hover{--tw-text-opacity:1;color:rgb(145 151 243/var(--tw-text-opacity))}.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 ff2bdc1..e7b1bdc 100644 --- a/void-be/src/lib.rs +++ b/void-be/src/lib.rs @@ -13,7 +13,8 @@ pub mod web_app_backend { use rocket::response::Redirect; use rocket::{Build, Rocket}; use rocket_dyn_templates::{context, Template}; - use void_fe::void_app::{self, DarkModeProps, PoemRequest, VirtualDom}; + use void_fe::void_app::{self, VirtualDom}; + use void_fe::utils::prop_structs::{DarkModeProps, PoemRequest}; #[get("/")] async fn index(cookies: &CookieJar<'_>) -> Template { diff --git a/void-fe/src/components.rs b/void-fe/src/components.rs new file mode 100644 index 0000000..926f68a --- /dev/null +++ b/void-fe/src/components.rs @@ -0,0 +1,4 @@ +pub mod void_poem; +pub mod void_footer; +pub mod void_title; +pub mod void_buttons; \ No newline at end of file diff --git a/void-fe/src/components/MakePoem.rs b/void-fe/src/components/MakePoem.rs deleted file mode 100644 index e69de29..0000000 diff --git a/void-fe/src/components/void_buttons.rs b/void-fe/src/components/void_buttons.rs new file mode 100644 index 0000000..3a6671b --- /dev/null +++ b/void-fe/src/components/void_buttons.rs @@ -0,0 +1,49 @@ +use dioxus::prelude::*; +use crate::utils::prop_structs::ButtonProps; + +#[cfg(target_family = "wasm")] +use dioxus_router::Link; + +pub fn BackToHomePage(cx: Scope) -> Element { + #[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")] + 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" + } + } + }); +} + +pub 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(); + #[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")] + 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}", + } + } + }); +} \ No newline at end of file diff --git a/void-fe/src/components/void_footer.rs b/void-fe/src/components/void_footer.rs new file mode 100644 index 0000000..767ae7e --- /dev/null +++ b/void-fe/src/components/void_footer.rs @@ -0,0 +1,15 @@ +use dioxus::prelude::*; + +pub fn Footer(cx: Scope) -> Element { + cx.render(rsx!{ + MutantStandardFooter {} + }) +} + +fn MutantStandardFooter(cx: Scope) -> Element { + cx.render(rsx!{ + 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" + } + }) +} \ No newline at end of file diff --git a/void-fe/src/components/void_poem.rs b/void-fe/src/components/void_poem.rs new file mode 100644 index 0000000..bd49983 --- /dev/null +++ b/void-fe/src/components/void_poem.rs @@ -0,0 +1,70 @@ +use dioxus::prelude::*; +use crate::utils::helpers; +use crate::utils::prop_structs::{PoemChildren, PoemData}; +use crate::components::void_buttons::*; +use crate::components::void_title::*; + +pub fn PoemList(cx: Scope) -> Element { + let poem_list = helpers::get_poem_list(); + cx.render(rsx! { + ul { class: "flex flex-col space-y-4", + poem_list.into_iter().map(|p| { + let slug = format!("/poems/{}", p.1); + rsx!{ + NavigationButton { title: p.0, slug: slug } + } + }) + } + }) +} + +pub fn MakePoem<'a>(cx: Scope<'a, PoemChildren<'a>>) -> Element { + cx.render(rsx! { + div { class: "flex-col space-y-4", + &cx.props.children + } + }) +} + +pub fn GetPoem(cx: Scope) -> Element { + let slug = String::from(cx.props.slug.clone().expect("No slug specified.")); + let (title, content, creation_date) = helpers::get_poem(slug.clone()); + cx.render(rsx! { + Title { title: title, is_html: true } + MakePoem{ + PoemContent { content: content, creation_date: creation_date } + } + }) +} + +pub fn PoemContent(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."); + #[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", + } + div { class: "font-nerd flex flex-col space-y-4 py-4", "{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}", + } + } + } + }); +} \ No newline at end of file diff --git a/void-fe/src/components/void_title.rs b/void-fe/src/components/void_title.rs new file mode 100644 index 0000000..d5816d0 --- /dev/null +++ b/void-fe/src/components/void_title.rs @@ -0,0 +1,38 @@ +use dioxus::prelude::*; +use crate::utils::prop_structs::TitleProps; + +pub fn Title(cx: Scope) -> Element { + let title = cx.props.title.clone(); + let is_html = cx.props.is_html; + cx.render(rsx!{ + 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", + TitleHtml { title: title, is_html: is_html } + } + } + }) +} + +fn TitleHtml(cx: Scope) -> Element { + let title = cx.props.title.clone(); + if cx.props.is_html { + #[cfg(any(target_family = "unix", target_family = "windows"))] + return cx.render(rsx!{ + span { class: "flex flex-row align-middle mx-auto max-w-full justify-center", + "{title} " + } + }); + #[cfg(target_family = "wasm")] + return cx.render(rsx!{ + span { class: "flex flex-row align-middle mx-auto max-w-full justify-center", + div { dangerous_inner_html: "{title}", } + } + }); + } else { + return cx.render(rsx!{ + span { + "{title}" + } + }) + } +} \ No newline at end of file diff --git a/void-fe/src/lib.rs b/void-fe/src/lib.rs index 3cdd1f8..6674684 100644 --- a/void-fe/src/lib.rs +++ b/void-fe/src/lib.rs @@ -4,102 +4,56 @@ #![allow(non_snake_case)] + +mod components; +pub mod utils; + + /// A module that handles the functions needed /// to render the site. pub mod void_app { // import the prelude to get access to the `rsx!` macro and the `Scope` and `Element` types pub use dioxus::prelude::*; - use markdown::{self, Options}; use rust_embed::RustEmbed; - use std::collections::VecDeque; - use dioxus_router::{Route, Router, Redirect}; + + use crate::components::void_buttons::*; + use crate::components::void_footer::*; + use crate::components::void_poem::*; + use crate::components::void_title::*; + use crate::utils::helpers; + use crate::utils::prop_structs::*; #[cfg(any(target_family = "wasm"))] use dioxus_helmet::Helmet; #[cfg(any(target_family = "wasm"))] - use dioxus_router::{Link}; + use dioxus_router::{Link, Route, Router, Redirect}; #[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 { - pub slug: String, - pub dark_mode: Option, - } - - #[derive(PartialEq, Props)] - pub struct DarkModeProps { - pub dark_mode: bool, - pub slug: Option, - } - - #[derive(PartialEq, Props)] - struct ButtonProps { - title: String, - slug: String, - } - - #[derive(PartialEq, Props)] - struct PoemData { - title: Option, - content: Option, - creation_date: Option, - slug: Option, - dark_mode: Option, - } - - #[derive(Props)] - struct PoemChildren<'a> { - children: Element<'a>, - } #[derive(RustEmbed)] #[folder = "data/poems"] pub struct Poems; + #[cfg(target_family = "wasm")] pub fn DioxusApp(cx: Scope) -> Element { // use dioxus_router::Redirect; cx.render(rsx! { Router { - 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: "/", self::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!" } @@ -107,132 +61,6 @@ pub mod void_app { }) } - fn MutantStandardFooter(cx: Scope) -> Element { - cx.render(rsx!{ - 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" - } - }) - } - - fn BackToHomePage(cx: Scope) -> Element { - #[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")] - 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" - } - } - }); - } - - 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(); - #[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")] - 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}", - } - } - }); - } - - 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; - #[cfg(any(target_family = "windows", target_family = "unix"))] - return cx.render(rsx! { - a { href: "/?dark_mode&callback={slug_ref}", - 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")] - return 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.", - } - } - }, - } - } - }); - } - - 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(); - #[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")] - 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}", - } - } - }); - } /// Renders the app and returns the rendered Element. pub fn HomePage(cx: Scope) -> Element { @@ -240,19 +68,11 @@ pub mod void_app { let slug = cx.props.slug.clone().expect("Slug for dark mode redirect."); #[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", - "{title}" - DarkModeButton { slug: slug, dark_mode: dark_mode } - } - } + Title { title: title, is_html: false } div { class: "flex p-4 ml-2 mr-2 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!" @@ -267,112 +87,30 @@ pub mod void_app { "🖤 Alice Icehart Werefox" } } - NavigationButton { title: "See Latest Entry".to_string(), slug: latest_uri } - NavigationButton { title: "See Oldest Entry".to_string(), slug: oldest_uri } + NavigationButton { title: "See Latest Entry".to_string(), slug: helpers::get_latest_entry(slug.clone()) } + NavigationButton { title: "See Oldest Entry".to_string(), slug: helpers::get_oldest_entry(slug.clone()) } NavigationButton { title: "See All Entries".to_string(), slug: "/poems".to_string() } - MutantStandardFooter {} + Footer {} } } }) } - fn get_poem_list() -> Vec<(String, String)> { - let mut poem_list = Vec::new(); - for p in Poems::iter() { - let filename = p.to_string(); - let poem_content = Poems::get(&filename).expect("Found poem {filename:?}"); - let mut poem_to_str = std::str::from_utf8(poem_content.data.as_ref()) - .expect("Title is valid UT8.") - .lines(); - let title_markdown = poem_to_str.next().expect("No title specified."); - let title = markdown::to_html_with_options(title_markdown, &Options::gfm()).unwrap(); - let slug = String::from(filename.trim_end_matches(".md")); - poem_list.push((title.clone(), slug.clone())); - } - log::trace!("{poem_list:?}"); - poem_list - } - - 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 - } - - 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 - } - - 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 { - 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-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 " - DarkModeButton { slug: slug, dark_mode: dark_mode } - } - } + Title { title: "A Letter to the Void".to_string(), is_html: false } BackToHomePage {} PoemList {} BackToHomePage {} - MutantStandardFooter {} + Footer {} } } }) } - fn PoemList(cx: Scope) -> Element { - let poem_list = get_poem_list(); - cx.render(rsx! { - ul { class: "flex flex-col space-y-4", - poem_list.into_iter().map(|p| { - rsx!{ - PoemButton { title: p.0, slug: p.1 } - } - }) - } - }) - } - pub fn PoemPage(cx: Scope) -> Element { #[cfg(any(target_family = "unix", target_family = "windows"))] let slug = cx.props.slug.clone(); @@ -382,22 +120,6 @@ pub mod void_app { .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 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 .dark_mode @@ -407,115 +129,17 @@ pub mod void_app { 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 } + GetPoem { slug: slug.clone(), 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 } + NavigationButton { title: "Oldest".to_string(), slug: helpers::get_oldest_entry(slug.clone()) } + NavigationButton { title: "Previous".to_string(), slug: helpers::get_previous_entry(slug.clone()) } + NavigationButton { title: "Next".to_string(), slug: helpers::get_next_entry(slug.clone()) } + NavigationButton { title: "Latest".to_string(), slug: helpers::get_latest_entry(slug.clone()) } } BackToHomePage {} - MutantStandardFooter {} + Footer {} } } }) } - - 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 - .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 creation_date = - String::from(String::from("
Written on: ") + filename.split("_").next().unwrap()); - let poem_content = Poems::get(&filename).expect("Found poem {filename:?}"); - let mut poem_to_str = std::str::from_utf8(poem_content.data.as_ref()) - .expect("Title is valid UT8.") - .lines(); - let poem_title = poem_to_str.next().unwrap(); - let poem_content = poem_to_str.into_iter().collect::>().join("\n"); - let poem_title_to_html_string = - 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{ - 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"))] - fn RenderPoemTitle(cx: Scope) -> Element { - let slug = cx.props.slug.clone().expect("Slug prop was not passed."); - let callback = format!("/poems/{slug}"); - let dark_mode = cx - .props - .dark_mode - .clone() - .expect("Dark mode prop not passed."); - let title = cx.props.title.clone().expect("No title specified."); - #[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 } - } - } - }); - } - - 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."); - #[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", - } - div { class: "font-nerd flex flex-col space-y-4 py-4", "{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 { - cx.render(rsx! { - div { class: "flex-col space-y-4", - &cx.props.children - } - }) - } } diff --git a/void-fe/src/utils.rs b/void-fe/src/utils.rs new file mode 100644 index 0000000..8979efe --- /dev/null +++ b/void-fe/src/utils.rs @@ -0,0 +1,3 @@ +pub mod helpers; +pub mod prop_structs; +pub mod user_prefs; \ No newline at end of file diff --git a/void-fe/src/utils/file_management.rs b/void-fe/src/utils/file_management.rs deleted file mode 100644 index e69de29..0000000 diff --git a/void-fe/src/utils/helpers.rs b/void-fe/src/utils/helpers.rs new file mode 100644 index 0000000..4b95a70 --- /dev/null +++ b/void-fe/src/utils/helpers.rs @@ -0,0 +1,97 @@ +use std::collections::VecDeque; +use crate::void_app::Poems; +use markdown::Options; + +pub fn get_poem(slug: String) -> (String, String, String) { + 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:?}"); + let mut poem_to_str = std::str::from_utf8(poem_content.data.as_ref()) + .expect("Title is valid UT8.") + .lines(); + let poem_title = poem_to_str.next().unwrap(); + let poem_content = poem_to_str.into_iter().collect::>().join("\n"); + let poem_title_to_html_string = + 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(); + (poem_title_to_html_string, poem_content_to_html_string, creation_date) +} + +pub fn get_poem_list() -> Vec<(String, String)> { + let mut poem_list = Vec::new(); + for p in Poems::iter() { + let filename = p.to_string(); + let poem_content = Poems::get(&filename).expect("Found poem {filename:?}"); + let mut poem_to_str = std::str::from_utf8(poem_content.data.as_ref()) + .expect("Title is valid UT8.") + .lines(); + let title_markdown = poem_to_str.next().expect("No title specified."); + let title = markdown::to_html_with_options(title_markdown, &Options::gfm()).unwrap(); + let slug = String::from(filename.trim_end_matches(".md")); + poem_list.push((title.clone(), slug.clone())); + } + log::trace!("{poem_list:?}"); + poem_list +} + +pub fn get_oldest_entry(current: String) -> String { + let mut poem_list = VecDeque::from(get_poem_list()); + let oldest = poem_list + .pop_front() + .expect("There is an entry in this list of poems.") + .1; + if current == oldest { + return format!("/poems/{current}#"); + } + format!("/poems/{oldest}") +} + +pub fn get_latest_entry(current: String) -> String { + let mut poem_list = get_poem_list(); + let latest = poem_list + .pop() + .expect("There is an entry in this list of poems.") + .1; + if current == latest { + return format!("/poems/{current}#"); + } + format!("/poems/{latest}") +} + +pub fn get_previous_entry(current: String) -> String { + let poem_list = get_poem_list(); + match poem_list.iter().enumerate().find_map(|(index, p)| { + if p.1 == current { + if index != 0 { + Some(poem_list[index - 1].1.clone()) + } else { + None + } + } else { + None + } + }) { + Some(entry) => format!("/poems/{entry}"), + None => format!("/poems/{current}"), + } +} + +pub fn get_next_entry(current: String) -> String { + let poem_list = get_poem_list(); + match poem_list.iter().enumerate().find_map(|(index, p)| { + if p.1 == current { + if index != poem_list.len() - 1 { + Some(poem_list[index + 1].1.clone()) + } else { + None + } + } else { + None + } + }) { + Some(entry) => format!("/poems/{entry}"), + None => format!("/poems/{current}"), + } +} \ No newline at end of file diff --git a/void-fe/src/utils/prop_structs.rs b/void-fe/src/utils/prop_structs.rs new file mode 100644 index 0000000..8f1271c --- /dev/null +++ b/void-fe/src/utils/prop_structs.rs @@ -0,0 +1,39 @@ +use crate::void_app::{Element, Props}; + +#[derive(PartialEq, Props)] +pub struct PoemRequest { + pub slug: String, + pub dark_mode: Option, +} + +#[derive(PartialEq, Props)] +pub struct DarkModeProps { + pub dark_mode: bool, + pub slug: Option, +} + +#[derive(PartialEq, Props)] +pub struct TitleProps { + pub title: String, + pub is_html: bool, +} + +#[derive(PartialEq, Props)] +pub struct ButtonProps { + pub title: String, + pub slug: String, +} + +#[derive(PartialEq, Props)] +pub struct PoemData { + pub title: Option, + pub content: Option, + pub creation_date: Option, + pub slug: Option, + pub dark_mode: Option, +} + +#[derive(Props)] +pub struct PoemChildren<'a> { + pub children: Element<'a>, +} diff --git a/void-fe/src/utils/user_prefs.rs b/void-fe/src/utils/user_prefs.rs new file mode 100644 index 0000000..fc05a5b --- /dev/null +++ b/void-fe/src/utils/user_prefs.rs @@ -0,0 +1,91 @@ +pub struct UserPrefs { + theme: ThemePref, + font: FontPref, +} + +pub enum ThemePref { + Light, + Dark, + Auto, +} + +pub enum FontPref { + NerdFont, + OpenDyslexic, +} + +impl UserPrefs { + pub fn new() -> UserPrefs { + UserPrefs { + theme: ThemePref::Auto, + font: FontPref::OpenDyslexic, + } + } + + pub fn get_theme(&self, is_button: bool) -> String { + match &self.theme { + ThemePref::Light => Self::light_theme_classes(is_button), + ThemePref::Dark => Self::dark_theme_classes(is_button), + ThemePref::Auto => Self::auto_theme_classes(is_button), + } + } + + pub fn set_theme(mut self, theme: ThemePref) { + self.theme = theme; + } + + pub fn get_font(&self) -> String { + match &self.font { + FontPref::OpenDyslexic => "...".to_string(), + FontPref::NerdFont => "...".to_string(), + } + } + + pub fn set_font(mut self, font: FontPref) { + self.font = font; + } + + pub fn get_prefs(&self, is_button: bool) -> (String, String) { + let theme = self.get_theme(is_button).clone(); + let font = self.get_font().clone(); + (theme, font) + } + + pub fn set_prefs(mut self, prefs: UserPrefs) { + self.theme = prefs.theme; + self.font = prefs.font; + } + + fn light_theme_classes(is_button: bool) -> String { + let base_classes = "bg-alice-werefox-grey-lightest ring-alice-werefox-red-dark text-alice-werefox-grey-dark" + .to_string(); + let button_classes = "hover:text-alice-werefox-blue-dark hover:ring-alice-werefox-blue hover:animate-yip transition".to_string(); + if is_button { + return format!("{base_classes} {button_classes}"); + } + base_classes + } + fn dark_theme_classes(is_button: bool) -> String { + let base_classes = + "bg-alice-werefox-grey-dark ring-alice-werefox-red text-alice-werefox-grey-light" + .to_string(); + let button_classes = "hover:text-alice-werefox-blue-light hover:ring-alice-werefox-blue hover:animate-yip transition".to_string(); + if is_button { + return format!("{base_classes} {button_classes}"); + } + base_classes + } + fn auto_theme_classes(is_button: bool) -> String { + format!( + "{}{}", + Self::light_theme_classes(is_button) + .split(" ") + .map(|c| if c == "transition" { "" } else { c }) + .collect::(), + Self::dark_theme_classes(is_button) + .split(" ") + .map(|c| format!(" dark:{c}")) + .collect::() + ) + } +} diff --git a/void-fe/tailwind.config.js b/void-fe/tailwind.config.js index ae8a8e1..0f3dae5 100644 --- a/void-fe/tailwind.config.js +++ b/void-fe/tailwind.config.js @@ -105,6 +105,5 @@ module.exports = { }, }, }, - darkMode: 'class', plugins: [], };