// components.jsx — Book Journal components const Stars = ({ rating, max = 5 }) => {Array.from({ length: max }).map((_, i) => ★ )} ; const Reveal = ({ children, delay = 0, as: Tag = 'div', ...rest }) => { const ref = React.useRef(null); React.useEffect(() => { const el = ref.current;if (!el) return; const obs = new IntersectionObserver(([entry]) => { if (entry.isIntersecting) { setTimeout(() => el.classList.add('in'), delay); obs.disconnect(); } }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }); obs.observe(el); return () => obs.disconnect(); }, [delay]); return {children}; }; const Ornament = ({ size = 80 }) => ; const BookCover = ({ book, hero, photoId, photoPlaceholder }) => { if (photoId) { return (
); } return (
Foto
); }; const Hearts = ({ value, max = 5 }) => {Array.from({ length: max }).map((_, i) => ♥ )} ; const RatingBreakdown = ({ ratings, overall }) =>
Bewertung
{ratings.map((r) =>
{r.label}
)} {overall != null &&
}
; const BookCard = ({ book, hero, currentRead, photoId, photoPlaceholder }) => { return ( {currentRead &&
Current Read
Was ich gerade lese
} ); }; const Header = ({ page, setPage, setNewsCategory }) => { const [openDropdown, setOpenDropdown] = React.useState(false); const dropdownRef = React.useRef(null); const newsCategories = ['Weekly Newcomer', 'Buchverfilmungen', 'Bestseller']; React.useEffect(() => { const onDoc = (e) => { if (dropdownRef.current && !dropdownRef.current.contains(e.target)) { setOpenDropdown(false); } }; document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc); }, []); const [openCatDropdown, setOpenCatDropdown] = React.useState(false); const catDropdownRef = React.useRef(null); const categories = [ { label: 'Neuzugänge', teaser: 'Frisch eingezogen: Welche Bücher neu auf meinem Stapel gelandet sind und warum ich einfach nicht an ihnen vorbei gehen konnte.' }, { label: 'Bücher nach Vibe', teaserList: [ { label: 'Sonne, Strand & Pageturner', desc: 'Egal ob prickelnde Urlaubsromance fürs Handtuch oder nervenaufreibende Romantic Suspense, bei der die Luft vor Hitze und Spannung flirrt — hier findest du Geschichten, die nach Sommer schmecken.' }, { label: 'Sturmwetter & Leseglück', desc: 'Wenn der Regen gegen die Scheibe peitscht, schlägt die Stunde dieser Bücher. Ein gemütlicher Mix aus herzerwärmenden Wohlfühlromanen und tiefen, atmosphärischen Geschichten.' }, { label: 'Gänsehaut & Schlaflose Nächte', desc: 'Vorsicht, akute Suchtgefahr! Hier lauern die Bücher, die dir eine wohlige Gänsehaut verpassen und dich mit dem Gedanken „Nur noch ein Kapitel!" die ganze Nacht wachhalten.' }, { label: 'Zeitreisen & Große Klassiker', desc: 'Manchmal muss es eben eine Flucht aus dem Hier und Jetzt sein. Begleite mich in andere Epochen, vergangene Jahrhunderte und zu den zeitlosen Klassikern der Weltliteratur.' } ] }, { label: 'Was nach dem Lesen bleibt', teaser: 'Gefühl statt Bewertung. Hier schreibe ich über Bücher, die mich auch nach dem Zuklappen nicht loslassen. Keine klassischen Kritiken, sondern der ganz persönliche Nachhall: Was hat mich bewegt, was hat mich inspiriert, was bleibt?' }, { label: 'Oldies but Goldies', teaser: 'Schätze aus dem Bücherregal: Gute Geschichten haben kein Verfallsdatum! Hier findest du Bücher, die schon vor längerer Zeit erschienen sind, aber immer noch absolute Herzensempfehlungen sind. Keine verstaubten Klassiker, sondern einfach verdammt gute Geschichten, die es wert sind, heute (noch mal) gelesen zu werden.' } ]; React.useEffect(() => { const onDoc = (e) => { if (catDropdownRef.current && !catDropdownRef.current.contains(e.target)) { setOpenCatDropdown(false); } }; document.addEventListener('mousedown', onDoc); return () => document.removeEventListener('mousedown', onDoc); }, []); return (
setPage('home')}> My life is all Booked Book Journal
{categories.map(cat => { const handlePick = (label) => { setNewsCategory && setNewsCategory(label); const quotes = window.CATEGORY_QUOTES || {}; if (quotes[label] || label === 'Bücher nach Vibe') { setPage('category'); } else { setPage('home'); } }; // Simple categories or single-teaser → render as if (!cat.teaserList) { return ( { e.preventDefault(); handlePick(cat.label); }}> {cat.label} {cat.teaser && {cat.teaser}} ); } // Vibe category: wrapper hosts the tooltip with clickable sub-items return ( { e.preventDefault(); handlePick(cat.label); }}>{cat.label} ); })}
); }; const Footer = () => ; const HorizontalCarousel = ({ title, subtitle, books, onBookClick }) => { const trackRef = React.useRef(null); const scrollBy = (dir) => { const el = trackRef.current;if (!el) return; el.scrollBy({ left: dir * 280, behavior: 'smooth' }); }; return (

{subtitle} {title}

{books.map((b) =>
{onBookClick && }
)}
); }; const OpenBookBanner = () => {/* warm light glow from above */} {/* left page */} {/* right page */} {/* spine shadow */} {/* text lines on left page */} {Array.from({ length: 14 }).map((_, i) => )} {/* text lines on right page */} {Array.from({ length: 14 }).map((_, i) => )} {/* drop cap on left page */} K {/* page corners curl */} {/* subtle ribbon bookmark */}
„Ein Buch ist ein Garten, den man in der Tasche trägt."
— Arabisches Sprichwort
; const BookSpine = ({ book, height, onClick }) => { // Dark navy spines — matching the header bar; subtle variation so the row reads as individual books const palettes = [ 'linear-gradient(180deg, #1f2c44, #0d1626)', 'linear-gradient(180deg, #243450, #101a2c)', 'linear-gradient(180deg, #1a2740, #0b1322)', 'linear-gradient(180deg, #28384f, #121d30)', 'linear-gradient(180deg, #1d2a42, #0e1726)', 'linear-gradient(180deg, #223150, #0f1928)', 'linear-gradient(180deg, #1b2840, #0c1524)', 'linear-gradient(180deg, #26364e, #111b2e)', 'linear-gradient(180deg, #1f2e48, #0d1726)', 'linear-gradient(180deg, #213152, #0f1a2c)', 'linear-gradient(180deg, #1c2a44, #0b1422)', 'linear-gradient(180deg, #253651, #121c2f)', ]; const hash = (book?.id || '').split('').reduce((a, c) => a + c.charCodeAt(0), 0); const bg = palettes[hash % palettes.length]; const tlen = (book?.title || '').length; const titleSize = tlen > 34 ? 9.5 : tlen > 26 ? 11 : 12.5; return (
onClick && onClick(book)}> {book?.title || ''} {book?.author && {book.author}}
); }; const EmptySpine = ({ height, idx }) => { const palettes = [ 'linear-gradient(180deg, #19243a, #0a121f)', 'linear-gradient(180deg, #1d2942, #0c1422)', 'linear-gradient(180deg, #162136, #0a111d)', 'linear-gradient(180deg, #1b2740, #0b1320)', 'linear-gradient(180deg, #1e2b44, #0d1624)', 'linear-gradient(180deg, #182338, #0a111e)', ]; const bg = palettes[idx % palettes.length]; return (
leer
); }; const Bookshelf = ({ books, onBookClick }) => { const PER_ROW = 9; // Group by genre, preserving series order within each genre. const byGenre = {}; const genreOrder = []; [...books].forEach((b) => { const g = b.genre || 'Sonstiges'; if (!byGenre[g]) { byGenre[g] = []; genreOrder.push(g); } byGenre[g].push(b); }); genreOrder.forEach((g) => { byGenre[g].sort((a, b) => (a.series || a.author || '').localeCompare(b.series || b.author || '', 'de') || ((a.seriesIndex ?? 99) - (b.seriesIndex ?? 99)) || a.title.localeCompare(b.title, 'de') ); }); const chunk = (arr) => { const rows = []; for (let i = 0; i < arr.length; i += PER_ROW) rows.push(arr.slice(i, i + PER_ROW)); return rows; }; return (
{genreOrder.map((g, gi) => { const list = byGenre[g]; // Pad the final row out to a full shelf with empty spines. const padCount = (PER_ROW - (list.length % PER_ROW)) % PER_ROW; const padded = [ ...list, ...Array.from({ length: padCount }).map((_, i) => ({ empty: true, idx: gi * 100 + list.length + i })), ]; const rows = chunk(padded); return (
{g}
{rows.map((row, ri) => (
{row.map((b, bi) => { const height = 184 + (((bi + gi) * 13 + ri * 7) % 5) * 8; return b.empty ? : ; })}
))}
); })}
); }; const BookDetailModal = ({ book, onClose }) => { React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; if (book) { document.addEventListener('keydown', onKey); document.body.style.overflow = 'hidden'; } return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; }; }, [book, onClose]); if (!book) return null; const summary = book.summary || book.excerpt || ''; return (
e.stopPropagation()}>
{book.genre}{(() => { if (!book.series || !book.seriesIndex) return ''; const inSeries = (window.BOOKS || []).filter((b) => b.series === book.series).length; return inSeries > 1 ? ` · Band ${book.seriesIndex}` : ''; })()}

{book.title}

{book.author}
{book.summary &&
Darum geht's
}

{summary}

{book.pages && {book.pages} Seiten} {book.series && (window.BOOKS || []).filter((b) => b.series === book.series).length > 1 && Reihe: {book.series}}
); }; const BlogPostModal = ({ post, onClose }) => { React.useEffect(() => { const onKey = (e) => { if (e.key === 'Escape') onClose(); }; if (post) { document.addEventListener('keydown', onKey); document.body.style.overflow = 'hidden'; } return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = ''; }; }, [post, onClose]); if (!post) return null; const d = new Date(post.date); const dateStr = isNaN(d) ? post.date : d.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' }); const body = post.body || [{ type: 'para', text: post.excerpt }]; return (
e.stopPropagation()}>
{post.category || 'Was nach dem Lesen bleibt'}
{post.section &&
{post.section}
}

{post.title}

{dateStr} {post.readTime && ·} {post.readTime && {post.readTime} Lesezeit}
{post.cover && (
)}
{body.map((block, i) => { if (block.type === 'subhead') return

{block.text}

; if (block.type === 'pull') return
{block.text}
; if (block.type === 'signoff') return

{block.text}

; if (block.type === 'signature') return
{block.text}
; if (block.type === 'facts') return (
{block.items.map(([k, v], j) => (
{k}
{v}
))}
); if (block.type === 'note') return (

{block.label}: {block.text}

); return

{block.text}

; })}
); }; const CommentSection = ({ postId }) => { const storeKey = `blog-comments-${postId}`; const [comments, setComments] = React.useState([]); const [name, setName] = React.useState(''); const [text, setText] = React.useState(''); React.useEffect(() => { try { const raw = localStorage.getItem(storeKey); setComments(raw ? JSON.parse(raw) : []); } catch (e) { setComments([]); } }, [storeKey]); const save = (list) => { setComments(list); try { localStorage.setItem(storeKey, JSON.stringify(list)); } catch (e) {} }; const submit = (e) => { e.preventDefault(); const t = text.trim(); if (!t) return; const entry = { id: Date.now(), name: name.trim() || 'Anonym', text: t, date: new Date().toISOString(), }; save([...comments, entry]); setText(''); }; const fmt = (iso) => { const d = new Date(iso); return isNaN(d) ? '' : d.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' }); }; return (

{comments.length > 0 ? `Kommentare (${comments.length})` : 'Schreib den ersten Kommentar'}

{comments.length > 0 && ( )}
setName(e.target.value)} />
); }; Object.assign(window, { Stars, Hearts, RatingBreakdown, Reveal, Ornament, BookCover, BookCard, BookDetailModal, BlogPostModal, CommentSection, Header, Footer, HorizontalCarousel, OpenBookBanner, Bookshelf, BookSpine, EmptySpine });