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

src/assets/images/original/ is gitignored. Keep personal images there, build locally, and push only code changes.

Recovered images named slug__filename.webp keep slug as the public route. Other images get generated stable slugs.

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

$ bun run deploy:personal

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.