Add htmx support to bit-badger and personal

- Tweak transitions on tech-blog
- Fix URL forwarding on settings save
- Add newer/older posts to tech-blog single post template
This commit is contained in:
2022-05-31 19:17:23 -04:00
parent 1fd2bfd08e
commit 7bd9b8d35c
12 changed files with 213 additions and 42 deletions

View File

@@ -0,0 +1,16 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
{%- if is_home -%}
{{ web_log.name }}{% if web_log.subtitle %} | {{ web_log.subtitle.value }}{% endif %}
{%- else -%}
{{ page_title | strip_html }}{% if page_title and page_title != "" %} &raquo; {% endif %}{{ web_log.name }}
{%- endif -%}
</title>
</head>
<body>
{{ content }}
</body>
</html>

View File

@@ -18,7 +18,7 @@
<script src="{{ "djs.js" | theme_asset }}"></script>
{% page_head -%}
</head>
<body>
<body hx-boost="true" hx-target="main" hx-indicator="#loadOverlay" hx-swap="innerHTML show:body:top">
<nav class="site-header" role="navigation">
<p><a class="nav-home" href="{{ "" | relative_link }}">{{ web_log.name }}</a></p>
{%- if web_log.subtitle %}<p>{{ web_log.subtitle.value }}</p>{% endif -%}
@@ -31,7 +31,8 @@
</p>
<p class="mobile"><a href="#links">Site Links</a></p>
</nav>
{{ content }}
<div class="load-overlay" id="loadOverlay"><h1>Loading...</h1></div>
<main>{{ content }}</main>
<footer class="part-1" id="links">
{%- for page in page_list %}
<p class="mobile"><a href="{{ page | relative_link }}">{{ page.title }}</a></p>
@@ -128,7 +129,7 @@
style="border-width:0;">
</a>
</div>
<div class="copy">
<div class="copy" hx-boost="false">
&nbsp; Licensed by the
<a rel="license noopener" href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank">
Creative Commons Attribution-NonCommercial 4.0 International License
@@ -145,5 +146,6 @@
{%- endif %}
</div>
</footer>
{% page_foot %}
</body>
</html>

View File

@@ -53,16 +53,18 @@
<ul class="pager">
{% if model.newer_link -%}
<li class="previous item">
<h4 class="item-heading"><a href="{{ model.newer_link.value }}">&laquo;</a> Previous Post</h4>
<a href="{{ model.newer_link.value }}">{{ model.newer_name.value }}</a>
<h4 class="item-heading">
<a href="{{ model.newer_link.value | relative_link }}">&laquo;</a> Previous Post
</h4>
<a href="{{ model.newer_link.value | relative_link }}">{{ model.newer_name.value }}</a>
</li>
{%- else -%}
<li></li>
{% endif %}
{% if model.older_link -%}
<li class="next item">
<h4 class="item-heading">Next Post <a href="{{ model.older_link.value }}">&raquo;</a></h4>
<a href="{{ model.older_link.value }}">{{ model.older_name.value }}</a>
<h4 class="item-heading">Next Post <a href="{{ model.older_link.value | relative_ling }}">&raquo;</a></h4>
<a href="{{ model.older_link.value | relative_link }}">{{ model.older_name.value }}</a>
</li>
{%- endif -%}
</ul>