mirror of
https://github.com/searxng/searxng.git
synced 2025-09-15 22:58:25 +02:00
d2b3c92e81
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
83 lines
4.3 KiB
HTML
83 lines
4.3 KiB
HTML
<!DOCTYPE html>
|
||
<html class="no-js theme-{{ preferences.get_value('simple_style') or 'auto' }} center-alignment-{{ preferences.get_value('center_alignment') and 'yes' or 'no' }}" lang="{{ locale_rfc5646 }}" {% if rtl %} dir="rtl"{% endif %}>
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="endpoint" content="{{ endpoint }}">
|
||
<meta name="description" content="SearXNG — a privacy-respecting, open metasearch engine">
|
||
<meta name="keywords" content="SearXNG, search, search engine, metasearch, meta search">
|
||
<meta name="generator" content="searxng/{{ searx_version }}">
|
||
<meta name="referrer" content="no-referrer">
|
||
<meta name="robots" content="noarchive">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<title>{% block title %}{% endblock %}{{ instance_name }}</title>
|
||
<script type="module" src="{{ url_for('static', filename='js/searxng.core.min.js') }}" client_settings="{{ client_settings }}"></script>
|
||
{% block meta %}{% endblock %}
|
||
{% if rtl %}
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/searxng-rtl.min.css') }}" type="text/css" media="screen">
|
||
{% else %}
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/searxng-ltr.min.css') }}" type="text/css" media="screen">
|
||
{% endif %}
|
||
{% if get_setting('server.limiter') or get_setting('server.public_instance') %}
|
||
<link rel="stylesheet" href="{{ url_for('client_token', token=link_token) }}" type="text/css">
|
||
{% endif %}
|
||
{% block head %}
|
||
<link title="{{ instance_name }}" type="application/opensearchdescription+xml" rel="search" href="{{ opensearch_url }}">
|
||
{% endblock %}
|
||
<link rel="icon" href="{{ url_for('static', filename='img/favicon.png') }}" sizes="any">
|
||
<link rel="icon" href="{{ url_for('static', filename='img/favicon.svg') }}" type="image/svg+xml">
|
||
<link rel="apple-touch-icon" href="{{ url_for('static', filename='img/favicon.png') }}">
|
||
</head>
|
||
<body class="{{ endpoint }}_endpoint" >
|
||
<main id="main_{{ self._TemplateReference__context.name|replace("simple/", "")|replace(".html", "") }}" class="{{body_class}}">
|
||
{% if errors %}
|
||
<div class="dialog-error" role="alert">
|
||
<a href="#" class="close" aria-label="close" title="close">×</a>
|
||
<ul>
|
||
{% for message in errors %}
|
||
<li>{{ message }}</li>
|
||
{% endfor %}
|
||
</ul>
|
||
</div>
|
||
{% endif %}
|
||
|
||
<nav id="links_on_top">
|
||
{%- from 'simple/icons.html' import icon_big -%}
|
||
{%- block linkto_about -%}
|
||
<a href="{{ url_for('info', pagename='about') }}" class="link_on_top_about">{{ icon_big('information-circle') }}<span>{{ _('About') }}</span></a>
|
||
{%- endblock -%}
|
||
{%- block linkto_donate -%}
|
||
{%- if donation_url -%}
|
||
<a href="{{ donation_url }}" class="link_on_top_donate">{{ icon_big('heart') }}<span>{{ _('Donate') }}</span></a>
|
||
{%- endif -%}
|
||
{%- endblock -%}
|
||
{%- block linkto_preferences -%}
|
||
<a href="{{ url_for('preferences') }}" class="link_on_top_preferences">{{ icon_big('settings') }}<span>{{ _('Preferences') }}</span></a>
|
||
{%- endblock -%}
|
||
</nav>
|
||
{% block header %}
|
||
{% endblock %}
|
||
{% block content %}
|
||
{% endblock %}
|
||
</main>
|
||
<footer>
|
||
<p>
|
||
{{ _('Powered by') }} <a href="{{ url_for('info', pagename='about') }}">SearXNG</a> - {{ searx_version }} — {{ _('a privacy-respecting, open metasearch engine') }}<br>
|
||
<a href="{{ searx_git_url }}">{{ _('Source code') }}</a>
|
||
| <a href="{{ get_setting('brand.issue_url') }}">{{ _('Issue tracker') }}</a>
|
||
{% if enable_metrics %}| <a href="{{ url_for('stats') }}">{{ _('Engine stats') }}</a>{% endif %}
|
||
{% if get_setting('brand.public_instances') %}
|
||
| <a href="{{ get_setting('brand.public_instances') }}">{{ _('Public instances') }}</a>
|
||
{% endif %}
|
||
{% if get_setting('general.privacypolicy_url') %}
|
||
| <a href="{{ get_setting('general.privacypolicy_url') }}">{{ _('Privacy policy') }}</a>
|
||
{% endif %}
|
||
{% if get_setting('general.contact_url') %}
|
||
| <a href="{{ get_setting('general.contact_url') }}">{{ _('Contact instance maintainer') }}</a>
|
||
{% endif %}
|
||
{% for title, link in get_setting('brand.custom.links').items() %}
|
||
| <a href="{{ link }}">{{ _(title) }}</a>
|
||
{% endfor %}
|
||
</p>
|
||
</footer>
|
||
</body>
|
||
</html>
|