mirror of
https://github.com/Afilmory/afilmory
synced 2026-04-24 23:05:05 +00:00
d5a2ea4db2
- Introduced a comprehensive `DEVELOPMENT.md` guide for contributors and self-hosters, detailing workspace layout and common commands. - Updated `README.md` to include links to the new development guide and improved deployment instructions. - Added new documentation files covering architecture, builder pipeline, configuration, and deployment strategies. - Implemented new storage provider documentation for Backblaze B2, Eagle, GitHub, and local storage options. - Enhanced the UI components with new features, including a navigation context and improved theme handling. - Removed outdated GitHub Action deployment documentation. Signed-off-by: Innei <tukon479@gmail.com>
140 lines
5.1 KiB
Markdown
140 lines
5.1 KiB
Markdown
<p align="center">
|
||
<img src="https://github.com/Afilmory/assets/blob/main/afilmory-readme.webp?raw=true" alt="Afilmory" width="100%" />
|
||
</p>
|
||
|
||
# <p align="center">Afilmory</p>
|
||
|
||
Afilmory (/əˈfɪlməri/, "uh-FIL-muh-ree") is a term created for personal photography websites, blending Auto Focus (AF), aperture (light control), film (vintage medium), and memory (captured moments).
|
||
|
||
A modern photo gallery website built with React + TypeScript, supporting automatic photo synchronization from multiple storage sources (S3, GitHub), featuring high-performance WebGL rendering, masonry layout, EXIF information display, thumbnail generation, and more.
|
||
|
||
Live Photo Galleries:
|
||
|
||
- https://afilmory.innei.in
|
||
- https://gallery.mxte.cc
|
||
- https://photography.pseudoyu.com
|
||
- https://afilmory.magren.cc
|
||
|
||
## 🌟 Features
|
||
|
||
### Core Functionality
|
||
|
||
- 🖼️ **High-Performance WebGL Image Renderer** - Custom WebGL component with smooth zoom and pan operations
|
||
- 📱 **Responsive Masonry Layout** - Powered by Masonic, adapts to different screen sizes
|
||
- 🎨 **Modern UI Design** - Built with Tailwind CSS and Radix UI component library
|
||
- ⚡ **Incremental Sync** - Smart change detection, processes only new or modified photos
|
||
- 🌐 **i18n** - Multi-language support
|
||
- 🔗 **OpenGraph** - OpenGraph metadata for social media sharing
|
||
|
||
### Image Processing
|
||
|
||
- 🔄 **HEIC/HEIF Format Support** - Automatic conversion of Apple device HEIC format
|
||
- 📷 **TIFF Format Support** - Automatic conversion of TIFF format
|
||
- 🖼️ **Smart Thumbnail Generation** - Multi-size thumbnails for optimized loading performance
|
||
- 📊 **EXIF Information Display** - Complete shooting parameters including camera model, focal length, aperture, etc.
|
||
- 🌈 **Blurhash Placeholders** - Elegant image loading experience
|
||
- 📱 **Live Photo Support** - Detection and display of iPhone Live Photos
|
||
- ☀️ **HDR Image Support** - Display HDR images
|
||
|
||
### Advanced Features
|
||
|
||
- 🎛️ **Fujifilm Recipe** - Read and display Fujifilm camera film simulation settings
|
||
- 🔍 **Fullscreen Viewer** - Image viewer with gesture support
|
||
- 🏷️ **File System Tags** - Auto-generated tags based on file system
|
||
- ⚡ **Concurrent Processing** - Multi-process/multi-thread concurrent processing support
|
||
- 🗂️ **Multi-Storage Support** - S3, GitHub, and other storage backends
|
||
- 📷 **Share Image** - Share image to social media or embed iframe to your website
|
||
- 🗺️ **Interactive Map Explorer** - Geographic visualization of photos with GPS coordinates from EXIF data using MapLibre
|
||
|
||
## 🏗️ Technical Architecture
|
||
|
||
### Frontend Tech Stack
|
||
|
||
- **React 19** - Latest React version with Compiler
|
||
- **TypeScript** - Complete type safety
|
||
- **Vite** - Modern build tool
|
||
- **Tailwind CSS** - Atomic CSS framework
|
||
- **Radix UI** - Accessible component library
|
||
- **Jotai** - State management
|
||
- **TanStack Query** - Data fetching and caching
|
||
- **React Router 7** - Routing management
|
||
- **i18next** - Internationalization
|
||
|
||
### Build System
|
||
|
||
- **Node.js** - Server-side runtime
|
||
- **Sharp** - High-performance image processing
|
||
- **AWS SDK** - S3 storage operations
|
||
- **Worker Threads/Cluster** - Concurrent processing
|
||
- **EXIF-Reader** - EXIF data extraction
|
||
|
||
### Storage Architecture
|
||
|
||
Designed with adapter pattern, supporting multiple storage backends:
|
||
|
||
- **S3-Compatible Storage** - AWS S3, MinIO, Alibaba Cloud OSS, etc.
|
||
- **GitHub Storage** - Using GitHub repository as image storage
|
||
- **Eagle Storage** - Using Eagle app library as image storage
|
||
- **Local File System** - Local storage for development and testing
|
||
|
||
## 🚀 Self-Host
|
||
|
||
### Option A: Docker (recommended)
|
||
|
||
[Docker deployment guide](https://github.com/Afilmory/docker) ships prebuilt images with minimal setup.
|
||
|
||
### Option B: Manual install
|
||
|
||
1. Copy `config.example.json` to `config.json` and fill in your site name, description, and social links.
|
||
2. Prepare access to your photo storage (S3/B2/GitHub/local). The builder will read photos and generate thumbnails plus `photos-manifest.json`.
|
||
3. Run the builder to generate assets, then start the site.
|
||
|
||
Looking for developer commands, environment variables, and builder config details? See `DEVELOPMENT.md`.
|
||
|
||
## 🔧 Advanced Usage
|
||
|
||
### Custom Storage Provider
|
||
|
||
Implement the `StorageProvider` interface to support new storage backends:
|
||
|
||
```typescript
|
||
import { StorageProvider } from './src/core/storage/interfaces'
|
||
|
||
class MyStorageProvider implements StorageProvider {
|
||
async getFile(key: string): Promise<Buffer | null> {
|
||
// Implement file retrieval logic
|
||
}
|
||
|
||
async listImages(): Promise<StorageObject[]> {
|
||
// Implement image list retrieval logic
|
||
}
|
||
|
||
// ... other methods
|
||
}
|
||
```
|
||
|
||
### Custom Image Processing
|
||
|
||
Add custom processors in the `src/core/image/` directory:
|
||
|
||
```typescript
|
||
export async function customImageProcessor(buffer: Buffer) {
|
||
// Custom image processing logic
|
||
return processedBuffer
|
||
}
|
||
```
|
||
|
||
## 📄 License
|
||
|
||
Attribution Network License (ANL) v1.0 © 2025 Afilmory Team. See [LICENSE](LICENSE) for more details.
|
||
|
||
## 🔗 Related Links
|
||
|
||
- [Live Demo](https://afilmory.innei.in)
|
||
- [Personal Website](https://innei.in)
|
||
- [GitHub](https://github.com/innei)
|
||
|
||
---
|
||
|
||
If this project helps you, please give it a ⭐️ Star for support!
|