refactor rust side of the code

Trunk.toml

@@ -1,3 +1,6 @@
 [build]
 target = "static/www/index.html"
 minify = "on_release"
+
+[watch]
+watch = ["src/", "static/www/"]

src/buttons.rs

@@ -0,0 +1,59 @@
+use yew::prelude::*;
+
+fn firtnite() -> Callback<MouseEvent> {
+    Callback::from(|_| {
+        web_sys::window()
+            .unwrap()
+            .alert_with_message("firt night")
+            .unwrap();
+    })
+}
+
+pub fn buttons() -> Html {
+    html! {
+    <div class="buttons">
+        <ul class="buttons">
+            <li><a href="https://futile.eu"><img
+                src="static/buttons/futile.png" width="88px" height="31px"
+                alt="button that says 'futile' in white, grotesque font, on a black background, with a white outline | by futile"
+            /></a></li>
+            <li><a href="https://xenia.blahaj.land/"><img
+                src="static/buttons/rose_88x31.png" width="88px" height="31px"
+                alt="button that says 'rose' with a rose growing out of the 'o', with milk-chan to the right of the text | by rose"
+            /></a></li>
+            <li><iframe
+                src="https://incr.easrng.net/badge?key=futile" width="88" height="31" frameborder="0" title="increment badge"
+                style="background: url(https://incr.easrng.net/bg.gif)"
+            /></li>
+            <li><a href="https://fedoraproject.org/spins/kde"><img
+                src="static/buttons/fedora.png" width="88px" height="31px"
+                alt="button that says 'powered by fedora' in white and blue, with the fedora logo to the left | by unknown; retouched by futile"
+            /></a></li>
+            <li><a href="https://mozilla.org/firefox"><img
+                src="static/buttons/firefox4.gif" width="88px" height="31px"
+                alt="button that flashes between the texts 'tested on' and 'firefox' in firefox's orange, yellow, and purple scheme, with the firefox logo to the left | by unknown"
+            /></a></li>
+            <li><a href="https://vscodium.com"><img
+                src="static/buttons/vscodium.com.png" width="88px" height="31px"
+                alt="button that says 'made with vscodium' in light blue, with the vscodium logo to the right | by unknown"
+            /></a></li>
+            <li><img
+                src="static/buttons/FirtniteButton.png" onclick={ firtnite() } width="88px" height="31px"
+                alt="button that says 'firtnite' (a misspelling of 'fortnite'), otherwise looks very similar to an old fortnite title screen | by unknown"
+            /></li>
+            <li><a href="https://ublockorigin.com"><img
+                src="static/buttons/ublock.png" width="88px" height="31px"
+                alt="button (grey) that says 'ublock origin now!', with the ublock origin red logo to the left | by unknown"
+            /></a></li>
+            <li><a href="https://rust-lang.org"><img
+                src="static/buttons/rustNOW.png" width="88px" height="31px"
+                alt="button (grey) that says 'rust now!', with the rust gear logo to the left and a yellow banner that says '1.82.0' on the to the bottom right | by futile"
+            /></a></li>
+            <li><a href="https://1337x.to"><img
+                src="static/buttons/piracy.png" width="88px" height="31px"
+                alt="button (grey) that says 'piracy now!', with a jolly roger flag to the left and a black banner that says 'free' on the to the bottom right | by unknown; retouched by futile"
+            /></a></li>
+        </ul>
+    </div>
+    }
+}

src/content.rs

@@ -0,0 +1,24 @@
+use yew::prelude::*;
+
+const HIRE_MESSAGE: &str = "hey!\ncould use a second pair of hands with something? programming, sys administration, or otherwise technical?\n\ni would love to work with/for you! reach out to me via email [me@futile.eu] (even just to exchange info for another platform)! paying me is optional, just be upfront with what you wish to do.";
+
+fn hire() -> Callback<MouseEvent> {
+    Callback::from(|_| {
+        web_sys::window()
+            .unwrap()
+            .alert_with_message(HIRE_MESSAGE)
+            .unwrap();
+    })
+}
+
+pub fn content() -> Html {
+    html! {
+    <p class="content">
+        { "hello, my name is futile. i am a weird concept from the internet (or a person from europe, depending on who you ask)." }<br /><br />
+        { "i like programming (mostly rust), computers, linux, malicious software like game hacks and malware, and any vehicle whether it drives or flies." }<br /><br />
+        { "everything i know about the aforementioned things is self-taught. i also speak english and russian fluently." }<br /><br />
+        { "if you want to contact me, email " }<a class="click" href="mailto:me@futile.eu"> { "me@futile.eu" } </a><br /><br />
+        <a class="button shiny" onclick={ hire() }> { "hire me!" } </a>
+    </p>
+    }
+}

src/main.rs

@@ -1,7 +1,9 @@
+mod buttons;
+mod content;
+
 use gloo::timers::callback::Interval;
 use yew::prelude::*;
 
-const HIRE_MESSAGE: &str = "hey!\ncould use a second pair of hands with something? programming, sys administration, or otherwise technical?\n\ni would love to work with/for you! reach out to me via email [me@futile.eu] (even just to exchange info for another platform)! paying me is optional, just be upfront with what you wish to do.";
 const QUOTES: [&str; 6] = [
     "who are you",
     "lorem ipsum dolor sit amet",
@@ -11,18 +13,8 @@ const QUOTES: [&str; 6] = [
     "it's nice, isn't it?",
 ];
 
-fn hire() -> Callback<MouseEvent> {
-    Callback::from(|_| {
-        web_sys::window()
-            .unwrap()
-            .alert_with_message(HIRE_MESSAGE)
-            .unwrap();
-    })
-}
-
 #[function_component(Page)]
 fn page() -> Html {
-    let hire = hire();
     let quote = use_state(|| fastrand::choice(QUOTES).unwrap());
     let bullet = use_state(|| '◇');
     {
@@ -41,29 +33,10 @@ fn page() -> Html {
         </div>
         <hr class="separator" />
         <div class="box">
-            <p class="content">
+            { content::content() }
-                { "hello, my name is futile. i am a weird concept from the internet (or a person from europe, depending on who you ask)." }<br /><br />
-                { "i like programming (mostly rust), computers, linux, malicious software like game hacks and malware, and any vehicle whether it drives or flies." }<br /><br />
-                { "everything i know about the aforementioned things is self-taught. i also speak english and russian fluently." }<br /><br />
-                { "if you want to contact me, email " }<a class="click" href="mailto:me@futile.eu"> { "me@futile.eu" } </a><br /><br />
-                <a class="button shiny" onclick={hire}> { "hire me!" } </a>
-            </p>
-        </div>
-        <div class="button_container">
-            <div class="buttons">
-                <ul class="buttons">
-                    <li><a href="https://futile.eu"><img src="static/buttons/futile.png" width="88px" height="31px" alt="button that says 'futile' in white, grotesque font, on a black background, with a white outline | by futile" /></a></li>
-                    <li><a href="https://xenia.blahaj.land/"><img src="static/buttons/rose_88x31.png" width="88px" height="31px" alt="button that says 'rose' with a rose growing out of the 'o', with milk-chan to the right of the text | by rose" /></a></li>
-                    <li><iframe src="https://incr.easrng.net/badge?key=futile" style="background: url(https://incr.easrng.net/bg.gif)" title="increment badge" width="88" height="31" frameborder="0"></iframe></li>
-                    <li><a href="https://fedoraproject.org/spins/kde"><img src="static/buttons/fedora.png" width="88px" height="31px" alt="button that says 'powered by fedora' in white and blue, with the fedora logo to the left | by unknown; retouched by futile" /></a></li>
-                    <li><a href="https://mozilla.org/firef&nbsp;x"><img src="static/buttons/firefox4.gif" width="88px" height="31px" alt="button that flashes between the texts 'tested on' and 'firefox' in firefox's orange, yellow, and purple scheme, with the firefox logo to the left | by unknown" /></a></li>
-                    <li><a href="https://vscodium.com"><img src="static/buttons/vscodium.com.png" width="88px" height="31px" alt="button that says 'made with vscodium' in light blue, with the vscodium logo to the right | by unknown" /></a></li>
-                    <li><img src="static/buttons/FirtniteButton.png" width="88px" height="31px" alt="button that says 'firtnite' (a misspelling of 'fortnite'), otherwise looks very similar to an old fortnite title screen | by unknown" /></li>
-                    <li><a href="https://ublockorigin.com"><img src="static/buttons/ublock.png" width="88px" height="31px" alt="button (grey) that says 'ublock origin now!', with the ublock origin red logo to the left | by unknown" /></a></li>
-                    <li><a href="https://rust-lang.org"><img src="static/buttons/rustNOW.png" width="88px" height="31px" alt="button (grey) that says 'rust now!', with the rust gear logo to the left and a yellow banner that says '1.82.0' on the to the bottom right | by futile" /></a></li>
-                    <li><a href="https://1337x.to"><img src="static/buttons/piracy.png" width="88px" height="31px" alt="button (grey) that says 'piracy now!', with a jolly roger flag to the left and a black banner that says 'free' on the to the bottom right | by unknown; retouched by futile" /></a></li>
-                </ul>
         </div>
+        <div style="position: absolute; bottom: 0; left: 0; right: 0;">
+            { buttons::buttons() }
             <div class="footer">
                 <p> { *quote } </p>
                 <p style="user-select: none;"> { *bullet } </p>

static/www/style.scss

@@ -137,16 +137,9 @@ div.buttons {
     }
 }
 
-.button_container {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-}
-
 ul.buttons {
     list-style-type: none;
-    margin: -8px;
+    margin: 0px;
     padding: 0;
     @include flex-center;
     flex-wrap: wrap;
@@ -162,7 +155,6 @@ ul.buttons {
 
 div.footer {
     @include flex-center;
-    height: 3em;
+    height: 2.4em;
-    font-size: 0.95em;
     gap: 5px;
 }