pacnpal/thrillwiki_django_no_react
1
1
Fork 0
mirror of https://github.com/pacnpal/thrillwiki_django_no_react.git synced 2025-12-23 02:51:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add standardized HTMX conventions, interaction patterns, and migration guide for ThrillWiki UX

Browse Source
This commit is contained in:
pacnpal
2025-12-22 16:56:27 -05:00
parent 2e35f8c5d9
commit ae31e889d7
144 changed files with 25792 additions and 4440 deletions
Download Patch File Download Diff File Expand all files Collapse all files

130
templates/base/base.html
View File

@@ -1,130 +0,0 @@
{% load static %}
<!DOCTYPE html>
<html lang="en" class="h-full">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="{% block meta_description %}ThrillWiki - Your comprehensive guide to theme parks and roller coasters{% endblock %}">
<meta name="keywords" content="{% block meta_keywords %}theme parks, roller coasters, rides, amusement parks{% endblock %}">
<!-- Open Graph / Facebook -->
<meta property="og:type" content="{% block og_type %}website{% endblock %}">
<meta property="og:url" content="{% block og_url %}{{ request.build_absolute_uri }}{% endblock %}">
<meta property="og:title" content="{% block og_title %}{% block title %}ThrillWiki{% endblock %}{% endblock %}">
<meta property="og:description" content="{% block og_description %}{% block meta_description %}ThrillWiki - Your comprehensive guide to theme parks and roller coasters{% endblock %}{% endblock %}">
<meta property="og:image" content="{% block og_image %}{% static 'images/og-default.jpg' %}{% endblock %}">
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:url" content="{% block twitter_url %}{{ request.build_absolute_uri }}{% endblock %}">
<meta property="twitter:title" content="{% block twitter_title %}{% block title %}ThrillWiki{% endblock %}{% endblock %}">
<meta property="twitter:description" content="{% block twitter_description %}{% block meta_description %}ThrillWiki - Your comprehensive guide to theme parks and roller coasters{% endblock %}{% endblock %}">
<meta property="twitter:image" content="{% block twitter_image %}{% static 'images/twitter-default.jpg' %}{% endblock %}">
<title>{% block title %}ThrillWiki{% endblock %}</title>
<!-- Favicon -->
<link rel="icon" type="image/x-icon" href="{% static 'favicon.ico' %}">
<!-- Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
<!-- CSS -->
<link href="{% static 'css/design-tokens.css' %}" rel="stylesheet">
<link href="{% static 'css/tailwind.css' %}" rel="stylesheet">
{% block extra_css %}{% endblock %}
<!-- HTMX -->
<script src="https://unpkg.com/htmx.org@1.9.10"></script>
<!-- Alpine.js -->
<script defer src="https://unpkg.com/@alpinejs/intersect@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/@alpinejs/persist@3.x.x/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<!-- App Scripts -->
<script src="{% static 'js/stores/index.js' %}"></script>
</head>
<body class="h-full font-sans antialiased bg-background text-foreground"
x-data
:class="{ 'dark': $store.theme.isDark }">
<!-- Skip to content link for accessibility -->
<a href="#main-content" class="z-50 px-4 py-2 rounded-md sr-only focus:not-sr-only focus:absolute focus:top-4 focus:left-4 bg-primary text-primary-foreground">
Skip to main content
</a>
<!-- HTMX Configuration -->
<div hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' style="display: none;"></div>
<div class="flex flex-col min-h-full">
<!-- Navigation -->
{% block navigation %}
{% include "components/navigation/navbar.html" %}
{% endblock navigation %}
<!-- Main Content -->
<main id="main-content" class="flex-1" role="main">
{% block content %}{% endblock %}
</main>
<!-- Footer -->
{% block footer %}
{% include "components/navigation/footer.html" %}
{% endblock footer %}
</div>
<!-- Global Components -->
{% include "components/ui/toast-container.html" %}
<!-- HTMX Configuration -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Configure HTMX
htmx.config.globalViewTransitions = true;
htmx.config.useTemplateFragments = true;
// Add loading states
document.body.addEventListener('htmx:beforeRequest', function(evt) {
evt.target.classList.add('htmx-request');
});
document.body.addEventListener('htmx:afterRequest', function(evt) {
evt.target.classList.remove('htmx-request');
});
// Handle HTMX errors
document.body.addEventListener('htmx:responseError', function(evt) {
const xhr = evt.detail.xhr;
if (xhr.status >= 500) {
Alpine.store('toast').error('Server error. Please try again later.');
} else if (xhr.status === 403) {
Alpine.store('toast').error('You do not have permission to perform this action.');
} else if (xhr.status === 404) {
Alpine.store('toast').error('Resource not found.');
}
});
});
</script>
<!-- Auth Context -->
<script>
window.__AUTH_USER__ = {% if user.is_authenticated %}{
id: {{ user.id }},
username: "{{ user.username }}",
email: "{{ user.email }}",
avatar: "{{ user.profile.avatar.url|default:'' }}"
}{% else %}null{% endif %};
window.__AUTH_PERMISSIONS__ = [
{% for perm in user.get_all_permissions %}
"{{ perm }}",
{% endfor %}
];
</script>
{% block extra_js %}{% endblock %}
</body>
</html>

9
templates/base/htmx-base.html
View File

@@ -1,9 +0,0 @@
{% extends "base/base.html" %}
{% block content %}
<div id="main-content-area" hx-history-elt>
{% block main %}
<!-- Content will be swapped here by HTMX -->
{% endblock main %}
</div>
{% endblock content %}