waylon/htmx-patterns
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
Waylon S. Walker 2024-12-11 09:17:38 -06:00
parent a70c24398a
commit e181f57a91
30 changed files with 2458 additions and 197 deletions
Download patch file Download diff file Expand all files Collapse all files

21
templates/index.html
View file

@ -1,19 +1,34 @@
{% 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-black text-transparent bg-clip-text bg-gradient-to-r from-red-600 via-pink-500 to-yellow-400 ring-red-500 text-shadow-xl text-shadow-zinc-950 ring-5 leading-none">
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 font-bold mt-0 mb-16 max-w-xl text-center prose-xl'>
<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 bg-red-500 hover:bg-red-600 text-white font-bold py-2 px-4 rounded w-full">
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>