gallery-astro/README.md

S3 Image Gallery

A responsive image gallery application built with Astro.js that connects to any S3-compatible storage service to display your images with infinite scrolling. Works with AWS S3, Backblaze B2, MinIO, DigitalOcean Spaces, and other S3-compatible services.

Features

• 📱 Responsive design that works on all devices
• 🔄 Infinite scrolling for seamless browsing of large image collections
• 🖼️ Optimized image loading with lazy loading
• 🔒 Secure S3 integration using signed URLs
• 🔌 Compatible with any S3-compatible storage service (AWS S3, Backblaze B2, MinIO, etc.)
• ☁️ Ready for deployment on Cloudflare Pages or Cloudflare Workers

Prerequisites

• Node.js (v16 or later)
• An S3-compatible storage bucket with your images
• Access credentials with permissions to read from the bucket

Supported S3-Compatible Services

This application works with any S3-compatible storage service, including:

• Amazon S3
• Backblaze B2
• MinIO
• DigitalOcean Spaces
• Wasabi
• Linode Object Storage
• Scaleway Object Storage
• And many others

Each service may have slightly different configuration requirements. The application uses the AWS SDK for JavaScript v3, which supports custom endpoints for S3-compatible services.

Getting Started

1. Clone this repository

2. Install dependencies:

   npm install
   

3. Create a .env file based on the .env.example template:

   cp .env.example .env
   

4. Fill in your S3 credentials in the .env file:

   # Required for all S3-compatible services
   S3_ACCESS_KEY=your_access_key_here
   S3_SECRET_KEY=your_secret_key_here
   S3_REGION=your_region_here
   S3_BUCKET_NAME=your_bucket_name_here
   
   # Optional: For S3-compatible services like Backblaze B2, MinIO, etc.
   # S3_ENDPOINT=https://s3.us-west-000.backblazeb2.com
   # S3_FORCE_PATH_STYLE=true
   

   Using with Backblaze B2

   For Backblaze B2, you'll need to set the following:

   S3_ACCESS_KEY=your_application_key_id
   S3_SECRET_KEY=your_application_key
   S3_REGION=us-west-000  # Replace with your bucket's region
   S3_BUCKET_NAME=your_bucket_name
   S3_ENDPOINT=https://s3.us-west-000.backblazeb2.com  # Replace with your region
   S3_FORCE_PATH_STYLE=true
   

5. Start the development server:

   npm run dev
   

6. Open your browser and navigate to http://localhost:4321

Testing Your S3 Connection

Before running the application, you can test your S3 connection to ensure your credentials are working correctly:

npm run test:s3

This will attempt to connect to your S3-compatible storage service and verify that:

1. Your credentials are valid
2. The specified bucket exists and is accessible

If there are any issues, the script will provide helpful error messages to guide you in fixing the configuration.

Building for Production

To build the application for production:

npm run build

The built files will be in the dist directory.

Deployment to Cloudflare

This project is configured to be deployed on Cloudflare Pages or Cloudflare Workers.

Deploying to Cloudflare Pages

1. Push your code to a Git repository (GitHub, GitLab, etc.)
2. In the Cloudflare Pages dashboard, create a new project and connect it to your repository
3. Configure the build settings:
   • Build command: npm run build
   • Build output directory: dist
4. Add your environment variables in the Cloudflare Pages dashboard:
   • Required: S3_ACCESS_KEY, S3_SECRET_KEY, S3_REGION, S3_BUCKET_NAME
   • For S3-compatible services: S3_ENDPOINT, S3_FORCE_PATH_STYLE
5. Deploy your site

Deploying to Cloudflare Workers

1. Install Wrangler CLI:

   npm install -g wrangler
   

2. Login to Cloudflare:

   wrangler login
   

3. Configure your wrangler.toml file with your account ID and other settings
4. Deploy to Cloudflare Workers:

   wrangler deploy
   

Customization

You can customize the appearance of the gallery by modifying the CSS variables in src/layouts/Layout.astro:

:root {
  --color-primary: #3498db;
  --color-secondary: #2ecc71;
  --color-text: #333;
  --color-text-light: #666;
  --color-background: #f5f7fa;
  --color-card: #fff;
  --color-border: #e1e4e8;
}

License

MIT