53 lines
2.3 KiB
HTML
53 lines
2.3 KiB
HTML
{% extends "base.html" %}
|
|
{% block content %}
|
|
<h1 id="title"
|
|
class="inline-block px-4 pb-0 mx-auto mb-0 text-center text-6xl sm:text-8xl font-thin text-transparent bg-clip-text bg-gradient-to-r from-terminal-600 via-terminal-500 to-terminal-900 ring-red-700 text-shadow-xl text-shadow-zinc-950 ring-5 leading-none">
|
|
HTMX PATTERNS
|
|
</h1>
|
|
|
|
<p class='text-3xl px-2 mt-0 mb-16 max-w-xl text-center prose-xl text-terminal-500 font-extralight'>
|
|
A collection of HTMX patterns
|
|
</p>
|
|
|
|
<p class='text-xl px-2 mt-0 mb-16 max-w-xl prose-xl text-terminal-500 font-extralight'>
|
|
These are patterns that I have written based on content from the <a
|
|
href="https://hypermedia.systems/htmx-in-action/">hypermedia.systems</a>
|
|
book. There is lots of code duplication as each pattern is meant to be standalone.
|
|
</p>
|
|
|
|
<p class='text-xl px-2 mt-0 mb-16 max-w-xl prose-xl text-terminal-500 font-extralight'>
|
|
I currently make use of htmx with fastapi, sqlmodel, sqlite, and tailwindcss
|
|
for many of my projects. These patterns are here to serve for reference to
|
|
myself implemented using this stack in the most pure way possible to remain
|
|
simple and understandable. Sometimes real projects get complicated and are
|
|
hard to bring in new features correctly. This is a playground with completely
|
|
separate routers, models, and templates for each project.
|
|
</p>
|
|
|
|
<ul id="patterns" class="flex flex-col sm:grid grid-cols-3 gap-4">
|
|
{% for link, url in links.items() %}
|
|
<li class='w-full'>
|
|
<a href="{{ url }}"
|
|
class="cursor-pointer block text-center bg-terminal-950 hover:bg-terminal-900 hover:text-terminal-400 text-terminal-500 font-bold py-2 px-4 rounded w-full ring-terminal-300 ring-1 shadow-lg shadow-terminal-300/20 hover:shadow-terminal-300/30">
|
|
{{ link }}
|
|
</a>
|
|
</li>
|
|
{% endfor %}
|
|
<!-- <a href="{{ url_for('infinite') }}" -->
|
|
<!-- class="cursor-pointer bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded"> -->
|
|
<!-- Infinite Scroll -->
|
|
<!-- </a> -->
|
|
|
|
<!-- Ajaxify - https://hypermedia.systems/htmx-in-action/#_ajax_ifying_our_application -->
|
|
<!-- Using HTTP verbs -->
|
|
<!-- Validation -->
|
|
<!-- Pagination -->
|
|
<!-- Modals -->
|
|
<!-- Active Search -->
|
|
<!-- Lazy Loading -->
|
|
<!-- Inline Delete -->
|
|
<!-- Bulk Delete -->
|
|
|
|
</ul>
|
|
|
|
{% endblock %}
|