### Manage ChronoFrame with Docker Compose

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/getting-started.md

Provides essential commands for managing the ChronoFrame service using Docker Compose. This includes starting the service in detached mode, following logs, stopping the service, and updating to the latest image.

```bash
# Start
docker compose up -d

# Follow logs
docker compose logs -f chronoframe

# Stop
docker compose down

# Update to latest image
docker compose pull
docker compose up -d
```

--------------------------------

### Run ChronoFrame with Docker (Single Container)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/getting-started.md

Starts ChronoFrame in a single Docker container using the `docker run` command. It maps port 3000, mounts a local volume for data persistence, and uses an .env file for configuration. Ensure the .env file is present in the current directory.

```bash
docker run -d \
  --name chronoframe \
  -p 3000:3000 \
  -v "$(pwd)/data:/app/data" \
  --env-file .env \
  ghcr.io/hoshinosuzumi/chronoframe:latest
```

--------------------------------

### Pull ChronoFrame Docker Image (Docker Hub)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/getting-started.md

Fetches the latest ChronoFrame Docker image from Docker Hub. Ensure Docker is installed and running.

```bash
docker pull hoshinosuzumi/chronoframe:latest
```

--------------------------------

### Start ChronoFrame Development Server (Bash)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/development/contributing.md

Commands to start the development server for ChronoFrame. It includes a command to start the complete development server and an alternative to start step-by-step, including building the WebGL package and then starting the Nuxt development server.

```bash
# Start complete development server
pnpm dev

# Or start step by step
pnpm build:deps           # Build WebGL package
pnpm dlx nuxi@latest dev  # Start Nuxt development server only
```

--------------------------------

### Start MinIO Docker Container

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/CONTRIBUTING.md

This command starts a MinIO server in a Docker container, exposing ports 9000 and 9001. It sets the root user and password for MinIO and specifies the directory for data storage. The console address is also configured.

```shell
docker run -d \
  --name minio \
  -p 9000:9000 \
  -p 9001:9001 \
  -e "MINIO_ROOT_USER=minioadmin" \
  -e "MINIO_ROOT_PASSWORD=minioadmin" \
  minio/minio server /data --console-address ":9001"
```

--------------------------------

### Configure Environment Variables (Bash)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/development/contributing.md

Steps to configure the project's environment variables by copying the example file and then editing it. It shows a minimal development configuration example with necessary variables for admin accounts, authentication, storage, and map services.

```bash
# Copy environment variable template
cp .env.example .env

# Edit environment variables
nano .env  # Or use your preferred editor
```

```dotenv
# === Admin Account ===
CFRAME_ADMIN_EMAIL=dev@example.com
CFRAME_ADMIN_NAME=Developer
CFRAME_ADMIN_PASSWORD=dev123456

# === Authentication Settings ===
NUXT_OAUTH_GITHUB_CLIENT_ID=your-dev-github-client-id
NUXT_OAUTH_GITHUB_CLIENT_SECRET=your-dev-github-client-secret
NUXT_SESSION_PASSWORD=your-32-character-development-key

# === Storage Settings (can use MinIO for development) ===
NUXT_STORAGE_PROVIDER=s3
NUXT_PROVIDER_S3_ENDPOINT=http://localhost:9000
NUXT_PROVIDER_S3_BUCKET=chronoframe-dev
NUXT_PROVIDER_S3_REGION=us-east-1
NUXT_PROVIDER_S3_ACCESS_KEY_ID=minioadmin
NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=minioadmin

# === Map Services (optional) ===
NUXT_PUBLIC_MAPBOX_ACCESS_TOKEN=pk.your-development-token
NUXT_MAPBOX_ACCESS_TOKEN=sk.your-development-token

# === Enable Debug Info ===
VITE_SHOW_DEBUG_INFO=true
```

--------------------------------

### Starting the Development Server

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/README.md

Starts the development server for Chronoframe. The application will be accessible at `http://localhost:3000`. This command typically includes hot-reloading for a smooth development experience.

```bash
pnpm dev
```

--------------------------------

### Install Project Dependencies (Bash)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/development/contributing.md

This section covers installing the pnpm package manager globally and then installing all project dependencies using pnpm. Ensure Node.js and pnpm are installed beforehand.

```bash
# Install pnpm (if not already installed)
npm install -g pnpm

# Install project dependencies
pnpm install
```

--------------------------------

### Pull ChronoFrame Docker Image (GHCR)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/getting-started.md

Fetches the latest ChronoFrame Docker image from the GitHub Container Registry. Ensure Docker is installed and running.

```bash
docker pull ghcr.io/hoshinosuzumi/chronoframe:latest
```

--------------------------------

### ChronoFrame .env Configuration (Openlist Storage)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/getting-started.md

Sets up ChronoFrame to use Openlist as its storage provider. This requires the base URL of your Openlist instance, the root path for ChronoFrame data, and a static token for authentication.

```env
NUXT_STORAGE_PROVIDER=openlist
NUXT_PROVIDER_OPENLIST_BASE_URL=https://openlist.example.com
NUXT_PROVIDER_OPENLIST_ROOT_PATH=/115pan/chronoframe
NUXT_PROVIDER_OPENLIST_TOKEN=your-static-token
```

--------------------------------

### Vue 3 Component Structure with Composition API

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/CONTRIBUTING.md

Illustrates a recommended structure for a Vue 3 Single File Component (SFC) using the Composition API with `<script setup>`. It demonstrates defining props, emits, reactive data, computed properties, and methods, adhering to best practices for component organization.

```vue
<script setup lang="ts">
// Imports
import { ref, computed } from 'vue'
import type { Photo } from '~/types'

// Props and Emits
interface Props {
  photos: Photo[]
  loading?: boolean
}

interface Emits {
  select: [photo: Photo]
  delete: [photoId: string]
}

const props = withDefaults(defineProps<Props>(), {
  loading: false
})

const emit = defineEmits<Emits>()

// Reactive data
const selectedPhoto = ref<Photo | null>(null)

// Computed properties
const photoCount = computed(() => props.photos.length)

// Methods
const handlePhotoClick = (photo: Photo) => {
  selectedPhoto.value = photo
  emit('select', photo)
}
</script>

<template>
  <div class="photo-grid">
    <!-- Template content -->
  </div>
</template>

<style scoped>
/* Component styles */
</style>
```

--------------------------------

### Installing Project Dependencies with pnpm

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/README.md

Installs project dependencies using the pnpm package manager, which is the recommended method for this project. It also shows alternative commands for npm and yarn.

```bash
# With pnpm (recommended)
pnpm install

# Or with other package managers
npm install
yarn install
```

--------------------------------

### Configuring Environment Variables

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/README.md

Copies the example environment file to a new file named `.env`. This `.env` file will be used by the application to load environment-specific configurations, such as database credentials or API keys. Ensure you fill in the necessary variables in the `.env` file.

```bash
cp .env.example .env
```

--------------------------------

### ChronoFrame .env Configuration (GitHub OAuth)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/getting-started.md

Configures optional GitHub OAuth for user authentication. Requires a GitHub OAuth App Client ID and Client Secret. Ensure the callback URL in your GitHub App settings is correctly set.

```env
NUXT_OAUTH_GITHUB_CLIENT_ID=
NUXT_OAUTH_GITHUB_CLIENT_SECRET=
```

--------------------------------

### ChronoFrame Minimal .env Configuration (Local Storage)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/getting-started.md

Sets up the essential environment variables for running ChronoFrame with local filesystem storage. This includes admin credentials, site metadata, map provider settings, storage configuration, and a session password. The session password must be a 32-character random string.

```env
# Admin email (required)
CFRAME_ADMIN_EMAIL=
# Admin username (optional, default Chronoframe)
CFRAME_ADMIN_NAME=
# Admin password (optional, default CF1234@!)
CFRAME_ADMIN_PASSWORD=

# Site metadata (all optional)
NUXT_PUBLIC_APP_TITLE=
NUXT_PUBLIC_APP_SLOGAN=
NUXT_PUBLIC_APP_AUTHOR=
NUXT_PUBLIC_APP_AVATAR_URL=

# Map provider (maplibre/mapbox)
NUXT_PUBLIC_MAP_PROVIDER=maplibre
# MapTiler access token for MapLibre
NUXT_PUBLIC_MAP_MAPLIBRE_TOKEN=
# Mapbox access token for Mapbox
NUXT_PUBLIC_MAPBOX_ACCESS_TOKEN=

# Storage provider (local or s3 or openlist)
NUXT_STORAGE_PROVIDER=local
NUXT_PROVIDER_LOCAL_PATH=/app/data/storage

# Session password (32‑char random string, required)
NUXT_SESSION_PASSWORD=
```

--------------------------------

### Starting Chronoframe with Docker Compose

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/README.md

Command to start the Chronoframe application using Docker Compose. This command builds, creates, and starts the services defined in the `docker-compose.yml` file in detached mode.

```bash
docker-compose up -d
```

--------------------------------

### Configure MinIO Self-hosted Storage (Bash)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/configuration/storage-providers.md

Example configuration for a self-hosted MinIO instance. Includes MinIO endpoint, bucket name, region, access key ID, secret access key, and enables path-style access.

```bash
NUXT_STORAGE_PROVIDER=s3
NUXT_PROVIDER_S3_ENDPOINT=https://minio.example.com
NUXT_PROVIDER_S3_BUCKET=chronoframe
NUXT_PROVIDER_S3_REGION=us-east-1
NUXT_PROVIDER_S3_ACCESS_KEY_ID=minioadmin
NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=minioadmin
# MinIO requires path-style access
NUXT_PROVIDER_S3_FORCE_PATH_STYLE=true
```

--------------------------------

### ChronoFrame Docker Compose Configuration

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/getting-started.md

Defines the ChronoFrame service for Docker Compose. This configuration specifies the image to use, container name, restart policy, port mapping, volume for data persistence, and the environment file for configuration.

```yaml
services:
  chronoframe:
    image: ghcr.io/hoshinosuzumi/chronoframe:latest
    container_name: chronoframe
    restart: unless-stopped
    ports:
      - '3000:3000'
    volumes:
      - ./data:/app/data
    env_file:
      - .env
```

--------------------------------

### Conventional Commits Standard Examples

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/CONTRIBUTING.md

Provides examples of commit messages adhering to the Conventional Commits specification. This standard helps in automating changelog generation and maintaining a clear commit history by categorizing changes with prefixes like `feat`, `fix`, `docs`, etc.

```git
feat: add photo batch delete functionality
fix: fix WebGL viewer compatibility issue in Safari
docs: update deployment documentation
style: unify code formatting
refactor: refactor storage service interface
test: add unit tests for photo upload
chore: update dependency versions
```

--------------------------------

### Nginx Configuration for Chronoframe

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/getting-started.md

This Nginx configuration sets up a reverse proxy for Chronoframe, handling SSL termination, HTTP/2, caching for static assets, and forwarding requests to the backend application. It includes rules for redirecting HTTP to HTTPS and setting appropriate headers for WebSocket connections and client body size.

```nginx
server {
    listen 80;
    server_name your-domain.com;
    return 301 https://$server_name$request_uri;
}

server {
    listen 443 ssl http2;
    server_name your-domain.com;

    ssl_certificate /path/to/your/certificate.crt;
    ssl_certificate_key /path/to/your/private.key;

    ssl_protocols TLSv1.2 TLSv1.3;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE-RSA-AES256-GCM-SHA384;
    ssl_prefer_server_ciphers off;

    client_max_body_size 100M;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_cache_bypass $http_upgrade;
        proxy_connect_timeout 60s;
        proxy_send_timeout 60s;
        proxy_read_timeout 60s;
    }

    location ~* \.(jpg|jpeg|png|gif|webp|svg|css|js|ico|woff|woff2|ttf|eot)$ {
        proxy_pass http://localhost:3000;
        expires 1y;
        add_header Cache-Control "public, immutable";
        proxy_set_header Host $host;
    }
}
```

--------------------------------

### Traefik Docker Labels for Chronoframe

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/getting-started.md

This Traefik configuration uses Docker labels to expose Chronoframe running in a container. It enables Traefik for the service, defines routing rules based on the host domain, configures TLS termination using Let's Encrypt, and specifies the internal port for the Chronoframe service. It also manages Docker networks for Traefik integration.

```yaml
services:
  chronoframe:
    image: ghcr.io/hoshinosuzumi/chronoframe:latest
    container_name: chronoframe
    restart: unless-stopped
    volumes:
      - ./data:/app/data
    env_file:
      - .env
    labels:
      - "traefik.enable=true"
      - "traefik.http.routers.chronoframe.rule=Host(`your-domain.com`)"
      - "traefik.http.routers.chronoframe.entrypoints=websecure"
      - "traefik.http.routers.chronoframe.tls.certresolver=letsencrypt"
      - "traefik.http.services.chronoframe.loadbalancer.server.port=3000"
    networks:
      - traefik

networks:
  traefik:
    external: true
```

--------------------------------

### ChronoFrame .env Configuration (S3 Storage)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/getting-started.md

Configures ChronoFrame to use an S3-compatible storage backend. Requires S3 credentials, endpoint, bucket name, and optionally a region and CDN URL. Ensure these details match your S3 provider's configuration.

```env
NUXT_STORAGE_PROVIDER=s3
NUXT_PROVIDER_S3_ENDPOINT=
NUXT_PROVIDER_S3_BUCKET=chronoframe
NUXT_PROVIDER_S3_REGION=auto
NUXT_PROVIDER_S3_ACCESS_KEY_ID=
NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=
NUXT_PROVIDER_S3_PREFIX=photos/
NUXT_PROVIDER_S3_CDN_URL=
```

--------------------------------

### Configure Alibaba Cloud OSS Storage (Bash)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/configuration/storage-providers.md

Example configuration for Alibaba Cloud Object Storage Service (OSS). Sets the S3 endpoint, bucket name, region, access key ID, secret access key, and CDN URL.

```bash
NUXT_STORAGE_PROVIDER=s3
NUXT_PROVIDER_S3_ENDPOINT=https://oss-cn-hangzhou.aliyuncs.com
NUXT_PROVIDER_S3_BUCKET=chronoframe-photos
NUXT_PROVIDER_S3_REGION=oss-cn-hangzhou
NUXT_PROVIDER_S3_ACCESS_KEY_ID=LTAI...
NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=...
NUXT_PROVIDER_S3_CDN_URL=https://cdn.example.com
```

--------------------------------

### Update ChronoFrame using Docker Compose

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/updates.md

This bash script details the standard process for updating ChronoFrame via Docker Compose. It involves navigating to the project directory, backing up the current docker-compose.yml, stopping the service, pulling the latest image, starting the new version, and viewing logs.

```bash
# 1. Enter project directory
cd /path/to/chronoframe

# 2. Backup current configuration
cp docker-compose.yml docker-compose.yml.backup

# 3. Stop current service
docker-compose down

# 4. Pull latest image
docker-compose pull

# 5. Start new version
docker-compose up -d

# 6. View startup logs
docker-compose logs -f chronoframe
```

--------------------------------

### Configure Cloudflare R2 Storage (Bash)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/configuration/storage-providers.md

Example configuration for Cloudflare R2. Includes R2 endpoint, bucket name, region, access key ID, secret access key, and a custom CDN URL.

```bash
NUXT_STORAGE_PROVIDER=s3
NUXT_PROVIDER_S3_ENDPOINT=https://[account-id].r2.cloudflarestorage.com
NUXT_PROVIDER_S3_BUCKET=chronoframe
NUXT_PROVIDER_S3_REGION=auto
NUXT_PROVIDER_S3_ACCESS_KEY_ID=...
NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=...
NUXT_PROVIDER_S3_CDN_URL=https://photos.example.com
```

--------------------------------

### Configure ChronoFrame with Environment Variables

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/README.md

This snippet shows a minimal configuration for deploying ChronoFrame using environment variables. It covers essential settings like admin credentials, site metadata, map provider configuration, storage options, and session password. For a complete list of options, refer to the official Configuration Guide.

```bash
# Admin email (required)
CFRAME_ADMIN_EMAIL=
# Admin username (optional, default Chronoframe)
CFRAME_ADMIN_NAME=
# Admin password (optional, default CF1234@!)
CFRAME_ADMIN_PASSWORD=

# Site metadata (all optional)
NUXT_PUBLIC_APP_TITLE=
NUXT_PUBLIC_APP_SLOGAN=
NUXT_PUBLIC_APP_AUTHOR=
NUXT_PUBLIC_APP_AVATAR_URL=

# Map provider (maplibre/mapbox)
NUXT_PUBLIC_MAP_PROVIDER=maplibre
# MapTiler access token for MapLibre
NUXT_PUBLIC_MAP_MAPLIBRE_TOKEN=
# Mapbox access token for Mapbox
NUXT_PUBLIC_MAPBOX_ACCESS_TOKEN=

# Mapbox unrestricted token (optional, reverse geocoding)
NUXT_MAPBOX_ACCESS_TOKEN=

# Storage provider (local, s3 or openlist)
NUXT_STORAGE_PROVIDER=local
NUXT_PROVIDER_LOCAL_PATH=/app/data/storage

# Session password (32‑char random string, required)
NUXT_SESSION_PASSWORD=
```

--------------------------------

### Configure Tencent Cloud COS Storage (Bash)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/configuration/storage-providers.md

Example configuration for Tencent Cloud Object Storage (COS). Specifies COS endpoint, bucket name, region, access key ID, and secret access key.

```bash
NUXT_STORAGE_PROVIDER=s3
NUXT_PROVIDER_S3_ENDPOINT=https://cos.ap-beijing.myqcloud.com
NUXT_PROVIDER_S3_BUCKET=chronoframe-1234567890
NUXT_PROVIDER_S3_REGION=ap-beijing
NUXT_PROVIDER_S3_ACCESS_KEY_ID=AKID...
NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=...
```

--------------------------------

### Configure AWS S3 Storage (Bash)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/configuration/storage-providers.md

Example configuration for AWS S3. Specifies AWS S3 endpoint, bucket name, region, access key ID, secret access key, and CloudFront CDN URL.

```bash
NUXT_STORAGE_PROVIDER=s3
NUXT_PROVIDER_S3_ENDPOINT=https://s3.amazonaws.com
NUXT_PROVIDER_S3_BUCKET=my-chronoframe-bucket
NUXT_PROVIDER_S3_REGION=us-east-1
NUXT_PROVIDER_S3_ACCESS_KEY_ID=AKIA...
NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=...
NUXT_PROVIDER_S3_CDN_URL=https://d1234567890.cloudfront.net
```

--------------------------------

### Manually Execute ChronoFrame Database Migration

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/updates.md

These bash commands show how to manually trigger database migrations for ChronoFrame. First, you enter the running container, and then you execute the 'npx drizzle-kit migrate' command within the container's shell.

```bash
# Enter container
docker exec -it chronoframe sh

# Execute migration
npx drizzle-kit migrate
```

--------------------------------

### Backup ChronoFrame Data and Configuration

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/updates.md

This bash script stops the ChronoFrame service, creates a timestamped backup directory, and copies the data directory, .env file, and docker-compose.yml file into the backup. This is a crucial preparation step before performing any updates.

```bash
# Stop service
docker-compose down

# Create complete backup
ts=$(date +%Y%m%d-%H%M%S) && mkdir -p backups/$ts && cp -r data/ .env docker-compose.yml backups/$ts/
```

--------------------------------

### Monitor ChronoFrame Database Migration Logs

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/updates.md

This bash command allows you to view the logs for the ChronoFrame container, specifically filtering for lines related to database migrations. This is useful for verifying that automatic migrations are running correctly on startup.

```bash
# View migration logs
docker logs chronoframe | grep -i migration
```

--------------------------------

### Generate NUXT_SESSION_PASSWORD

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/getting-started.md

This snippet demonstrates how to generate a secure random string for the NUXT_SESSION_PASSWORD environment variable. It provides commands for both Linux/macOS using OpenSSL and for Windows using PowerShell, ensuring a strong and unique password for session security.

```bash
# Linux / macOS
openssl rand -base64 32
```

```powershell
# Windows (PowerShell)
[Convert]::ToBase64String((1..32|%{[byte](Get-Random -Max 256)})
```

--------------------------------

### Building Chronoframe for Production

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/README.md

Provides commands for building the Chronoframe project. `pnpm build` creates a production-ready build of the application, optimized for deployment. `pnpm preview` serves the production build locally for testing.

```bash
# Production build
pnpm build

# Preview production build
pnpm preview
```

--------------------------------

### Update ChronoFrame using Single Container

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/updates.md

This bash script demonstrates updating ChronoFrame when running as a single Docker container. It involves stopping and removing the existing container, pulling the latest image, and then starting a new container with the same configurations and volume mounts.

```bash
# Stop existing container
docker stop chronoframe
docker rm chronoframe

# Pull latest image
docker pull ghcr.io/hoshinosuzumi/chronoframe:latest

# Start new container with same configuration
docker run -d \
  --name chronoframe \
  -p 3000:3000 \
  -v $(pwd)/data:/app/data \
  --env-file .env \
  ghcr.io/hoshinosuzumi/chronoframe:latest
```

--------------------------------

### Build and Preview ChronoFrame Project (Bash)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/development/contributing.md

Commands for building the ChronoFrame project for production. It includes steps to build the WebGL dependency package, build the entire project, and then preview the production build.

```bash
# Build WebGL dependency package
pnpm build:deps

# Build complete project
pnpm build

# Preview production build
pnpm preview
```

--------------------------------

### Git Branching for Development Workflow

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/CONTRIBUTING.md

Outlines the standard Git commands for contributing to the project. This includes forking the repository, creating a new feature branch, making changes, committing them with standard messages, and pushing the branch for a Pull Request.

```bash
git checkout -b feature/new-feature
git push origin feature/new-feature
```

--------------------------------

### Initializing and Migrating the Database

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/README.md

Commands to manage database migrations for the Chronoframe project. `pnpm db:generate` creates new migration files based on schema changes, and `pnpm db:migrate` applies these migrations to the database.

```bash
# 2. Generate migration files (optional)
pnpm db:generate

# 3. Run database migrations
pnpm db:migrate
```

--------------------------------

### Database Query with Drizzle ORM in Server Environment

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/CONTRIBUTING.md

Demonstrates how to perform database operations within a server environment using the `useDB()` composable provided by the framework. This composable returns a Drizzle ORM instance, enabling type-safe database interactions.

```typescript
const db = useDB()

const photos = await db.select().from(photosTable)
```

--------------------------------

### Environment Configuration with Variable Overrides

Source: https://context7.com/hoshinosuzumi/chronoframe/llms.txt

Runtime configuration system supporting multiple storage providers (S3, local), map services (MapLibre, Mapbox), and authentication methods (OAuth). Configuration is managed through environment variables, allowing for easy overrides. Key configurations include admin credentials, site metadata, map provider details, storage provider settings, upload restrictions, session security, and OAuth provider credentials.

```bash
# .env configuration file

# Admin user setup (required)
CFRAME_ADMIN_EMAIL=admin@example.com
CFRAME_ADMIN_NAME=Admin
CFRAME_ADMIN_PASSWORD=SecurePassword123!

# Site metadata
NUXT_PUBLIC_APP_TITLE=My Photo Gallery
NUXT_PUBLIC_APP_SLOGAN=Capturing Moments
NUXT_PUBLIC_APP_AUTHOR=John Doe
NUXT_PUBLIC_APP_AVATAR_URL=https://example.com/avatar.jpg

# Map provider (maplibre or mapbox)
NUXT_PUBLIC_MAP_PROVIDER=maplibre
NUXT_PUBLIC_MAP_MAPLIBRE_TOKEN=pk.eyJ1Ijoiam9obmRvZSIsImEiOiJjbGFiYzEyMyJ9...

# Reverse geocoding (optional)
NUXT_MAPBOX_ACCESS_TOKEN=pk.eyJ1Ijoiam9obmRvZSIsImEiOiJjbGFiYzEyMyJ9...

# Storage provider: s3, local, or openlist
NUXT_STORAGE_PROVIDER=s3
NUXT_PROVIDER_S3_ENDPOINT=https://s3.amazonaws.com
NUXT_PROVIDER_S3_BUCKET=my-photos
NUXT_PROVIDER_S3_REGION=us-west-2
NUXT_PROVIDER_S3_ACCESS_KEY_ID=AKIAIOSFODNN7EXAMPLE
NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
NUXT_PROVIDER_S3_PREFIX=photos/
NUXT_PROVIDER_S3_CDN_URL=https://cdn.example.com

# Local storage alternative
NUXT_STORAGE_PROVIDER=local
NUXT_PROVIDER_LOCAL_PATH=/app/data/storage
NUXT_PROVIDER_LOCAL_BASE_URL=/storage

# Upload configuration
NUXT_UPLOAD_MIME_WHITELIST_ENABLED=true
NUXT_UPLOAD_MIME_WHITELIST=image/jpeg,image/png,image/heic,video/quicktime
NUXT_UPLOAD_DUPLICATE_CHECK_ENABLED=true
NUXT_UPLOAD_DUPLICATE_CHECK_MODE=skip # skip, warn, or block

# Session security (32-character random string, required)
NUXT_SESSION_PASSWORD=1234567890abcdef1234567890abcdef

# OAuth providers
NUXT_OAUTH_GITHUB_CLIENT_ID=Iv1.abc123def456
NUXT_OAUTH_GITHUB_CLIENT_SECRET=1234567890abcdef1234567890abcdef12345678
```

--------------------------------

### S3 Bucket CORS Settings (JSON)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/configuration/storage-providers.md

Recommended Cross-Origin Resource Sharing (CORS) configuration for an S3 bucket. Allows GET, PUT, POST, and DELETE methods from a specified origin.

```json
[
  {
    "AllowedOrigins": ["https://your-domain.com"],
    "AllowedMethods": ["GET", "PUT", "POST", "DELETE"],
    "AllowedHeaders": ["*"],
    "ExposeHeaders": ["ETag"],
    "MaxAgeSeconds": 3000
  }
]
```

--------------------------------

### Specify ChronoFrame Docker Image Version

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/guide/updates.md

This YAML snippet shows how to specify a particular version of the ChronoFrame Docker image within the docker-compose.yml file. This allows for targeted updates to a specific release tag.

```yaml
# docker-compose.yml
services:
  chronoframe:
    image: ghcr.io/hoshinosuzumi/chronoframe:v1.2.3  # Specify version
    # ... other configurations
```

--------------------------------

### Configure S3 Compatible Storage (Bash)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/configuration/storage-providers.md

Basic configuration for S3 compatible storage. Sets the storage provider to S3 and defines essential endpoint, bucket, region, and credentials. Optional configurations for prefix, CDN URL, and path style are also included.

```bash
# Set storage provider to S3
NUXT_STORAGE_PROVIDER=s3

# S3 basic configuration
NUXT_PROVIDER_S3_ENDPOINT=https://your-s3-endpoint.com
NUXT_PROVIDER_S3_BUCKET=chronoframe-photos
NUXT_PROVIDER_S3_REGION=us-east-1
NUXT_PROVIDER_S3_ACCESS_KEY_ID=your-access-key-id
NUXT_PROVIDER_S3_SECRET_ACCESS_KEY=your-secret-access-key

# Optional configuration
NUXT_PROVIDER_S3_PREFIX=photos/
NUXT_PROVIDER_S3_CDN_URL=https://cdn.example.com
NUXT_PROVIDER_S3_FORCE_PATH_STYLE=false
```

--------------------------------

### Configure OpenList Storage Token Authentication (Bash)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/configuration/storage-providers.md

Sets the authentication token for the OpenList storage provider. This is a required environment variable for secure access to the OpenList service.

```bash
NUXT_PROVIDER_OPENLIST_TOKEN=your-static-token
```

--------------------------------

### Git Branching and Pull Request Workflow

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/development/contributing.md

Outlines the standard Git workflow for contributing to the project, including forking, creating branches, committing changes with conventional messages, pushing, and creating a Pull Request.

```bash
# 1. Fork Project
# 2. Create Branch
git checkout -b feature/new-feature
# 3. Develop Feature
# 4. Commit Changes
# 5. Push Branch
git push origin feature/new-feature
# 6. Create PR
```

--------------------------------

### Configure Local Filesystem Storage (Bash)

Source: https://github.com/hoshinosuzumi/chronoframe/blob/main/docs/configuration/storage-providers.md

Configuration for local filesystem storage. Sets the storage provider to 'local' and specifies the path for storing files and the base URL for accessing them.

```bash
# Set storage provider to local
NUXT_STORAGE_PROVIDER=local

# Local storage configuration
NUXT_PROVIDER_LOCAL_PATH=/app/data/storage
NUXT_PROVIDER_LOCAL_BASE_URL=/storage
```

--------------------------------

### Album Management API (TypeScript)

Source: https://context7.com/hoshinosuzumi/chronoframe/llms.txt

Provides API endpoints for creating, retrieving, updating, and deleting photo albums. It supports album details like title, description, cover photo, and associated photo IDs. The API uses standard HTTP methods (GET, POST, PUT, DELETE) and expects/returns JSON payloads.

```typescript
// GET /api/albums - Retrieve all albums
const response = await fetch('/api/albums');
const albums = await response.json();

// Returns:
// [
//   {
//     id: 1,
//     title: 'Summer Vacation 2024',
//     description: 'Trip to Hawaii',
//     coverPhotoId: 'abc123',
//     photoIds: ['abc123', 'def456', 'ghi789'],
//     createdAt: '2024-12-01T00:00:00.000Z',
//     updatedAt: '2024-12-10T00:00:00.000Z'
//   }
// ]

// POST /api/albums - Create new album
const createResponse = await fetch('/api/albums', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({
    title: 'Winter Photos',
    description: 'Snow and ice',
    coverPhotoId: 'xyz789'
  })
});

// PUT /api/albums/[albumId] - Update album
await fetch('/api/albums/1', {
  method: 'PUT',
  body: JSON.stringify({ title: 'Updated Title' })
});

// DELETE /api/albums/[albumId] - Delete album
await fetch('/api/albums/1', { method: 'DELETE' });
```