mirror of
https://github.com/pacnpal/thrillwiki_django_no_react.git
synced 2025-12-20 12:11:13 -05:00
Add advanced search and trending parks features; update frontend dependencies and enhance home page layout
This commit is contained in:
@@ -48,7 +48,6 @@
|
||||
<!-- Preload Critical Resources -->
|
||||
{% block critical_resources %}
|
||||
<link rel="preload" href="{% static 'css/tailwind.css' %}" as="style" />
|
||||
<link rel="preload" href="{% static 'js/alpine.min.js' %}?v={{ version|default:'1.0' }}" as="script" />
|
||||
<link rel="preload" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap" as="style" />
|
||||
{% endblock %}
|
||||
|
||||
@@ -62,10 +61,10 @@
|
||||
/>
|
||||
|
||||
<!-- HTMX -->
|
||||
<script src="https://unpkg.com/htmx.org@1.9.6" integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.7/dist/htmx.js" integrity="sha384-yWakaGAFicqusuwOYEmoRjLNOC+6OFsdmwC2lbGQaRELtuVEqNzt11c2J711DeCZ" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- Alpine.js (must load after components) -->
|
||||
<script defer src="{% static 'js/alpine.min.js' %}?v={{ version|default:'1.0' }}"></script>
|
||||
<script src="//unpkg.com/alpinejs" defer></script>
|
||||
|
||||
<!-- Tailwind CSS -->
|
||||
<link href="{% static 'css/tailwind.css' %}" rel="stylesheet" />
|
||||
@@ -173,40 +172,60 @@
|
||||
<c-toast_container />
|
||||
|
||||
<!-- AlpineJS Global Configuration (Compliant with HTMX + AlpineJS Only Rule) -->
|
||||
<div x-data="{}" x-init="
|
||||
// Configure HTMX globally
|
||||
htmx.config.globalViewTransitions = true;
|
||||
|
||||
// Initialize Alpine stores
|
||||
Alpine.store('app', {
|
||||
user: null,
|
||||
theme: localStorage.getItem('theme') || 'system',
|
||||
searchQuery: '',
|
||||
notifications: []
|
||||
});
|
||||
|
||||
Alpine.store('toast', {
|
||||
toasts: [],
|
||||
show(message, type = 'info', duration = 5000) {
|
||||
const id = Date.now() + Math.random();
|
||||
const toast = { id, message, type, visible: true, progress: 100 };
|
||||
this.toasts.push(toast);
|
||||
if (duration > 0) {
|
||||
setTimeout(() => this.hide(id), duration);
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
// Configure HTMX 2.x globally with proper defaults
|
||||
htmx.config.globalViewTransitions = true;
|
||||
|
||||
// HTMX 2.x Migration: Maintain 1.x behavior for smooth scrolling
|
||||
htmx.config.scrollBehavior = 'smooth';
|
||||
|
||||
// HTMX 2.x Migration: Keep DELETE requests using form-encoded body (like 1.x)
|
||||
htmx.config.methodsThatUseUrlParams = ["get"];
|
||||
|
||||
// HTMX 2.x Migration: Allow cross-domain requests (like 1.x)
|
||||
htmx.config.selfRequestsOnly = false;
|
||||
|
||||
// Enhanced HTMX event handling for better UX
|
||||
document.body.addEventListener('htmx:configRequest', function(evt) {
|
||||
// Add CSRF token to all HTMX requests
|
||||
const csrfToken = document.querySelector('meta[name="csrf-token"]');
|
||||
if (csrfToken) {
|
||||
evt.detail.headers['X-CSRFToken'] = csrfToken.getAttribute('content');
|
||||
}
|
||||
return id;
|
||||
},
|
||||
hide(id) {
|
||||
const toast = this.toasts.find(t => t.id === id);
|
||||
if (toast) {
|
||||
toast.visible = false;
|
||||
setTimeout(() => {
|
||||
this.toasts = this.toasts.filter(t => t.id !== id);
|
||||
}, 300);
|
||||
});
|
||||
|
||||
// Initialize Alpine stores
|
||||
Alpine.store('app', {
|
||||
user: null,
|
||||
theme: localStorage.getItem('theme') || 'system',
|
||||
searchQuery: '',
|
||||
notifications: []
|
||||
});
|
||||
|
||||
Alpine.store('toast', {
|
||||
toasts: [],
|
||||
show(message, type = 'info', duration = 5000) {
|
||||
const id = Date.now() + Math.random();
|
||||
const toast = { id, message, type, visible: true, progress: 100 };
|
||||
this.toasts.push(toast);
|
||||
if (duration > 0) {
|
||||
setTimeout(() => this.hide(id), duration);
|
||||
}
|
||||
return id;
|
||||
},
|
||||
hide(id) {
|
||||
const toast = this.toasts.find(t => t.id === id);
|
||||
if (toast) {
|
||||
toast.visible = false;
|
||||
setTimeout(() => {
|
||||
this.toasts = this.toasts.filter(t => t.id !== id);
|
||||
}, 300);
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
" style="display: none;"></div>
|
||||
</script>
|
||||
|
||||
{% block extra_js %}{% endblock %}
|
||||
</body>
|
||||
|
||||
Reference in New Issue
Block a user