♻️ refactor(maud): rewrite the frontend code with maud html framework (#302)

public/templates/404.html

@@ -1,10 +0,0 @@
-{{>header this}}
-<main class="error_container">
-  <img src="images/robot-404.svg" alt="Image of broken robot." />
-  <div class="error_content">
-    <h1>Aw! snap</h1>
-    <h2>404 Page Not Found!</h2>
-    <p>Go to <a href="/">search page</a></p>
-  </div>
-</main>
-{{>footer}}

public/templates/about.html

@@ -1,29 +0,0 @@
-{{>header this}}
-<main class="about-container">
-  <article >
-    <div>
-    <h1 >Websurfx</h1>
-    <hr size="4" width="100%" color="#a6e3a1"> 
-    </div>
-    <p>A modern-looking, lightning-fast, privacy-respecting, secure meta search engine written in Rust. It provides a fast and secure search experience while respecting user privacy.<br> It aggregates results from multiple search engines and presents them in an unbiased manner, filtering out trackers and ads.
-    </p>
-
-    <h2>Some of the Top Features:</h2>
-
-    <ul><strong>Lightning fast </strong>- Results load within milliseconds for an instant search experience.</ul>
-
-    <ul><strong>Secure search</strong> - All searches are performed over an encrypted connection to prevent snooping.</ul>
-
-    <ul><strong>Ad free results</strong> - All search results are ad free and clutter free for a clean search experience.</ul>
-
-    <ul><strong>Privacy focused</strong> - Websurface does not track, store or sell your search data. Your privacy is our priority.</ul>
-
-    <ul><strong>Free and Open source</strong> - The entire project's code is open source and available for free on <a href="https://github.com/neon-mmd/websurfx">GitHub</a> under an GNU Affero General Public License.</ul>
-
-    <ul><strong>Highly customizable</strong> - Websurface comes with 9 built-in color themes and supports creating custom themes effortlessly.</ul>
-  </article>
-
-  <h3>Devoloped by: <a href="https://github.com/neon-mmd/websurfx">Websurfx team</a></h3>
-</main>
-{{>footer}}
-

public/templates/bar.html

@@ -1,3 +0,0 @@
-<div class="search_bar">
-    <input type="search" name="search-box" value="{{this.pageQuery}}" placeholder="Type to search" />
-    <button type="submit" onclick="searchWeb()">search</button>

public/templates/cookies_tab.html

@@ -1,12 +0,0 @@
-<div class="cookies tab">
-    <h1>Cookies</h1>
-    <p class="description">
-        This is the cookies are saved on your system and it contains the preferences
-        you chose in the settings page
-    </p>
-    <input type="text" name="cookie_field" value="" readonly />
-    <p class="description">
-        The cookies stored are not used by us for any malicious intend or for
-        tracking you in any way.
-    </p>
-</div>

public/templates/engines_tab.html

@@ -1,32 +0,0 @@
-<div class="engines tab">
-    <h1>Engines</h1>
-    <h3>select search engines</h3>
-    <p class="description">
-        Select the search engines from the list of engines that you want results
-        from
-    </p>
-    <div class="engine_selection">
-        <div class="toggle_btn">
-            <label class="switch">
-                <input type="checkbox" class="select_all" onchange="toggleAllSelection()" />
-                <span class="slider round"></span>
-            </label>
-            Select All
-        </div>
-        <hr />
-        <div class="toggle_btn">
-            <label class="switch">
-                <input type="checkbox" class="engine" />
-                <span class="slider round"></span>
-            </label>
-            DuckDuckGo
-        </div>
-        <div class="toggle_btn">
-            <label class="switch">
-                <input type="checkbox" class="engine" />
-                <span class="slider round"></span>
-            </label>
-            Searx
-        </div>
-    </div>
-</div>

public/templates/footer.html

@@ -1,16 +0,0 @@
-<footer>
-    <div>
-        <span>Powered By <b>Websurfx</b></span><span>-</span><span>a lightening fast, privacy respecting, secure meta
-            search engine</span>
-    </div>
-    <div>
-        <ul>
-            <li><a href="https://github.com/neon-mmd/websurfx">Source Code</a></li>
-            <li><a href="https://github.com/neon-mmd/websurfx/issues">Issues/Bugs</a></li>
-        </ul>
-    </div>
-</footer>
-<script src="static/settings.js"></script>
-</body>
-
-</html>

public/templates/general_tab.html

@@ -1,13 +0,0 @@
-<div class="general tab active">
-    <h1>General</h1>
-    <h3>Select a safe search level</h3>
-    <p class="description">
-        Select a safe search level from the menu below to filter content based on
-        the level.
-    </p>
-    <select name="safe_search_levels">
-        <option value=0>None</option>
-        <option value=1>Low</option>
-        <option value=2>Moderate</option>
-    </select>
-</div>

public/templates/header.html

@@ -1,16 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-<head>
-    <title>Websurfx</title>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link href="static/colorschemes/{{colorscheme}}.css" rel="stylesheet" type="text/css" />
-    <link href="static/themes/{{theme}}.css" rel="stylesheet" type="text/css" />
-</head>
-
-<body onload="getClientSettings()">
-    <header>
-        <h1><a href="/">Websurfx</a></h1>
-        {{>navbar}}
-    </header>

public/templates/index.html

@@ -1,8 +0,0 @@
-{{>header this}}
-<main class="search-container">
-    <img src="../images/websurfx_logo.png" alt="Websurfx meta-search engine logo" />
-    {{>bar}}
-    </div>
-</main>
-<script src="static/index.js"></script>
-{{>footer}}

public/templates/navbar.html

@@ -1,6 +0,0 @@
-<nav>
-    <ul>
-        <li><a href="about">about</a></li>
-        <li><a href="settings">settings</a></li>
-    </ul>
-</nav>

public/templates/search.html

@@ -1,86 +0,0 @@
-{{>header this.style}}
-<main class="results">
-    {{>search_bar this}}
-    <div class="results_aggregated">
-        {{#if results}} {{#each results}}
-        <div class="result">
-            <h1><a href="{{{this.url}}}">{{{this.title}}}</a></h1>
-            <small>{{{this.url}}}</small>
-            <p>{{{this.description}}}</p>
-            <div class="upstream_engines">
-                {{#each engine}}
-                <span>{{{this}}}</span>
-                {{/each}}
-            </div>
-        </div>
-        {{/each}} {{else}} {{#if disallowed}}
-        <div class="result_disallowed">
-            <div class="description">
-                <p>
-                    Your search - <span class="user_query">{{{this.pageQuery}}}</span> -
-                    has been disallowed.
-                </p>
-                <p class="description_paragraph">Dear user,</p>
-                <p class="description_paragraph">
-                    The query - <span class="user_query">{{{this.pageQuery}}}</span> - has
-                    been blacklisted via server configuration and hence disallowed by the
-                    server. Henceforth no results could be displayed for your query.
-                </p>
-            </div>
-            <img src="./images/barricade.png" alt="Image of a Barricade" />
-        </div>
-        {{else}} {{#if filtered}}
-        <div class="result_filtered">
-            <div class="description">
-                <p>
-                    Your search - <span class="user_query">{{{this.pageQuery}}}</span> -
-                    has been filtered.
-                </p>
-                <p class="description_paragraph">Dear user,</p>
-                <p class="description_paragraph">
-                    All the search results contain results that has been configured to be
-                    filtered out via server configuration and henceforth has been
-                    completely filtered out.
-                </p>
-            </div>
-            <img src="./images/filter.png" alt="Image of a paper inside a funnel" />
-        </div>
-        {{else}} {{#if noEnginesSelected}}
-        <div class="result_engine_not_selected">
-            <div class="description">
-                <p>
-                    No results could be fetched for your search "<span class="user_query">{{{this.pageQuery}}}</span>" .
-                </p>
-                <p class="description_paragraph">Dear user,</p>
-                <p class="description_paragraph">
-                    No results could be retrieved from the upstream search engines as no 
-                    upstream search engines were selected from the settings page. 
-                </p>
-            </div>
-            <img src="./images/no_selection.png" alt="Image of a white cross inside a red circle" />
-        </div>
-        {{else}}
-        <div class="result_not_found">
-            <p>Your search - {{{this.pageQuery}}} - did not match any documents.</p>
-            <p class="suggestions">Suggestions:</p>
-            <ul>
-                <li>Make sure that all words are spelled correctly.</li>
-                <li>Try different keywords.</li>
-                <li>Try more general keywords.</li>
-            </ul>
-            <img src="./images/no_results.gif" alt="Man fishing gif" />
-        </div>
-        {{/if}} {{/if}} {{/if}} {{/if}}
-    </div>
-    <div class="page_navigation">
-        <button type="button" onclick="navigate_backward()">
-            &#8592; previous
-        </button>
-        <button type="button" onclick="navigate_forward()">next &#8594;</button>
-    </div>
-</main>
-<script src="static/index.js"></script>
-<script src="static/search_area_options.js"></script>
-<script src="static/pagination.js"></script>
-<script src="static/error_box.js"></script>
-{{>footer}}

public/templates/search_bar.html

@@ -1,36 +0,0 @@
-<div class="search_area">
-    {{>bar this}}
-        <div class="error_box">
-            {{#if engineErrorsInfo}}
-            <button onclick="toggleErrorBox()" class="error_box_toggle_button">
-                <img src="./images/warning.svg" alt="Info icon for error box" />
-            </button>
-            <div class="dropdown_error_box">
-                {{#each engineErrorsInfo}}
-                <div class="error_item">
-                    <span class="engine_name">{{{this.engine}}}</span>
-                    <span class="engine_name">{{{this.error}}}</span>
-                    <span class="severity_color" style="background: {{{this.severity_color}}};"></span>
-                </div>
-                {{/each}}
-            </div>
-            {{else}}
-            <button onclick="toggleErrorBox()" class="error_box_toggle_button">
-                <img src="./images/info.svg" alt="Warning icon for error box" />
-            </button>
-            <div class="dropdown_error_box">
-                <div class="no_errors">
-                    Everything looks good 🙂!!
-                </div>
-            </div>
-            {{/if}}
-        </div>
-    </div>
-    <div class="search_options">
-        <select name="safe_search_levels" {{#if (gte safeSearchLevel 3)}} disabled {{/if}}>
-                <option value=0 {{#if (eq safeSearchLevel 0)}} selected {{/if}}>SafeSearch: None</option>
-                <option value=1 {{#if (eq safeSearchLevel 1)}} selected {{/if}}>SafeSearch: Low</option>
-                <option value=2 {{#if (eq safeSearchLevel 2)}} selected {{/if}}>SafeSearch: Moderate</option>
-        </select>
-    </div>
-</div>

public/templates/settings.html

@@ -1,22 +0,0 @@
-{{>header this}}
-<main class="settings" >
-    <h1>Settings</h1>
-    <hr />
-    <div class="settings_container">
-        <div class="sidebar">
-            <div class="btn active" onclick="setActiveTab(this)">general</div>
-            <div class="btn" onclick="setActiveTab(this)">user interface</div>
-            <div class="btn" onclick="setActiveTab(this)">engines</div>
-            <div class="btn" onclick="setActiveTab(this)">cookies</div>
-        </div>
-        <div class="main_container">
-            {{> general_tab}} {{> user_interface_tab}} {{> engines_tab}} {{>
-            cookies_tab}}
-            <p class="message"></p>
-            <button type="submit" onclick="setClientSettings()">Save</button>
-        </div>
-    </div>
-</main>
-<script src="static/settings.js"></script>
-<script src="static/cookies.js"></script>
-{{>footer}}

public/templates/user_interface_tab.html

@@ -1,28 +0,0 @@
-<div class="user_interface tab">
-    <h1>User Interface</h1>
-    <h3>select theme</h3>
-    <p class="description">
-        Select the theme from the available themes to be used in user interface
-    </p>
-    <select name="themes">
-        <option value="simple">simple</option>
-    </select>
-    <h3>select color scheme</h3>
-    <p class="description">
-        Select the color scheme for your theme to be used in user interface
-    </p>
-    <select name="colorschemes">
-        <option value="catppuccin-mocha">catppuccin mocha</option>
-        <option value="dark-chocolate">dark chocolate</option>
-        <option value="dracula">dracula</option>
-        <option value="gruvbox-dark">gruvbox dark</option>
-        <option value="monokai">monokai</option>
-        <option value="nord">nord</option>
-        <option value="oceanic-next">oceanic next</option>
-        <option value="one-dark">one dark</option>
-        <option value="solarized-dark">solarized dark</option>
-        <option value="solarized-light">solarized light</option>
-        <option value="tokyo-night">tokyo night</option>
-        <option value="tomorrow-night">tomorrow night</option>
-    </select>
-</div>

src/templates/mod.rs

@@ -0,0 +1,4 @@
+//!
+
+mod partials;
+pub mod views;

src/templates/partials/bar.rs

@@ -0,0 +1,12 @@
+//!
+
+use maud::{html, Markup,PreEscaped};
+
+///
+pub fn bar(query: &str) -> Markup {
+    html!(
+        (PreEscaped("<div class=\"search_bar\">"))
+            input type="search" name="search-box" value=(query) placeholder="Type to search";
+            button type="submit" onclick="searchWeb()"{"search"}
+    )
+}

src/templates/partials/footer.rs

@@ -0,0 +1,24 @@
+//!
+
+use maud::{html, Markup, PreEscaped};
+
+///
+pub fn footer() -> Markup {
+    html!(
+        footer{
+           div{
+              span{"Powered By "b{"Websurfx"}}span{"-"}span{"a lightening fast, privacy respecting, secure meta
+                  search engine"}
+           }
+           div{
+              ul{
+                  li{a href="https://github.com/neon-mmd/websurfx"{"Source Code"}}
+                  li{a href="https://github.com/neon-mmd/websurfx/issues"{"Issues/Bugs"}}
+              }
+           }
+        }
+        script src="static/settings.js"{}
+        (PreEscaped("</body>"))
+        (PreEscaped("</html>"))
+    )
+}

src/templates/partials/header.rs

@@ -0,0 +1,26 @@
+//!
+
+use crate::templates::partials::navbar::navbar;
+use maud::{html, Markup, PreEscaped, DOCTYPE};
+
+///
+pub fn header(colorscheme: &str, theme: &str) -> Markup {
+    html!(
+        (DOCTYPE)
+        html lang="en"
+
+        head{
+            title{"Websurfx"}
+            meta charset="UTF-8";
+            meta name="viewport" content="width=device-width, initial-scale=1";
+            link href=(format!("static/colorschemes/{colorscheme}.css")) rel="stylesheet" type="text/css";
+            link href=(format!("static/themes/{theme}.css")) rel="stylesheet" type="text/css";
+        }
+
+        (PreEscaped("<body onload=\"getClientSettings()\">"))
+            header{
+                h1{a href="/"{"Websurfx"}}
+                (navbar())
+            }
+    )
+}

src/templates/partials/mod.rs

@@ -0,0 +1,8 @@
+//!
+
+pub mod footer;
+pub mod header;
+pub mod navbar;
+pub mod bar;
+pub mod settings_tabs;
+pub mod search_bar;

src/templates/partials/navbar.rs

@@ -0,0 +1,15 @@
+//!
+
+use maud::{html, Markup};
+
+///
+pub fn navbar() -> Markup {
+    html!(
+        nav{
+            ul{
+               li{a href="about"{"about"}}
+               li{a href="settings"{"settings"}}
+            }
+        }
+    )
+}

src/templates/partials/search_bar.rs

@@ -0,0 +1,64 @@
+//!
+
+use maud::{html, Markup, PreEscaped};
+
+use crate::{models::aggregation_models::EngineErrorInfo, templates::partials::bar::bar};
+
+const SAFE_SEARCH_LEVELS_NAME: [&str; 3] = ["None", "Low", "Moderate"];
+
+///
+pub fn search_bar(
+    engine_errors_info: &[EngineErrorInfo],
+    safe_search_level: u8,
+    query: &str,
+) -> Markup {
+    html!(
+        .search_area{
+            (bar(query))
+                .error_box {
+                   @if !engine_errors_info.is_empty(){
+                      button onclick="toggleErrorBox()" class="error_box_toggle_button"{
+                         img src="./images/warning.svg" alt="Info icon for error box";
+                      }
+                      .dropdown_error_box{
+                         @for errors in engine_errors_info{
+                            .error_item{
+                               span class="engine_name"{(errors.engine)}
+                               span class="engine_name"{(errors.error)}
+                               span class="severity_color" style="background: {{{this.severity_color}}};"{}
+                            }
+                         }
+                      }
+                   }
+                   @else {
+                      button onclick="toggleErrorBox()" class="error_box_toggle_button"{
+                         img src="./images/info.svg" alt="Warning icon for error box";
+                      }
+                      .dropdown_error_box {
+                         .no_errors{
+                            "Everything looks good 🙂!!"
+                         }
+                      }
+                  }
+                }
+            (PreEscaped("</div>"))
+            .search_options {
+               @if safe_search_level >= 3 {
+                   (PreEscaped("<select name=\"safe_search_levels\" disabled>"))
+               }
+               @else{
+                   (PreEscaped("<select name=\"safe_search_levels\">"))
+               }
+               @for (idx, name) in SAFE_SEARCH_LEVELS_NAME.iter().enumerate() {
+                   @if (safe_search_level as usize) == idx {
+                       option value=(idx) selected {(format!("SafeSearch: {name}"))}
+                   }
+                   @else{
+                       option value=(idx) {(format!("SafeSearch: {name}"))}
+                   }
+               }
+               (PreEscaped("</select>"))
+            }
+        }
+    )
+}

src/templates/partials/settings_tabs/cookies.rs

@@ -0,0 +1,21 @@
+//!
+
+use maud::{html, Markup};
+
+///
+pub fn cookies() -> Markup {
+    html!(
+        div class="cookies tab"{
+           h1{"Cookies"}
+           p class="description"{
+               "This is the cookies are saved on your system and it contains the preferences
+               you chose in the settings page"
+           }
+           input type="text" name="cookie_field" value="" readonly;
+           p class="description"{
+               "The cookies stored are not used by us for any malicious intend or for
+               tracking you in any way."
+           }
+        }
+    )
+}

src/templates/partials/settings_tabs/engines.rs

@@ -0,0 +1,35 @@
+//!
+
+use maud::{html, Markup};
+
+///
+pub fn engines(engine_names: &[&String]) -> Markup {
+    html!(
+        div class="engines tab"{
+           h1{"Engines"}
+           h3{"select search engines"}
+           p class="description"{
+              "Select the search engines from the list of engines that you want results from"
+           }
+           .engine_selection{
+               .toggle_btn{
+                  label class="switch"{
+                     input type="checkbox" class="select_all" onchange="toggleAllSelection()";
+                     span class="slider round"{}
+                  }
+                  "Select All"
+               }
+               hr;
+               @for engine_name in engine_names{
+                   .toggle_btn{
+                       label class="switch"{
+                          input type="checkbox" class="engine";
+                          span class="slider round"{}
+                       }
+                       (format!("{}{}",engine_name[..1].to_uppercase().to_owned(), engine_name[1..].to_owned()))
+                   }
+               }
+           }
+        }
+    )
+}

src/templates/partials/settings_tabs/general.rs

@@ -0,0 +1,23 @@
+//!
+
+use maud::{html, Markup};
+
+const SAFE_SEARCH_LEVELS: [(u8, &'static str); 3] = [(0, "None"), (1, "Low"), (2, "Moderate")];
+
+///
+pub fn general() -> Markup {
+    html!(
+        div class="general tab active"{
+           h1{"General"}
+           h3{"Select a safe search level"}
+           p class="description"{
+               "Select a safe search level from the menu below to filter content based on the level."
+           }
+           select name="safe_search_levels"{
+               @for (k,v) in SAFE_SEARCH_LEVELS{
+                 option value=(k){(v)}
+               }
+           }
+        }
+    )
+}

src/templates/partials/settings_tabs/mod.rs

@@ -0,0 +1,6 @@
+//!
+
+pub mod general;
+pub mod engines;
+pub mod cookies;
+pub mod user_interface;

src/templates/partials/settings_tabs/user_interface.rs

@@ -0,0 +1,48 @@
+//!
+
+use crate::handler::paths::{file_path, FileType};
+use maud::{html, Markup};
+use std::fs::read_dir;
+
+fn style_option_list(
+    style_type: &str,
+) -> Result<Vec<(String, String)>, Box<dyn std::error::Error + '_>> {
+    let mut style_option_names: Vec<(String, String)> = Vec::new();
+    for file in read_dir(format!(
+        "{}static/{}/",
+        file_path(FileType::Theme)?,
+        style_type,
+    ))? {
+        let style_name = file?.file_name().to_str().unwrap().replace(".css", "");
+        style_option_names.push((style_name.clone(), style_name.replace("-", " ")));
+    }
+
+    Ok(style_option_names)
+}
+
+///
+pub fn user_interface() -> Result<Markup, Box<dyn std::error::Error>> {
+    Ok(html!(
+        div class="user_interface tab"{
+           h1{"User Interface"}
+           h3{"select theme"}
+           p class="description"{
+               "Select the theme from the available themes to be used in user interface"
+           }
+           select name="themes"{
+               @for (k,v) in style_option_list("themes")?{
+                   option value=(k){(v)}
+               }
+           }
+           h3{"select color scheme"}
+           p class="description"{
+               "Select the color scheme for your theme to be used in user interface"
+           }
+           select name="colorschemes"{
+               @for (k,v) in style_option_list("colorschemes")?{
+                   option value=(k){(v)}
+               }
+           }
+        }
+    ))
+}

src/templates/views/about.rs

@@ -0,0 +1,39 @@
+//!
+
+use maud::{html, Markup};
+
+use crate::templates::partials::{footer::footer, header::header};
+
+///
+pub fn about(colorscheme: &str, theme: &str) -> Markup {
+    html!(
+        (header(colorscheme, theme))
+        main class="about-container"{
+         article {
+             div{
+                h1{"Websurfx"}
+                hr size="4" width="100%" color="#a6e3a1"{}
+             }
+             p{"A modern-looking, lightning-fast, privacy-respecting, secure meta search engine written in Rust. It provides a fast and secure search experience while respecting user privacy."br{}" It aggregates results from multiple search engines and presents them in an unbiased manner, filtering out trackers and ads."
+             }
+
+             h2{"Some of the Top Features:"}
+
+             ul{strong{"Lightning fast "}"- Results load within milliseconds for an instant search experience."}
+
+             ul{strong{"Secure search"}" - All searches are performed over an encrypted connection to prevent snooping."}
+
+             ul{strong{"Ad free results"}" - All search results are ad free and clutter free for a clean search experience."}
+
+             ul{strong{"Privacy focused"}" - Websurfx does not track, store or sell your search data. Your privacy is our priority."}
+
+             ul{strong{"Free and Open source"}" - The entire project's code is open source and available for free on "{a href="https://github.com/neon-mmd/websurfx"{"GitHub"}}" under an GNU Affero General Public License."}
+
+             ul{strong{"Highly customizable"}" - Websurfx comes with 9 built-in color themes and supports creating custom themes effortlessly."}
+         }
+
+         h3{"Devoloped by: "{a href="https://github.com/neon-mmd/websurfx"{"Websurfx team"}}}
+        }
+        (footer())
+    )
+}

src/templates/views/index.rs

@@ -0,0 +1,19 @@
+//!
+
+use maud::{html, Markup, PreEscaped};
+
+use crate::templates::partials::{bar::bar, footer::footer, header::header};
+
+///
+pub fn index(colorscheme: &str, theme: &str, query: &str) -> Markup {
+    html!(
+        (header(colorscheme, theme))
+        main class="search-container"{
+            img src="../images/websurfx_logo.png" alt="Websurfx meta-search engine logo";
+            (bar(query))
+            (PreEscaped("</div>"))
+        }
+        script src="static/index.js"{}
+        (footer())
+    )
+}

src/templates/views/mod.rs

@@ -0,0 +1,7 @@
+//!
+
+pub mod about;
+pub mod index;
+pub mod not_found;
+pub mod settings;
+pub mod search;

src/templates/views/not_found.rs

@@ -0,0 +1,20 @@
+//!
+
+use crate::templates::partials::{footer::footer, header::header};
+use maud::{html, Markup};
+
+///
+pub fn not_found(colorscheme: &str, theme: &str) -> Markup {
+    html!(
+        (header(colorscheme, theme))
+        main class="error_container"{
+         img src="images/robot-404.svg" alt="Image of broken robot.";
+         div class="error_content"{
+          h1{"Aw! snap"}
+          h2{"404 Page Not Found!"}
+          p{"Go to "{a href="/"{"search page"}}}
+         }
+        }
+        (footer())
+    )
+}

src/templates/views/search.rs

@@ -0,0 +1,111 @@
+//!
+
+use maud::{html, Markup, PreEscaped};
+
+use crate::{
+    models::aggregation_models::SearchResults,
+    templates::partials::{footer::footer, header::header, search_bar::search_bar},
+};
+
+///
+pub fn search(
+    colorscheme: &str,
+    theme: &str,
+    query: &str,
+    search_results: &SearchResults,
+) -> Markup {
+    html!(
+        (header(colorscheme, theme))
+        main class="results"{
+           (search_bar(&search_results.engine_errors_info, search_results.safe_search_level, query))
+           .results_aggregated{
+              @if !search_results.results.is_empty() {
+                  @for result in search_results.results.iter(){
+                      .result {
+                         h1{a href=(result.url){(PreEscaped(&result.title))}}
+                         small{(result.url)}
+                         p{(PreEscaped(&result.description))}
+                         .upstream_engines{
+                            @for name in result.clone().engine{
+                               span{(name)}
+                            }
+                         }
+                      }
+                  }
+              }
+              @else if search_results.disallowed{
+                 .result_disallowed{
+                    .description{
+                       p{
+                          "Your search - "{span class="user_query"{(query)}}" -
+                          has been disallowed."
+                       }
+                       p class="description_paragraph"{"Dear user,"}
+                       p class="description_paragraph"{
+                          "The query - "{span class="user_query"{(query)}}" - has
+                          been blacklisted via server configuration and hence disallowed by the
+                          server. Henceforth no results could be displayed for your query."
+                       }
+                    }
+                    img src="./images/barricade.png" alt="Image of a Barricade";
+                 }
+              }
+              @else if search_results.filtered {
+                 .result_filtered{
+                    .description{
+                       p{
+                          "Your search - "{span class="user_query"{(query)}}" -
+                          has been filtered."
+                       }
+                       p class="description_paragraph"{"Dear user,"}
+                       p class="description_paragraph"{
+                          "All the search results contain results that has been configured to be
+                          filtered out via server configuration and henceforth has been
+                          completely filtered out."
+                       }
+                    }
+                    img src="./images/filter.png" alt="Image of a paper inside a funnel";
+                 }
+              }
+              @else if search_results.no_engines_selected {
+                 .result_engine_not_selected{
+                    .description{
+                       p{
+                          "No results could be fetched for your search '{span class="user_query"{(query)}}'."
+                       }
+                       p class="description_paragraph"{"Dear user,"}
+                       p class="description_paragraph"{
+                          "No results could be retrieved from the upstream search engines as no
+                          upstream search engines were selected from the settings page."
+                       }
+                    }
+                    img src="./images/no_selection.png" alt="Image of a white cross inside a red circle";
+                 }
+              }
+              @else{
+                 .result_not_found {
+                    p{"Your search - "{(query)}" - did not match any documents."}
+                    p class="suggestions"{"Suggestions:"}
+                    ul{
+                       li{"Make sure that all words are spelled correctly."}
+                       li{"Try different keywords."}
+                       li{"Try more general keywords."}
+                    }
+                    img src="./images/no_results.gif" alt="Man fishing gif";
+                 }
+              }
+            }
+            .page_navigation {
+               button type="button" onclick="navigate_backward()"{
+                   (PreEscaped("←")) "previous"
+               }
+               button type="button" onclick="navigate_forward()"{"next" (PreEscaped("→"))}
+            }
+        }
+        script src="static/index.js"{}
+        script src="static/search_area_options.js"{}
+        script src="static/pagination.js"{}
+        script src="static/error_box.js"{}
+        (footer())
+    )
+}

src/templates/views/settings.rs

@@ -0,0 +1,45 @@
+//!
+
+use maud::{html, Markup};
+
+use crate::templates::partials::{
+    footer::footer,
+    header::header,
+    settings_tabs::{
+        cookies::cookies, engines::engines, general::general, user_interface::user_interface,
+    },
+};
+
+///
+pub fn settings(
+    colorscheme: &str,
+    theme: &str,
+    engine_names: &[&String],
+) -> Result<Markup, Box<dyn std::error::Error>> {
+    Ok(html!(
+        (header(colorscheme, theme))
+        main class="settings"{
+           h1{"Settings"}
+           hr;
+           .settings_container{
+              .sidebar{
+                  div class="btn active" onclick="setActiveTab(this)"{"general"}
+                  .btn onclick="setActiveTab(this)"{"user interface"}
+                  .btn onclick="setActiveTab(this)"{"engines"}
+                  .btn onclick="setActiveTab(this)"{"cookies"}
+              }
+              .main_container{
+                  (general())
+                  (user_interface()?)
+                  (engines(engine_names))
+                  (cookies())
+                  p class="message"{}
+                  button type="submit" onclick="setClientSettings()"{"Save"}
+              }
+           }
+        }
+        script src="static/settings.js"{}
+        script src="static/cookies.js"{}
+        (footer())
+    ))
+}