This patch adds a new result type: Paper
- Python class: searx/result_types/paper.py
- Jinja template: searx/templates/simple/result_templates/paper.html
- CSS (less) client/simple/src/less/result_types/paper.less
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
Compared to ``lightbulb`` theme we used in the past for the dark theme, the
``monokai`` has a better contrast [1].
BTW, the result list of SearXNG should not act as a code-checker: The border &
color of class ``.err`` (used for syntax errors) has been removed / code
snippets are often not well formed nor valid code and the rendering of such code
fragments as errors obscures the view on the code snippet.
[1] https://pygments.org/styles/
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
On mobile devices, when the search input is focused, move the cursor
to the end of the existing text. This improves the user experience by
making it easier to edit or append to the current query without
manually moving the cursor first.
Closes: https://github.com/searxng/searxng/issues/5112
To avoid an `unsafe-inline` in the CSP header, the JS code must be moved to the
client side [1].
The `<script>` tag at the end of the HTML originates from the old implementation
of the JS client. Since PR-5073 [2] was merged, the `type` is now `module`, and
the tag must be moved to the beginning of the HTML.
> We need to inline this "JS is enabled?" thing to prevent layout shifts and
> temporary "no JS enabled" visuals as ESM scripts loads and evals everything
> deferred from initial DOM render [3]
That's true in theory, but in practice, this effect is unnoticeable because it's
masked by another effect (which we can't avoid): If we load the page with a
severely throttled connection, the HTML (result list) takes a long time to
load. Then the CSS is loaded, which also takes longer. Until the CSS has loaded,
there's no layout. A layout shift is therefore largely determined by the loading
of the HTML and CSS itself.
The running times of the ESM script can be neglected compared to the loading
times of HTML & CSS.
[1] https://github.com/searxng/searxng-docker/pull/424#issuecomment-3199494256
[2] https://github.com/searxng/searxng/pull/5073
[3] https://github.com/searxng/searxng-docker/pull/424#issuecomment-3199622504
TypeScript is a superset of JavaScript, converting the entire theme to
TypeScript allows us to receive much more feedback on possible issues made in
package updates or our own typos, furthermore, it allows to transpile properly
to lower specs. This PR couldn't be done in smaller commits, a lot of work
needed to make everything *work properly*:
- A browser baseline has been set that requires minimum **Chromium 93, Firefox
92 and Safari 15** (proper visuals/operation on older browser versions is not
guaranteed)
- LightningCSS now handles minification and prefix creation for CSS.
- All hardcoded polyfills and support for previous browser baseline versions
have been removed.
- Convert codebase to TypeScript.
- Convert IIFE to ESM, handling globals with IIFE is cumbersome, ESM is the
standard for virtually any use of JS nowadays.
- Vite now builds the theme without the need for `vite-plugin-static-copy`.
- `searxng.ready` now accepts an array of conditions for the callback to be
executed.
- Replace `leaflet` with `ol` as there were some issues with proper Vite
bundling.
- Merged `head` with `main` script, as head was too small now.
- Add `assertElement` to properly check the existence of critical DOM elements.
- `searxng.on` renamed to `searxng.listen` with some handling improvements.
- this PR fixes that the columns of the weather table are overflowing on small screen devices
- therefore we now display "..." at the end of too long words and cut them off
- additionally I added some small gap between columns, otherwise it looks weird on small screens
- closes https://github.com/searxng/searxng/issues/4887
The types necessary for weather information such as GeoLocation, DateTime,
Temperature,Pressure, WindSpeed, RelativeHumidity, Compass (wind direction) and
symbols for the weather have been implemented.
There are unit conversions and translations for weather property labels.
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
This has been a regression introduced with the removal of
the unmaintained autocomplete.js library.
We should only focus the search bar on the main search page at `/`
and not at the results page located at `/search`.
I'm not sure if there's a better way to figure out if
we're on the results page than checking if the id of the
main element is `#main_results`, checking the path
obviously isn't a better solution because it can differ
depending on the instance / reverse proxy / ....
- related to 32823ecb69
- closes https://github.com/searxng/searxng/issues/4846
overflow-y: scroll
If the information on the image exceeds the visible area in the detail view,
there must be a way to access this information via scroll.
max-height: -17rem versus 7rem
There are new fields in the lower area, so the height of the image (top) must
be reduced
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
This patch adds a new result type: KeyValue
- Python class: searx/result_types/keyvalue.py
- Jinja template: searx/templates/simple/result_templates/keyvalue.html
- CSS (less) client/simple/src/less/result_types/keyvalue.less
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
On mobile devices with browser chrome (UI) that recedes on scroll,
'vh' includes the height covered by chrome, which 'dvh' does not.
By using 'dvh' the footer is immediately visible on the homepage
without scrollbar on mobile devices.
BTW: Rename the manufacturer-specific name ``ion-icon`` of the icon set in
SerXNG to ``sxng-icon-set`` --> The icon set can be assembled together as
desired in the FE and should therefore not have a manufacturer-specific name in
the style and template definitions.
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
This patch implements the template generation of the template:
searx/templates/simple/icons.html
by the way the icon set (the icon names) has been normalized:
film-outline --> film
magnet-outline --> magnet
..
warning --> alert
Some missing (categorie) icons had been added.
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
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
Vite is a build tool, it consists of two major parts [1]:
- A dev server that provides rich feature enhancements over native ES modules,
for example extremely fast Hot Module Replacement (HMR).
- A build command that bundles your code with Rollup, pre-configured to output
highly optimized static assets for production.
[1] https://vite.dev/guide/
Signed-off-by: Markus Heiser <markus.heiser@darmarit.de>
