Bump vite from 6.2.5 to 6.2.6 in /client/simple

Bumps [vite](https://github.com/vitejs/vite/tree/HEAD/packages/vite) from 6.2.5 to 6.2.6.
- [Release notes](https://github.com/vitejs/vite/releases)
- [Changelog](https://github.com/vitejs/vite/blob/v6.2.6/packages/vite/CHANGELOG.md)
- [Commits](https://github.com/vitejs/vite/commits/v6.2.6/packages/vite)

---
updated-dependencies:
- dependency-name: vite
  dependency-version: 6.2.6
  dependency-type: direct:development
...

Signed-off-by: dependabot[bot] <support@github.com>

.devcontainer/devcontainer.json

@@ -3,7 +3,8 @@
     "dockerfile": "Dockerfile"
   },
   "features": {
-    "ghcr.io/devcontainers/features/github-cli": {}
+    "ghcr.io/devcontainers/features/github-cli": {},
+    "ghcr.io/devcontainers/features/docker-in-docker": {}
   },
   "customizations": {
     "vscode": {

.editorconfig

@@ -16,11 +16,17 @@ max_line_length = 119
 [*.html]
 indent_size = 4
 
+[*.css]
+indent_size = 2
+
+[*.less]
+indent_size = 2
+
 [*.js]
 indent_size = 2
 
 [*.json]
-indent_size = 4
+indent_size = 2
 insert_final_newline = ignore
 
 # Minified JavaScript files shouldn't be changed

.github/dependabot.yml

@@ -12,11 +12,11 @@ updates:
       prefix: "[upd] pypi:"
 
   - package-ecosystem: "npm"
-    directory: "/searx/static/themes/simple"
+    directory: "/client/simple"
     schedule:
       interval: "weekly"
       day: "friday"
     open-pull-requests-limit: 5
     target-branch: "master"
     commit-message:
-      prefix: "[upd] npm:"
+      prefix: "[upd] web-client (simple):"

.github/workflows/checker.yml

@@ -7,7 +7,7 @@ on:  # yamllint disable-line rule:truthy
 jobs:
   checker:
     name: Checker
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/integration.yml

@@ -12,10 +12,10 @@ permissions:
 jobs:
   python:
     name: Python ${{ matrix.python-version }}
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     strategy:
       matrix:
-        os: [ubuntu-20.04]
+        os: [ubuntu-24.04]
         python-version: ["3.9", "3.10", "3.11", "3.12", "3.13"]
     steps:
       - name: Checkout
@@ -23,32 +23,17 @@ jobs:
       - name: Install Ubuntu packages
         run: |
           sudo ./utils/searxng.sh install packages
-          sudo apt install firefox
       - name: Set up Python
         uses: actions/setup-python@v5
         with:
           python-version: ${{ matrix.python-version }}
           architecture: 'x64'
-      - name: Cache Python dependencies
-        id: cache-python
-        uses: actions/cache@v4
-        with:
-          path: |
-            ./local
-            ./.nvm
-            ./node_modules
-          key: python-${{ matrix.os }}-${{ matrix.python-version }}-${{ hashFiles('requirements*.txt', 'setup.py') }}
-      - name: Install Python dependencies
-        if: steps.cache-python.outputs.cache-hit != 'true'
-        run: |
-          make V=1 install
-          make V=1 gecko.driver
       - name: Run tests
         run: make V=1 ci.test
 
   themes:
     name: Themes
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4
@@ -59,23 +44,12 @@ jobs:
         with:
           python-version: '3.12'
           architecture: 'x64'
-      - name: Cache Python dependencies
-        id: cache-python
-        uses: actions/cache@v4
-        with:
-          path: |
-            ./local
-            ./.nvm
-            ./node_modules
-          key: python-ubuntu-20.04-3.12-${{ hashFiles('requirements*.txt', 'setup.py','.nvmrc', 'package.json') }}
-      - name: Install node dependencies
-        run: make V=1 node.env
       - name: Build themes
-        run: make V=1 themes.all
+        run: make themes.all
 
   documentation:
     name: Documentation
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     permissions:
       contents: write  # for JamesIves/github-pages-deploy-action to push changes in repo
     steps:
@@ -99,7 +73,7 @@ jobs:
             ./local
             ./.nvm
             ./node_modules
-          key: python-ubuntu-20.04-3.12-${{ hashFiles('requirements*.txt', 'setup.py','.nvmrc', 'package.json') }}
+          key: python-ubuntu-24.04-3.12-${{ hashFiles('requirements*.txt', 'setup.py','.nvmrc', 'package.json') }}
       - name: Build documentation
         run: |
           make V=1 docs.clean docs.html
@@ -116,7 +90,7 @@ jobs:
 
   babel:
     name: Update translations branch
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     if: ${{ github.repository_owner == 'searxng' && github.ref == 'refs/heads/master' }}
     needs:
       - python
@@ -166,7 +140,7 @@ jobs:
       - documentation
     env:
       DOCKERHUB_USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
         if: env.DOCKERHUB_USERNAME != null

.github/workflows/security.yml

@@ -7,7 +7,7 @@ on:  # yamllint disable-line rule:truthy
 jobs:
   dockers:
     name: Trivy ${{ matrix.image }}
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     steps:
       - name: Checkout
         uses: actions/checkout@v4

.github/workflows/translations-update.yml

@@ -7,7 +7,7 @@ on:  # yamllint disable-line rule:truthy
 jobs:
   babel:
     name: "create PR for additions from weblate"
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-24.04
     if: ${{ github.repository_owner == 'searxng' && github.ref == 'refs/heads/master' }}
     steps:
       - name: Checkout
@@ -28,7 +28,7 @@ jobs:
             ./local
             ./.nvm
             ./node_modules
-          key: python-ubuntu-20.04-3.12-${{ hashFiles('requirements*.txt', 'setup.py','.nvmrc', 'package.json') }}
+          key: python-ubuntu-24.04-3.12-${{ hashFiles('requirements*.txt', 'setup.py','.nvmrc', 'package.json') }}
       - name: weblate & git setup
         env:
           WEBLATE_CONFIG: ${{ secrets.WEBLATE_CONFIG }}

.nvmrc

@@ -1 +1 @@
-v20.10
+v23.5

.tool-versions

@@ -1,2 +1,4 @@
-python 3.12.0
-shellcheck 0.9.0
+nodejs 23.5.0
+python 3.13.1
+shellcheck 0.10.0
+sqlite 3.47.2

AUTHORS.rst

@@ -173,4 +173,7 @@ features or generally made searx better:
 - Austin Olacsi `<https://github.com/Austin-Olacsi>`
 - @micsthepick
 - Daniel Kukula `<https://github.com/dkuku>`
-- Patrick Evans `https://github.com/holysoles`
+- Patrick Evans `https://github.com/holysoles`
+- Daniel Mowitz `<https://daniel.mowitz.rocks>`
+- `Bearz314 <https://github.com/bearz314>`_
+- Tommaso Colella `<https://github.com/gioleppe>`

Dockerfile

@@ -12,6 +12,7 @@ RUN addgroup -g ${SEARXNG_GID} searxng && \
 ENV INSTANCE_NAME=searxng \
     AUTOCOMPLETE= \
     BASE_URL= \
+    BIND_ADDRESS=[::]:8080 \
     MORTY_KEY= \
     MORTY_URL= \
     SEARXNG_SETTINGS_PATH=/etc/searxng/settings.yml \
@@ -62,6 +63,8 @@ RUN su searxng -c "/usr/bin/python3 -m compileall -q searx" \
     -o -name '*.svg' -o -name '*.ttf' -o -name '*.eot' \) \
     -type f -exec gzip -9 -k {} \+ -exec brotli --best {} \+
 
+HEALTHCHECK CMD wget --quiet --tries=1 --spider http://localhost:8080/healthz || exit 1
+
 # Keep these arguments at the end to prevent redundant layer rebuilds
 ARG LABEL_DATE=
 ARG GIT_URL=unknown

Makefile

@@ -50,8 +50,8 @@ search.checker.%: install
 	$(Q)./manage pyenv.cmd searxng-checker -v "$(subst _, ,$(patsubst search.checker.%,%,$@))"
 
 PHONY += test ci.test test.shell
-ci.test: test.yamllint test.black test.pyright test.pylint test.unit test.robot test.rst test.pybabel
-test:    test.yamllint test.black test.pyright test.pylint test.unit test.robot test.rst test.shell
+ci.test: test.yamllint test.black test.types.ci  test.pylint test.unit test.robot test.rst test.shell test.pybabel
+test:    test.yamllint test.black test.types.dev test.pylint test.unit test.robot test.rst test.shell
 test.shell:
 	$(Q)shellcheck -x -s dash \
 		dockerfiles/docker-entrypoint.sh
@@ -75,7 +75,7 @@ test.shell:
 # wrap ./manage script
 
 MANAGE += weblate.translations.commit weblate.push.translations
-MANAGE += data.all data.traits data.useragents data.locales
+MANAGE += data.all data.traits data.useragents data.locales data.currencies
 MANAGE += docs.html docs.live docs.gh-pages docs.prebuild docs.clean
 MANAGE += docker.build docker.push docker.buildx
 MANAGE += gecko.driver
@@ -83,8 +83,8 @@ MANAGE += node.env node.env.dev node.clean
 MANAGE += py.build py.clean
 MANAGE += pyenv pyenv.install pyenv.uninstall
 MANAGE += format.python
-MANAGE += test.yamllint test.pylint test.pyright test.black test.pybabel test.unit test.coverage test.robot test.rst test.clean
-MANAGE += themes.all themes.simple themes.simple.test pygments.less
+MANAGE += test.yamllint test.pylint test.black test.pybabel test.unit test.coverage test.robot test.rst test.clean test.themes test.types.dev test.types.ci
+MANAGE += themes.all themes.fix themes.test
 MANAGE += static.build.commit static.build.drop static.build.restore
 MANAGE += nvm.install nvm.clean nvm.status nvm.nodejs
 

README.rst

@@ -2,7 +2,7 @@
 
 ----
 
-.. figure:: https://raw.githubusercontent.com/searxng/searxng/master/src/brand/searxng.svg
+.. figure:: https://raw.githubusercontent.com/searxng/searxng/master/client/simple/src/brand/searxng.svg
    :target: https://docs.searxng.org/
    :alt: SearXNG
    :width: 100%
@@ -34,7 +34,7 @@ A user_, admin_ and developer_ handbook is available on the homepage_.
 .. _homepage: https://docs.searxng.org/
 .. _metasearch engine: https://en.wikipedia.org/wiki/Metasearch_engine
 
-.. |SearXNG logo| image:: https://raw.githubusercontent.com/searxng/searxng/master/src/brand/searxng-wordmark.svg
+.. |SearXNG logo| image:: https://raw.githubusercontent.com/searxng/searxng/master/client/simple/src/brand/searxng-wordmark.svg
    :target: https://docs.searxng.org/
    :width: 5%
 

client/simple/.gitignore

@@ -0,0 +1,3 @@
+dist
+node_modules
+.stylelintcache

client/simple/.stylelintrc.json

@@ -0,0 +1,17 @@
+{
+  "formatter": "unix",
+  "plugins": [ "stylelint-prettier" ],
+  "extends": [ "stylelint-config-standard-less" ],
+  "rules": {
+    "prettier/prettier": true,
+    "declaration-empty-line-before": null,
+    "no-invalid-position-at-import-rule": null,
+    "property-no-vendor-prefix": null,
+    "selector-no-vendor-prefix": null,
+    "selector-attribute-quotes": null,
+    "shorthand-property-no-redundant-values": null,
+    "at-rule-no-vendor-prefix": null,
+    "selector-id-pattern": null,
+    "selector-class-pattern": null
+  }
+}

client/simple/README.rst

@@ -0,0 +1,24 @@
+=====================
+MEMO vite development
+=====================
+
+Local install::
+
+  # in folder ./client/simple/
+  $ npm install
+
+Start development server::
+
+  $ ./manage vite.simple.dev
+
+  # in folder ./client/simple/
+  $ npm exec -- vite
+
+Fix source code::
+
+  # in folder ./client/simple/
+  $ npm run fix
+
+Fix & Build::
+
+  $ ./manage vite.simple.build

client/simple/eslint.config.js

@@ -0,0 +1,34 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  pluginJs.configs.recommended,
+
+  // global "ignores"
+  // https://eslint.org/docs/latest/use/configure/configuration-files#globally-ignoring-files-with-ignores
+  {
+    ignores: ["node_modules/", "dist/"]
+  },
+
+  {
+    files: [
+      "**/*.js",
+    ],
+    linterOptions: {
+      reportUnusedDisableDirectives: "error",
+      // noInlineConfig: true
+    },
+    languageOptions: {
+      sourceType: "module",
+      globals: {
+        ...globals.browser,
+      }
+    },
+    rules: {
+      indent: ["error", 2],
+    },
+  },
+
+];

client/simple/generated/pygments.less

@@ -1,6 +1,6 @@
 /*
    this file is generated automatically by searxng_extra/update/update_pygments.py
-   using pygments version 2.18.0
+   using pygments version 2.19.1
 */
 
 
@@ -13,9 +13,9 @@
   span.linenos.special { color: #000000; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
   .hll { background-color: #ffffcc }
   .c { color: #3D7B7B; font-style: italic } /* Comment */
-  .err { border: 1px solid #FF0000 } /* Error */
+  .err { border: 1px solid #F00 } /* Error */
   .k { color: #008000; font-weight: bold } /* Keyword */
-  .o { color: #666666 } /* Operator */
+  .o { color: #666 } /* Operator */
   .ch { color: #3D7B7B; font-style: italic } /* Comment.Hashbang */
   .cm { color: #3D7B7B; font-style: italic } /* Comment.Multiline */
   .cp { color: #9C6500 } /* Comment.Preproc */
@@ -32,34 +32,34 @@
   .gp { color: #000080; font-weight: bold } /* Generic.Prompt */
   .gs { font-weight: bold } /* Generic.Strong */
   .gu { color: #800080; font-weight: bold } /* Generic.Subheading */
-  .gt { color: #0044DD } /* Generic.Traceback */
+  .gt { color: #04D } /* Generic.Traceback */
   .kc { color: #008000; font-weight: bold } /* Keyword.Constant */
   .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */
   .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */
   .kp { color: #008000 } /* Keyword.Pseudo */
   .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */
   .kt { color: #B00040 } /* Keyword.Type */
-  .m { color: #666666 } /* Literal.Number */
+  .m { color: #666 } /* Literal.Number */
   .s { color: #BA2121 } /* Literal.String */
   .na { color: #687822 } /* Name.Attribute */
   .nb { color: #008000 } /* Name.Builtin */
-  .nc { color: #0000FF; font-weight: bold } /* Name.Class */
-  .no { color: #880000 } /* Name.Constant */
-  .nd { color: #AA22FF } /* Name.Decorator */
+  .nc { color: #00F; font-weight: bold } /* Name.Class */
+  .no { color: #800 } /* Name.Constant */
+  .nd { color: #A2F } /* Name.Decorator */
   .ni { color: #717171; font-weight: bold } /* Name.Entity */
   .ne { color: #CB3F38; font-weight: bold } /* Name.Exception */
-  .nf { color: #0000FF } /* Name.Function */
+  .nf { color: #00F } /* Name.Function */
   .nl { color: #767600 } /* Name.Label */
-  .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */
+  .nn { color: #00F; font-weight: bold } /* Name.Namespace */
   .nt { color: #008000; font-weight: bold } /* Name.Tag */
   .nv { color: #19177C } /* Name.Variable */
-  .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */
-  .w { color: #bbbbbb } /* Text.Whitespace */
-  .mb { color: #666666 } /* Literal.Number.Bin */
-  .mf { color: #666666 } /* Literal.Number.Float */
-  .mh { color: #666666 } /* Literal.Number.Hex */
-  .mi { color: #666666 } /* Literal.Number.Integer */
-  .mo { color: #666666 } /* Literal.Number.Oct */
+  .ow { color: #A2F; font-weight: bold } /* Operator.Word */
+  .w { color: #BBB } /* Text.Whitespace */
+  .mb { color: #666 } /* Literal.Number.Bin */
+  .mf { color: #666 } /* Literal.Number.Float */
+  .mh { color: #666 } /* Literal.Number.Hex */
+  .mi { color: #666 } /* Literal.Number.Integer */
+  .mo { color: #666 } /* Literal.Number.Oct */
   .sa { color: #BA2121 } /* Literal.String.Affix */
   .sb { color: #BA2121 } /* Literal.String.Backtick */
   .sc { color: #BA2121 } /* Literal.String.Char */
@@ -74,12 +74,12 @@
   .s1 { color: #BA2121 } /* Literal.String.Single */
   .ss { color: #19177C } /* Literal.String.Symbol */
   .bp { color: #008000 } /* Name.Builtin.Pseudo */
-  .fm { color: #0000FF } /* Name.Function.Magic */
+  .fm { color: #00F } /* Name.Function.Magic */
   .vc { color: #19177C } /* Name.Variable.Class */
   .vg { color: #19177C } /* Name.Variable.Global */
   .vi { color: #19177C } /* Name.Variable.Instance */
   .vm { color: #19177C } /* Name.Variable.Magic */
-  .il { color: #666666 } /* Literal.Number.Integer.Long */
+  .il { color: #666 } /* Literal.Number.Integer.Long */
 }
 
 .code-highlight-dark(){
@@ -91,33 +91,33 @@
     td.linenos .special { color: #3c4354; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
     span.linenos.special { color: #3c4354; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
     .hll { background-color: #6e7681 }
-    .c { color: #7e8aa1 } /* Comment */
-    .err { color: #f88f7f } /* Error */
-    .esc { color: #d4d2c8 } /* Escape */
-    .g { color: #d4d2c8 } /* Generic */
+    .c { color: #7E8AA1 } /* Comment */
+    .err { color: #F88F7F } /* Error */
+    .esc { color: #D4D2C8 } /* Escape */
+    .g { color: #D4D2C8 } /* Generic */
     .k { color: #FFAD66 } /* Keyword */
     .l { color: #D5FF80 } /* Literal */
-    .n { color: #d4d2c8 } /* Name */
+    .n { color: #D4D2C8 } /* Name */
     .o { color: #FFAD66 } /* Operator */
-    .x { color: #d4d2c8 } /* Other */
-    .p { color: #d4d2c8 } /* Punctuation */
-    .ch { color: #f88f7f; font-style: italic } /* Comment.Hashbang */
-    .cm { color: #7e8aa1 } /* Comment.Multiline */
+    .x { color: #D4D2C8 } /* Other */
+    .p { color: #D4D2C8 } /* Punctuation */
+    .ch { color: #F88F7F; font-style: italic } /* Comment.Hashbang */
+    .cm { color: #7E8AA1 } /* Comment.Multiline */
     .cp { color: #FFAD66; font-weight: bold } /* Comment.Preproc */
-    .cpf { color: #7e8aa1 } /* Comment.PreprocFile */
-    .c1 { color: #7e8aa1 } /* Comment.Single */
-    .cs { color: #7e8aa1; font-style: italic } /* Comment.Special */
-    .gd { color: #f88f7f; background-color: #3d1e20 } /* Generic.Deleted */
-    .ge { color: #d4d2c8; font-style: italic } /* Generic.Emph */
-    .ges { color: #d4d2c8 } /* Generic.EmphStrong */
-    .gr { color: #f88f7f } /* Generic.Error */
-    .gh { color: #d4d2c8 } /* Generic.Heading */
-    .gi { color: #6ad4af; background-color: #19362c } /* Generic.Inserted */
-    .go { color: #7e8aa1 } /* Generic.Output */
-    .gp { color: #d4d2c8 } /* Generic.Prompt */
-    .gs { color: #d4d2c8; font-weight: bold } /* Generic.Strong */
-    .gu { color: #d4d2c8 } /* Generic.Subheading */
-    .gt { color: #f88f7f } /* Generic.Traceback */
+    .cpf { color: #7E8AA1 } /* Comment.PreprocFile */
+    .c1 { color: #7E8AA1 } /* Comment.Single */
+    .cs { color: #7E8AA1; font-style: italic } /* Comment.Special */
+    .gd { color: #F88F7F; background-color: #3D1E20 } /* Generic.Deleted */
+    .ge { color: #D4D2C8; font-style: italic } /* Generic.Emph */
+    .ges { color: #D4D2C8 } /* Generic.EmphStrong */
+    .gr { color: #F88F7F } /* Generic.Error */
+    .gh { color: #D4D2C8 } /* Generic.Heading */
+    .gi { color: #6AD4AF; background-color: #19362C } /* Generic.Inserted */
+    .go { color: #7E8AA1 } /* Generic.Output */
+    .gp { color: #D4D2C8 } /* Generic.Prompt */
+    .gs { color: #D4D2C8; font-weight: bold } /* Generic.Strong */
+    .gu { color: #D4D2C8 } /* Generic.Subheading */
+    .gt { color: #F88F7F } /* Generic.Traceback */
     .kc { color: #FFAD66 } /* Keyword.Constant */
     .kd { color: #FFAD66 } /* Keyword.Declaration */
     .kn { color: #FFAD66 } /* Keyword.Namespace */
@@ -131,19 +131,19 @@
     .nb { color: #FFD173 } /* Name.Builtin */
     .nc { color: #73D0FF } /* Name.Class */
     .no { color: #FFD173 } /* Name.Constant */
-    .nd { color: #7e8aa1; font-weight: bold; font-style: italic } /* Name.Decorator */
+    .nd { color: #7E8AA1; font-weight: bold; font-style: italic } /* Name.Decorator */
     .ni { color: #95E6CB } /* Name.Entity */
     .ne { color: #73D0FF } /* Name.Exception */
     .nf { color: #FFD173 } /* Name.Function */
-    .nl { color: #d4d2c8 } /* Name.Label */
-    .nn { color: #d4d2c8 } /* Name.Namespace */
-    .nx { color: #d4d2c8 } /* Name.Other */
+    .nl { color: #D4D2C8 } /* Name.Label */
+    .nn { color: #D4D2C8 } /* Name.Namespace */
+    .nx { color: #D4D2C8 } /* Name.Other */
     .py { color: #FFD173 } /* Name.Property */
     .nt { color: #5CCFE6 } /* Name.Tag */
-    .nv { color: #d4d2c8 } /* Name.Variable */
+    .nv { color: #D4D2C8 } /* Name.Variable */
     .ow { color: #FFAD66 } /* Operator.Word */
-    .pm { color: #d4d2c8 } /* Punctuation.Marker */
-    .w { color: #d4d2c8 } /* Text.Whitespace */
+    .pm { color: #D4D2C8 } /* Punctuation.Marker */
+    .w { color: #D4D2C8 } /* Text.Whitespace */
     .mb { color: #DFBFFF } /* Literal.Number.Bin */
     .mf { color: #DFBFFF } /* Literal.Number.Float */
     .mh { color: #DFBFFF } /* Literal.Number.Hex */
@@ -153,7 +153,7 @@
     .sb { color: #D5FF80 } /* Literal.String.Backtick */
     .sc { color: #D5FF80 } /* Literal.String.Char */
     .dl { color: #D5FF80 } /* Literal.String.Delimiter */
-    .sd { color: #7e8aa1 } /* Literal.String.Doc */
+    .sd { color: #7E8AA1 } /* Literal.String.Doc */
     .s2 { color: #D5FF80 } /* Literal.String.Double */
     .se { color: #95E6CB } /* Literal.String.Escape */
     .sh { color: #D5FF80 } /* Literal.String.Heredoc */
@@ -164,10 +164,10 @@
     .ss { color: #DFBFFF } /* Literal.String.Symbol */
     .bp { color: #5CCFE6 } /* Name.Builtin.Pseudo */
     .fm { color: #FFD173 } /* Name.Function.Magic */
-    .vc { color: #d4d2c8 } /* Name.Variable.Class */
-    .vg { color: #d4d2c8 } /* Name.Variable.Global */
-    .vi { color: #d4d2c8 } /* Name.Variable.Instance */
-    .vm { color: #d4d2c8 } /* Name.Variable.Magic */
+    .vc { color: #D4D2C8 } /* Name.Variable.Class */
+    .vg { color: #D4D2C8 } /* Name.Variable.Global */
+    .vi { color: #D4D2C8 } /* Name.Variable.Instance */
+    .vm { color: #D4D2C8 } /* Name.Variable.Magic */
     .il { color: #DFBFFF } /* Literal.Number.Integer.Long */
   }
 }

client/simple/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "simple",
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "clean": "rm -Rf node_modules",
+    "build": "node theme_icons.js && vite build",
+    "fix": "eslint --fix && stylelint --fix strict 'src/**/*.{css,scss,sass,less,styl,vue,svelte}'",
+    "icons.html": "node theme_icons.js"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.22.0",
+    "copy-webpack-plugin": "^13.0.0",
+    "css-loader": "^7.1.2",
+    "edge.js": "^6.2.1",
+    "eslint": "^9.24.0",
+    "filemanager-webpack-plugin": "^8.0.0",
+    "globals": "^16.0.0",
+    "ionicons": "^7.4.0",
+    "leaflet": "^1.9.4",
+    "less": "^4.3.0",
+    "less-loader": "^12.2.0",
+    "normalize.css": "^8.0.1",
+    "sharp": "^0.34.1",
+    "style-loader": "^4.0.0",
+    "stylelint": "^16.17.0",
+    "stylelint-config-standard": "^38.0.0",
+    "stylelint-config-standard-less": "^3.0.1",
+    "stylelint-prettier": "^5.0.3",
+    "svgo": "^3.3.2",
+    "swiped-events": "^1.2.0",
+    "vite": "^6.2.6",
+    "vite-plugin-static-copy": "^2.3.0",
+    "vite-plugin-stylelint": "^6.0.0",
+    "webpack": "^5.99.5",
+    "webpack-cli": "^6.0.1"
+  },
+  "dependencies": {
+    "autocomplete-js": "^2.7.1"
+  }
+}

client/simple/src/js/main/results.js

@@ -0,0 +1,184 @@
+/* SPDX-License-Identifier: AGPL-3.0-or-later */
+
+import "../../../node_modules/swiped-events/src/swiped-events.js";
+
+(function (w, d, searxng) {
+  'use strict';
+
+  if (searxng.endpoint !== 'results') {
+    return;
+  }
+
+  searxng.ready(function () {
+    d.querySelectorAll('#urls img').forEach(
+      img =>
+        img.addEventListener(
+          'error', () => {
+            // console.log("ERROR can't load: " + img.src);
+            img.src = window.searxng.settings.theme_static_path + "/img/img_load_error.svg";
+          },
+          {once: true}
+        ));
+
+    if (d.querySelector('#search_url button#copy_url')) {
+      d.querySelector('#search_url button#copy_url').style.display = "block";
+    }
+
+    searxng.on('.btn-collapse', 'click', function () {
+      var btnLabelCollapsed = this.getAttribute('data-btn-text-collapsed');
+      var btnLabelNotCollapsed = this.getAttribute('data-btn-text-not-collapsed');
+      var target = this.getAttribute('data-target');
+      var targetElement = d.querySelector(target);
+      var html = this.innerHTML;
+      if (this.classList.contains('collapsed')) {
+        html = html.replace(btnLabelCollapsed, btnLabelNotCollapsed);
+      } else {
+        html = html.replace(btnLabelNotCollapsed, btnLabelCollapsed);
+      }
+      this.innerHTML = html;
+      this.classList.toggle('collapsed');
+      targetElement.classList.toggle('invisible');
+    });
+
+    searxng.on('.media-loader', 'click', function () {
+      var target = this.getAttribute('data-target');
+      var iframe_load = d.querySelector(target + ' > iframe');
+      var srctest = iframe_load.getAttribute('src');
+      if (srctest === null || srctest === undefined || srctest === false) {
+        iframe_load.setAttribute('src', iframe_load.getAttribute('data-src'));
+      }
+    });
+
+    searxng.on('#copy_url', 'click', function () {
+      var target = this.parentElement.querySelector('pre');
+      navigator.clipboard.writeText(target.innerText);
+      this.innerText = this.dataset.copiedText;
+    });
+
+    // searxng.selectImage (gallery)
+    // -----------------------------
+
+    // setTimeout() ID, needed to cancel *last* loadImage
+    let imgTimeoutID;
+
+    // progress spinner, while an image is loading
+    const imgLoaderSpinner = d.createElement('div');
+    imgLoaderSpinner.classList.add('loader');
+
+    // singleton image object, which is used for all loading processes of a
+    // detailed image
+    const imgLoader = new Image();
+
+    const loadImage = (imgSrc, onSuccess) => {
+      // if defered image load exists, stop defered task.
+      if (imgTimeoutID) clearTimeout(imgTimeoutID);
+
+      // defer load of the detail image for 1 sec
+      imgTimeoutID = setTimeout(() => {
+        imgLoader.src = imgSrc;
+      }, 1000);
+
+      // set handlers in the on-properties
+      imgLoader.onload = () => {
+        onSuccess();
+        imgLoaderSpinner.remove();
+      };
+      imgLoader.onerror = () => {
+        imgLoaderSpinner.remove();
+      };
+    };
+
+    searxng.selectImage = (resultElement) => {
+
+      // add a class that can be evaluated in the CSS and indicates that the
+      // detail view is open
+      d.getElementById('results').classList.add('image-detail-open');
+
+      // add a hash to the browser history so that pressing back doesn't return
+      // to the previous page this allows us to dismiss the image details on
+      // pressing the back button on mobile devices
+      window.location.hash = '#image-viewer';
+
+      searxng.scrollPageToSelected();
+
+      // if there is none element given by the caller, stop here
+      if (!resultElement) return;
+
+      // find <img> object in the element, if there is none, stop here.
+      const img = resultElement.querySelector('.result-images-source img');
+      if (!img) return;
+
+      // <img src="" data-src="http://example.org/image.jpg">
+      const src = img.getAttribute('data-src');
+
+      // already loaded high-res image or no high-res image available
+      if (!src) return;
+
+      // use the image thumbnail until the image is fully loaded
+      const thumbnail = resultElement.querySelector('.image_thumbnail');
+      img.src = thumbnail.src;
+
+      // show a progress spinner
+      const detailElement = resultElement.querySelector('.detail');
+      detailElement.appendChild(imgLoaderSpinner);
+
+      // load full size image in background
+      loadImage(src, () => {
+        // after the singelton loadImage has loaded the detail image into the
+        // cache, it can be used in the origin <img> as src property.
+        img.src = src;
+        img.removeAttribute('data-src');
+      });
+    };
+
+    searxng.closeDetail = function () {
+      d.getElementById('results').classList.remove('image-detail-open');
+      // remove #image-viewer hash from url by navigating back
+      if (window.location.hash == '#image-viewer') window.history.back();
+      searxng.scrollPageToSelected();
+    };
+    searxng.on('.result-detail-close', 'click', e => {
+      e.preventDefault();
+      searxng.closeDetail();
+    });
+    searxng.on('.result-detail-previous', 'click', e => {
+      e.preventDefault();
+      searxng.selectPrevious(false);
+    });
+    searxng.on('.result-detail-next', 'click', e => {
+      e.preventDefault();
+      searxng.selectNext(false);
+    });
+
+    // listen for the back button to be pressed and dismiss the image details when called
+    window.addEventListener('hashchange', () => {
+      if (window.location.hash != '#image-viewer') searxng.closeDetail();
+    });
+
+    d.querySelectorAll('.swipe-horizontal').forEach(
+      obj => {
+        obj.addEventListener('swiped-left', function () {
+          searxng.selectNext(false);
+        });
+        obj.addEventListener('swiped-right', function () {
+          searxng.selectPrevious(false);
+        });
+      }
+    );
+
+    w.addEventListener('scroll', function () {
+      var e = d.getElementById('backToTop'),
+        scrollTop = document.documentElement.scrollTop || document.body.scrollTop,
+        results = d.getElementById('results');
+      if (e !== null) {
+        if (scrollTop >= 100) {
+          results.classList.add('scrolling');
+        } else {
+          results.classList.remove('scrolling');
+        }
+      }
+    }, true);
+
+  });
+
+})(window, document, window.searxng);

client/simple/src/js/main/search.js

@@ -1,5 +1,8 @@
 /* SPDX-License-Identifier: AGPL-3.0-or-later */
-/* global AutoComplete */
+/* exported AutoComplete */
+
+import AutoComplete from  "../../../node_modules/autocomplete-js/dist/autocomplete.js";
+
 (function (w, d, searxng) {
   'use strict';
 

client/simple/src/js/searxng.head.js

@@ -0,0 +1 @@
+import "./head/00_init.js";

client/simple/src/js/searxng.js

@@ -0,0 +1,7 @@
+import "./main/00_toolkit.js";
+import "./main/infinite_scroll.js";
+import "./main/keyboard.js";
+import "./main/mapresult.js";
+import "./main/preferences.js";
+import "./main/results.js";
+import "./main/search.js";

client/simple/src/less/autocomplete.less

@@ -53,7 +53,7 @@
     color: var(--color-autocomplete-font);
     max-height: 32rem;
     overflow-y: auto;
-    z-index: 100;
+    z-index: 5000;
     margin-top: 3.5rem;
     border-radius: 0.8rem;
 

client/simple/src/less/code.less

@@ -1,4 +1,4 @@
-@import "../generated/pygments.less";
+@import "../../generated/pygments.less";
 
 .codelines {
   margin: @results-margin 0 0 0;

client/simple/src/less/definitions.less

@@ -55,8 +55,12 @@
   --color-autocomplete-background: #fff;
   --color-autocomplete-background-hover: #e3e3e3;
   /// Answer Colors
-  --color-answer-font: #444;  // same as --color-base-font
+  --color-answer-font: #444; // same as --color-base-font
   --color-answer-background: #fff;
+  // colors of the KeyValue result class
+  --color-result-keyvalue-col-table: #fdfbff;
+  --color-result-keyvalue-odd: #fdfbff;
+  --color-result-keyvalue-even: #fff;
   /// Results Colors
   --color-result-background: #fff;
   --color-result-border: #ddd;
@@ -85,8 +89,8 @@
   --color-result-detail-background: #242424;
   --color-result-detail-hr: #555;
   --color-result-detail-link: #8af;
-  --color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
-  --color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
+  --color-result-detail-loader-border: rgb(255 255 255 / 20%);
+  --color-result-detail-loader-borderleft: rgb(0 0 0 / 0%);
   /// Toolkit Colors
   --color-toolkit-badge-font: #fff;
   --color-toolkit-badge-background: #545454;
@@ -111,16 +115,16 @@
   --color-toolkit-checkbox-input-border: #3050ff;
   --color-toolkit-engine-tooltip-border: #ddd;
   --color-toolkit-engine-tooltip-background: #fff;
-  --color-toolkit-loader-border: rgba(0, 0, 0, 0.2);
-  --color-toolkit-loader-borderleft: rgba(255, 255, 255, 0);
+  --color-toolkit-loader-border: rgb(0 0 0 / 20%);
+  --color-toolkit-loader-borderleft: rgb(255 255 255 / 0%);
   --color-doc-code: #003;
   --color-doc-code-background: #ddeaff;
   /// Other misc colors
   --color-bar-chart-primary: #5bc0de;
   --color-bar-chart-secondary: #deb15b;
-  --color-image-resolution-background: rgba(0, 0, 0, 50%);
+  --color-image-resolution-background: rgb(0 0 0 / 50%);
   --color-image-resolution-font: #fff;
-  --color-loading-indicator: rgba(255, 255, 255, 0.2);
+  --color-loading-indicator: rgb(255 255 255 / 20%);
   --color-loading-indicator-gap: #fff;
   --color-line-number: #64708d;
   // Favicons Colors
@@ -180,6 +184,10 @@
   /// Answer Colors
   --color-answer-font: #bbb; // same as --color-base-font
   --color-answer-background: #26292f;
+  // colors of the KeyValue result class
+  --color-result-keyvalue-col-table: #1e1e22;
+  --color-result-keyvalue-odd: #1e1e22;
+  --color-result-keyvalue-even: #26292f;
   /// Results Colors
   --color-result-background: #26292f;
   --color-result-border: #333;
@@ -200,8 +208,8 @@
   --color-result-detail-background: #1a1a1c;
   --color-result-detail-hr: #555;
   --color-result-detail-link: #8af;
-  --color-result-detail-loader-border: rgba(255, 255, 255, 0.2);
-  --color-result-detail-loader-borderleft: rgba(0, 0, 0, 0);
+  --color-result-detail-loader-border: rgb(255 255 255 / 20%);
+  --color-result-detail-loader-borderleft: rgb(0 0 0 / 0%);
   // Images Colors
   --color-result-image-span-font: #bbb;
   --color-result-image-span-font-selected: #222;
@@ -234,8 +242,8 @@
   --color-toolkit-checkbox-input-border: #58f;
   --color-toolkit-engine-tooltip-border: #333;
   --color-toolkit-engine-tooltip-background: #222;
-  --color-toolkit-loader-border: rgba(255, 255, 255, 0.2);
-  --color-toolkit-loader-borderleft: rgba(0, 0, 0, 0);
+  --color-toolkit-loader-border: rgb(255 255 255 / 20%);
+  --color-toolkit-loader-borderleft: rgb(0 0 0 / 0%);
   --color-doc-code: #ddd;
   --color-doc-code-background: #4d5a6f;
   // Favicons Colors
@@ -280,11 +288,11 @@
 @results-image-row-height-phone: 10rem;
 @search-width: 44rem;
 // heigh of #search, see detail.less
-@search-height: 7.6rem;
+@search-height: 13rem;
 
 /// Device Size
 /// @desktop > @tablet
-@tablet: 79.75em;  // see https://github.com/searxng/searxng/issues/874
+@tablet: 79.75em; // see https://github.com/searxng/searxng/issues/874
 @phone: 50em;
 @small-phone: 35em;
 @ultra-small-phone: 20rem;
@@ -293,12 +301,12 @@
 @stacked-bar-chart: rgb(0, 0, 0);
 
 /// Load fonts from this directory.
-@icon-font-path:          "../../../fonts/";
+@icon-font-path: "../../../fonts/";
 //** File name for all font files.
-@icon-font-name:          "glyphicons-halflings-regular";
+@icon-font-name: "glyphicons-halflings-regular";
 //** Element ID within SVG icon file.
-@icon-font-svg-id:        "glyphicons_halflingsregular";
+@icon-font-svg-id: "glyphicons_halflingsregular";
 
 // decoration of the select HTML elements
-@select-light-svg-path:   "../svg/select-light.svg";
-@select-dark-svg-path:    "../svg/select-dark.svg";
+@select-light-svg-path: "../svg/select-light.svg";
+@select-dark-svg-path: "../svg/select-dark.svg";

client/simple/src/less/detail.less

@@ -22,8 +22,9 @@ article.result-images .detail {
   bottom: 0;
   background: var(--color-result-detail-background);
   border: 1px solid var(--color-result-detail-background);
-  z-index: 10000;
+  z-index: 1000;
   padding: 4rem 3rem 3rem 3rem;
+  overflow-y: scroll;
 
   a.result-images-source {
     display: block;
@@ -42,7 +43,7 @@ article.result-images .detail {
       height: inherit;
       max-width: 100%;
       min-height: inherit;
-      max-height: calc(100vh - 25rem - 7rem);
+      max-height: calc(100vh - 25rem - 17rem);
       background: inherit;
     }
   }
@@ -93,8 +94,7 @@ article.result-images .detail {
 
     p.result-url {
       white-space: nowrap;
-      overflow-x: hidden;
-      overflow-y: hidden;
+      overflow: hidden hidden;
       text-overflow: ellipsis;
     }
 
@@ -149,7 +149,7 @@ article.result-images .detail {
     height: 1.5rem;
     position: absolute;
     filter: opacity(40%);
-    z-index: 2000002;
+    z-index: 1200;
 
     span {
       display: block;
@@ -204,7 +204,9 @@ article.result-images .detail {
   }
 }
 
-#results.image-detail-open.scrolling article.result-images[data-vim-selected] .detail {
+#results.image-detail-open.scrolling
+  article.result-images[data-vim-selected]
+  .detail {
   top: 0;
 
   a.result-images-source img {

client/simple/src/less/embedded.less

@@ -1,14 +1,17 @@
-iframe[src^="https://w.soundcloud.com"] {
+iframe[src^="https://w.soundcloud.com"]
+{
   height: 120px;
 }
 
-iframe[src^="https://www.deezer.com"] {
+iframe[src^="https://www.deezer.com"]
+{
   // The real size is 92px, but 94px are needed to avoid an inner scrollbar of
   // the embedded HTML.
   height: 94px;
 }
 
-iframe[src^="https://www.mixcloud.com"] {
+iframe[src^="https://www.mixcloud.com"]
+{
   // the embedded player from mixcloud has some quirks: initial there is an
   // issue with an image URL that is blocked since it is an a Cross-Origin
   // request. The alternative text (<img alt='Mixcloud Logo'> then cause an
@@ -18,16 +21,19 @@ iframe[src^="https://www.mixcloud.com"] {
   height: 250px;
 }
 
-iframe[src^="https://bandcamp.com/EmbeddedPlayer"] {
+iframe[src^="https://bandcamp.com/EmbeddedPlayer"]
+{
   // show playlist
   height: 350px;
 }
 
-iframe[src^="https://bandcamp.com/EmbeddedPlayer/track"] {
+iframe[src^="https://bandcamp.com/EmbeddedPlayer/track"]
+{
   // hide playlist
   height: 120px;
 }
 
-iframe[src^="https://genius.com/songs"] {
+iframe[src^="https://genius.com/songs"]
+{
   height: 65px;
 }

client/simple/src/less/index.less

@@ -6,7 +6,7 @@
   text-align: center;
 
   .title {
-    background: url('../img/searxng.png') no-repeat;
+    background: url("../img/searxng.png") no-repeat;
     min-height: 4rem;
     margin: 4rem auto;
     background-position: center;

client/simple/src/less/new_issue.less

@@ -9,7 +9,7 @@
     display: none;
   }
 
-  input[type=checked] {
+  input[type="checked"] {
     position: absolute;
   }
 

client/simple/src/less/preferences.less

@@ -48,6 +48,14 @@ table {
     }
   }
 
+  div.pref-group {
+    width: 100%;
+    font-weight: normal;
+    padding: 1rem 0.5rem;
+    .ltr-text-align-left();
+    background: var(--color-settings-table-group-background);
+  }
+
   .value {
     margin: 0;
     padding: 0;

client/simple/src/less/result_types/keyvalue.less

@@ -0,0 +1,35 @@
+/*
+  Layout of the KeyValue result class
+*/
+#main_results .result-keyvalue {
+  caption {
+    padding: 0.8rem 0.5rem;
+    font-style: italic;
+    caption-side: bottom;
+    background-color: var(--color-result-keyvalue-table);
+  }
+
+  .col-key {
+    width: 25%;
+  }
+
+  table {
+    word-break: break-word;
+    table-layout: fixed;
+    width: 100%;
+    background-color: var(--color-result-keyvalue-table);
+  }
+
+  tr.odd {
+    background-color: var(--color-result-keyvalue-odd);
+  }
+
+  tr.even {
+    background-color: var(--color-result-keyvalue-even);
+  }
+
+  th,
+  td {
+    padding: 0.3rem 0.5rem;
+  }
+}

client/simple/src/less/search.less

@@ -15,8 +15,7 @@
   background: var(--color-header-background);
   border-bottom: 1px solid var(--color-header-border);
   display: grid;
-  column-gap: 1.2rem;
-  row-gap: 1rem;
+  gap: 1rem 1.2rem;
   grid-template-columns: 3rem 1fr;
   grid-template-areas:
     "logo search"
@@ -84,7 +83,9 @@ button.category_button {
 }
 
 // only used when JavaScript is disabled
-.no-js #categories_container:has(button.category_button:focus-within) button.category_button {
+.no-js
+  #categories_container:has(button.category_button:focus-within)
+  button.category_button {
   &.selected {
     color: var(--color-base-font);
     border-bottom: none;
@@ -159,7 +160,7 @@ button.category_button {
   outline: none;
   color: var(--color-search-font);
   font-size: 1.1rem;
-  z-index: 10000;
+  z-index: 1000;
 
   &:hover {
     color: var(--color-search-background-hover);
@@ -184,7 +185,7 @@ html.no-js #clear_search.hide_if_nojs {
   outline: none;
   color: var(--color-search-font);
   font-size: 1.1rem;
-  z-index: 2;
+  z-index: 100;
 }
 
 #q {
@@ -268,8 +269,7 @@ html.no-js #clear_search.hide_if_nojs {
     #categories {
       width: 100%;
       .ltr-text-align-left();
-      overflow-x: scroll;
-      overflow-y: hidden;
+      overflow: scroll hidden;
       -webkit-overflow-scrolling: touch;
     }
   }
@@ -280,8 +280,7 @@ html.no-js #clear_search.hide_if_nojs {
     width: 100%;
     margin: 0;
     padding: 0.1rem 0 0 0;
-    column-gap: 0;
-    row-gap: 0;
+    gap: 0 0;
     grid-template-areas:
       "logo search"
       "categories categories";
@@ -335,7 +334,7 @@ html.no-js #clear_search.hide_if_nojs {
     top: 0;
     height: 100%;
     width: 100%;
-    z-index: 10000;
+    z-index: 2000;
 
     .search_box {
       border-bottom: 1px solid var(--color-search-border);

client/simple/src/less/style-center.less

@@ -14,7 +14,7 @@ on the /search URL and when the "center alignment" preference is enabled.
   }
 }
 
-@media screen and (min-width: 62rem) {
+@media screen and (width >= 62rem) {
   .center-alignment-yes #main_results {
     --center-page-width: 60rem;
   }
@@ -63,9 +63,11 @@ on the /search URL and when the "center alignment" preference is enabled.
     }
 
     #search_header {
-      grid-template-columns: calc(50% - 4.5rem - var(--center-page-width) / 2) 3rem var(--center-page-width);
+      grid-template-columns:
+        calc(50% - 4.5rem - var(--center-page-width) / 2)
+        3rem var(--center-page-width);
       grid-template-areas: "na logo search" "na spacer categories";
-      column-gap: 1.2rem;  // from search.less
+      column-gap: 1.2rem; // from search.less
       width: 100%;
       padding-left: 0;
       padding-right: 0;
@@ -91,10 +93,12 @@ on the /search URL and when the "center alignment" preference is enabled.
         align-self: flex-start;
       }
 
-      &:not(.only_template_images):not(.image-detail-open) {
+      &:not(.only_template_images, .image-detail-open) {
         // the gap is set in style.less
         .ltr-margin-left(1.5rem);
-        grid-template-columns: calc(var(--center-page-width) - @results-gap - @results-sidebar-width) @results-sidebar-width;
+        grid-template-columns:
+          calc(var(--center-page-width) - @results-gap - @results-sidebar-width)
+          @results-sidebar-width;
 
         #backToTop {
           .ltr-left(calc(50% - @results-sidebar-width - @results-gap + 1rem + var(--center-page-width) / 2));

client/simple/src/less/style-rtl.less

@@ -109,7 +109,11 @@
 }
 
 // Image detail
-#results.image-detail-open article.result-images[data-vim-selected] .detail .result-images-labels p {
+#results.image-detail-open
+  article.result-images[data-vim-selected]
+  .detail
+  .result-images-labels
+  p {
   direction: rtl;
 
   &.result-url {
@@ -125,7 +129,13 @@
 }
 
 // select HTML element
-@supports ((background-position-x: 100%) and ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none))) {
+@supports (
+  (background-position-x: 100%) and
+    (
+      (appearance: none) or (-webkit-appearance: none) or
+        (-moz-appearance: none)
+    )
+) {
   select {
     border-width: 0 0 0 2rem;
     background-position-x: -2rem;

client/simple/src/less/style.less

@@ -32,8 +32,8 @@
 // to center the results
 @import "style-center.less";
 
-// ion-icon
-.ion-icon {
+// sxng-icon-set
+.sxng-icon-set {
   display: inline-block;
   vertical-align: bottom;
   line-height: 1;
@@ -41,16 +41,16 @@
   .ltr-transform();
 }
 
-.ion-icon-small {
+.sxng-icon-set-small {
   width: 1rem;
   height: 1rem;
-  .ion-icon;
+  .sxng-icon-set;
 }
 
-.ion-icon-big {
+.sxng-icon-set-big {
   width: 1.5rem;
   height: 1.5rem;
-  .ion-icon;
+  .sxng-icon-set;
 }
 
 // Main LESS-Code
@@ -80,6 +80,12 @@ body {
   margin: 0;
 }
 
+@supports (height: 100dvh) {
+  body {
+    height: 100dvh;
+  }
+}
+
 main {
   width: 100%;
   margin-bottom: 2rem;
@@ -244,9 +250,8 @@ article[data-vim-selected].category-social {
     align-items: center;
     font-size: 1rem;
     color: var(--color-result-url-font);
-    flex-wrap: nowrap;
+    flex-flow: row nowrap;
     overflow: hidden;
-    flex-direction: row;
     margin: 0;
     padding: 0;
 
@@ -269,9 +274,7 @@ article[data-vim-selected].category-social {
     .url_o2 {
       overflow: hidden;
       white-space: nowrap;
-      flex-basis: content;
-      flex-grow: 0;
-      flex-shrink: 1;
+      flex: 0 1 content;
       text-align: right;
       padding-bottom: 1px;
 
@@ -472,7 +475,7 @@ article[data-vim-selected].category-social {
     padding: 0;
     border: none;
     height: 100%;
-    width: 100%;
+    width: auto;
     object-fit: cover;
     vertical-align: bottom;
     background: var(--color-result-image-background);
@@ -546,14 +549,13 @@ article[data-vim-selected].category-social {
   margin-bottom: 0;
   .ltr-margin-left(@results-offset);
   display: grid;
-  grid-template-columns: @results-width @results-sidebar-width;
-  grid-template-rows: min-content min-content 1fr min-content;
+  grid-template:
+    "corrections sidebar" min-content
+    "answers sidebar" min-content
+    "urls sidebar" 1fr
+    "pagination sidebar" min-content
+    / @results-width @results-sidebar-width;
   gap: 0 @results-gap;
-  grid-template-areas:
-    "corrections sidebar"
-    "answers sidebar"
-    "urls sidebar"
-    "pagination sidebar";
 }
 
 #results #sidebar *:first-child {
@@ -676,10 +678,7 @@ summary.title {
   }
 
   .answer-url {
-    margin-left: auto;
-    margin-top: 5px;
-    margin-right: 10px;
-    margin-bottom: 10px;
+    margin: 5px 10px 10px auto;
   }
 }
 
@@ -788,7 +787,7 @@ summary.title {
     padding: 0.4rem;
     margin-left: 0.5rem;
     border-radius: 0.3rem;
-    display: none;    // will be shown by JS.
+    display: none; // will be shown by JS.
   }
 }
 
@@ -979,19 +978,18 @@ summary.title {
     margin: 0 auto;
     justify-content: center;
     display: grid;
-    grid-template-columns: @results-width;
-    grid-template-rows: min-content min-content min-content 1fr min-content min-content;
+    grid-template:
+      "corrections" min-content
+      "answers" min-content
+      "sidebar" min-content
+      "urls" 1fr
+      "pagination" min-content
+      / @results-width;
     gap: 0;
-    grid-template-areas:
-      "corrections"
-      "answers"
-      "sidebar"
-      "urls"
-      "pagination";
   }
 }
 
-@media screen and (max-width: calc(@tablet - 0.5px)) {
+@media screen and (width <= calc(@tablet - 0.5px)) {
   #links_on_top {
     span {
       display: none;
@@ -999,7 +997,7 @@ summary.title {
   }
 }
 
-@media screen and (max-width: 52rem) {
+@media screen and (width <= 52rem) {
   body.results_endpoint {
     #links_on_top {
       .link_on_top_about,
@@ -1024,15 +1022,14 @@ summary.title {
 #main_results div#results.only_template_images {
   margin: 1rem @results-tablet-offset 0 @results-tablet-offset;
   display: grid;
-  grid-template-columns: 100%;
-  grid-template-rows: min-content min-content min-content 1fr min-content;
+  grid-template:
+    "corrections" min-content
+    "answers" min-content
+    "sidebar" min-content
+    "urls" 1fr
+    "pagination" min-content
+    / 100%;
   gap: 0;
-  grid-template-areas:
-    "corrections"
-    "answers"
-    "sidebar"
-    "urls"
-    "pagination";
 
   #sidebar {
     display: none;
@@ -1167,3 +1164,6 @@ summary.title {
 pre code {
   white-space: pre-wrap;
 }
+
+// import layouts of the Result types
+@import "result_types/keyvalue.less";

client/simple/src/less/toolkit.less

@@ -203,7 +203,7 @@ div.selectable_url {
   left: 50%;
   margin: 0 auto;
   transform: translate(-50%, -50%);
-  z-index: 10000000;
+  z-index: 5000;
 
   h3 {
     margin-top: 0;
@@ -217,8 +217,7 @@ div.selectable_url {
 
 //
 .scrollx {
-  overflow-x: auto;
-  overflow-y: hidden;
+  overflow: auto hidden;
   display: block;
   padding: 0;
   margin: 0;
@@ -250,7 +249,7 @@ ul.tabs {
     order: 2;
   }
 
-  & > input[type=radio] {
+  & > input[type="radio"] {
     display: none;
   }
 
@@ -340,7 +339,7 @@ select {
   padding: 0.2rem !important;
   color: var(--color-search-font);
   font-size: 0.9rem;
-  z-index: 2;
+  z-index: 100;
 
   &:hover,
   &:focus {
@@ -348,14 +347,21 @@ select {
   }
 }
 
-@supports ((background-position-x: 100%) and ((appearance: none) or (-webkit-appearance: none) or (-moz-appearance: none))) {
+@supports (
+  (background-position-x: 100%) and
+    (
+      (appearance: none) or (-webkit-appearance: none) or
+        (-moz-appearance: none)
+    )
+) {
   select {
     appearance: none;
     -webkit-appearance: none;
     -moz-appearance: none;
     border-width: 0 2rem 0 0;
     border-color: transparent;
-    background: data-uri('image/svg+xml;charset=UTF-8', @select-light-svg-path) no-repeat;
+    background: data-uri("image/svg+xml;charset=UTF-8", @select-light-svg-path)
+      no-repeat;
     background-position-x: calc(100% + 2rem);
     background-size: 2rem;
     background-origin: content-box;
@@ -377,12 +383,18 @@ select {
   @media (prefers-color-scheme: dark) {
     html.theme-auto select,
     html.theme-dark select {
-      background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path);
+      background-image: data-uri(
+        "image/svg+xml;charset=UTF-8",
+        @select-dark-svg-path
+      );
     }
   }
 
   html.theme-dark select {
-    background-image: data-uri('image/svg+xml;charset=UTF-8', @select-dark-svg-path);
+    background-image: data-uri(
+      "image/svg+xml;charset=UTF-8",
+      @select-dark-svg-path
+    );
   }
 }
 
@@ -414,7 +426,7 @@ input.checkbox-onoff[type="checkbox"] {
     border: 1px solid var(--color-btn-background);
     border-radius: 12px;
     box-shadow: var(--color-btn-background) 0 0 3px;
-    z-index: 10000;
+    z-index: 1200;
     top: -0.55em;
     left: -0.6em;
   }
@@ -462,7 +474,7 @@ input.checkbox-onoff.reversed-checkbox[type="checkbox"] {
 
 /* -- checkbox -- */
 @supports (transform: rotate(-45deg)) {
-  input[type=checkbox]:not(.checkbox-onoff) {
+  input[type="checkbox"]:not(.checkbox-onoff) {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
@@ -477,7 +489,7 @@ input.checkbox-onoff.reversed-checkbox[type="checkbox"] {
     .rounded-corners(0.3em);
 
     &::after {
-      content: '';
+      content: "";
       width: 9px;
       height: 5px;
       position: absolute;
@@ -498,14 +510,18 @@ input.checkbox-onoff.reversed-checkbox[type="checkbox"] {
   }
 
   // disabled : can't be focused, show only the check mark
-  input[type=checkbox][disabled]:not(.checkbox-onoff) {
+  input[type="checkbox"][disabled]:not(.checkbox-onoff) {
     border: inherit;
     background-color: transparent !important;
     cursor: inherit;
   }
 
   // if not checked and possible to checked then display a "light" check mark on hover
-  input.checkbox[type=checkbox]:not(:checked):not([disabled]):not(.checkbox-onoff):hover::after {
+  input.checkbox[type="checkbox"]:not(
+      :checked,
+      [disabled],
+      .checkbox-onoff
+    ):hover::after {
     opacity: 0.5;
   }
 }
@@ -574,7 +590,7 @@ input.checkbox-onoff.reversed-checkbox[type="checkbox"] {
   background: var(--color-toolkit-engine-tooltip-background);
   font-size: 14px;
   font-weight: normal;
-  z-index: 1000000;
+  z-index: 5000;
   text-align: left;
   .rounded-corners;
 }
@@ -593,8 +609,7 @@ td:hover .engine-tooltip,
   width: -moz-available;
   width: -webkit-fill-available;
   width: fill;
-  flex-direction: row;
-  flex-wrap: nowrap;
+  flex-flow: row nowrap;
   align-items: center;
   display: inline-flex;
 }

client/simple/src/less/toolkit_loader.less

@@ -14,33 +14,16 @@
   border-right: 1.1em solid var(--color-loading-indicator);
   border-bottom: 1.1em solid var(--color-loading-indicator);
   border-left: 1.1em solid var(--color-loading-indicator-gap);
-  -webkit-transform: translateZ(0);
-  -ms-transform: translateZ(0);
   transform: translateZ(0);
-  -webkit-animation: load8 1.1s infinite linear;
   animation: load8 1.1s infinite linear;
 }
 
-@-webkit-keyframes load8 {
-  0% {
-    -webkit-transform: rotate(0deg);
-    transform: rotate(0deg);
-  }
-
-  100% {
-    -webkit-transform: rotate(360deg);
-    transform: rotate(360deg);
-  }
-}
-
 @keyframes load8 {
   0% {
-    -webkit-transform: rotate(0deg);
     transform: rotate(0deg);
   }
 
   100% {
-    -webkit-transform: rotate(360deg);
     transform: rotate(360deg);
   }
 }

client/simple/src/svg/empty_favicon.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+  <path fill="#58f" d="M11 20.85a.92.92 0 0 1-1.1.93A10 10 0 0 1 2.06 13c-.06-.55.4-1 .95-1h3a1 1 0 0 1 1 1 3 3 0 0 0 3 3 1 1 0 0 1 1 1v3.85Zm6-1.92c0 .77.83 1.23 1.42.74a10 10 0 0 0 2.03-2.32c.39-.61-.09-1.35-.81-1.35H18a1 1 0 0 0-1 1v1.93ZM12 2a10 10 0 0 1 6.65 2.53c.61.55.17 1.47-.65 1.47h-.15A2.85 2.85 0 0 0 15 8.85c0 .33-.18.62-.47.77l-.08.04a1 1 0 0 1-.9 0l-.08-.04a.85.85 0 0 1-.47-.77A2.85 2.85 0 0 0 10.15 6H10a1 1 0 0 1-1-1V3.2c0-.44.28-.84.7-.94C10.45 2.1 11.22 2 12 2Z"/>
+  <path fill="#58f" d="M3.42 10c-.63 0-1.1-.58-.9-1.18.6-1.8 1.7-3.36 3.12-4.53C6.2 3.82 7 4.26 7 5a3 3 0 0 0 3 3h.15c.47 0 .85.38.85.85 0 1.09.61 2.07 1.58 2.56l.08.04a3 3 0 0 0 2.68 0l.08-.04A2.85 2.85 0 0 0 17 8.85c0-.47.38-.85.85-.85h2.66c.4 0 .77.23.9.6a9.98 9.98 0 0 1 .52 4.6.94.94 0 0 1-.95.8H18a3 3 0 0 0-3 3v3.8c0 .44-.28.84-.7.94l-.2.04a.92.92 0 0 1-1.1-.93V17a3 3 0 0 0-3-3 1 1 0 0 1-1-1 3 3 0 0 0-3-3H3.42Z"/>
+</svg>

client/simple/src/svg/ionicons/information-circle-outline.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path d="M248 64C146.39 64 64 146.39 64 248s82.39 184 184 184 184-82.39 184-184S349.61 64 248 64z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"/>
+    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M220 220h32v116"/>
+    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="32" d="M208 340h88"/>
+    <path d="M248 130a26 26 0 1026 26 26 26 0 00-26-26z" fill="currentColor" stroke="currentColor" stroke-miterlimit="10" stroke-width="1"/>
+</svg>

client/simple/src/svg/ionicons/newspaper-outline.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path d="M368 415.86V72a24.07 24.07 0 00-24-24H72a24.07 24.07 0 00-24 24v352a40.12 40.12 0 0040 40h328" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/>
+    <path d="M416 464h0a48 48 0 01-48-48V128h72a24 24 0 0124 24v264a48 48 0 01-48 48z" fill="none" stroke="currentColor" stroke-linejoin="round" stroke-width="32"/>
+    <path d="M240 128h64M240 192h64M112 256h192M112 320h192M112 384h192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"/>
+    <path d="M176 208h-64a16 16 0 01-16-16v-64a16 16 0 0116-16h64a16 16 0 0116 16v64a16 16 0 01-16 16z" fill="currentColor" stroke="currentColor" stroke-linejoin="round" stroke-width="1"   />
+</svg>

client/simple/static/.gitattributes

@@ -0,0 +1,2 @@
+leaflet.css -diff
+leaflet.js -diff

client/simple/theme_icons.js

@@ -0,0 +1,84 @@
+/**
+ * Generate icons.html for the jinja templates of the simple theme.
+ */
+
+import { argv } from "node:process";
+import { dirname, resolve } from "node:path";
+import { jinja_svg_sets } from "./tools/jinja_svg_catalog.js";
+
+const HERE = dirname(argv[1]) + "/";
+const dest = resolve(HERE, "../../searx/templates/simple/icons.html");
+
+/** @type import("./tools/jinja_svg_catalog.js").JinjaMacro[] */
+const searxng_jinja_macros = [
+  { name: "icon",       class: "sxng-icon-set" },
+  { name: "icon_small", class: "sxng-icon-set-small" },
+  { name: "icon_big",   class: "sxng-icon-set-big" },
+];
+
+
+const sxng_icon_opts ={
+  multipass: true,
+  plugins: [
+    { name: "removeTitle" },
+    { name: "removeXMLNS" },
+    { name: "addAttributesToSVGElement",
+      params: {
+        attributes: [
+          {
+            "aria-hidden": "true",
+          }]}}]
+};
+
+
+/** @type import("./tools/jinja_svg_catalog.js").IconSet */
+const simple_icons = [
+  {
+    base: resolve(HERE, "node_modules/ionicons/dist/svg"),
+    set: {
+      "alert": "alert-outline.svg",
+      "appstore": "apps-outline.svg",
+      "book": "book-outline.svg",
+      "close": "close-outline.svg",
+      "download": "download-outline.svg",
+      "ellipsis-vertical": "ellipsis-vertical-outline.svg",
+      "file-tray-full": "file-tray-full-outline.svg",
+      "film": "film-outline.svg",
+      "globe": "globe-outline.svg",
+      "heart": "heart-outline.svg",
+      "image": "image-outline.svg",
+      "layers": "layers-outline.svg",
+      "leecher": "arrow-down.svg",
+      "location": "location-outline.svg",
+      "magnet": "magnet-outline.svg",
+      "musical-notes": "musical-notes-outline.svg",
+      "navigate-down": "chevron-down-outline.svg",
+      "navigate-left": "chevron-back-outline.svg",
+      "navigate-right": "chevron-forward-outline.svg",
+      "navigate-up": "chevron-up-outline.svg",
+      "people": "people-outline.svg",
+      "play": "play-outline.svg",
+      "radio": "radio-outline.svg",
+      "save": "save-outline.svg",
+      "school": "school-outline.svg",
+      "search": "search-outline.svg",
+      "seeder": "swap-vertical.svg",
+      "settings": "settings-outline.svg",
+      "tv": "tv-outline.svg",
+    },
+    svgo_opts: sxng_icon_opts,
+  },
+  // some of the ionicons are not suitable for a dark theme, we fixed the svg
+  // manually in src/svg/ionicons
+  // - https://github.com/searxng/searxng/pull/4284#issuecomment-2680550342
+  {
+    base: resolve(HERE, "src/svg/ionicons"),
+    set: {
+      "information-circle": "information-circle-outline.svg",
+      "newspaper": "newspaper-outline.svg",
+    },
+    svgo_opts: sxng_icon_opts,
+  }
+];
+
+jinja_svg_sets(dest, searxng_jinja_macros, simple_icons);

client/simple/tools/img.js

@@ -0,0 +1,78 @@
+import fs from "fs";
+import path from "path";
+import sharp from "sharp";
+import { optimize as svgo } from "svgo";
+
+/**
+ * @typedef {object} Src2Dest - Mapping of src to dest
+ * @property {string} src - Name of the source file.
+ * @property {string} dest - Name of the destination file.
+ */
+
+
+/**
+ * Convert a list of SVG files to PNG.
+ *
+ * @param {Src2Dest[]} items - Array of SVG files (src: SVG, dest:PNG) to convert.
+ */
+
+async function svg2png (items) {
+  items.forEach(
+    async (item) => {
+      try {
+        fs.mkdir(path.dirname(item.dest), { recursive: true }, (err) => {
+          if (err)
+            throw err;
+        });
+
+        const info = await sharp(item.src).png({
+          force: true,
+          compressionLevel: 9,
+          palette: true,
+        }).toFile(item.dest);
+
+        console.log(
+          `[svg2png] created ${item.dest} -- bytes: ${info.size}, w:${info.width}px,  h:${info.height}px`
+        );
+      } catch (err) {
+        console.error(`ERROR: ${item.dest} -- ${err}`);
+        throw(err);
+      }
+    }
+  );
+}
+
+
+/**
+ * Optimize SVG images for WEB.
+ *
+ * @param {import('svgo').Config} svgo_opts - Options passed to svgo.
+ * @param {Src2Dest[]} items - Array of SVG files (src:SVG, dest:SVG) to optimize.
+ */
+
+async function svg2svg(svgo_opts, items) {
+  items.forEach(
+    async (item) => {
+      try {
+        fs.mkdir(path.dirname(item.dest), { recursive: true }, (err) => {
+          if (err)
+            throw err;
+        });
+
+        const raw = fs.readFileSync(item.src, "utf8");
+        const opt = svgo(raw, svgo_opts);
+        fs.writeFileSync(item.dest, opt.data);
+        console.log(
+          `[svg2svg] optimized: ${item.dest} -- src: ${item.src}`
+        );
+
+      } catch (err) {
+        console.error(`ERROR: optimize src: ${item.src} -- ${err}`);
+        throw(err);
+      }
+    }
+  );
+}
+
+
+export { svg2png, svg2svg };

client/simple/tools/jinja_svg_catalog.html.edge

@@ -0,0 +1,26 @@
+{{--
+This is a EDGE https://edgejs.dev/ template to generate a HTML Jinja template
+for the backend.  Example output of this EDGE template:
+- https://github.com/searxng/searxng/blob/master/searx/templates/simple/icons.html
+--}}
+{#
+Catalog of SVG symbols that can be inserted into the HTML output of a Jinja
+template. This file from:
+
+  client/simple/tools/icon_catalog.edge.html
+#}
+
+{%-
+set catalog = {
+@each((svg, name) in svg_catalog)
+    '{{{name}}}' : '{{{svg}}}',
+@end
+}
+-%}
+
+@each(macro in macros)
+
+{% macro {{ macro.name }}(action, alt) -%}
+  {{ open_curly_brace }} catalog[action] | replace("{{__jinja_class_placeholder__}}", "{{ macro.class }}") | safe {{ close_curly_brace }}
+{%- endmacro %}
+@end

client/simple/tools/jinja_svg_catalog.js

@@ -0,0 +1,130 @@
+import fs from "fs";
+import { resolve, dirname } from "path";
+import { Edge } from 'edge.js';
+import { optimize as svgo } from "svgo";
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const __jinja_class_placeholder__ = "__jinja_class_placeholder__";
+
+// -- types
+
+/**
+ * @typedef {object} IconSet - A set of icons
+ * @property {object[]} set - Array of SVG icons, where property name is the
+ * name of the icon and value is the src of the SVG (relative to base).
+ * @property {string} base - Folder in which the SVG src files are located.
+ * @property {import("svgo").Config} svgo_opts - svgo options for this set.
+ */
+
+/**
+ * @typedef {object} IconSVG - Mapping of icon name to SVG source file.
+ * @property {string} name - Name of the icon isource file.
+ * @property {string} src - Name of the destination file.
+ * @property {import("svgo").Config} svgo_opts - Options passed to svgo.
+ */
+
+/**
+ * @typedef {object} JinjaMacro - Arguments to create a jinja macro
+ * @property {string} name - Name of the jinja macro.
+ * @property {string} class - SVG's class name (value of XML class attribute)
+ */
+
+
+// -- functions
+
+/**
+ * Generate a jinja template with a catalog of SVG icons that can be
+ * used in in other HTML jinja templates.
+ *
+ * @param {string} dest - filename of the generate jinja template.
+ * @param {JinjaMacro} macros - Jinja macros to create.
+ * @param {IconSVG[]} items - Array of SVG items.
+ */
+
+function jinja_svg_catalog(dest, macros, items) {
+
+  const svg_catalog = {};
+  const edge_template = resolve(__dirname, "jinja_svg_catalog.html.edge");
+
+  items.forEach(
+    (item) => {
+
+      /** @type {import("svgo").Config} */
+      const svgo_opts = JSON.parse(JSON.stringify(item.svgo_opts));
+      svgo_opts.plugins.push({
+        name: "addAttributesToSVGElement",
+        params: {
+          attributes: [{ "class": __jinja_class_placeholder__, }]
+        }}
+      );
+
+      try {
+        const raw = fs.readFileSync(item.src, "utf8");
+        const opt = svgo(raw, svgo_opts);
+        svg_catalog[item.name] = opt.data;
+      } catch (err) {
+        console.error(`ERROR: jinja_svg_catalog processing ${item.name} src: ${item.src} -- ${err}`);
+        throw(err);
+      }
+    }
+  );
+
+  fs.mkdir(dirname(dest), { recursive: true }, (err) => {
+    if (err) throw err;
+  });
+
+  const ctx = {
+    svg_catalog: svg_catalog,
+    macros: macros,
+    edge_template: edge_template,
+    __jinja_class_placeholder__: __jinja_class_placeholder__,
+    // see https://github.com/edge-js/edge/issues/162
+    open_curly_brace : "{{",
+    close_curly_brace : "}}"
+  };
+
+  const jinjatmpl = Edge.create().renderRawSync(
+	  fs.readFileSync(edge_template, "utf-8"),
+	  ctx
+  );
+
+  fs.writeFileSync(dest, jinjatmpl);
+  console.log(`[jinja_svg_catalog] created: ${dest}`);
+}
+
+
+/**
+ * Calls jinja_svg_catalog for a collection of icon sets where each set has its
+ * own parameters.
+ *
+ * @param {string} dest - filename of the generate jinja template.
+ * @param {JinjaMacro} macros - Jinja macros to create.
+ * @param {IconSet[]} sets - Array of SVG sets.
+ */
+function jinja_svg_sets(dest, macros, sets) {
+  /** @type IconSVG[] */
+  const items = [];
+  const all = [];
+  for (const obj of sets) {
+
+    for (const [name, file] of Object.entries(obj.set)) {
+      if (all.includes(name)) {
+        throw new Error(`ERROR: ${name} has already been defined`);
+      }
+      items.push({
+        name: name,
+        src: resolve(obj.base, file),
+        svgo_opts: obj.svgo_opts,
+      });
+    }
+    jinja_svg_catalog(dest, macros, items);
+  }
+}
+
+// -- exports
+
+export {
+  jinja_svg_sets,
+  jinja_svg_catalog,
+};

client/simple/tools/plg.js

@@ -0,0 +1,41 @@
+/**
+ * Custom vite plugins to build the web-client components of the simple theme.
+ *
+ * HINT:
+ *
+ *   This is an inital implementation for the migration of the build process
+ *   from grunt to vite.  For fully support (vite: build & serve) more work is
+ *   needed.
+ */
+
+import { svg2png } from "./img.js";
+import { svg2svg } from "./img.js";
+
+/**
+ * Vite plugin to convert a list of SVG files to PNG.
+ *
+ * @param {import('./img.js').Src2Dest} items - Array of SVG files (src: SVG, dest:PNG) to convert.
+ */
+function plg_svg2png(items) {
+  return {
+    name: 'searxng-simple-svg2png',
+    apply: 'build', // or 'serve'
+    async writeBundle() { svg2png(items); },
+  };
+}
+
+/**
+ * Vite plugin to optimize SVG images for WEB.
+ *
+ * @param {import('svgo').Config} svgo_opts - Options passed to svgo.
+ * @param {import('./img.js').Src2Dest} items - Array of SVG files (src:SVG, dest:SVG) to optimize.
+ */
+function plg_svg2svg(svgo_opts, items) {
+  return {
+    name: 'searxng-simple-svg2png',
+    apply: 'build', // or 'serve'
+    async writeBundle() { svg2svg(items, svgo_opts); },
+  };
+}
+
+export { plg_svg2png, plg_svg2svg };

client/simple/vite.config.js

@@ -0,0 +1,185 @@
+/**
+ * CONFIG: https://vite.dev/config/
+ */
+
+import { resolve } from "node:path";
+import { defineConfig } from "vite";
+import stylelint from "vite-plugin-stylelint";
+import { viteStaticCopy } from "vite-plugin-static-copy";
+import { plg_svg2png } from "./tools/plg.js";
+import { plg_svg2svg } from "./tools/plg.js";
+
+
+const ROOT = "../..";  // root of the git reposetory
+
+const PATH = {
+
+  dist: resolve(ROOT, "searx/static/themes/simple"),
+  // dist: resolve(ROOT, "client/simple/dist"),
+
+  src: "src",
+  modules: "node_modules",
+  brand: "src/brand",
+  static: resolve(ROOT, "client/simple/static"),
+  leaflet: resolve(ROOT, "client/simple/node_modules/leaflet/dist"),
+  templates: resolve(ROOT, "searx/templates/simple"),
+};
+
+const svg2svg_opts = {
+  plugins: [
+    { name: "preset-default" },
+    "sortAttrs",
+    "convertStyleToAttrs",
+  ]
+};
+
+const svg2svg_favicon_opts = {
+  plugins: [
+    { name: "preset-default" },
+    "sortAttrs",
+  ]
+};
+
+
+export default defineConfig({
+
+  root: PATH.src,
+  mode: "production",
+  // mode: "development",
+
+  // FIXME: missing CCS sourcemaps!!
+  // see: https://github.com/vitejs/vite/discussions/13845#discussioncomment-11992084
+  //
+  // what I have tried so far (see config below):
+  //
+  // - build.sourcemap
+  // - esbuild.sourcemap
+  // - css.preprocessorOptions.less.sourceMap
+
+  css: {
+    devSourcemap: true,
+    preprocessorOptions: {
+      less: {
+        // FIXME: missing CCS sourcemaps!!
+        sourceMap: {
+          outputSourceFiles: true,
+          sourceMapURL: (name) => { const s = name.split('/'); return s[s.length - 1] + '.map'; },
+        },
+        // env: 'development',
+        // relativeUrls: true,
+        // javascriptEnabled: true,
+      },
+    },
+  },  // end: css
+
+  esbuild : {
+    // FIXME: missing CCS sourcemaps!!
+    sourcemap: true
+  },
+
+  build: {
+    manifest: "manifest.json",
+    emptyOutDir: true,
+    assetsDir: "",
+    outDir: PATH.dist,
+
+    // FIXME: missing CCS sourcemaps!!
+    sourcemap: true,
+
+    // https://vite.dev/config/build-options.html#build-cssminify
+    cssMinify: true,
+    // cssMinify: "esbuild",
+    minify: "esbuild",
+
+    rollupOptions: {
+      input: {
+
+        // build CSS files
+        "css/searxng.min.css": PATH.src + "/less/style-ltr.less",
+        "css/searxng-rtl.min.css": PATH.src + "/less/style-rtl.less",
+        "css/rss.min.css": PATH.src + "/less/rss.less",
+
+        // build JS files
+        "js/searxng.head.min": PATH.src + "/js/searxng.head.js",
+        "js/searxng.min": PATH.src + "/js/searxng.js",
+
+      },
+
+      // file naming conventions / pathnames are relative to outDir (PATH.dist)
+      output: {
+        entryFileNames: "[name].js",
+        chunkFileNames: "[name].js",
+        assetFileNames: "[name].[ext]",
+        // Vite does not support "rollupOptions.output.sourcemap".
+        // Please use "build.sourcemap" instead.
+        // sourcemap: true,
+      },
+
+    },
+  },  // end: build
+
+  plugins: [
+
+    stylelint({
+      build: true,
+      emitWarningAsError: true,
+      fix: true,
+    }),
+
+    // Leaflet
+
+    viteStaticCopy({
+      targets: [
+        { src: PATH.leaflet + "/leaflet.{js,js.map}", dest: PATH.dist + "/js" },
+        { src: PATH.leaflet + "/images/*.png", dest: PATH.dist + "/css/images/" },
+        { src: PATH.leaflet + "/*.{css,css.map}", dest: PATH.dist + "/css" },
+        { src: PATH.static + "/**/*", dest: PATH.dist },
+      ]
+    }),
+
+    // -- svg images
+
+    plg_svg2svg(
+      [
+        { src: PATH.src + "/svg/empty_favicon.svg", dest: PATH.dist + "/img/empty_favicon.svg" },
+        { src: PATH.src + "/svg/select-dark.svg", dest: PATH.dist + "/img/select-dark.svg" },
+        { src: PATH.src + "/svg/select-light.svg", dest: PATH.dist + "/img/select-light.svg" },
+      ],
+      svg2svg_opts,
+    ),
+
+    // SearXNG brand (static)
+
+    plg_svg2png(
+      [
+        { src: PATH.brand + "/searxng-wordmark.svg", dest: PATH.dist + "/img/favicon.png" },
+        { src: PATH.brand + "/searxng.svg", dest: PATH.dist + "/img/searxng.png" },
+      ],
+    ),
+
+    // -- svg
+    plg_svg2svg(
+      [
+        { src: PATH.brand + "/searxng.svg", dest: PATH.dist + "/img/searxng.svg" },
+        { src: PATH.brand + "/img_load_error.svg", dest: PATH.dist + "/img/img_load_error.svg" },
+      ],
+      svg2svg_opts,
+    ),
+
+    // -- favicon
+    plg_svg2svg(
+      [ { src: PATH.brand + "/searxng-wordmark.svg", dest: PATH.dist + "/img/favicon.svg" } ],
+      svg2svg_favicon_opts,
+    ),
+
+    // -- simple templates
+    plg_svg2svg(
+      [
+        { src: PATH.brand + "/searxng-wordmark.svg", dest: PATH.templates + "/searxng-wordmark.min.svg" },
+      ],
+      svg2svg_opts
+    ),
+
+  ] // end: plugins
+
+});

dockerfiles/docker-entrypoint.sh

@@ -14,8 +14,6 @@ Environment variables:
   BASE_URL      settings.yml : server.base_url
   MORTY_URL     settings.yml : result_proxy.url
   MORTY_KEY     settings.yml : result_proxy.key
-  BIND_ADDRESS  uwsgi bind to the specified TCP socket using HTTP protocol.
-                Default value: ${DEFAULT_BIND_ADDRESS}
 Volume:
   /etc/searxng  the docker entry point copies settings.yml and uwsgi.ini in
                 this directory (see the -f command line option)"
@@ -23,9 +21,6 @@ Volume:
 EOF
 }
 
-export DEFAULT_BIND_ADDRESS="0.0.0.0:8080"
-export BIND_ADDRESS="${BIND_ADDRESS:-${DEFAULT_BIND_ADDRESS}}"
-
 # Parse command line
 FORCE_CONF_UPDATE=0
 DRY_RUN=0
@@ -173,6 +168,8 @@ fi
 
 unset MORTY_KEY
 
-# Start uwsgi
 printf 'Listen on %s\n' "${BIND_ADDRESS}"
-exec uwsgi --master --uid searxng --gid searxng --http-socket "${BIND_ADDRESS}" "${UWSGI_SETTINGS_PATH}"
+
+# Start uwsgi
+# TODO: "--http-socket" will be removed in the future (see uwsgi.ini.new config file): https://github.com/searxng/searxng/pull/4578
+exec uwsgi --http-socket "${BIND_ADDRESS}" "${UWSGI_SETTINGS_PATH}"

dockerfiles/uwsgi.ini

@@ -1,4 +1,8 @@
 [uwsgi]
+# Listening address
+# default value: [::]:8080 (see Dockerfile)
+http-socket = $(BIND_ADDRESS)
+
 # Who will run the code
 uid = searxng
 gid = searxng
@@ -48,7 +52,5 @@ die-on-term
 
 # uwsgi serves the static files
 static-map = /static=/usr/local/searxng/searx/static
-# expires set to one day
-static-expires = /* 86400
 static-gzip-all = True
 offload-threads = %k

docs/admin/plugins.rst

@@ -1,16 +1,13 @@
-.. _plugins generic:
+.. _plugins admin:
 
 ===============
-Plugins builtin
+List of plugins
 ===============
 
-.. sidebar:: Further reading ..
+Further reading ..
 
-   - :ref:`dev plugin`
-
-Configuration defaults (at built time):
-
-:DO: Default on
+- :ref:`SearXNG settings <settings plugins>`
+- :ref:`dev plugin`
 
 .. _configured plugins:
 
@@ -22,18 +19,13 @@ Configuration defaults (at built time):
       :widths: 3 1 9
 
       * - Name
-        - DO
+        - Active
         - Description
 
-          JS & CSS dependencies
+      {% for plg in plugins %}
 
-      {% for plgin in plugins %}
-
-      * - {{plgin.name}}
-        - {{(plgin.default_on and "y") or ""}}
-        - {{plgin.description}}
-
-          {% for dep in (plgin.js_dependencies + plgin.css_dependencies) %}
-          | ``{{dep}}`` {% endfor %}
+      * - {{plg.info.name}}
+        - {{(plg.active and "yes") or "no"}}
+        - {{plg.info.description}}
 
       {% endfor %}

docs/admin/searx.favicons.rst

@@ -93,15 +93,13 @@ TOML_ configuration is created in the file ``/etc/searxng/favicons.toml``.
 :py:obj:`cache.db_url <.FaviconCacheConfig.db_url>`:
   The path to the (SQLite_) database file.  The default path is in the `/tmp`_
   folder, which is deleted on every reboot and is therefore unsuitable for a
-  production environment.  The FHS_ provides the folder  for the
-  application cache
+  production environment.  The FHS_ provides the folder `/var/cache`_ for the
+  cache of applications, so a suitable storage location of SearXNG's caches is
+  folder ``/var/cache/searxng``.
 
-  The FHS_ provides the folder `/var/cache`_ for the cache of applications, so a
-  suitable storage location of SearXNG's caches is folder ``/var/cache/searxng``.
-  In container systems, a volume should be mounted for this folder and in a
-  standard installation (compare :ref:`create searxng user`), the folder must be
-  created and the user under which the SearXNG process is running must be given
-  write permission to this folder.
+  In a standard installation (compare :ref:`create searxng user`), the folder
+  must be created and the user under which the SearXNG process is running must
+  be given write permission to this folder.
 
   .. code:: bash
 
@@ -109,6 +107,10 @@ TOML_ configuration is created in the file ``/etc/searxng/favicons.toml``.
      $ sudo chown root:searxng /var/cache/searxng/
      $ sudo chmod g+w /var/cache/searxng/
 
+  In container systems, a volume should be mounted for this folder.  Check
+  whether the process in the container has read/write access to the mounted
+  folder.
+
 :py:obj:`cache.LIMIT_TOTAL_BYTES <.FaviconCacheConfig.LIMIT_TOTAL_BYTES>`:
   Maximum of bytes stored in the cache of all blobs.  The limit is only reached
   at each maintenance interval after which the oldest BLOBs are deleted; the

docs/admin/settings/index.rst

@@ -13,7 +13,7 @@ Settings
    :maxdepth: 2
 
    settings
-   settings_engine
+   settings_engines
    settings_brand
    settings_general
    settings_search
@@ -22,6 +22,6 @@ Settings
    settings_redis
    settings_outgoing
    settings_categories_as_tabs
-
+   settings_plugins
 
 

docs/admin/settings/settings.rst

@@ -59,7 +59,7 @@ and can relied on the default configuration :origin:`searx/settings.yml` using:
     use_default_settings: true
     server:
         secret_key: "ultrasecretkey"   # change this!
-        bind_address: "0.0.0.0"
+        bind_address: "[::]"
 
 ``engines:``
   With ``use_default_settings: true``, each settings can be override in a

docs/admin/settings/settings_engines.rst

@@ -1,14 +1,30 @@
-.. _settings engine:
+.. _settings engines:
 
-===========
-``engine:``
-===========
+============
+``engines:``
+============
 
 .. sidebar:: Further reading ..
 
    - :ref:`configured engines`
    - :ref:`engines-dev`
 
+
+In the section ``engines:`` is a list of the engines that are to be made
+available in the instance.  Each list entry is in turn a key/value mapping.
+
+.. code:: yaml
+
+   engines:
+
+     - name: dummy.online
+       engine: dummy
+       ..
+     - name: dummy.offline
+       engine: dummy-offline
+       ..
+     ..
+
 In the code example below a *full fledged* example of a YAML setup from a dummy
 engine is shown.  Most of the options have a default value or even are optional.
 
@@ -19,7 +35,7 @@ engine is shown.  Most of the options have a default value or even are optional.
 
 .. code:: yaml
 
-   - name: example engine
+   - name: example
      engine: example
      shortcut: demo
      base_url: 'https://{language}.example.com/'

docs/admin/settings/settings_outgoing.rst

@@ -43,7 +43,7 @@ Communication with search engines.
   Global timeout of the requests made to others engines in seconds.  A bigger
   timeout will allow to wait for answers from slow engines, but in consequence
   will slow SearXNG reactivity (the result page may take the time specified in the
-  timeout to load).  Can be override by ``timeout`` in the :ref:`settings engine`.
+  timeout to load).  Can be override by ``timeout`` in the :ref:`settings engines`.
 
 ``useragent_suffix`` :
   Suffix to the user-agent SearXNG uses to send requests to others engines.  If an
@@ -105,6 +105,6 @@ Communication with search engines.
 
 ``using_tor_proxy`` :
   Using tor proxy (``true``) or not (``false``) for all engines.  The default is
-  ``false`` and can be overwritten in the :ref:`settings engine`
+  ``false`` and can be overwritten in the :ref:`settings engines`
 
 

docs/admin/settings/settings_plugins.rst

@@ -0,0 +1,77 @@
+.. _settings plugins:
+
+============
+``plugins:``
+============
+
+.. attention::
+
+   The ``enabled_plugins:`` section in SearXNG's settings no longer exists.
+   There is no longer a distinction between built-in and external plugin, all
+   plugins are registered via the settings in the ``plugins:`` section.
+
+.. sidebar:: Further reading ..
+
+   - :ref:`plugins admin`
+   - :ref:`dev plugin`
+
+In SearXNG, plugins can be registered in the :py:obj:`PluginStore
+<searx.plugins.PluginStorage>` via a fully qualified class name.
+
+A configuration (:py:obj:`PluginCfg <searx.plugins.PluginCfg>`) can be
+transferred to the plugin, e.g. to activate it by default / *opt-in* or
+*opt-out* from user's point of view.
+
+Please note that some plugins, such as the :ref:`hostnames plugin` plugin,
+require further configuration before they can be made available for selection.
+
+built-in plugins
+================
+
+The built-in plugins are all located in the namespace `searx.plugins`.
+
+.. code:: yaml
+
+    plugins:
+
+      searx.plugins.calculator.SXNGPlugin:
+        active: true
+
+      searx.plugins.hash_plugin.SXNGPlugin:
+        active: true
+
+      searx.plugins.self_info.SXNGPlugin:
+        active: true
+
+      searx.plugins.tracker_url_remover.SXNGPlugin:
+        active: true
+
+      searx.plugins.unit_converter.SXNGPlugin:
+        active: true
+
+      searx.plugins.ahmia_filter.SXNGPlugin:
+        active: true
+
+      searx.plugins.hostnames.SXNGPlugin:
+        active: true
+
+      searx.plugins.oa_doi_rewrite.SXNGPlugin:
+        active: false
+
+      searx.plugins.tor_check.SXNGPlugin:
+        active: false
+
+
+.. _settings external_plugins:
+
+external plugins
+================
+
+.. _Only show green hosted results:
+   https://github.com/return42/tgwf-searx-plugins/
+
+SearXNG supports *external plugins* / there is no need to install one, SearXNG
+runs out of the box.
+
+- `Only show green hosted results`_
+- ..

docs/admin/settings/settings_search.rst

@@ -12,6 +12,7 @@
      favicon_resolver: ""
      default_lang: ""
      ban_time_on_fail: 5
+     max_page: 0
      max_ban_time_on_fail: 120
      suspended_times:
        SearxEngineAccessDenied: 86400
@@ -33,14 +34,21 @@
 ``autocomplete``:
   Existing autocomplete backends, leave blank to turn it off.
 
+  - ``360search``
+  - ``baidu``
+  - ``brave``
   - ``dbpedia``
   - ``duckduckgo``
   - ``google``
   - ``mwmbl``
-  - ``startpage``
-  - ``swisscows``
+  - ``quark``
   - ``qwant``
+  - ``seznam``
+  - ``sogou``
+  - ``stract``
+  - ``swisscows``
   - ``wikipedia``
+  - ``yandex``
 
 ``favicon_resolver``:
   To activate favicons in SearXNG's result list select a default
@@ -69,6 +77,11 @@
        - fr
        - fr-BE
 
+``max_page``:
+  If engine supports paging, 0 means unlimited numbers of pages.  The value
+  is only applied if the engine itself does not have a max value that is
+  lower than this one.
+
 ``ban_time_on_fail``:
   Ban time in seconds after engine errors.
 

docs/admin/settings/settings_ui.rst

@@ -44,7 +44,7 @@
 ``center_alignment`` : default ``false``
   When enabled, the results are centered instead of being in the left (or RTL)
   side of the screen.  This setting only affects the *desktop layout*
-  (:origin:`min-width: @tablet <searx/static/themes/simple/src/less/definitions.less>`)
+  (:origin:`min-width: @tablet <client/simple/src/less/definitions.less>`)
 
 .. cache_url:
 

docs/conf.py

@@ -54,7 +54,7 @@ searx.engines.load_engines(searx.settings['engines'])
 jinja_contexts = {
     'searx': {
         'engines': searx.engines.engines,
-        'plugins': searx.plugins.plugins,
+        'plugins': searx.plugins.STORAGE,
         'version': {
             'node': os.getenv('NODE_MINIMUM_VERSION')
         },
@@ -127,11 +127,11 @@ extensions = [
     "sphinx_tabs.tabs", # https://github.com/djungelorm/sphinx-tabs
     'myst_parser',  # https://www.sphinx-doc.org/en/master/usage/markdown.html
     'notfound.extension',  # https://github.com/readthedocs/sphinx-notfound-page
-    'sphinxcontrib.autodoc_pydantic',  # https://github.com/mansenfranzen/autodoc_pydantic
 ]
 
+# autodoc_typehints = "description"
 autodoc_default_options = {
-    'member-order': 'groupwise',
+    'member-order': 'bysource',
 }
 
 myst_enable_extensions = [
@@ -143,10 +143,10 @@ suppress_warnings = ['myst.domains']
 intersphinx_mapping = {
     "python": ("https://docs.python.org/3/", None),
     "babel" : ("https://babel.readthedocs.io/en/latest/", None),
-    "flask": ("https://flask.palletsprojects.com/", None),
+    "flask": ("https://flask.palletsprojects.com/en/stable/", None),
     "flask_babel": ("https://python-babel.github.io/flask-babel/", None),
-    # "werkzeug": ("https://werkzeug.palletsprojects.com/", None),
-    "jinja": ("https://jinja.palletsprojects.com/", None),
+    "werkzeug": ("https://werkzeug.palletsprojects.com/en/stable/", None),
+    "jinja": ("https://jinja.palletsprojects.com/en/stable/", None),
     "linuxdoc" : ("https://return42.github.io/linuxdoc/", None),
     "sphinx" : ("https://www.sphinx-doc.org/en/master/", None),
     "redis": ('https://redis.readthedocs.io/en/stable/', None),
@@ -161,7 +161,7 @@ issues_github_path = "searxng/searxng"
 notfound_urls_prefix = '/'
 
 sys.path.append(os.path.abspath('_themes'))
-sys.path.insert(0, os.path.abspath("../utils/"))
+sys.path.insert(0, os.path.abspath("../"))
 html_theme_path = ['_themes']
 html_theme = "searxng"
 
@@ -197,7 +197,7 @@ html_sidebars = {
     ],
 }
 singlehtml_sidebars = {"index": ["project.html", "localtoc.html"]}
-html_logo = "../src/brand/searxng-wordmark.svg"
+html_logo = "../client/simple/src/brand/searxng-wordmark.svg"
 html_title = "SearXNG Documentation ({})".format(VERSION_STRING)
 html_show_sourcelink = True
 

docs/dev/answerers/builtins.rst

@@ -0,0 +1,11 @@
+.. _builtin answerers:
+
+==================
+Built-in Answerers
+==================
+
+.. toctree::
+   :maxdepth: 1
+
+   random
+   statistics

docs/dev/answerers/development.rst

@@ -0,0 +1,7 @@
+.. _dev answerers:
+
+====================
+Answerer Development
+====================
+
+.. automodule:: searx.answerers

docs/dev/answerers/index.rst

@@ -0,0 +1,9 @@
+=========
+Answerers
+=========
+
+.. toctree::
+   :maxdepth: 2
+
+   development
+   builtins

docs/dev/answerers/random.rst

@@ -0,0 +1,8 @@
+.. _answerer.random:
+
+======
+Random
+======
+
+.. autoclass:: searx.answerers.random.SXNGAnswerer
+   :members:

docs/dev/answerers/statistics.rst

@@ -0,0 +1,8 @@
+.. _answerer.statistics:
+
+==========
+Statistics
+==========
+
+.. autoclass:: searx.answerers.statistics.SXNGAnswerer
+   :members:

docs/dev/engines/engine_overview.rst

@@ -14,7 +14,7 @@ Engine Overview
 .. sidebar:: Further reading ..
 
    - :ref:`configured engines`
-   - :ref:`settings engine`
+   - :ref:`settings engines`
 
 SearXNG is a metasearch-engine_, so it uses different search engines to provide
 better results.
@@ -63,7 +63,7 @@ Engine File
 Engine ``settings.yml``
 -----------------------
 
-For a more  detailed description, see :ref:`settings engine` in the :ref:`settings.yml`.
+For a more  detailed description, see :ref:`settings engines` in the :ref:`settings.yml`.
 
 .. table:: Common options in the engine setup (``settings.yml``)
    :width: 100%
@@ -237,335 +237,18 @@ following parameters can be used to specify a search request:
    =================== =========== ==========================================================================
 
 
-.. _engine results:
-.. _engine media types:
+Making a Response
+=================
 
-Result Types (``template``)
-===========================
+In the ``response`` function of the engine, the HTTP response (``resp``) is
+parsed and a list of results is returned.
 
-Each result item of an engine can be of different media-types.  Currently the
-following media-types are supported.  To set another media-type as
-:ref:`template default`, the parameter ``template`` must be set to the desired
-type.
+A engine can append result-items of different media-types and different
+result-types to the result list.  The list of the result items is render to HTML
+by templates.  For more details read section:
 
-.. _template default:
+- :ref:`simple theme templates`
+- :ref:`result types`
 
-``default``
------------
 
-.. table::  Parameter of the **default** media type:
-   :width: 100%
 
-   ========================= =====================================================
-   result-parameter          information
-   ========================= =====================================================
-   url                       string, url of the result
-   title                     string, title of the result
-   content                   string, general result-text
-   publishedDate             :py:class:`datetime.datetime`, time of publish
-   ========================= =====================================================
-
-
-.. _template images:
-
-``images``
-----------
-
-.. list-table:: Parameter of the **images** media type
-   :header-rows: 2
-   :width: 100%
-
-   * - result-parameter
-     - Python type
-     - information
-
-   * - template
-     - :py:class:`str`
-     - is set to ``images.html``
-
-   * - url
-     - :py:class:`str`
-     - url to the result site
-
-   * - title
-     - :py:class:`str`
-     - title of the result
-
-   * - content
-     - :py:class:`str`
-     - description of the image
-
-   * - publishedDate
-     - :py:class:`datetime <datetime.datetime>`
-     - time of publish
-
-   * - img_src
-     - :py:class:`str`
-     - url to the result image
-
-   * - thumbnail_src
-     - :py:class:`str`
-     - url to a small-preview image
-
-   * - resolution
-     - :py:class:`str`
-     - the resolution of the image (e.g. ``1920 x 1080`` pixel)
-
-   * - img_format
-     - :py:class:`str`
-     - the format of the image (e.g. ``png``)
-
-   * - filesize
-     - :py:class:`str`
-     - size of bytes in :py:obj:`human readable <searx.humanize_bytes>` notation
-       (e.g. ``MB`` for 1024 \* 1024 Bytes filesize).
-
-
-.. _template videos:
-
-``videos``
-----------
-
-.. table::  Parameter of the **videos** media type:
-   :width: 100%
-
-   ========================= =====================================================
-   result-parameter          information
-   ------------------------- -----------------------------------------------------
-   template                  is set to ``videos.html``
-   ========================= =====================================================
-   url                       string, url of the result
-   title                     string, title of the result
-   content                   *(not implemented yet)*
-   publishedDate             :py:class:`datetime.datetime`, time of publish
-   thumbnail                 string, url to a small-preview image
-   length                    :py:class:`datetime.timedelta`, duration of result
-   views                     string, view count in humanized number format
-   ========================= =====================================================
-
-
-.. _template torrent:
-
-``torrent``
------------
-
-.. _magnetlink: https://en.wikipedia.org/wiki/Magnet_URI_scheme
-
-.. table::  Parameter of the **torrent** media type:
-   :width: 100%
-
-   ========================= =====================================================
-   result-parameter          information
-   ------------------------- -----------------------------------------------------
-   template                  is set to ``torrent.html``
-   ========================= =====================================================
-   url                       string, url of the result
-   title                     string, title of the result
-   content                   string, general result-text
-   publishedDate             :py:class:`datetime.datetime`,
-                             time of publish *(not implemented yet)*
-   seed                      int, number of seeder
-   leech                     int, number of leecher
-   filesize                  int, size of file in bytes
-   files                     int, number of files
-   magnetlink                string, magnetlink_ of the result
-   torrentfile               string, torrentfile of the result
-   ========================= =====================================================
-
-
-.. _template map:
-
-``map``
--------
-
-.. table::  Parameter of the **map** media type:
-   :width: 100%
-
-   ========================= =====================================================
-   result-parameter          information
-   ------------------------- -----------------------------------------------------
-   template                  is set to ``map.html``
-   ========================= =====================================================
-   url                       string, url of the result
-   title                     string, title of the result
-   content                   string, general result-text
-   publishedDate             :py:class:`datetime.datetime`, time of publish
-   latitude                  latitude of result (in decimal format)
-   longitude                 longitude of result (in decimal format)
-   boundingbox               boundingbox of result (array of 4. values
-                             ``[lat-min, lat-max, lon-min, lon-max]``)
-   geojson                   geojson of result (https://geojson.org/)
-   osm.type                  type of osm-object (if OSM-Result)
-   osm.id                    id of osm-object (if OSM-Result)
-   address.name              name of object
-   address.road              street name of object
-   address.house_number      house number of object
-   address.locality          city, place of object
-   address.postcode          postcode of object
-   address.country           country of object
-   ========================= =====================================================
-
-
-.. _template paper:
-
-``paper``
----------
-
-.. _BibTeX format: https://www.bibtex.com/g/bibtex-format/
-.. _BibTeX field types: https://en.wikipedia.org/wiki/BibTeX#Field_types
-
-.. list-table:: Parameter of the **paper** media type /
-                see `BibTeX field types`_ and `BibTeX format`_
-   :header-rows: 2
-   :width: 100%
-
-   * - result-parameter
-     - Python type
-     - information
-
-   * - template
-     - :py:class:`str`
-     - is set to ``paper.html``
-
-   * - title
-     - :py:class:`str`
-     - title of the result
-
-   * - content
-     - :py:class:`str`
-     - abstract
-
-   * - comments
-     - :py:class:`str`
-     - free text display in italic below the content
-
-   * - tags
-     - :py:class:`List <list>`\ [\ :py:class:`str`\ ]
-     - free tag list
-
-   * - publishedDate
-     - :py:class:`datetime <datetime.datetime>`
-     - last publication date
-
-   * - type
-     - :py:class:`str`
-     - short description of medium type, e.g. *book*, *pdf* or *html* ...
-
-   * - authors
-     - :py:class:`List <list>`\ [\ :py:class:`str`\ ]
-     - list of authors of the work (authors with a "s")
-
-   * - editor
-     - :py:class:`str`
-     - list of editors of a book
-
-   * - publisher
-     - :py:class:`str`
-     - name of the publisher
-
-   * - journal
-     - :py:class:`str`
-     - name of the journal or magazine the article was
-       published in
-
-   * - volume
-     - :py:class:`str`
-     - volume number
-
-   * - pages
-     - :py:class:`str`
-     - page range where the article is
-
-   * - number
-     - :py:class:`str`
-     - number of the report or the issue number for a journal article
-
-   * - doi
-     - :py:class:`str`
-     - DOI number (like ``10.1038/d41586-018-07848-2``)
-
-   * - issn
-     - :py:class:`List <list>`\ [\ :py:class:`str`\ ]
-     - ISSN number like ``1476-4687``
-
-   * - isbn
-     - :py:class:`List <list>`\ [\ :py:class:`str`\ ]
-     - ISBN number like ``9780201896831``
-
-   * - pdf_url
-     - :py:class:`str`
-     - URL to the full article, the PDF version
-
-   * - html_url
-     - :py:class:`str`
-     - URL to full article, HTML version
-
-
-.. _template packages:
-
-``packages``
-------------
-
-.. list-table:: Parameter of the **packages** media type
-   :header-rows: 2
-   :width: 100%
-
-   * - result-parameter
-     - Python type
-     - information
-
-   * - template
-     - :py:class:`str`
-     - is set to ``packages.html``
-
-   * - title
-     - :py:class:`str`
-     - title of the result
-
-   * - content
-     - :py:class:`str`
-     - abstract
-
-   * - package_name
-     - :py:class:`str`
-     - the name of the package
-
-   * - version
-     - :py:class:`str`
-     - the current version of the package
-
-   * - maintainer
-     - :py:class:`str`
-     - the maintainer or author of the project
-
-   * - publishedDate
-     - :py:class:`datetime <datetime.datetime>`
-     - date of latest update or release
-
-   * - tags
-     - :py:class:`List <list>`\ [\ :py:class:`str`\ ]
-     - free tag list
-
-   * - popularity
-     - :py:class:`str`
-     - the popularity of the package, e.g. rating or download count
-
-   * - license_name
-     - :py:class:`str`
-     - the name of the license
-
-   * - license_url
-     - :py:class:`str`
-     - the web location of a license copy
-
-   * - homepage
-     - :py:class:`str`
-     - the url of the project's homepage
-
-   * - source_code_url
-     - :py:class:`str`
-     - the location of the project's source code
-
-   * - links
-     - :py:class:`dict`
-     - additional links in the form of ``{'link_name': 'http://example.com'}``

docs/dev/engines/index.rst

@@ -19,6 +19,14 @@ Engine Implementations
    engine_overview
 
 
+ResultList and engines
+======================
+
+.. autoclass:: searx.result_types.ResultList
+
+.. autoclass:: searx.result_types.EngineResults
+
+
 Engine Types
 ============
 
@@ -45,6 +53,7 @@ Online Engines
    demo/demo_online
    xpath
    mediawiki
+   json_engine
 
 .. toctree::
    :maxdepth: 1

docs/dev/engines/json_engine.rst

@@ -0,0 +1,13 @@
+.. _json_engine engine:
+
+============
+JSON Engine
+============
+
+.. contents::
+   :depth: 2
+   :local:
+   :backlinks: entry
+
+.. automodule:: searx.engines.json_engine
+  :members:

docs/dev/engines/online/core.rst

@@ -0,0 +1,13 @@
+.. _core engine:
+
+====
+CORE
+====
+
+.. contents::
+   :depth: 2
+   :local:
+   :backlinks: entry
+
+.. automodule:: searx.engines.core
+   :members:

docs/dev/engines/online/reuters.rst

@@ -0,0 +1,8 @@
+.. _reuters engine:
+
+=======
+Reuters
+=======
+
+.. automodule:: searx.engines.reuters
+   :members:

docs/dev/engines/online/soundcloud.rst

@@ -0,0 +1,13 @@
+.. _soundcloud engine:
+
+==========
+Soundcloud
+==========
+
+.. contents::
+   :depth: 2
+   :local:
+   :backlinks: entry
+
+.. automodule:: searx.engines.soundcloud
+   :members:

docs/dev/extended_types.rst

@@ -0,0 +1,7 @@
+.. _extended_types.:
+
+==============
+Extended Types
+==============
+
+.. automodule:: searx.extended_types

docs/dev/index.rst

@@ -8,9 +8,13 @@ Developer documentation
    quickstart
    rtm_asdf
    contribution_guide
+   extended_types
    engines/index
+   result_types/index
+   templates
    search_api
-   plugins
+   plugins/index
+   answerers/index
    translation
    lxcdev
    makefile

docs/dev/makefile.rst

@@ -180,10 +180,13 @@ sources of the theme need to be rebuild.  You can do that by running::
 
   $ make themes.all
 
-Alternatively to ``themes.all`` you can run *live builds* of the theme you are
-modify (:ref:`make themes`)::
+..
+   ToDo: vite server is not implemented yet / will be done in a follow up PR
 
-  $ LIVE_THEME=simple make run
+   Alternatively to ``themes.all`` you can run *live builds* of the theme you are
+   modify (:ref:`make themes`)::
+
+    $ LIVE_THEME=simple make run
 
 .. _make format.python:
 

docs/dev/plugins.rst

@@ -1,106 +0,0 @@
-.. _dev plugin:
-
-=======
-Plugins
-=======
-
-.. sidebar:: Further reading ..
-
-   - :ref:`plugins generic`
-
-Plugins can extend or replace functionality of various components of searx.
-
-Example plugin
-==============
-
-.. code:: python
-
-   name = 'Example plugin'
-   description = 'This plugin extends the suggestions with the word "example"'
-   default_on = False  # disabled by default
-
-   # attach callback to the post search hook
-   #  request: flask request object
-   #  ctx: the whole local context of the post search hook
-   def post_search(request, search):
-       search.result_container.suggestions.add('example')
-       return True
-
-External plugins
-================
-
-SearXNG supports *external plugins* / there is no need to install one, SearXNG
-runs out of the box.  But to demonstrate; in the example below we install the
-SearXNG plugins from *The Green Web Foundation* `[ref]
-<https://www.thegreenwebfoundation.org/news/searching-the-green-web-with-searx/>`__:
-
-.. code:: bash
-
-   $ sudo utils/searxng.sh instance cmd bash -c
-   (searxng-pyenv)$ pip install git+https://github.com/return42/tgwf-searx-plugins
-
-In the :ref:`settings.yml` activate the ``plugins:`` section and add module
-``only_show_green_results`` from ``tgwf-searx-plugins``.
-
-.. code:: yaml
-
-   plugins:
-     ...
-     - only_show_green_results
-     ...
-
-
-Plugin entry points
-===================
-
-Entry points (hooks) define when a plugin runs. Right now only three hooks are
-implemented. So feel free to implement a hook if it fits the behaviour of your
-plugin. A plugin doesn't need to implement all the hooks.
-
-
-.. py:function:: pre_search(request, search) -> bool
-
-   Runs BEFORE the search request.
-
-   `search.result_container` can be changed.
-
-   Return a boolean:
-
-   * True to continue the search
-   * False to stop the search
-
-   :param flask.request request:
-   :param searx.search.SearchWithPlugins search:
-   :return: False to stop the search
-   :rtype: bool
-
-
-.. py:function:: post_search(request, search) -> None
-
-   Runs AFTER the search request.
-
-   :param flask.request request: Flask request.
-   :param searx.search.SearchWithPlugins search: Context.
-
-
-.. py:function:: on_result(request, search, result) -> bool
-
-   Runs for each result of each engine.
-
-   `result` can be changed.
-
-   If `result["url"]` is defined, then `result["parsed_url"] = urlparse(result['url'])`
-
-   .. warning::
-      `result["url"]` can be changed, but `result["parsed_url"]` must be updated too.
-
-   Return a boolean:
-
-   * True to keep the result
-   * False to remove the result
-
-   :param flask.request request:
-   :param searx.search.SearchWithPlugins search:
-   :param typing.Dict result: Result, see - :ref:`engine results`
-   :return: True to keep the result
-   :rtype: bool

docs/dev/plugins/builtins.rst

@@ -0,0 +1,15 @@
+.. _builtin plugins:
+
+================
+Built-in Plugins
+================
+
+.. toctree::
+   :maxdepth: 1
+
+   calculator
+   hash_plugin
+   hostnames
+   self_info
+   tor_check
+   unit_converter

docs/dev/plugins/calculator.rst

@@ -0,0 +1,8 @@
+.. _plugins.calculator:
+
+==========
+Calculator
+==========
+
+.. automodule:: searx.plugins.calculator
+   :members:

docs/dev/plugins/development.rst

@@ -0,0 +1,7 @@
+.. _dev plugin:
+
+==================
+Plugin Development
+==================
+
+.. automodule:: searx.plugins

docs/dev/plugins/hash_plugin.rst

@@ -0,0 +1,8 @@
+.. _hash_plugin plugin:
+
+===========
+Hash Values
+===========
+
+.. autoclass:: searx.plugins.hash_plugin.SXNGPlugin
+   :members:

docs/dev/plugins/hostnames.rst

@@ -1,9 +1,8 @@
 .. _hostnames plugin:
 
-================
-Hostnames plugin
-================
+=========
+Hostnames
+=========
 
 .. automodule:: searx.plugins.hostnames
-  :members:
-
+   :members:

docs/dev/plugins/index.rst

@@ -0,0 +1,9 @@
+=======
+Plugins
+=======
+
+.. toctree::
+   :maxdepth: 2
+
+   development
+   builtins