75 lines
3.0 KiB
Plaintext
75 lines
3.0 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}{{ title | safe }}{% endblock %}</title>
|
|
<link rel="stylesheet" href="css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="css/app.css">
|
|
<meta name="htmx-config"
|
|
content='{"historyCacheSize":0,"refreshOnHistoryMiss":false}'>
|
|
<script src="js/bootstrap.bundle.min.js" defer></script>
|
|
<script src="js/htmx.min.js"></script>
|
|
<link rel="manifest" href="manifest.webmanifest">
|
|
<meta name="theme-color" content="#1a202c">
|
|
<link rel="icon" href="icons/favicon.ico" sizes="16x16 32x32 48x48">
|
|
<link rel="icon" href="icons/favicon.svg" type="image/svg+xml">
|
|
<link rel="apple-touch-icon" href="icons/apple-touch-icon.png">
|
|
<meta name="mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
|
<meta name="apple-mobile-web-app-title" content="Bible">
|
|
</head>
|
|
<body class="{% block body_class %}{% endblock %} bg-body-tertiary"
|
|
hx-boost="true" hx-target="#content" hx-swap="innerHTML show:window:top">
|
|
|
|
<nav class="site-header navbar navbar-expand-lg bg-dark sticky-top"
|
|
data-bs-theme="dark">
|
|
<div class="container-xl">
|
|
<a class="navbar-brand" href="./">Bible</a>
|
|
{% include "reference.njk" %}
|
|
<button class="navbar-toggler" type="button"
|
|
data-bs-toggle="collapse" data-bs-target="#site-nav"
|
|
aria-controls="site-nav" aria-expanded="false"
|
|
aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="site-nav">
|
|
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
|
{% block navbar_nav %}
|
|
{% endblock %}
|
|
</ul>
|
|
{% include "bookmark.njk" %}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="container-xl my-4">
|
|
<div class="row justify-content-center">
|
|
{# A verse number is a link to itself, so the browser handles the jump and
|
|
the address bar; this only adds the dialog on top. Enter comes free
|
|
with the link, which is why there is no key handler here. #}
|
|
<div id="content" class="col-12 col-xl-8" hx-history-elt
|
|
hx-on:click="var verse = event.target.closest('.v[id]');
|
|
if (verse) htmx.ajax('GET', 'api/verse?at=' + verse.id,
|
|
{ target: '#verse-dialog .modal-content',
|
|
swap: 'innerHTML' });">
|
|
{% block content %}{% endblock %}
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<div class="modal fade" id="verse-dialog" tabindex="-1"
|
|
aria-labelledby="verse-dialog-ref" aria-hidden="true"
|
|
hx-on::after-swap="bootstrap.Modal.getOrCreateInstance(this).show();"
|
|
hx-on:verse-done="bootstrap.Modal.getOrCreateInstance(this).hide();">
|
|
<div class="modal-dialog modal-dialog-centered">
|
|
<div class="modal-content"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="toast-container position-fixed bottom-0 end-0 p-3" id="toasts"></div>
|
|
|
|
</body>
|
|
</html>
|