Implement querystring

Cargo.toml

@@ -15,6 +15,7 @@ gloo-events = "0.1.2"
 gloo-timers = "0.2.4"
 gloo-utils = "0.1.2"
 once_cell = "1.4.0"
+percent-encoding = "2.2"
 wasm-bindgen = "0.2.64"
 yew = "0.19.3"
 yew-router = "0.16.0"

src/components/about.rs

@@ -34,6 +34,11 @@ impl Component for About {
                         {"You can find the code for this site on "}
                         <a href="https://github.com/jplatte/caniuse.rs">{"GitHub"}</a>{"."}
                     </p>
+                    <h3>{"Features"}</h3>
+                    <p>
+                    {"You can add the page to your browser searchbar. The syntax is: "}
+                    <a href="#">{"https://caniuse.rs/#q=%s"}</a>
+                    </p>
                     <h3>{"About the creator"}</h3>
                     <p>
                         {"I'm Jonas and I work on free software in my spare time, usually on "}

src/components/app.rs

@@ -12,6 +12,7 @@ use crate::{
         index::{Explore, IndexContents},
         About, FeaturePage, Header, Index, VersionPage,
     },
+    util::get_searchquery,
     AppRoute, FEATURES, VERSIONS,
 };
 
@@ -40,7 +41,17 @@ impl Component for App {
             }
         });
 
-        Self { input_ref: NodeRef::default(), search_query: Rc::new(String::new()), _key_listener }
+        let search_query = Rc::new(get_searchquery());
+
+        if !search_query.is_empty() {
+            web_sys::window()
+                .expect("cannot access window object")
+                .location()
+                .set_hash("")
+                .expect("cannot set location");
+        }
+
+        Self { input_ref: NodeRef::default(), search_query, _key_listener }
     }
 
     fn update(&mut self, _: &Context<Self>, msg: Msg) -> bool {
@@ -98,7 +109,7 @@ impl Component for App {
 
         html! {
             <BrowserRouter>
-                <Header input_ref={self.input_ref.clone()} oninput={oninput} />
+                <Header input_ref={self.input_ref.clone()} input_val={self.search_query.to_string()} oninput={oninput} />
                 <div class="page">
                     <Switch render={render_route} />
                 </div>

src/components/header.rs

@@ -1,14 +1,11 @@
-use std::mem;
+use std::{mem, rc::Rc};
 
 use gloo_events::EventListener;
 use gloo_utils::{body, document_element, window};
 use wasm_bindgen::JsCast;
 use web_sys::{HtmlElement, InputEvent, MouseEvent};
 use yew::{html, Callback, Component, Context, Html, NodeRef, Properties};
-use yew_router::{
-    history::{History, Location},
-    scope_ext::RouterScopeExt,
-};
+use yew_router::{history::History, scope_ext::RouterScopeExt, prelude::Location};
 
 use crate::{
     icons::{fa_bars, fa_moon, fa_question_circle, fa_sun},
@@ -31,6 +28,7 @@ pub struct Props {
     #[prop_or_default]
     pub input_ref: NodeRef,
     pub oninput: Callback<InputEvent>,
+    pub input_val: String
 }
 
 impl Component for Header {
@@ -122,7 +120,7 @@ impl Component for Header {
 
         let history = ctx.link().history().unwrap();
         let cb = ctx.props().oninput.clone();
-        let oninput = move |ev| {
+        let oninput = move |ev: InputEvent| {
             if history.location().route::<AppRoute>() != Some(AppRoute::Index) {
                 history.push(AppRoute::Index);
             }
@@ -135,6 +133,7 @@ impl Component for Header {
                     <div class="caniuse">
                         <label for="query">{"Can I use"}</label>
                         <input ref={ctx.props().input_ref.clone()} id="query" type="search"
+                            value={ctx.props().input_val.to_string()}
                             oninput={oninput} />
                         {"?"}
                     </div>

src/util.rs

@@ -1,5 +1,6 @@
 use std::fmt::Display;
 
+use percent_encoding::{percent_decode, NON_ALPHANUMERIC, percent_encode, utf8_percent_encode};
 use yew::{
     html,
     virtual_dom::{VList, VNode, VTag, VText},
@@ -65,3 +66,28 @@ pub fn maybe_link<T: Display>(text: &str, link_base: &str, opt_rest: Option<T>)
         None => html! {},
     }
 }
+
+pub fn get_searchquery() -> String {
+    let search_query = web_sys::window()
+        .expect("cannot access window object")
+        .location()
+        .hash()
+        .expect("unable to get location")
+        .split("#q=")
+        .nth(1)
+        .unwrap_or("")
+        .to_string();
+
+    percent_decode(search_query.as_bytes())
+        .decode_utf8()
+        .expect("Cannot decode search_query")
+        .to_string()
+}
+
+pub fn set_searchquery(search_query: &str) -> bool {
+    web_sys::window()
+    .expect("cannot access window object")
+    .location()
+    .replace(&format!("/#q={}", utf8_percent_encode(search_query, NON_ALPHANUMERIC).to_string()))
+    .is_ok()
+}

xtask/src/main.rs

@@ -35,11 +35,20 @@ fn main() -> anyhow::Result<()> {
 fn build() -> anyhow::Result<()> {
     cmd!("wasm-pack build --no-typescript --target web").run()?;
     fs::copy("pkg/caniuse_rs_bg.wasm", "public/caniuse_rs.wasm")?;
+    #[cfg(target_os = "linux")]
     cmd!("rollup src/main.js --format iife --file public/caniuse_rs.js").run()?;
+    #[cfg(target_os = "windows")]
+    cmd!("rollup.cmd src/main.js --format iife --file public/caniuse_rs.js").run()?;
+
 
     let static_files: Vec<_> =
         fs::read_dir("static")?.map(|entry| Ok(entry?.path())).collect::<io::Result<_>>()?;
+    #[cfg(target_os = "linux")]
     cmd!("cp -r {static_files...} public/").run()?;
+    #[cfg(target_os = "windows")]
+    for file in static_files.iter() {
+        cmd!("xcopy {file} public /i /s /y /q").run()?;
+    }
 
     Ok(())
 }