templates/layout.html

<!doctype html>
<html lang="">
<head>
    <title>Contact App</title>
    <link rel="stylesheet" href="https://the.missing.style/v0.2.0/missing.min.css">
    <link rel="stylesheet" href="/static/site.css">
    <script src="/static/js/htmx-1.8.0.js"></script>
    <script src="/static/js/_hyperscript-0.9.7.js"></script>
    <script src="/static/js/rsjs-menu.js" type="module"></script>
    <script defer src="https://unpkg.com/alpinejs@3/dist/cdn.min.js"></script>
    <script defer src="https://unpkg.com/sweetalert2@11.17.2/dist/sweetalert2.all.min.js"></script>
</head>
<body hx-boost="true">
<main>
    <header>
        <h1>
            <all-caps>contacts.app</all-caps>
            <sub-title>A Demo Contacts Application</sub-title>
        </h1>
    </header>
    {% for message in get_flashed_messages() %}
      <div class="flash">{{ message }}</div>
    {% endfor %}
    {% block content %}{% endblock %}
</main>

<script>
    function sweetConfirm(elt, config) {
        Swal.fire(config).then((result) => {
            if(result.isConfirmed) {
                elt.dispatchEvent(new Event('confirmed'));
            }
        })
    }
</script>
</body>
</html>