Simrishamn – Projektdokumentation

Projektmål

Målet är att skapa en snabb och kontrollerad lösning för att visa samma landskap över tid, samtidigt som projektet fungerar som praktisk träning i:

Status just nu Fungerar

Projektet är nu i ett mycket bra och användbart läge. Hela kedjan från Google Drive till publik WordPress-visning fungerar.

Projektstruktur

/home/peter/docker/
├── portainer-caddy/
│   ├── Caddyfile
│   └── compose.yaml
└── simrishamn/
    ├── compose.yaml
    ├── .gitignore
    ├── README.md
    ├── app/
    │   ├── index.html
    │   ├── gallery.html
    │   ├── viewer.html
    │   ├── image.html
    │   ├── data/
    │   │   └── images.json
    │   └── docs/
    │       └── index.html
    ├── data/
    │   └── images/
    ├── nginx/
    │   └── default.conf
    └── scripts/
        ├── build_gallery.sh
        ├── build_images_json.sh
        └── update_all.sh

Vad vi gjort hittills

Huvudkomponenter

Visningsnamn

Bilderna visas inte med råa filnamn utan med ett mänskligt läsbart format, till exempel:

Simrishamn (Skansen) 2026-03-18 kl. 06:30

Detta skapas utifrån filnamnets datum- och tidsdelar.

Filtrering

Endast filer som matchar rätt kameramönster tas med i metadata och visning. Detta gör att andra filer i mappen ignoreras.

Simrishamn_YYYYMMDD_HHMMSS_Scheduled_Email_for_Simrishamn_*.jpg

Nuvarande konfiguration

Compose för webbcontainern

services:
  web:
    image: nginx:alpine
    container_name: simrishamn-web
    restart: unless-stopped
    ports:
      - "8081:80"
    volumes:
      - ./app:/usr/share/nginx/html:ro
      - ./data/images:/data/images:ro
      - ./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro
    networks:
      - frontend

networks:
  frontend:
    external: true
    name: portainer-caddy_frontend

Nginx-konfiguration

server {
    listen 80;
    server_name _;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ =404;
    }

    location /images/ {
        alias /data/images/;
        autoindex on;
    }
}

Caddy-route

simrishamn.r8n.net {
    reverse_proxy simrishamn-web:80
}

WordPress-integrationen

WordPress-sidan ligger på en annan server, men den nya lösningen bäddas in där via iframe från VPS:en. På så sätt ligger all tung bildlogik kvar på den snabbare och lokalt kontrollerade sidan.

WordPress-kod

<iframe
  src="https://simrishamn.r8n.net/viewer.html?embed=1"
  style="width:110%;max-width:1200px;height:73vh;border:0;display:block;margin:20px auto"
  loading="lazy">
</iframe>

Beteende i WordPress

Automation

Samlat uppdateringsscript

#!/bin/sh

PROJECT_ROOT="$(cd "$(dirname "$0")/.." && pwd)"
LOG_PREFIX="[simrishamn-update]"

echo "$LOG_PREFIX start $(date '+%Y-%m-%d %H:%M:%S')"

mkdir -p "$PROJECT_ROOT/data/images" || exit 1

echo "$LOG_PREFIX sync from Google Drive"
rclone copy "drive:Cam_Simrishamn" "$PROJECT_ROOT/data/images" || exit 1

echo "$LOG_PREFIX build images.json"
"$PROJECT_ROOT/scripts/build_images_json.sh" || exit 1

echo "$LOG_PREFIX build gallery.html"
"$PROJECT_ROOT/scripts/build_gallery.sh" || exit 1

echo "$LOG_PREFIX done $(date '+%Y-%m-%d %H:%M:%S')"

Cron

15 6 * * * /home/peter/docker/simrishamn/scripts/update_all.sh >> /home/peter/docker/simrishamn/update.log 2>&1

Detta gör att projektet automatiskt uppdateras dagligen med nya bilder, ny metadata och nytt galleri.

Varför lösningen ser ut så här

Viktiga kommandon

Starta om webbprojektet

cd ~/docker/simrishamn
docker compose down
docker compose up -d

Synka bilder manuellt

rclone copy "drive:Cam_Simrishamn" ~/docker/simrishamn/data/images

Bygg om metadata

cd ~/docker/simrishamn
./scripts/build_images_json.sh

Bygg om galleri

cd ~/docker/simrishamn
./scripts/build_gallery.sh

Kör hela uppdateringskedjan

cd ~/docker/simrishamn
./scripts/update_all.sh

Visa logg

tail -50 ~/docker/simrishamn/update.log

Nästa steg Senare

1. Initiera Git lokalt i projektmappen
2. Skapa GitHub-konto och lägga upp projektet
3. Dokumentera Git-flödet lika tydligt som resten
4. Överväga kalendernavigering i viewer-sidan
5. Bygga timelapse som nästa större fas

Anteckningar

- Bilder ska inte lagras i Git.
- WordPress använder viewer-sidan via iframe, men bildlogiken ligger kvar på VPS:en.
- image.html används för bättre helbildskänsla än vad en iframe-lightbox kan ge.
- images.json är en viktig grund för framtida funktioner, t.ex. kalender och datumhopp.
- Projektet är nu i ett bra stoppställe innan nästa fas med Git och GitHub.