updates

README.docker.md

@@ -1,35 +1,72 @@
 # Puffin Offset Calculator Docker Setup
 
-This guide explains how to containerize the Puffin Offset Calculator app and embed it into your WordPress website.
+This guide explains how to containerize the Puffin Offset Calculator app, push it to a Gitea container registry, and embed it into your WordPress website.
 
 ## Files Overview
 
 - `Dockerfile` - Defines how to build the Docker image for the React app
+- `docker-compose.yml` - Orchestrates the container deployment, pulling the image from Gitea registry
 - `nginx.conf` - Configures Nginx to serve the React app correctly
-- `docker-compose.yml` - Orchestrates the container deployment
 - `wordpress-integration.php` - WordPress plugin file for embedding the calculator
+- `setup.sh` - Script to automate the container deployment process including Gitea login
+- `gitea-image-push.sh` - Script to build and push the Docker image to Gitea registry
+- `puffin-calculator.css` - Styling for the WordPress integration
+- `puffin-calculator.js` - JavaScript for the WordPress integration
+
+## Workflow Overview
+
+The workflow to deploy the Puffin Offset Calculator consists of two main stages:
+
+1. **Build and Push Stage**: Build the Docker image and push it to the Gitea container registry
+2. **Deployment Stage**: Pull the image from the registry and run it on your server
 
 ## Getting Started
 
 ### Prerequisites
 
-- Docker and Docker Compose installed on your server
+- Docker and Docker Compose installed on your development machine and server
+- Gitea repository access with container registry enabled
 - WordPress website where you want to embed the calculator
 - Basic knowledge of Docker and WordPress
 
-### Step 1: Build and Run the Docker Container
+### Step 1: Build and Push the Docker Image
 
-1. Place the `Dockerfile`, `nginx.conf`, and `docker-compose.yml` files in the project root directory (where your React app code is located).
+1. Place the `Dockerfile`, `nginx.conf`, and `gitea-image-push.sh` files in the project root directory.
 
-2. Create a `logs` directory for storing Nginx logs:
+2. Make the image push script executable:
    ```bash
-   mkdir logs
+   chmod +x gitea-image-push.sh
    ```
 
-3. Build and start the container:
+3. Run the script to build and push the image:
    ```bash
-   docker-compose up -d
+   ./gitea-image-push.sh
    ```
+   
+   This script will:
+   - Prompt you to log in to the Gitea registry
+   - Build the Docker image using the Dockerfile
+   - Push the built image to the Gitea registry
+
+### Step 2: Deploy the Container
+
+1. Place the `docker-compose.yml`, `nginx.conf`, and `setup.sh` files in a directory on your server.
+
+2. Make the setup script executable:
+   ```bash
+   chmod +x setup.sh
+   ```
+
+3. Run the setup script:
+   ```bash
+   ./setup.sh
+   ```
+   
+   This script will:
+   - Create a logs directory
+   - Check if Docker and Docker Compose are installed
+   - Prompt you to log in to the Gitea registry
+   - Pull and start the Docker container
 
 4. Verify the container is running:
    ```bash

SIMPLE-SETUP.md

@@ -0,0 +1,88 @@
+# Simple Puffin Offset Calculator Setup
+
+This guide provides a minimalist approach to run the Puffin Offset Calculator in a Docker container and embed it into WordPress.
+
+## Quick Start
+
+### 1. Create a Directory and Required Files
+
+Create a new directory and add these files:
+
+- `docker-compose.yml` - Configuration for Docker container
+- `.env` - Environment variables for the application
+
+### 2. Run with Docker Compose
+
+```bash
+docker-compose up -d
+```
+
+This will:
+- Pull the calculator image from Gitea registry
+- Start the container
+- Make the calculator available at http://localhost:8080
+
+### 3. Embed in WordPress
+
+Add this code to a page in your WordPress site:
+
+```html
+<iframe 
+  src="http://localhost:8080" 
+  width="100%" 
+  height="800px" 
+  frameborder="0"
+  style="border:none;overflow:hidden"
+  title="Carbon Offset Calculator">
+</iframe>
+```
+
+Adjust the URL if you're hosting the Docker container on a different server.
+
+## docker-compose.yml File Contents
+
+```yaml
+version: '3.8'
+
+services:
+  puffin-calculator:
+    image: code.letsbe.solutions/matt/puffinoffsetcalculator:latest
+    container_name: puffin-calculator
+    ports:
+      - "8080:80"
+    restart: unless-stopped
+    environment:
+      - NODE_ENV=production
+      # Include any environment variables from .env file
+      - REACT_APP_API_KEY=${REACT_APP_API_KEY}
+      - REACT_APP_API_URL=${REACT_APP_API_URL}
+    volumes:
+      # Persist Nginx logs
+      - ./logs:/var/log/nginx
+```
+
+## .env File Example
+
+Create a `.env` file with any required environment variables:
+
+```
+REACT_APP_API_KEY=your_api_key_here
+REACT_APP_API_URL=https://api.example.com
+```
+
+## Gitea Registry Authentication
+
+If you get authentication errors when Docker tries to pull the image:
+
+```bash
+docker login code.letsbe.solutions
+# Enter your Gitea credentials when prompted
+```
+
+Then run `docker-compose up -d` again.
+
+## Troubleshooting
+
+- **Container not starting**: Check the logs with `docker-compose logs puffin-calculator`
+- **Calculator not showing in WordPress**: Ensure the server hosting Docker is accessible from your WordPress server
+- **CORS issues**: Your WordPress site must be able to load content from the calculator URL

docker-compose.yml

@@ -2,22 +2,16 @@ version: '3.8'
 
 services:
   puffin-calculator:
-    build: .
+    image: code.letsbe.solutions/matt/puffinoffsetcalculator:latest
     container_name: puffin-calculator
     ports:
       - "8080:80"
     restart: unless-stopped
     environment:
       - NODE_ENV=production
+      # Include any environment variables from .env file
+      - REACT_APP_API_KEY=${REACT_APP_API_KEY}
+      - REACT_APP_API_URL=${REACT_APP_API_URL}
     volumes:
-      # For development only - remove these in production
-      # - ./src:/app/src
-      # - ./public:/app/public
       # Persist Nginx logs
       - ./logs:/var/log/nginx
-    networks:
-      - puffin-network
-
-networks:
-  puffin-network:
-    driver: bridge

gitea-image-push.sh

@@ -0,0 +1,62 @@
+#!/bin/bash
+
+# Puffin Offset Calculator - Gitea Container Registry Push Script
+# This script builds and pushes the Docker image to the Gitea container registry
+
+echo "========================================"
+echo "Puffin Offset Calculator - Gitea Push"
+echo "========================================"
+
+# Check if Docker is installed
+if ! command -v docker &> /dev/null; then
+  echo "Error: Docker is not installed. Please install Docker first."
+  exit 1
+fi
+
+# Log in to Gitea registry
+echo "Logging into Gitea container registry..."
+echo "Please enter your Gitea credentials when prompted:"
+docker login code.letsbe.solutions
+
+if [ $? -ne 0 ]; then
+  echo "========================================"
+  echo "Error: Failed to log in to the Gitea registry."
+  echo "Please check your credentials and try again."
+  echo "========================================"
+  exit 1
+fi
+
+# Build the Docker image
+echo "Building Docker image..."
+docker build -t code.letsbe.solutions/matt/puffinoffsetcalculator:latest .
+
+if [ $? -ne 0 ]; then
+  echo "========================================"
+  echo "Error: Failed to build the Docker image."
+  echo "Please check the error messages above and try again."
+  echo "========================================"
+  exit 1
+fi
+
+# Push the image to Gitea registry
+echo "Pushing image to Gitea registry..."
+docker push code.letsbe.solutions/matt/puffinoffsetcalculator:latest
+
+if [ $? -eq 0 ]; then
+  echo "========================================"
+  echo "Success! Image pushed to Gitea registry."
+  echo ""
+  echo "The image is now available at: code.letsbe.solutions/matt/puffinoffsetcalculator:latest"
+  echo ""
+  echo "Next steps:"
+  echo "1. Copy setup.sh, docker-compose.yml, and nginx.conf to your server"
+  echo "2. Run the setup script on your server to deploy the container"
+  echo "3. Follow the WordPress integration steps in README.docker.md"
+  echo "========================================"
+else
+  echo "========================================"
+  echo "Error: Failed to push the image to Gitea registry."
+  echo "Please check the error messages above and try again."
+  echo "========================================"
+  exit 1
+fi

setup.sh

@@ -25,8 +25,20 @@ if ! command -v docker-compose &> /dev/null; then
   exit 1
 fi
 
-echo "Building and starting the Docker container..."
+echo "Logging into Gitea container registry..."
-docker-compose up -d --build
+echo "Please enter your Gitea credentials when prompted:"
+docker login code.letsbe.solutions
+
+if [ $? -ne 0 ]; then
+  echo "========================================"
+  echo "Error: Failed to log in to the Gitea registry."
+  echo "Please check your credentials and try again."
+  echo "========================================"
+  exit 1
+fi
+
+echo "Pulling and starting the Docker container..."
+docker-compose up -d
 
 if [ $? -eq 0 ]; then
   echo "========================================"