Refactor books page to render from a data array

[arjun7965]

Summary

• Collapse ~120 lines of repeated <article> markup in books.html to a single <div data-reading-list>
• Add a READING_LIST array in js/books.js and a renderReadingList() function that builds the same markup from data
• Adding a book is now a one-object change instead of a boilerplate HTML block

Why

One source of truth — title/author/ISBN/notes used to be duplicated across alt, data-title, data-author, the <h3>, and the by … div, which was easy to drift.

Reviewer notes

• Render runs at script top-level (not inside DOMContentLoaded) on purpose. js/theme.js attaches an IntersectionObserver to .book-item during DOMContentLoaded for scroll-reveal; with defer, top-level code in books.js runs after the DOM is parsed but before DOMContentLoaded fires, so the observer sees the rendered items.
• Existing cover-loading logic (tryLoadCover) is unchanged — it queries the DOM after render.
• SEO tradeoff: book content is no longer in the initial HTML. Googlebot executes JS so it should still index, but worth verifying via Search Console → URL Inspection after merge. Page-level OG tags are unaffected.

Test plan

• Verified locally at http://localhost:8000/books.html — 8 items render, covers load from OpenLibrary, "Currently Reading" badge appears, scroll-reveal animation fires
• After merge: Search Console URL Inspection on /books.html to confirm Googlebot sees the rendered list

🤖 Generated with Claude Code