From ac4682e20a1db2e9e6ae80ecdfab15b4158f6892 Mon Sep 17 00:00:00 2001 From: Erin Nova Date: Wed, 26 Jul 2023 01:13:49 -0400 Subject: [PATCH] More styling, test results --- Cargo.lock | 1 + frontend/Cargo.toml | 1 + frontend/src/main.rs | 56 ++++++++++++++++++++++ static/home.html | 6 +-- static/results.html | 41 +++++++++++++++++ static/style.css | 107 +++++++++++++++++++++++++++++++++++++------ 6 files changed, 194 insertions(+), 18 deletions(-) create mode 100644 static/results.html diff --git a/Cargo.lock b/Cargo.lock index 8694494..f2dcb1c 100644 --- a/Cargo.lock +++ b/Cargo.lock @@ -756,6 +756,7 @@ dependencies = [ "config", "dirs", "ramhorns", + "serde", "tokio", "tracing", "tracing-subscriber", diff --git a/frontend/Cargo.toml b/frontend/Cargo.toml index 519b8a6..7fd28ad 100644 --- a/frontend/Cargo.toml +++ b/frontend/Cargo.toml @@ -16,3 +16,4 @@ url.workspace = true tracing.workspace = true tracing-subscriber.workspace = true ramhorns = "0.14.0" +serde = "1.0.175" diff --git a/frontend/src/main.rs b/frontend/src/main.rs index bf8ecfc..d8b378c 100644 --- a/frontend/src/main.rs +++ b/frontend/src/main.rs @@ -1,3 +1,4 @@ +use axum::Form; use axum::{ body::Bytes, extract::State, @@ -8,6 +9,7 @@ use axum::{ }; use chrono::{DateTime, NaiveDateTime, Utc}; use ramhorns::{Content, Template}; +use serde::Deserialize; use std::fs::File; use std::io::prelude::*; use std::net::SocketAddr; @@ -26,6 +28,7 @@ async fn main() { tracing_subscriber::fmt::init(); let app = Router::new() .route("/", get(root)) + .route("/search", post(search)) .route("/style.css", get(stylesheet)); let addr = SocketAddr::from(([127, 0, 0, 1], 3000)); @@ -62,3 +65,56 @@ async fn root() -> Html { }); Html(rendered) } + +#[derive(Deserialize)] +struct SearchForm { + query: String, +} + +#[derive(Content)] +struct SearchResult { + url: String, + size: i64, + title: String, + summary: String, + last_updated: String, +} + +#[derive(Content)] +struct SearchResults { + title: String, + description: String, + query: String, + results: Vec, +} + +async fn search(Form(search): Form) -> Html { + let mut source = File::open("static/results.html").unwrap(); + let mut contents = String::new(); + source.read_to_string(&mut contents).unwrap(); + + let tpl = Template::new(contents).unwrap(); + let rendered = tpl.render(&SearchResults { + title: "Ferret".to_string(), + description: "A small independent search engine".to_string(), + query: search.query, + results: vec![ + SearchResult { + url: "https://example.com/".to_string(), + size: 0, + title: "Example Domain".to_string(), + summary: "This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.".to_string(), + last_updated: "one week ago".to_string(), + }, + SearchResult { + url: "https://example.com/".to_string(), + size: 0, + title: "Example Domain".to_string(), + summary: "This domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.".to_string(), + last_updated: "one week ago".to_string(), + } + + ], + }); + Html(rendered) +} diff --git a/static/home.html b/static/home.html index 3e4f8f6..fa2cdd2 100644 --- a/static/home.html +++ b/static/home.html @@ -15,10 +15,10 @@
-

{{title}}

+

{{title}}

-
- + +
diff --git a/static/results.html b/static/results.html new file mode 100644 index 0000000..fda769e --- /dev/null +++ b/static/results.html @@ -0,0 +1,41 @@ + + + + + + + + + + + + + + {{title}} + + +
+
+

{{title}}

+ +
+ + +
+
+
+ {{#results}} +
+

{{title}}

+ {{url}} +

{{summary}} +

+
+ {{/results}} + {{^results}} +

No results found! :c

+ {{/results}} +
+
+ + diff --git a/static/style.css b/static/style.css index 1740f8a..1e808ca 100644 --- a/static/style.css +++ b/static/style.css @@ -1,18 +1,78 @@ -body{ +body { margin:40px auto; - max-width:650px; line-height:1.6; + max-width: 650px; font-size:18px; - color:#444; + color: #444; padding: 0 10px; font-family: "Atkinson Hyperlegible"; } +body.results { + margin-top: 0; + max-width: 100%; + margin: 0; + padding: 0; + background-color: #d2d2d2; +} h1,h2,h3{line-height:1.2} -h1 { +h2 { + font-size: 1em; + margin-bottom: 0; +} + +hr { + color: white; + height: 1px; + width: 100%; +} + +p.result { + font-size: .9em; + margin-top: .5em; +} + +a.result { + font-size: .9em; + color: #ce8500; + font-style: italic; +} + +h1.home { font-size: 3em; } +div.results { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + margin: auto; + margin-left: 25px; +} + +h1.results { + margin-top: 0; + font-size: 1.5em; + padding-left: 20px; +} + +header { + width: 100%; + border-radius: 2px; + background-color: white; + padding: 0px; + padding-top: 20px; + padding-bottom: 20px; +} + +.results-container { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; +} + .container { display: flex; flex-direction: column; @@ -20,16 +80,7 @@ h1 { align-items: center; } -footer { - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding-top: 25em; -} - -form { - flex-grow: 1; +form.home { display: flex; flex-direction: column; justify-content: center; @@ -38,13 +89,39 @@ form { gap: .5em; } -input#search { +form.results { + display: flex; + flex-direction: row; + align-items: center; + gap: .5em; + padding-left: 20px; +} + +.big-search { width: 100%; font-size: 1.5em; } +.results-search { + font-size: 1em; +} + .button { font-size: 1.2em; + border-radius: 2px; +} + +.results-button { + font-size: 1em; + border-radius: 2px; +} + +footer { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + padding-top: 25em; } footer p {