Sci-Fi Books Showcase

A static HTML page showcasing a science fiction book collection. Works fully offline with all assets stored locally.

Live demo: https://f3s.buetow.org/scifi

Features

• Responsive book grid with cover images
• Filter by author, format (Paperback/eBook/Audiobook), or search
• Click any book to view details and plot summary
• Fully offline - no external dependencies after build
• W3C validated HTML

Quick Start

# Build the site (embeds summaries into books.json and creates dist/)
just build

# Deploy to server
just dist

# Local development server
just open

Project Structure

├── index.html              # Main page
├── css/styles.css          # Styling
├── js/app.js               # Client-side logic (filtering, modals)
├── data/books.json         # Book metadata with embedded summaries
├── summaries/{id}.md       # Book summaries as markdown (source files)
├── images/covers/{id}.jpg  # Cover images
├── build.js                # Build script
├── dist/                   # Generated distribution directory
└── Justfile                # Task runner commands

Adding a Book

1. Add entry to data/books.json:

   {
     "id": 55,
     "title": "Book Title",
     "author": "Author Name",
     "year": 2024,
     "format": "Paperback",
     "isbn": "9781234567890",
     "language": "en",
     "coverLocal": "images/covers/55.jpg"
   }
   

2. Add cover image as images/covers/55.jpg

3. Create summary file summaries/55.md:

   # Book Title
   
   Plot summary goes here...
   

4. Run just build to rebuild

Editing Summaries

Summaries are stored as individual markdown files in summaries/. Edit them directly, then run just build to embed them into books.json.

License

Data sourced from foo.zone.