Design Philosophy
OpenSFHistory exists to make a large archive of historical San Francisco photography accessible, browsable, and useful. The design follows from that purpose: the photographs are the content, and everything else should support them without competing for attention.
The visual approach is restrained and editorial. Clean typography, generous whitespace, and a muted palette let the images — many of them black-and-white, some over a century old — speak on their own terms. There are no hero carousels, no parallax effects, no decorative flourishes. The design draws from archival and library traditions, where the organization of material is the interface.
On the code side, the site favors semantic HTML and data-attribute-driven CSS over class-heavy markup. Where a component needs styling hooks, a data-component or data-layout attribute provides them — keeping the HTML readable and the stylesheet's intent clear. The goal is markup that makes sense when you View Source, not markup that requires a build tool to interpret.
Interactivity is used where it earns its keep: autocomplete search, interactive maps for spatial browsing, dynamic filtering. Otherwise, the site relies on fast server rendering and standard page navigation. Not every interaction needs JavaScript, and not every page needs to feel like an application.
Typography
The site uses three typefaces:
#TODO: Finish text for typography
Tech Stack
The site is built with Laravel, a PHP framework valued here for its expressive routing, Eloquent ORM, and mature ecosystem. The admin panel uses Filament, which provides a complete resource management interface — photos, collections, neighborhoods, keywords, users, image use requests — without requiring a custom admin build.
Livewire and Alpine.js handle interactive components: search autocomplete, cart management, and filter interfaces. They allow server-rendered pages to gain targeted interactivity without the overhead of a full JavaScript framework.
Mapbox GL JS powers the interactive map view, rendering thousands of geolocated photographs with clustering and filtering by neighborhood, keyword, and date. The Mapbox library is code-split from the main bundle so it loads only on pages that use the map.
Search is backed by Meilisearch via Laravel Scout, providing fast full-text search with typo tolerance across the photo archive.
Styles are written in SCSS for component-level organization and compiled alongside Tailwind CSS utility classes by Vite. The database is PostgreSQL.
Payments for image use requests are processed through Stripe. Newsletter distribution is handled by Mailchimp. The sitemap is generated with spatie/laravel-sitemap.
Credits
This section will be updated with acknowledgments for the people and organizations who have contributed to OpenSFHistory and this website.