Fast, responsive, self-hosted image gallery. Ships ZERO JavaScript to the client.

Musée (pronounced myu-zay) was written primarily to experiment around with https://remix.run/ but now re-written using https://astro.build. Until now I had been using the excellent waschinski/photo-stream gallery for hosting my images but felt limited with having to use Ruby.

Mission accomplished! Musée now ships ZERO client-side JavaScript while maintaining a responsive masonry layout with proper horizontal ordering. This is achieved through Astro's build-time static generation, pre-calculating column distributions for each breakpoint and using pure CSS for responsive display.

[ Live Demo ]

• Zero JavaScript sent to clients
• True masonry layout with horizontal ordering
• Generate image thumbnails
• Compress original images
• Strip image metadata before deployment
• Typescript support
• Statically Generated
• Uses TailwindCSS
• OpenGraph meta tags
• CSS-only animations
• Works with JavaScript disabled
• Captions for images
• Device metadata for images
• Image geo-tag map generation

• gallery.obviy.us
• tarun.photos

Feel free to make a PR to add your own.

1. Install dependencies.

$ bun install

Load your images in the src/assets/images/original directory.

2. Start development server

$ bun run dev

Deployment (for now) is done to Cloudflare Pages. Documentation is available here: https://developers.cloudflare.com/pages/framework-guides/astro/

Musée achieves zero JavaScript by:

• Pre-calculating masonry column distributions at build time for each breakpoint
• Using CSS media queries to show/hide the appropriate pre-rendered layout
• Replacing React components with Astro components
• Moving all date calculations to build time
• Using pure CSS animations instead of JavaScript libraries

Any and all contributions are welcome.

This repository uses the automated semantic-release suite of tools to generate version numbers. All commit messages must conform to the Angular Commit Message conventions.