Added topbar

YomoSK · Nov 2, 2024 · 4ceb39a · 4ceb39a
1 parent a81cc14
commit 4ceb39a
Show file tree

Hide file tree

Showing 8 changed files with 170 additions and 7 deletions.
diff --git a/README.md b/README.md
@@ -16,4 +16,10 @@ Yomea is currently in development state, at this point no builds are shipped by
 git clone https://github.com/YomoSK/yomea
 ```
 
+**2.** Then use cargo to run the project.
+```bash
+cd rust-src
+cargo run
+```
+
 [Website](https://yomea.dev)
diff --git a/public/topbar.html b/public/topbar.html
diff --git a/rust-src/Cargo.toml b/rust-src/Cargo.toml
@@ -1,12 +1,11 @@
 [package]
-name = "yomea"
+name = "Yomea"
 version = "0.1.0"
 description = "Web browser"
 authors = ["Yomo"]
 license = ""
 repository = "https://github.com/YomoSK/yomea"
 edition = "2021"
-rust-version = "1.77.2"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
 
@@ -21,3 +20,5 @@ tauri-build = { version = "2.0.1", features = [] }
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
 tauri = { version = "2.0.6", features = ["unstable"] }
+isahc = "1.7.2"
+scraper = "0.21.0"
diff --git a/rust-src/components/script.js b/rust-src/components/script.js
@@ -0,0 +1,5 @@
+document.addEventListener('DOMContentLoaded', () => {
+   window.__TAURI__.core.invoke('get_title').then(title => {
+      document.getElementById('tab-title').innerText = title;
+   });
+});
diff --git a/rust-src/components/styles.css b/rust-src/components/styles.css
@@ -0,0 +1,70 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+body {
+   margin: 0;
+   padding: 0;
+   height: 60px;
+   background: transparent;
+   font-family: 'Roboto', sans-serif;
+}
+
+body::before {
+   content: '';
+   position: absolute;
+   top: 0;
+   left: 0;
+   width: 100%;
+   height: 100%;
+   background: #E3F4FE;
+   opacity: .75;
+   z-index: -1;
+}
+
+nav {
+   padding: .75rem 1.25rem;
+   display: grid;
+   grid-template-columns: repeat(3, 1fr);
+   align-items: center;
+   height: -webkit-fill-available;
+}
+
+nav > #tabs,  nav > #controls {
+   height: -webkit-fill-available;
+   display: flex;
+   gap: .5rem;
+}
+
+nav > #tabs > svg, nav > #controls > svg {
+   width: 22px;
+   cursor: pointer;
+}
+
+nav > #tabs > div {
+   padding: 0 .5rem;
+   background: #E2E5E8;
+   border-radius: 8px;
+   font-size: 15px;
+   font-weight: 600;
+   display: flex;
+   justify-content: center;
+   align-items: center;
+}
+
+nav > input#searchbar {
+   padding: .4rem 1rem;
+   height: -webkit-fill-available;
+   background: #E2E5E8;
+   border: none;
+   border-radius: 8px;
+   font-size: 14px;
+   font-weight: 600;
+   outline: none;
+}
+
+nav > #controls {
+   justify-self: self-end;
+}
+
+nav > #controls > svg:last-child {
+   fill: #FF1E00;
+}
diff --git a/rust-src/components/topbar.html b/rust-src/components/topbar.html
@@ -1 +1,32 @@
-<p>Yomea Project</p>
+<!DOCTYPE html>
+<html lang="en">
+   <head>
+      <meta charset="UTF-8">
+      <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <link rel="stylesheet" href="./styles.css">
+   </head>
+   <body>
+      <nav>
+         <div id="tabs">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+               <path d="M10.75 4.75a.75.75 0 0 0-1.5 0v4.5h-4.5a.75.75 0 0 0 0 1.5h4.5v4.5a.75.75 0 0 0 1.5 0v-4.5h4.5a.75.75 0 0 0 0-1.5h-4.5v-4.5Z" />
+            </svg>
+            <div id="tab-title"></div>
+         </div>
+
+         <input
+            id="searchbar"
+            type="url"
+            placeholder="Search in the universe..."
+         />
+
+         <div id="controls">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20">
+               <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
+            </svg>             
+         </div>
+      </nav>
+
+      <script src="./script.js" type="module"></script>
+   </body>
+</html>
diff --git a/rust-src/src/lib.rs b/rust-src/src/lib.rs
@@ -1,11 +1,60 @@
+use isahc::ReadResponseExt;
 use tauri::{Builder, LogicalPosition, LogicalSize, WebviewBuilder, WebviewUrl, WindowBuilder};
 use serde_json::Value;
 
+pub struct _Yomea {
+   pub url: &'static str
+}
+
+pub static YOMEA: _Yomea = _Yomea {
+   url: "https://google.com"
+};
+
+pub fn get_title_url(url: String, followredirects: bool) -> Result<String, u16> {
+   let mut http = match isahc::get(url) {
+      Ok(res) => res,
+      Err(_) => {
+         isahc::Response::builder()
+            .status(404)
+            .body(isahc::Body::empty())
+            .unwrap()
+      }
+   };
+   let status = http.status();
+   if status.is_redirection() && followredirects {
+      if let Some(location) = http.headers().get("Location") {
+         if let Ok(redirect) = location.to_str() {
+            return Ok(get_title_url(redirect.to_string(), true).unwrap());
+         }
+      }
+   }
+   if !status.is_success() {
+      return Err(status.as_u16());
+   }
+
+   let html = http.text();
+   let document = scraper::Html::parse_document(html.unwrap().as_str());
+   let selector = scraper::Selector::parse("title").unwrap();
+
+   if let Some(title) = document.select(&selector).next() {
+      Ok(title.inner_html())
+   }
+   else {
+      Ok("Invalid title tag".to_string())
+   }
+}
+
+#[tauri::command]
+fn get_title() -> String {
+   return get_title_url(YOMEA.url.to_string(), true).unwrap();
+}
+
 pub fn run() {
    let title = "Yomea";
    let size = serde_json::json!({ "width": 1400, "height": 800 });
 
    Builder::default()
+      .invoke_handler(tauri::generate_handler![get_title])
       .setup(move |app| {
          let topbarcomponent = "topbar.html".into();
 
@@ -14,7 +63,9 @@ pub fn run() {
 
          let window = WindowBuilder::new(app, "main")
             .title(title)
-            .inner_size(width, height)
+            .inner_size(width - 1.0, height - 1.0)
+            .transparent(true)
+            .decorations(false)
             .build()?;
 
          let topbar = WebviewBuilder::new(
@@ -24,7 +75,7 @@ pub fn run() {
 
          let webview = WebviewBuilder::new(
             "webview",
-            WebviewUrl::External("https://google.com/".parse().unwrap())
+            WebviewUrl::External(YOMEA.url.parse().unwrap())
          );
 
          window.add_child(

diff --git a/rust-src/tauri.conf.json b/rust-src/tauri.conf.json
@@ -1,6 +1,6 @@
 {
    "$schema": "https://schema.tauri.app/config/2.0.0-rc",
-   "productName": "yomea",
+   "productName": "Yomea",
    "version": "0.1.0",
    "identifier": "me.Yomo.Yomea",
    "app": {