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

feat: enhance site with HTMX for AJAX navigation and Alpine.js for reactivity
All checks were successful
Deploy Theme / deploy (push) Successful in 1m6s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-19 18:07:46 +01:00
parent 3129f982df
commit 64a3c1d583
7 changed files with 117 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
default.hbs
View File

@@ -1,16 +1,39 @@
<!DOCTYPE html>
<html lang="{{@site.lang}}" data-theme="dark" class="hidden">
<html lang="{{@site.lang}}"
x-data="{
theme: localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'),
init() {
$watch('theme', val => {
localStorage.setItem('theme', val);
document.documentElement.setAttribute('data-theme', val);
});
document.documentElement.setAttribute('data-theme', this.theme);
document.documentElement.classList.remove('hidden');
}
}"
:data-theme="theme"
class="hidden">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>{{meta_title}}</title>
<link rel="stylesheet" href="{{asset "built/screen.css"}}">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/htmx.org@2.0.0"></script>
{{ghost_head}}
</head>
<body class="{{body_class}} font-sans antialiased">
<body class="{{body_class}} font-sans antialiased" hx-boost="true">
<div class="min-h-screen flex flex-col">
<div class="min-h-screen flex flex-col"
x-data="{ mobileMenuOpen: false, lightboxOpen: false, lightboxImage: '' }"
@click="if ($event.target.closest('.kg-image-card img, .post-content img')) {
$event.preventDefault();
lightboxImage = $event.target.src;
lightboxOpen = true;
}">
{{> header}}
<main class="flex-grow">
@@ -18,13 +41,18 @@
</main>
{{> footer}}
</div>
{{> mobile-menu}}
{{> mobile-menu}}
<div id="lightbox" class="hidden fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center">
<button id="lightbox-close" class="absolute top-4 right-4 text-white text-3xl">&times;</button>
<img id="lightbox-image" src="" alt="Lightbox image" class="max-w-full max-h-full">
<div id="lightbox"
x-show="lightboxOpen"
x-transition
@click="lightboxOpen = false"
class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center"
x-cloak>
<button @click="lightboxOpen = false" class="absolute top-4 right-4 text-white text-3xl">&times;</button>
<img :src="lightboxImage" alt="Lightbox image" class="max-w-full max-h-full" @click.stop>
</div>
</div>
{{ghost_foot}}