valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(htmx): implement persistent shell pattern by targeting #main-content
All checks were successful
Deploy Theme / deploy (push) Successful in 13s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-19 21:20:23 +01:00
parent 755a0e5057
commit 5acced48ad
1 changed files with 18 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
default.hbs
View File

@@ -10,6 +10,11 @@
}); });
document.documentElement.setAttribute('data-theme', this.theme); document.documentElement.setAttribute('data-theme', this.theme);
document.documentElement.classList.remove('hidden'); document.documentElement.classList.remove('hidden');
// Close mobile menu on navigation
document.addEventListener('htmx:beforeRequest', () => {
this.mobileMenuOpen = false;
});
} }
}" }"
:data-theme="theme" :data-theme="theme"
@@ -28,24 +33,23 @@
{{ghost_head}} {{ghost_head}}
</head> </head>
<body class="{{body_class}} font-sans antialiased"> <body
class="{{body_class}} font-sans antialiased min-h-screen flex flex-col"
{{!-- The Mobile Menu is outside the HTMX swap container to keep state alive --}} hx-boost="true"
hx-target="#main-content"
hx-select="#main-content"
hx-swap="innerHTML show:top"
>
{{!-- Mobile menu is outside the swap target and stays alive --}}
{{> mobile-menu}} {{> mobile-menu}}
{{!-- {{> header}}
We target only this container for HTMX page swaps.
This keeps root Alpine state (like mobileMenuOpen) persistent.
--}}
<div id="viewport" class="min-h-screen flex flex-col" hx-boost="true" hx-target="#viewport" hx-select="#viewport">
{{> header}}
<main class="flex-grow"> <main id="main-content" class="flex-grow">
{{{body}}} {{{body}}}
</main> </main>
{{> footer}} {{> footer}}
</div>
{{ghost_foot}} {{ghost_foot}}
<script src="{{asset "js/ghost-config.js"}}"></script> <script src="{{asset "js/ghost-config.js"}}"></script>