📚 Rito's Readings

This gallery is live on: https://ritog.github.io/books/

It stores a collection of books I've read and want to read, showcasing them in a beautiful, responsive gallery format.

---

Using the software:

You can use the code for your own books gallery by editing the books.js file. It is free, needs no backend, and requires no build command.

My Book Gallery

A responsive book gallery website with filtering by tags, languages, and reading status, plus one simple JavaScript data file.

✨ Features

• Beautiful Grid Layout: Responsive book cover grid that adapts to any screen size
• Always-visible Details: Book information works with a mouse, keyboard, or touchscreen
• Advanced Filtering: Filter by tags, languages, and reading status (Read, Reading, Want to Read)
• Search Functionality: Search through titles and authors
• Multi-language Support: Display books in different languages
• Reading Statistics: Track total books, read, reading, and want-to-read counts
• Easy Data Management: Add or remove entries in one books.js file
• Local Cover Support: Use local image files for book covers (e.g., assets/covers/my-book.jpg)
• Zero Maintenance: Static site that works without any backend

🚀 Quick Start

1. Clone or download this repository
2. Open index.html in your browser
3. Start customizing by editing books.js

That is it. The complete library works both when opened directly and when hosted.

Using a local server is optional. If you prefer one, run python -m http.server 8000 and open http://localhost:8000.

📖 How to Use

Adding Books

Edit the books array inside books.js:

window.BOOKS_DATA = {
  "books": [
    {
      "title": "Book Title",
      "author": "Author Name",
      "cover": "https://example.com/cover.jpg",
      "rating": 5,
      "dateRead": "2024-01-15",
      "tags": ["Fantasy", "Adventure"],
      "language": "EN",
      "status": "read",
      "review": "https://goodreads.com/review/123",
      "format": "paper"
    }
  ]
};

Validating Book Data

The project includes a dependency-free validator. It uses only Node.js itself; you do not need to run npm install or download any packages.

1. Save your changes to books.js.
2. Open a terminal in this project folder.
3. Run:

node validate-books.js

The validator checks required fields, calendar dates, allowed statuses, rating ranges and quarter-point steps, duplicated tags/books, suspicious corrupted Bengali text, and every local cover path.

• ERROR means the data can break or mislead the site. Fix it and run the command again.
• WARNING means the data is usable but incomplete, such as a read book without a rating.
• Warnings do not fail validation. Errors return a failing exit code, so the script can also be used in automation later without changing it.

The recommended hobby-project workflow is simply: edit books.js, run the validator once, and then commit or publish the change.

Book Data Fields

Field	Type	Description	Example
title	string	Book title	"Dune"
author	string	Author name	"Frank Herbert"
cover	string	Cover image URL/local file relative path	"https://example.com/cover.jpg"
rating	number	Your rating (1-5)	5
dateRead	string/null	Date finished (YYYY-MM-DD)	"2024-01-15"
tags	array	Book categories	["Sci-Fi", "Classic"]
language	string	Language code	"EN", "ES", "FR"
status	string	"read", "reading", or "want-to-read"	"read"
review	string/null	Review link	"https://substack.com/..."
format	string/null	Format of the book (paper, ebook, audio)	"paper"

Supported Languages

• EN - English
• ES - Spanish
• DE - German
• SA - Sanskrit
• BN - Bengali
• HI - Hindi

(You can add more languages as needed)

🌐 Deployment

GitHub Pages (Recommended)

1. Create a new repository on GitHub
2. Upload all files to the repository
3. Go to Settings → Pages
4. Select source: "Deploy from a branch"
5. Choose branch: main or master
6. Save - Your site will be live at https://username.github.io/repository-name

Cloudflare Pages (Not tested)

1. Sign up for Cloudflare Pages
2. Connect your GitHub repository
3. Deploy - Your site will be live instantly

Netlify (Not tested)

1. Drag and drop the folder to netlify.com
2. Your site is live immediately

🎨 Customization

Colors and Styling

Edit styles.css to customize:

• Background gradient
• Card colors
• Hover effects
• Typography

Layout

Modify the grid layout in styles.css:

.books-grid {
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 2rem;
}

Adding Features

The JavaScript in script.js is modular and easy to extend:

• Add new filter types
• Implement sorting
• Add book details modal
• Create reading lists

📱 Mobile Responsive

The site automatically adapts to:

• Desktop: Full grid layout
• Tablet: Adjusted spacing and sizing
• Mobile: Two-column status buttons, always-visible library statistics, collapsible search/filter controls, and a responsive book grid

How the mobile statistics and Filters button work

The library statistics must be visible as soon as the page loads on every screen size. They are informational content, so a visitor should never need to press Filters to discover them. Only the search box and filter controls are collapsed on screens up to 768px wide.

The implementation is split into three small responsibilities:

1. index.html provides the structure. The .stats panel and #sidebarControls are separate siblings inside .sidebar. Add future search or filter controls inside #sidebarControls; do not put the statistics there.
2. styles.css controls visibility. Inside the max-width: 768px media query, .sidebar-controls is hidden and .sidebar-controls.open is visible. Desktop has no hiding rule, so its sidebar stays visible as before.
3. script.js handles the button. Pressing #sidebarToggle toggles the open class on #sidebarControls and updates aria-expanded for assistive technology. The book totals themselves are still calculated once by updateStats(); there is no duplicate mobile data or markup to maintain.

The button's aria-controls="sidebarControls" value must match the wrapper's id="sidebarControls". If either name changes, update both places.

Quick manual check after changing the sidebar

1. Open the page and make the browser narrower than 768px.
2. Confirm the four statistics appear immediately and the search box is hidden.
3. Press Filters. Confirm search and Filter options appear while the statistics remain visible.
4. Widen the browser beyond 768px. Confirm the Filters button disappears and the statistics, search box, and Filter options remain visible in the sidebar.

🔧 Troubleshooting

Images Not Loading

• Check that cover URLs are accessible
• Use placeholder images for missing covers
• Ensure URLs are HTTPS for security

Book Data Errors

• Check for missing commas or brackets
• Keep window.BOOKS_DATA = at the beginning and ; at the end
• Ensure all required fields are present

Local Development

• A local server is optional; opening index.html directly also works
• Python: python -m http.server 8000 [I used this one]
• Node.js: npx serve

📄 License

This project is open source and available under the Apache License, Version 2.0.

🤝 Contributing

Feel free to fork the project, and add your own features or improvements! I am not looking to extend this project.

📞 Support

If you need help:

1. Check the troubleshooting section
2. Look at the existing entries in books.js
3. Open an issue on GitHub

Credits

Story Book icon by Icons8

Happy Reading! 📚✨