### Install Stable Websurfx from Source

Source: https://github.com/neon-mmd/websurfx/wiki/installation

Clone the repository, build the project, start Redis, and run the Websurfx server for the stable release.

```shell
git clone https://github.com/neon-mmd/websurfx.git
cd websurfx
cargo build
redis-server --port 8082 &
./target/debug/websurfx
```

--------------------------------

### Run Websurfx Server

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Execute the websurfx command to start the server after installation.

```shell
websurfx
```

--------------------------------

### Install Rolling/Edge Websurfx from Source

Source: https://github.com/neon-mmd/websurfx/wiki/installation

Clone the repository, checkout the rolling branch, build the project, start Redis, and run the Websurfx server for the rolling release.

```shell
git clone https://github.com/neon-mmd/websurfx.git
cd websurfx
git checkout rolling
cargo build
redis-server --port 8082 &
./target/debug/websurfx
```

--------------------------------

### Install and Run Websurfx

Source: https://github.com/neon-mmd/websurfx/blob/rolling/README.md

Clone the repository, build the release version, start the Redis server, and then run the Websurfx server. Ensure Redis is configured to use port 8082.

```shell
git clone https://github.com/neon-mmd/websurfx.git
cd websurfx
git checkout stable
cargo build -r
redis-server --port 8082 &
./target/release/websurfx
```

--------------------------------

### Install Stylelint and Plugins

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Install stylelint globally for pre-commit code linting. Ensure npm is installed first.

```shell
npm i -g stylelint
npm i -g stylelint stylelint-config-standard postcss-lit
```

--------------------------------

### Install Stylelint Configuration

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Installs stylelint configuration and postcss-lit for linting.

```shell
npm i -D stylelint-config-standard postcss-lit
```

--------------------------------

### Install Cargo-Watch

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Install cargo-watch to automatically rebuild the project on source code changes. Ensure cargo is installed first.

```shell
cargo install cargo-watch
```

--------------------------------

### Start Websurfx Search Engine

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Start the built Websurfx search engine. This command assumes the build artifacts are in the standard 'target/release' directory.

```shell
./target/release/websurfx
```

--------------------------------

### Run the Project with Cargo

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Starts the application and serves the project locally. Ensure the project is built first.

```shell
cargo run
```

--------------------------------

### Install Stylelint Globally

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Installs stylelint globally on the system for pre-commit checks.

```shell
$ npm i -g stylelint
```

--------------------------------

### Websurfx Configuration File Example

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

This Lua configuration file sets up general, server, search, website, caching, and upstream search engine parameters for Websurfx. Adjust settings like logging, port, safe search level, and colorscheme as needed.

```lua
-- ### General ###
logging = true -- an option to enable or disable logs.
debug = false -- an option to enable or disable debug mode.
threads = 8 -- the amount of threads that the app will use to run (the value should be greater than 0).

-- ### Server ###
port = "8080" -- port on which server should be launched
binding_ip = "0.0.0.0" --ip address on the which server should be launched.
production_use = false -- whether to use production mode or not (in other words this option should be used if it is to be used to host it on the server to provide a service to a large number of users (more than one))
-- if production_use is set to true
-- There will be a random delay before sending the request to the search engines, this is to prevent DDoSing the upstream search engines from a large number of simultaneous requests.
request_timeout = 30 -- timeout for the search requests sent to the upstream search engines to be fetched (value in seconds).
rate_limiter = {
	number_of_requests = 20, -- The number of requests that are allowed within a provided time limit.
	time_limit = 3, -- The time limit in which the number of requests that should be accepted.
}

-- ### Search ###
-- Filter results based on different levels. The levels provided are:
-- {{
-- 0 - None
-- 1 - Low
-- 2 - Moderate
-- 3 - High
-- 4 - Aggressive
-- }}
safe_search = 2

-- ### Website ###
-- The different colorschemes provided are:
-- {{
-- catppuccin-mocha
-- dark-chocolate
-- dracula
-- gruvbox-dark
-- monokai
-- nord
-- oceanic-next
-- one-dark
-- solarized-dark
-- solarized-light
-- tokyo-night
-- tomorrow-night
-- }}
colorscheme = "catppuccin-mocha" -- the colorscheme name that should be used for the website theme
theme = "simple" -- the theme name that should be used for the website

-- ### Caching ###
redis_url = "redis://redis:6379" -- redis connection url address on which the client should connect on.

-- ### Search Engines ###
upstream_search_engines = {
	DuckDuckGo = true,
	Searx = false,
} -- select the upstream search engines from which the results should be fetched.

```

--------------------------------

### Configure Websurfx for Docker

Source: https://github.com/neon-mmd/websurfx/wiki/installation

Example configuration for Websurfx when deploying with Docker, showing settings for port, binding IP, colorscheme, theme, and Redis connection.

```lua
-- Server
port = "8080" -- port on which server should be launched
binding_ip_addr = "0.0.0.0" --ip address on the which server should be launched.

-- Website
-- The different colorschemes provided are:
-- {{
-- catppuccin-mocha
-- dracula
-- monokai
-- nord
-- oceanic-next
-- solarized-dark
-- solarized-light
-- tomorrow-night
-- }}
colorscheme = "catppuccin-mocha" -- the colorscheme name which should be used for the website theme
theme = "simple" -- the theme name which should be used for the website

-- Caching
redis_connection_url = "redis://redis:6379" -- redis connection url address on which the client should connect on.
```

--------------------------------

### Catppuccin Mocha Colorscheme Example

Source: https://github.com/neon-mmd/websurfx/wiki/theming

An example of a custom colorscheme using the 'catppuccin-mocha' palette, demonstrating the usage of CSS variables for various UI elements.

```css
:root {
  --bg: #1e1e2e;
  --fg: #cdd6f4;
  --1: #45475a;
  --2: #f38ba8;
  --3: #a6e3a1;
  --4: #f9e2af;
  --5: #89b4fa;
  --6: #f5c2e7;
  --7: #ffffff;
}
```

--------------------------------

### Start Development Server with Hot Reloading

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Launches the development server with hot reloading enabled, automatically rebuilding the project on file changes.

```shell
cargo watch -q -x "run" -w .
```

--------------------------------

### Run Websurfx Project with Docker Compose

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Use this command to start the Websurfx project in a development environment. Ensure the dev.docker-compose.yml file is configured correctly.

```shell
docker compose -f dev.docker-compose.yml up
```

--------------------------------

### Simple Theme - General Styles

Source: https://github.com/neon-mmd/websurfx/wiki/theming

Provides basic reset and box-sizing styles, along with initial setup for the HTML and body elements, including font-size and flexbox layout for the main body.

```css
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  background: var(--1);
}
```

--------------------------------

### Install Websurfx Edge from AUR

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Use paru to install the edge version of Websurfx from the Arch User Repository.

```shell
paru -S websurfx-edge-git
```

--------------------------------

### Start Redis Server

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Optionally, start a Redis server on port 8082. This is required if the application was built with Redis cache or Hybrid cache features.

```shell
redis-server --port 8082 &
```

--------------------------------

### Configure Websurfx NixOS Service

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Example NixOS configuration to enable and manage the Websurfx service. This includes options for enabling the service, opening firewall ports, and specifying settings.

```nix
services.websurfx = {
  # Whether to enable the websurfx service
  enable = true;
  # Whether to open the used port in the firewall
  openFirewall = true;
  # You can specify the configuration settings here
  settings = { };
};
```

--------------------------------

### Deploy Websurfx with Docker Compose

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Command to start the Websurfx services defined in the docker-compose.yml file in detached mode. Ensure the docker-compose.yml and configuration files are correctly set up before running.

```shell
docker compose up -d
```

--------------------------------

### Install Websurfx Stable from AUR

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Use paru to install the stable version of Websurfx from the Arch User Repository. This is similar to the edge version but uses a different package name.

```shell
paru -S websurfx-git
```

--------------------------------

### Checkout Rolling Branch for Docker Deployment

Source: https://github.com/neon-mmd/websurfx/wiki/installation

Clone the repository and checkout the rolling branch, as part of the setup for deploying the unstable/edge/rolling version of Websurfx with Docker.

```bash
git clone https://github.com/neon-mmd/websurfx.git
cd websurfx
git checkout rolling
```

--------------------------------

### Docker Compose Configuration for Websurfx

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

This YAML file configures the Docker Compose setup for Websurfx, specifying the image to use and port mappings. It includes commented-out options for different image variants and Redis integration.

```yaml
---
version: '3.9'
services:
  app:
    # Comment the line below if you don't want to use the `hybrid/latest` image.
    image: neonmmd/websurfx:latest
    # Uncomment the line below if you want to use the `no cache` image.
    # image: neonmmd/websurfx:nocache
    # Uncomment the line below if you want to use the `memory` image.
    # image: neonmmd/websurfx:memory
    # Uncomment the line below if you want to use the `redis` image.
    # image: neonmmd/websurfx:redis
    ports:
      - 8080:8080
    # Uncomment the following lines if you are using the `hybrid/latest` or `redis` image.
    # depends_on:
    #   - redis
    # links:
    #   - redis
    volumes:
      - ./websurfx/:/etc/xdg/websurfx/
  # Uncomment the following lines if you are using the `hybrid/latest` or `redis` image.
  # redis:
  #   image: redis:latest

```

--------------------------------

### Set Up Pre-commit Checks

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Run this command after cloning the repository to automatically set up all pre-commit checks for the project.

```shell
cargo test
```

--------------------------------

### Build with Memory Cache (Default)

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Build the search engine with the default In-Memory caching feature. No additional feature flags are required.

```shell
cargo build -r
```

--------------------------------

### Launch Gitpod Environment

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Navigates to a Gitpod URL to launch the development environment directly from your fork of the Websurfx repository. Assumes VS Code IDE/Editor.

```text
https://gitpod.io/#https://github.com/<your_github_username>/websurfx
```

--------------------------------

### Clone Project and Enter Nix Dev Shell

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Clone your fork of the project and navigate into the repository directory. Then, use this command to enter the NixOS development shell, which sets up essential development tools.

```shell
git clone https://github.com/<your_github_username>/websurfx.git
cd websurfx
```

```shell
nix develop
```

--------------------------------

### Deploy Websurfx with Docker Compose

Source: https://github.com/neon-mmd/websurfx/wiki/installation

Build and launch the Websurfx application using Docker Compose for deployment.

```bash
docker compose up -d --build
```

--------------------------------

### Clone Repository for Docker Deployment

Source: https://github.com/neon-mmd/websurfx/wiki/installation

Clone the Websurfx repository, which is the initial step for Docker deployment.

```bash
git clone https://github.com/neon-mmd/websurfx.git
cd websurfx
```

--------------------------------

### Run Websurfx with Redis Cache

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Builds and runs the search engine specifically with the Redis caching feature. Requires Redis server to be running.

```shell
cargo watch -q -x "run --no-default-features --features redis-cache" -w .
```

--------------------------------

### Download Websurfx Configuration

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Download the default configuration file for Websurfx to the specified directory. This is used for customizing settings when running from Nix.

```shell
mkdir -p ~/.config/websurfx
wget https://raw.githubusercontent.com/neon-mmd/websurfx/refs/heads/rolling/websurfx/config.lua -O ~/.config/websurfx/config.lua
```

--------------------------------

### Run Websurfx with Hybrid Cache

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Builds and runs the app with the Hybrid caching feature, which utilizes Redis. Ensure Redis server is running separately.

```shell
cargo watch -q -x "run --features redis-cache" -w .
```

--------------------------------

### Clone Websurfx Repository

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Clone your fork of the Websurfx project and navigate into the directory. This is the initial step before setting up pre-commit checks.

```shell
git clone https://github.com/<your_github_username>/websurfx.git
cd websurfx
```

--------------------------------

### Configure Websurfx Settings

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Edit the `config.lua` file to set essential parameters like binding IP, Redis connection URL, and other server/search configurations.

```lua
-- ### General ###
logging = true -- an option to enable or disable logs.
debug = false  -- an option to enable or disable debug mode.
threads = 10   -- the amount of threads that the app will use to run (the value should be greater than 0).

-- ### Server ###
port = "8080"            -- port on which server should be launched
binding_ip = "127.0.0.1" --ip address on the which server should be launched.
production_use = false   -- whether to use production mode or not (in other words this option should be used if it is to be used to host it on the server to provide a service to a large number of users (more than one))
-- if production_use is set to true
-- There will be a random delay before sending the request to the search engines, this is to prevent DDoSing the upstream search engines from a large number of simultaneous requests.
request_timeout = 30      -- timeout for the search requests sent to the upstream search engines to be fetched (value in seconds).
rate_limiter = {
    number_of_requests = 20, -- The number of request that are allowed within a provided time limit.
    time_limit = 3,       -- The time limit in which the quantity of requests that should be accepted.
}

-- ### Search ###
-- Filter results based on different levels. The levels provided are:
-- {{ 
-- 0 - None
-- 1 - Low
-- 2 - Moderate
-- 3 - High
-- 4 - Aggressive
-- }}
safe_search = 2

-- ### Website ###
-- The different colorschemes provided are:
-- {{ 
-- catppuccin-mocha
-- dark-chocolate
-- dracula
-- gruvbox-dark
-- monokai
-- nord
-- oceanic-next
-- one-dark
-- solarized-dark
-- solarized-light
-- tokyo-night
-- tomorrow-night
-- }}
colorscheme = "catppuccin-mocha" -- the colorscheme name which should be used for the website theme
theme = "simple"                 -- the theme name which should be used for the website

-- ### Caching ###
redis_url = "redis://127.0.0.1:8082" -- redis connection url address on which the client should connect on.
cache_expiry_time = 600              -- This option takes the expiry time of the search results (value in seconds and the value should be greater than or equal to 60 seconds).
-- ### Search Engines ###
upstream_search_engines = {
    DuckDuckGo = true,
    Searx = false,
    Brave = false,
    Startpage = false,
    LibreX = false,
} -- select the upstream search engines from which the results should be fetched.
```

--------------------------------

### Build the Project with Cargo

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Compiles the project. The first build caches dependencies, making subsequent builds faster.

```shell
cargo build
```

--------------------------------

### Build with Hybrid Cache

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Build the search engine with the Hybrid caching feature enabled. This command utilizes the 'redis-cache' feature flag.

```shell
cargo build -r --features redis-cache
```

--------------------------------

### Run Websurfx from Nix Flake (Stable)

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Build and run the stable version of Websurfx using Nix. This command specifies the 'stable' branch of the GitHub repository.

```shell
nix run github:neon-mmd/websurfx/stable
```

--------------------------------

### Build with Redis Cache

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Build the search engine with the Redis cache feature. This command disables default features and enables the 'redis-cache' feature.

```shell
cargo build -r --no-default-features --features redis-cache
```

--------------------------------

### Run Websurfx with No Cache

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Builds and runs the search engine without any default caching features enabled.

```shell
cargo watch -q -x "run --no-default-features" -w .
```

--------------------------------

### Build with No Cache

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Build the search engine with caching disabled. This is achieved by using the '--no-default-features' flag.

```shell
cargo build -r --no-default-features
```

--------------------------------

### Run Websurfx from Nix Flake (Rolling/Edge)

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Build and run the rolling/edge version of Websurfx directly using Nix. This command fetches the latest code from the GitHub repository.

```shell
nix run github:neon-mmd/websurfx
```

--------------------------------

### Run Websurfx with In-Memory Cache

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Compiles and runs the app with the default In-Memory caching feature enabled. Hot reload is active.

```shell
cargo watch -q -x "run" -w "."
```

--------------------------------

### Backend Source Structure

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Details the backend source code structure located at './src/'.

```text
./src/
├── lib.rs                        # A library file for the rust project.

```

--------------------------------

### Root Directory Structure

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Lists the files and directories at the root of the websurfx codebase.

```text
./
├── .dockerignore                # Docker ignore file to ignore stuff being included in the file docker image.
├── .gitignore                   # Git ignore file to ignore stuff from being
├── Cargo.lock                   # Auto-generated list of current packages and version numbers.
├── Cargo.toml                   # Project meta-data and dependencies.
├── Dockerfile                   # The blueprint for building the Docker container.
├── LICENSE                      # License for use.
├── README.md                    # Readme, basic info for getting started.
├── dev.Dockerfile               # The blueprint for building the Docker container for development purposes.
├── dev.docker-compose.yml       # A Docker run command for development environments.
├── docker-compose.yml           # A Docker run command.
├── flake.lock                   # NixOS auto-generated flake configuration.
├── flake.nix                    # Nix flake package configuration.
├── docs                         # Markdown documentation
├── public                       # Project front-end source code
├── src                          # Project back-end source code
└── tests                        # Project integration tests for the back-end source code.
└── websurfx                     # Project folder containing config files for the app.

```

--------------------------------

### Simple Theme - Search Results Styles

Source: https://github.com/neon-mmd/websurfx/wiki/theming

Styles for displaying search results, including the overall results container, individual result items, and associated metadata like links and descriptions.

```css
.results {
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}

.results .search_bar {
  margin: 1rem 0;
}

.results_aggregated {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 2rem 0;
}

.results_aggregated .result {
  display: flex;
  flex-direction: column;
  margin-top: 1rem;
}

.results_aggregated .result h1 a {
  font-size: 1.5rem;
  color: var(--2);
  text-decoration: none;
  letter-spacing: 0.1rem;
}

.results_aggregated .result h1 a:hover {
  color: var(--5);
}

.results_aggregated .result h1 a:visited {
  color: var(--bg);
}

.results_aggregated .result small {
  color: var(--3);
  font-size: 1.1rem;
  word-wrap: break-word;
  line-break: anywhere;
}

.results_aggregated .result p {
  color: var(--fg);
  font-size: 1.2rem;
  margin-top: 0.3rem;
  word-wrap: break-word;
  line-break: anywhere;
}

.results_aggregated .result .upstream_engines {
  text-align: right;
  font-size: 1.2rem;
  padding: 1rem;
  color: var(--5);
}
```

--------------------------------

### Frontend Source Directory Structure

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Details the files and directories within the frontend source code located at './public/'.

```text
./public/
├── robots.txt                    # Robots file for the Website.
├── images                        # Images for the Website.
└── static                        # The directory containing all the UI handlers.
    ├── cookies.js                # Handles the loading of saved cookies.
    ├── error_box.js              # Handles the toggling functionality of the error box on the search page.
    ├── index.js                  # Functions to handle the search functionality of the search bar.
    ├── pagination.js             # Functions to handle the navigation between the previous and next page in the search page.
    ├── search_area_options.js    # Changes the search options under the search bar in the search page according to the safe search level set using the URL safesearch parameter.
    ├── settings.js               # Handles the settings and saving of all the settings page options as a cookie.
    ├── colorschemes              # A folder containing all the popular colorscheme files as CSS files.
    └── themes                    # A folder containing all the popular theme files as CSS files.

```

--------------------------------

### Checkout Stable Branch

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

For the stable version, checkout the 'stable' branch after cloning the repository.

```bash
git clone https://github.com/neon-mmd/websurfx.git
cd websurfx
git checkout stable
```

--------------------------------

### Simple Theme - Header and Footer Styles

Source: https://github.com/neon-mmd/websurfx/wiki/theming

Styles for the header and footer sections, including navigation lists, links, and text elements, ensuring consistent branding and layout.

```css
header {
  background: var(--bg);
  width: 100%;
  display: flex;
  justify-content: right;
  align-items: center;
  padding: 1rem;
}

header ul,
footer ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 1.5rem;
  gap: 2rem;
}

header ul li a,
footer ul li a,
header ul li a:visited,
footer ul li a:visited {
  text-decoration: none;
  color: var(--2);
  text-transform: capitalize;
  letter-spacing: 0.1rem;
}

header ul li a {
  font-weight: 600;
}

header ul li a:hover,
footer ul li a:hover {
  color: var(--5);
}

footer div span {
  font-size: 1.5rem;
  color: var(--4);
}

footer div {
  display: flex;
  gap: 1rem;
}

footer {
  background: var(--bg);
  width: 100%;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
```

--------------------------------

### Check Code Formatting

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Ensures the code adheres to the project's formatting standards.

```shell
cargo fmt -- --check
```

--------------------------------

### Set PKG_ENV Environment Variable

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Configures the logging level for the application. Accepts 'dev' or 'prod'.

```shell
export PKG_ENV=dev
```

--------------------------------

### Lint Code with Clippy

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Analyzes the code for style consistency and potential issues.

```shell
cargo clippy
```

--------------------------------

### Rust Build Warning: html5ever

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

This warning indicates that the html5ever package contains code incompatible with future Rust versions. It is not an error and does not affect current application security or performance.

```shell
warning: the following packages contain code that will be rejected by a future version of Rust: html5ever v0.23.0
note: to see what the problems were, use the option `--future-incompat-report`, or run `cargo report future-incompatibilities --id 2`
```

--------------------------------

### Simple Theme - Index Page Styles

Source: https://github.com/neon-mmd/websurfx/wiki/theming

Styles for the main search container on the index page, including layout and spacing for search elements.

```css
.search-container {
  display: flex;
  flex-direction: column;
  gap: 5rem;
  justify-content: center;
  align-items: center;
}

.search-container div {
  display: flex;
}
```

--------------------------------

### Simple Theme - Search Box and Button Styles

Source: https://github.com/neon-mmd/websurfx/wiki/theming

Defines the appearance and behavior of the search input field and the search button, including padding, sizing, borders, and hover/active states.

```css
.search_bar {
  display: flex;
}

.search_bar input {
  padding: 1rem;
  width: 50rem;
  height: 3rem;
  outline: none;
  border: none;
  box-shadow: rgba(0, 0, 0, 1);
  background: var(--fg);
}

.search_bar button {
  padding: 1rem;
  border-radius: 0;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  outline: none;
  border: none;
  gap: 0;
  background: var(--bg);
  color: var(--3);
  font-weight: 600;
  letter-spacing: 0.1rem;
}

.search_bar button:active,
.search_bar button:hover {
  filter: brightness(1.2);
}
```

--------------------------------

### General Theme Styles

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/theming.md

Defines general styles for the website, including font loading, box-sizing, base font size, and body layout. This sets up the fundamental appearance and responsiveness of the site.

```css
@font-face {
  font-family: Rubik;
  src: url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&display=swap');
  fallback: sans-serif;
}

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  height: 100vh;
  font-family: Rubik, sans-serif;
  background-color: var(--background-color);
}

/* enforce font for buttons */
button {
  font-family: Rubik, sans-serif;
}
```

--------------------------------

### Set PKG_ENV for Production Build

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/installation.md

Set the PKG_ENV environment variable to 'prod' for optimized production builds when compiling Websurfx from source. This applies special optimizations to reduce file size and improve load speed.

```bash
export PKG_ENV="prod"
```

--------------------------------

### Header and Footer Styles

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/theming.md

Styles for the main header and footer of the application. Includes navigation links and branding elements.

```css
header {
  width: 100%;
  background: var(--background-color);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 3rem;
}

footer {
  width: 100%;
  background: var(--background-color);
  display: flex;
  align-items: center;
  padding: 1.7rem 1.7rem 4rem;
  gap: 1.8rem;
  flex-direction: column;
  justify-content: center;
}

header h1 a {
  text-transform: capitalize;
  text-decoration: none;
  color: var(--foreground-color);
  letter-spacing: 0.1rem;
}

header ul,
footer ul {
  list-style: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  font-size: 1.5rem;
  gap: 2rem;
}

header ul li a,
footer ul li a,
header ul li a:visited,
footer ul li a:visited {
  text-decoration: none;
  color: var(--color-two);
  text-transform: capitalize;
  letter-spacing: 0.1rem;
}

header ul li a {
  font-weight: 600;
}

header ul li a:hover,
footer ul li a:hover {
  color: var(--color-five);
}

footer div span {
  font-size: 1.5rem;
  color: var(--color-four);
}

footer div {
  display: flex;
  gap: 1rem;
}
```

--------------------------------

### Settings Page Container Styles

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/theming.md

Styles for the main container, sidebar, and content area of the settings page. Includes styling for buttons, headings, and input elements.

```css
.settings_container {
  display: flex;
  justify-content: space-around;
  width: 80dvw;
  margin: 5rem 0;
}

.settings h1 {
  color: var(--color-two);
  font-size: 2.5rem;
}

.settings > h1 {
  margin-bottom: 4rem;
  margin-left: 2rem;
}

.settings hr {
  border-color: var(--color-three);
  margin: 0.3rem 0 1rem;
}

.settings > hr {
  margin-left: 2rem;
}

.settings_container .sidebar {
  width: 30%;
  cursor: pointer;
  font-size: 2rem;
  display: flex;
  flex-direction: column;
  margin-right: 0.5rem;
  margin-left: -0.7rem;
  padding: 0.7rem;
  border-radius: 5px;
  margin-bottom: 0.5rem;
  color: var(--foreground-color);
  text-transform: capitalize;
  gap: 1.5rem;
}

.settings_container .sidebar .btn {
  padding: 2rem;
  border-radius: 0.5rem;
  outline-offset: 3px;
  outline: 2px solid transparent;
}

.settings_container .sidebar .btn:active {
  outline: 2px solid var(--color-two);
}

.settings_container .sidebar .btn:not(.active):hover {
  color: var(--color-two);
}

.settings_container .sidebar .btn.active {
  background-color: var(--color-two);
  color: var(--background-color);
}

.settings_container .main_container {
  width: 70%;
  border-left: 1.5px solid var(--color-three);
  padding-left: 3rem;
  border: none;
}

.settings_container .tab {
  display: none;
}

.settings_container .tab.active {
  display: flex;
  gap: 1.2rem;
  flex-direction: column;
  justify-content: space-around;
}

.settings_container button {
  margin-top: 1rem;
  padding: 1rem 2rem;
  font-size: 1.5rem;
  background: var(--color-three);
  color: var(--background-color);
  border-radius: 0.5rem;
  border: 2px solid transparent;
  font-weight: bold;
  transition: all 0.1s ease-out;
  cursor: pointer;
  box-shadow: 5px 5px;
  outline: none;
}

.settings_container button:active {
  box-shadow: none;
  translate: 5px 5px;
}

.settings_container .main_container .message {
  font-size: 1.5rem;
  color: var(--foreground-color);
}

.settings_container .tab h3 {
  font-size: 2rem;
  font-weight: bold;
  color: var(--color-four);
  margin-top: 1.5rem;
  text-transform: capitalize;
}

.settings_container .tab .description {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--foreground-color);
}

.settings_container .user_interface select,
.settings_container .general select {
  margin: 0.7rem 0;
  width: 20rem;
  background-color: var(--color-one);
  color: var(--foreground-color);
  padding: 1rem 2rem;
  border-radius: 0.5rem;
  outline: none;
  border: none;
  text-transform: capitalize;
}

.settings_container .user_interface option:hover,
.settings_container .general option:hover {
  background-color: var(--color-one);
}

.settings_container .engines .engine_selection {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1rem 0;
  margin-bottom: 2rem;
  gap: 2rem;
}

.settings_container .engines .toggle_btn {
  color: var(--foreground-color);
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  border-radius: 100px;
  gap: 1.5rem;
  letter-spacing: 1px;
}

.settings_container .engines hr {
  margin: 0;
}

.settings_container .cookies input {
  margin: 1rem 0;
}
```

--------------------------------

### Frontend Maud HTML Framework Source Structure

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/developing.md

Outlines the structure of the Maud HTML framework source code found in './src/templates/'.

```text
./src/templates/
├── mod.rs                        # A module file for the rust project.
├── partials                      # A folder containing the code for partials for the views.
│   ├── bar.rs                    # Provides partial code for the search bar.
│   ├── footer.rs                 # Provides partial code for the footer section.
│   ├── header.rs                 # Provides partial code for the header section.
│   ├── mod.rs                    # A module file for the rust project.
│   ├── navbar.rs                 # Provides partial code for the navbar inside the header section.
│   ├── search_bar.rs             # Provides partial code for the search bar present in the search page.
│   └── settings_tabs             # A folder containing all the partials for the settings page tabs.
│       ├── cookies.rs            # Provides partial code for the cookies tab.
│       ├── engines.rs            # Provides partial code for the engines tab.
│       ├── general.rs            # Provides partial code for the general tab.
│       ├── mod.rs                # A module file for the rust project.
│       └── user_interface.rs     # Provides partial code for the user interface tab.
└── views                         # A folder containing the code for the views.
    ├── about.rs                  # Provides code for the about page view.
    ├── index.rs                  # Provides code for the homepage view.
    ├── mod.rs                    # A module file for the rust project.
    ├── not_found.rs              # Provides code for the 404 page view.
    ├── search.rs                 # Provides code for the search page view.
    └── settings.rs               # Provides code for the settings page view.

```

--------------------------------

### 404 Page Styles

Source: https://github.com/neon-mmd/websurfx/wiki/theming

CSS for styling the container, image, and content of the 404 error page. Includes styles for headings, paragraphs, and links.

```css
.error_container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  gap: 5rem;
}

.error_container img {
  width: 30%;
}

.error_content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.error_content h1,
.error_content h2 {
  letter-spacing: 0.1rem;
}

.error_content h1 {
  font-size: 3rem;
}

.error_content h2 {
  font-size: 2rem;
}

.error_content p {
  font-size: 1.2rem;
}

.error_content p a,
.error_content p a:visited {
  color: var(--2);
  text-decoration: none;
}

.error_content p a:hover {
  color: var(--5);
}
```

--------------------------------

### Search Bar and Button Styles

Source: https://github.com/neon-mmd/websurfx/blob/rolling/docs/theming.md

Styles for the search bar input field and the search button. Includes focus states and hover effects.

```css
.search_bar {
  display: flex;
  gap: 10px;
  align-items: center;
}

.search_bar input {
  border-radius: 6px;
  padding: 2.6rem 2.2rem;
  width: 50rem;
  height: 3rem;
  outline: none;
  border: none;
  box-shadow: rgb(0 0 0 / 1);
  background-color: var(--color-one);
  color: var(--foreground-color);
  outline-offset: 3px;
  font-size: 1.6rem;
}

.search_bar input:focus {
  outline: 2px solid var(--foreground-color);
}

.search_bar input::placeholder {
  color: var(--foreground-color);
  opacity: 1;
}

.search_bar button {
  padding: 2.6rem 3.2rem;
  border-radius: 6px;
  height: 3rem;
  display: flex;
  justify-content: center;
  align-items: center;
  outline-offset: 3px;
  outline: 2px solid transparent;
  border: none;
  transition: 0.1s;
  gap: 0;
  background-color: var(--color-six);
  color: var(--background-color);
  font-weight: 600;
  letter-spacing: 0.1rem;
}

.search_bar button:active {
  outline: 2px solid var(--color-three);
}

.search_bar button:active,
.search_bar button:hover {
  filter: brightness(1.2);
}

.search_area .search_options {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.search_area .search_options select {
  margin: 0.7rem 0;
  width: 20rem;
  background-color: var(--color-one);
  color: var(--foreground-color);
  padding: 1.2rem 2rem;
  border-radius: 0.5rem;
  outline-offset: 3px;
  outline: 2px solid transparent;
  border: none;
  text-transform: capitalize;
}

.search_area .search_options select:active,
.search_area .search_options select:hover {
  outline: 2px solid var(--color-three);
}

.search_area .search_options option:hover {
  background-color: var(--color-one);
}

.result_not_found {
  display: flex;
  flex-direction: column;
  font-size: 1.5rem;
  color: var(--foreground-color);
}

.result_not_found p {
  margin: 1rem 0;
}

.result_not_found ul {
  margin: 1rem 0;
}

.result_not_found img {
  width: 40rem;
}

/* styles for the error box */
.error_box .error_box_toggle_button {
  background: var(--foreground-color);
}

.error_box .dropdown_error_box {
  position: absolute;
  display: none;
  flex-direction: column;
  background: var(--background-color);
  border-radius: 0;
  margin-left: 2rem;
  min-height: 20rem;
  min-width: 22rem;
}

.error_box .dropdown_error_box.show {
  display: flex;
}

.error_box .dropdown_error_box .error_item,
.error_box .dropdown_error_box .no_errors {
  display: flex;
  align-items: center;
  color: var(--foreground-color);
  letter-spacing: 0.1rem;
  padding: 1rem;
  font-size: 1.2rem;
}

.error_box .dropdown_error_box .error_item {
  justify-content: space-between;
}

.error_box .dropdown_error_box .no_errors {
  min-height: 18rem;
  justify-content: center;
}

.error_box .dropdown_error_box .error_item:hover {
  box-shadow: inset 0 0 100px 100px rgb(255 255 255 / 0.1);
}

.error_box .error_item .severity_color {
  width: 1.2rem;
  height: 1.2rem;
}

.results .result_disallowed,
.results .result_filtered,
.results .result_engine_not_selected {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10rem;
  font-size: 2rem;
  color: var(--foreground-color);
  margin: 0 7rem;
}

.results .result_disallowed .user_query,
.results .result_filtered .user_query,
.results .result_engine_not_selected .user_query {
  color: var(--background-color);
  font-weight: 300;
}

.results .result_disallowed img,
.results .result_filtered img,
.results .result_engine_not_selected img {
  width: 30rem;
}

.results .result_disallowed div,
.results .result_filtered div,
.results .result_engine_not_selected div {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  line-break: strict;
}
```

--------------------------------

### Search Page Navigation Button Styles

Source: https://github.com/neon-mmd/websurfx/wiki/theming

CSS for styling the previous and next buttons used for pagination on the search results page. Includes basic layout and interactive styles.

```css
.page_navigation {
  padding: 0 0 2rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page_navigation button {
  background: var(--bg);
  color: var(--fg);
  padding: 1rem;
  border-radius: 0.5rem;
  outline: none;
  border: none;
}

.page_navigation button:active {
  filter: brightness(1.2);
}
```