Help banner and fixes

shettysach · Feb 2, 2024 · a11b0e2 · a11b0e2
1 parent 209f631
commit a11b0e2
Show file tree

Hide file tree

Showing 7 changed files with 53 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -3,15 +3,15 @@
 
 <head>
   <title>Termfolio</title>
-  <link data-trunk rel="icon" href="./styles/favicon.ico" type="image/ico"/>
+  <link data-trunk rel="icon" href="./styles/favicon.ico" type="image/ico" />
   <!-- <link data-trunk rel="shortcut icon" href="./styles/favicon.ico" type="image/x-icon"/>   -->
-  
+
   <meta http-equiv="Permissions-Policy" content="interest-cohort=(), user-id=()" />
   <meta name="viewport" content="width=device-width, initial-scale=1">
-  
+
   <link data-trunk rel="css" href="./styles/styles.css">
   <link data-trunk rel="css" href="./styles/themes.css">
-  
+
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet">
@@ -20,6 +20,4 @@
 <body>
 </body>
 
-</style>
-
 </html>
diff --git a/src/base.rs b/src/base.rs
@@ -1,7 +1,9 @@
 use leptos::{component, create_signal, view, For, IntoView, SignalGet};
 use std::collections::VecDeque;
 
+mod banner;
 mod prompt;
+use banner::Banner;
 use prompt::Prompt;
 
 #[component]
@@ -14,6 +16,7 @@ pub fn Base() -> impl IntoView {
 
     view! {
         <div>
+            <Banner/>
             <For
                 each = prompt_list
                 key = |&prompt| prompt

diff --git a/src/base/banner.rs b/src/base/banner.rs
@@ -0,0 +1,29 @@
+use leptos::{component, view, IntoView};
+
+pub const HELP: &str = r#"<span class="grn semibold">  ________________  __  _____________  __    ________ 
+ /_  __/ ____/ __ \/  |/  / ____/ __ \/ /   /  _/ __ \
+  / / / __/ / /_/ / /|_/ / /_  / / / / /    / // / / /
+ / / / /___/ _, _/ /  / / __/ / /_/ / /____/ // /_/ / 
+/_/ /_____/_/ |_/_/  /_/_/    \____/_____/___/\____/  
+</span>
+
+Hello, welcome to <u class="blu semibold">Termfolio</u>. Type one of these commands -
+
+  <span class="rd semibold">about</span> - View about me
+  <span class="rd semibold">github</span> - View about Github profile 
+  <span class="rd semibold">repos</span> - View about my pinned repos / projects
+  <span class="rd semibold">links</span> - View contact info and links
+  <span class="rd semibold">help</span> - View this help section
+  <span class="rd semibold">theme</span> - Cycle through themes
+  <span class="rd semibold">credits</span> - View credits and repo"#;
+
+#[component]
+pub fn Banner() -> impl IntoView {
+    view! {
+        <p class="inline">"user@termfolio:~$ "</p>
+        <p style="display:inline;padding:2px;">"help"</p>
+        <pre>
+            <div class="output" inner_html={HELP}></div>
+        </pre>
+    }
+}
diff --git a/src/base/prompt.rs b/src/base/prompt.rs
@@ -9,7 +9,6 @@ use leptos_use::{
     UseColorModeOptions, UseColorModeReturn, UseCycleListOptions, UseCycleListReturn,
 };
 use std::collections::VecDeque;
-use termfolio::autocomplete;
 
 #[component]
 pub fn Prompt(
@@ -50,7 +49,7 @@ pub fn Prompt(
 
         spawn_local(async move {
             let value = value.trim().replace("<", "‹").replace(">", "›");
-            let val = value.split_once(' ').unwrap_or((&value, " "));
+            let val = value.split_once(' ').unwrap_or((&value, ""));
 
             match val.0 {
                 "clear" => {
@@ -79,7 +78,7 @@ pub fn Prompt(
             }
 
             updater.update(|hist| {
-                if value != "" && hist.front() != Some(&value) {
+                if !value.is_empty() && hist.front() != Some(&value) {
                     hist.push_front(value);
                     if hist.len() > 20 {
                         hist.pop_back();
@@ -133,7 +132,7 @@ pub fn Prompt(
             //Autocomplete
             "Tab" => {
                 ev.prevent_default();
-                inp.set_value(autocomplete(&inp.value()));
+                inp.set_value(termfolio::autocomplete(&inp.value()));
             }
             _ => {}
         }

diff --git a/src/lib.rs b/src/lib.rs
@@ -26,12 +26,12 @@ impl Command {
 
     async fn printout(&self) -> String {
         match self {
-            Self::Help => format!("{}{}", texts::LOGO_V2, texts::HELP),
+            Self::Help => String::from(texts::HELP),
             Self::About => fetch::get_about(),
             Self::Github => fetch::get_github().await,
             Self::Repos => fetch::get_repos().await,
             Self::Links => fetch::get_contacts().to_string(),
-            Self::Credits => format!("{}{}", texts::LOGO_V1, texts::CREDITS),
+            Self::Credits => String::from(texts::CREDITS),
             Self::Bash(bash) => Bash::printout(&bash),
         }
     }
@@ -103,7 +103,7 @@ pub fn autocomplete(inp: &str) -> &str {
     let inp = inp.trim();
 
     let comms = [
-        "help", "about", "github", "repos", "links", "theme", "credits",
+        "help", "about", "github", "repos", "links", "theme", "credits", "neofetch",
     ];
 
     if !inp.is_empty() {

diff --git a/src/texts.rs b/src/texts.rs
@@ -1,18 +1,10 @@
-pub const LOGO_V1: &str = r#"<span class="grn"> dMMMMMMP dMMMMMP dMMMMb  dMMMMMMMMb  dMMMMMP .aMMMb  dMP     dMP .aMMMb 
-   dMP   dMP     dMP.dMP dMP"dMP"dMP dMP     dMP"dMP dMP     amr dMP"dMP 
-  dMP   dMMMP   dMMMMK  dMP dMP dMP dMMMP   dMP dMP dMP     dMP dMP dMP  
- dMP   dMP     dMP"AMF dMP dMP dMP dMP     dMP.aMP dMP     dMP dMP.aMP   
-dMP   dMMMMMP dMP dMP dMP dMP dMP dMP      VMMMP" dMMMMMP dMP  VMMMP"    
-</span>"#;
-
-pub const LOGO_V2: &str = r#"<span class="grn semibold">  ________________  __  _____________  __    ________ 
+pub const HELP: &str = r#"<span class="grn semibold">  ________________  __  _____________  __    ________ 
  /_  __/ ____/ __ \/  |/  / ____/ __ \/ /   /  _/ __ \
   / / / __/ / /_/ / /|_/ / /_  / / / / /    / // / / /
  / / / /___/ _, _/ /  / / __/ / /_/ / /____/ // /_/ / 
 /_/ /_____/_/ |_/_/  /_/_/    \____/_____/___/\____/  
-</span>"#;
+</span>
 
-pub const HELP: &str = r#"
 Hello, welcome to <u class="blu semibold">Termfolio</u>. Type one of these commands -
 
   <span class="rd semibold">about</span> - View about me
@@ -23,7 +15,14 @@ Hello, welcome to <u class="blu semibold">Termfolio</u>. Type one of these comma
   <span class="rd semibold">theme</span> - Cycle through themes
   <span class="rd semibold">credits</span> - View credits and repo"#;
 
-pub const CREDITS: &str = r#"
+pub const CREDITS: &str = r#"<span class="grn"> _____ ______________  _________ _____ _     _____ _____ 
+|_   _|  ___| ___ \  \/  ||  ___|  _  | |   |_   _|  _  |
+  | | | |__ | |_/ / .  . || |_  | | | | |     | | | | | |
+  | | |  __||    /| |\/| ||  _| | | | | |     | | | | | |
+  | | | |___| |\ \| |  | || |   \ \_/ / |_____| |_\ \_/ /
+  \_/ \____/\_| \_\_|  |_/\_|    \___/\_____/\___/ \___/ 
+</span>
+
 Terminal style portfolio website, made using Rust.
 Made by <span class="rd semibold">Sachith C Shetty</span> 
   

diff --git a/styles/styles.css b/styles/styles.css
@@ -32,7 +32,6 @@ input {
 
 form {
   display: inline-block;
-  margin-right: 10px;
   margin-bottom: 0px;
   /* caret-shape: block; */
   caret-color: var(--green);
@@ -123,5 +122,5 @@ form {
 /* Links */
 
 a {
-  text-decoration-thickness: 2px;
+  text-decoration-thickness: 1px;
 }