Boosts webpages with HTMX

Fixes #144
Fixes #145
This commit is contained in:
Éloi Rivard 2023-06-23 16:26:38 +02:00
parent 9b75f4d302
commit bb95978376
8 changed files with 44 additions and 22 deletions

View file

@ -12,6 +12,7 @@ Added
- Configuration entries can be loaded from files if the entry key has a *_FILE* suffix
and the entry value is the path to the file. :issue:`134` :pr:`134`
- Field list support. :issue:`115` :pr:`136`
- Pages are boosted with HTMX :issue:`144` :issue:`145` :pr:`137`
Removed
*******

View file

@ -4,6 +4,7 @@ from logging.config import dictConfig
from flask import Flask
from flask import g
from flask import request
from flask import session
from flask_themer import FileSystemThemeLoader
from flask_themer import render_template
@ -134,6 +135,7 @@ def setup_flask(app):
"website_name": app.config.get("NAME", "Canaille"),
"user": current_user(),
"menu": True,
"is_boosted": request.headers.get("HX-Boosted", False),
}
@app.errorhandler(400)

View file

@ -89,7 +89,9 @@ def set_parameter_in_url_query(url, **kwargs):
def request_is_htmx():
return request.headers.get("HX-Request", False)
return request.headers.get("HX-Request", False) and not request.headers.get(
"HX-Boosted", False
)
def render_htmx_template(template, htmx_template=None, **kwargs):

View file

@ -32,6 +32,9 @@ SECRET_KEY = "change me before you go in production"
# If you have a sentry instance, you can set its dsn here:
# SENTRY_DSN = "https://examplePublicKey@o0.ingest.sentry.io/0"
# Accelerates webpages with async requests
# HTMX = true
# If HIDE_INVALID_LOGINS is set to true (the default), when a user
# tries to sign in with an invalid login, a message is shown indicating
# that the password is wrong, but does not give a clue wether the login

View file

@ -3,12 +3,13 @@
<!doctype html>
<html lang="{{ locale }}">
<head>
<title>{% block title -%}{% trans %}Authorization interface{% endtrans %}{%- endblock %} - {{ website_name|default("Canaille") }}</title>
{% if not is_boosted %}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>{% block title -%}{% trans %}Authorization interface{% endtrans %}{%- endblock %} - {{ website_name|default("Canaille") }}</title>
<link href="/static/fomanticui/semantic.min.css" rel="stylesheet">
<link href="/static/fonts/lato.css" rel="stylesheet">
<link href="/static/css/base.css" rel="stylesheet">
@ -19,10 +20,10 @@
<script>window.html5 || document.write('<script src="/static/html5shiv/html5shiv.min.js"><\/script>')</script>
<script src="/static/js/respond.min.js"></script>
<![endif]-->
{% endif %}
</head>
<body>
<body hx-boost="true">
{% block menu %}
{% if user and menu %}
<div class="ui container menu-container">
@ -90,13 +91,17 @@
<footer>
<a href="{{ url_for('account.about') }}">{{ _("About Canaille") }}</a>
</footer>
{% if not is_boosted %}
<script src="/static/jquery/jquery.min.js"></script>
<script src="/static/fomanticui/semantic.min.js"></script>
{% if config.get("HTMX", true) %}
<script src="/static/htmx/htmx.min.js"></script>
<script src="/static/js/base.js"></script>
<script>
htmx.config.requestClass = "loading"
</script>
{% endif %}
<script src="/static/js/base.js"></script>
{% endif %}
{% block script %}{% endblock %}
</body>
</html>

View file

@ -32,6 +32,9 @@ FAVICON = "/static/img/canaille-c.png"
# If you have a sentry instance, you can set its dsn here:
# SENTRY_DSN = "https://examplePublicKey@o0.ingest.sentry.io/0"
# Accelerates webpages with async requests
# HTMX = true
# If HIDE_INVALID_LOGINS is set to true (the default), when a user
# tries to sign in with an invalid login, a message is shown indicating
# that the password is wrong, but does not give a clue wether the login

View file

@ -32,6 +32,9 @@ FAVICON = "/static/img/canaille-c.png"
# If you have a sentry instance, you can set its dsn here:
# SENTRY_DSN = "https://examplePublicKey@o0.ingest.sentry.io/0"
# Accelerates webpages with async requests
# HTMX = true
# If HIDE_INVALID_LOGINS is set to true (the default), when a user
# tries to sign in with an invalid login, a message is shown indicating
# that the password is wrong, but does not give a clue wether the login

View file

@ -41,6 +41,9 @@ Canaille is based on Flask, so any `flask configuration <https://flask.palletspr
:TIMEZONE:
*Optional.* The timezone in which datetimes will be displayed to the users. If unset, the server timezone will be used.
:HTMX:
*Optional.* Wether `HTMX <https://htmx.org>`_ will be used to accelerate webpages. Defaults to true.
:SENTRY_DSN:
*Optional.* A DSN to a sentry instance.
This needs the ``sentry_sdk`` python package to be installed.