style: ✨ add HTMX
This commit is contained in:
parent
a2c6842b71
commit
b8e449006b
16 changed files with 299 additions and 84 deletions
13
www/templates/ajax/closed_folder_listing.html
Normal file
13
www/templates/ajax/closed_folder_listing.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
|
||||
<li class="folder-listing">
|
||||
<span hx-boost="false"
|
||||
hx-get="/ajax/open_folder_listing{{ post.post_path }}"
|
||||
hx-target="closest li"
|
||||
hx-swap="outerHTML">
|
||||
{{ fa[post.post_metadata.icon] | raw }}
|
||||
</span>
|
||||
|
||||
<a href={{post.post_path}}>
|
||||
{{ post.post_metadata.title }}
|
||||
</a>
|
||||
</li>
|
||||
4
www/templates/ajax/folder_listing.html
Normal file
4
www/templates/ajax/folder_listing.html
Normal file
|
|
@ -0,0 +1,4 @@
|
|||
|
||||
{% for post in subposts %}
|
||||
{{ include('ajax/folder_listing_entry.html') }}
|
||||
{% endfor %}
|
||||
26
www/templates/ajax/folder_listing_entry.html
Normal file
26
www/templates/ajax/folder_listing_entry.html
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
|
||||
|
||||
<li class="folder-listing">
|
||||
{% set folder_key = random() %}
|
||||
|
||||
<label for="folder-open-{{folder_key}}"
|
||||
hx-trigger="click once queue:all"
|
||||
hx-get="/ajax/folder_listing{{post.post_path}}"
|
||||
hx-target="next ul">
|
||||
|
||||
{{ fa[post.post_metadata.icon] | raw }}
|
||||
</label>
|
||||
|
||||
<a href={{post.post_path}}>
|
||||
{{ post.post_metadata.title }}
|
||||
</a>
|
||||
|
||||
<input type="checkbox" id="folder-open-{{folder_key}}">
|
||||
<ul class="folder-listing">
|
||||
<li>
|
||||
<span>
|
||||
Loading...
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
20
www/templates/ajax/open_folder_listing.html
Normal file
20
www/templates/ajax/open_folder_listing.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
|
||||
|
||||
<li class="folder-listing">
|
||||
<span hx-boost="false"
|
||||
hx-get="/ajax/closed_folder_listing{{ post.post_path }}"
|
||||
hx-target="closest li"
|
||||
hx-swap="outerHTML">
|
||||
{{ fa[post.post_metadata.icon] | raw }}
|
||||
</span>
|
||||
|
||||
<a href={{post.post_path}}>
|
||||
{{ post.post_metadata.title }}
|
||||
</a>
|
||||
|
||||
<ul class="folder-listing">
|
||||
{% for post in subposts %}
|
||||
{{ include('ajax/closed_folder_listing.html') }}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
|
|
@ -17,17 +17,53 @@
|
|||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
|
||||
|
||||
|
||||
<li class="hsmol_hide" style="margin-left: auto;">
|
||||
<a href="/raw{{post.post_path}}">raw</a>
|
||||
<a href="/api/posts{{post.post_path}}">api</a>
|
||||
</li>
|
||||
<li class="hsmol_hide">
|
||||
<li style="margin-left: auto;">
|
||||
<label for="navbar-expander" id="navbar-expand-label"> {{ fa['bars'] | raw }} </label>
|
||||
<a rel="alternate" type="application/rss+xml" target="_blank"
|
||||
style="padding-left: 0.3rem;" href="/feed/rss{{post.post_path}}">
|
||||
style="padding-left: 0.3rem;" href="/feed/rss{{post.post_path}}">
|
||||
{{ fa['rss']|raw }}
|
||||
</a>
|
||||
</li>
|
||||
</menu>
|
||||
</div>
|
||||
|
||||
<input id="navbar-expander" class="navbar-expand" type="checkbox" hx-preserve>
|
||||
<div class="navbar-expand">
|
||||
Full path:
|
||||
<ul class="navbar-full-path">
|
||||
{% set split_post = post.post_path |split('/') %}
|
||||
{% for i in range(0, split_post|length - 1) %}
|
||||
<li>
|
||||
{% if i != 0 %}
|
||||
<a href="{{split_post|slice(0,i+1)|join('/')}}">
|
||||
/ {{ split_post[i] }}
|
||||
</a>
|
||||
{% else %}
|
||||
<a href="/">root</a>
|
||||
{% endif %}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
Dev links:
|
||||
<a hx-boost="false" href="/raw{{post.post_path}}">raw</a>
|
||||
<a hx-boost="false" href="/api/posts{{post.post_path}}">api</a>
|
||||
|
||||
<h4>Folder browser: </h4>
|
||||
|
||||
<ul class="navbar-folder-list">
|
||||
<li class="folder-listing">
|
||||
<span>
|
||||
{{ fa['turn-up'] | raw}}
|
||||
</span>
|
||||
|
||||
<a href={{post.parent_path}}>..</a>
|
||||
</li>
|
||||
|
||||
{% for post in subposts %}
|
||||
{{ include('ajax/folder_listing_entry.html') }}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
{{ include('fragments/filepath_bar.html') }}
|
||||
|
||||
<article>
|
||||
<article id="content_article">
|
||||
{%block content_article %}
|
||||
{%endblock%}
|
||||
|
||||
|
|
|
|||
|
|
@ -8,34 +8,6 @@
|
|||
{%endblock%}
|
||||
|
||||
{%block content_article%}
|
||||
{% if subposts|length > 0 %}
|
||||
<table class="directory">
|
||||
<h3>Art Subfolders:</h3>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th class="hsmol_hide">Name</th>
|
||||
<th>Title</th>
|
||||
<th class="entry_update_time hsmol_hide">Modified</th>
|
||||
</tr>
|
||||
{% for subpost in subposts %}
|
||||
<tr class="entry">
|
||||
<td>
|
||||
{{ fa[subpost.post_metadata.icon] | raw }}
|
||||
</td>
|
||||
<td class="hsmol_hide">
|
||||
<a href={{subpost.post_path}}>{{subpost.post_basename}}</a>
|
||||
</td>
|
||||
<td class="entry_title">
|
||||
<a href={{subpost.post_path}}>{{ subpost.post_metadata.title }}</a>
|
||||
</td>
|
||||
<td class="entry_update_time hsmol_hide">
|
||||
{{ subpost.post_update_time }}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</table>
|
||||
{% endif %}
|
||||
|
||||
{{ content_html|raw }}
|
||||
|
||||
{% if blog_posts|length > 0 %}
|
||||
|
|
|
|||
|
|
@ -38,6 +38,6 @@
|
|||
<span>This shouldn't happen, sorry!</span>
|
||||
{% endif %}
|
||||
|
||||
{{ post.post_content|markdown_to_html }}
|
||||
{{ content_html|raw }}
|
||||
|
||||
{%endblock%}
|
||||
|
|
|
|||
|
|
@ -2,14 +2,24 @@
|
|||
<html>
|
||||
<head>
|
||||
<title>{{og.site_name}} - {{og.title}}</title>
|
||||
|
||||
<link rel="stylesheet" href="/static/dergstyle.css">
|
||||
|
||||
<link rel="stylesheet" href="/static/modest.css">
|
||||
<link rel="stylesheet" href="/static/solarized-dark.css">
|
||||
|
||||
<link rel="stylesheet" href="/static/directorystyle.css">
|
||||
<link rel="stylesheet" href="/static/article_blop.css">
|
||||
<link rel="stylesheet" href="/static/gallerystyle.css">
|
||||
|
||||
|
||||
<link rel="icon" type="image/x-icon" href="/static/icon.jpeg">
|
||||
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1">
|
||||
|
||||
<script src="/static/htmx.min.js"></script>
|
||||
<script id="main_banner_script" src="/static/banner.js"></script>
|
||||
|
||||
{% block feed_links %}
|
||||
<link rel="alternate" type="application/rss+xml" title="{{og.site_name}} Global Feed" href="{{site_config.uri_prefix}}/feed">
|
||||
{% endblock %}
|
||||
|
|
@ -38,11 +48,9 @@
|
|||
<meta property="al:android:app_name" content="Medium" />
|
||||
{% endblock %}
|
||||
|
||||
<script type="text/javascript">
|
||||
window.dergBannerOptions = JSON.parse('{{banner|raw}}');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<body id="main_body" hx-sync="a:replace img:drop" hx-boost="true" hx-indicator="#main_body">
|
||||
|
||||
{%if age_gate %}
|
||||
|
||||
<div id="age_gate_block">
|
||||
|
|
@ -59,10 +67,14 @@
|
|||
{% endif %}
|
||||
|
||||
<header id="main_header">
|
||||
<img id="main_banner_img"></img>
|
||||
<a id="main_banner_img_link" href="/gallery"> full picture</a>
|
||||
<img id="main_banner_img" hx-preserve></img>
|
||||
<a id="main_banner_img_link" href="/gallery" hx-preserve> full picture</a>
|
||||
|
||||
<script type="text/javascript">
|
||||
window.dergBannerOptions = JSON.parse('{{banner|raw}}');
|
||||
|
||||
<script src="/static/banner.js"></script>
|
||||
startBanner();
|
||||
</script>
|
||||
|
||||
<h1 id="big_title">{% block big_title %}{{og.site_name}}{%endblock%}</h1>
|
||||
{% block second_title %}{% endblock %}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue