Pineapple Gallery

w Notatki tagi: it Zmodyfikowano:
Pineapple Gallery

To lekka aplikacja webowa, która pozwala łatwo zarządzać galeriami zdjęć i publikować je online – a wszystko to z wykorzystaniem infrastruktury Cloudflare Workers, D1 (baza danych), R2 (storage na pliki) i KV (cache).

Od dłuższego czasu nosiłem się z pomysłem stworzenia prostego narzędzia do publikowania zdjęć w internecie – bez konieczności konfiguracji serwera, bez ciężkich frameworków, z jak najmniejszym nakładem pracy i zasobów. Tak powstał mój projekt Pineapple Gallery.

💡 Pierwotne założenia

W momencie rozpoczęcia projektu mial on być wykorzystaywany jako dynamiczna podstrona na statycznej stronie. Niekiedy wykorzystuję do budowy stron Bootstrap Studio, które pozwala super szybko tworzyć proste strony jednak tworzenie tam galerii jest niezwykle uciążliwe. Wariantem pośrednim były tworzone generaory kodu, które pozwalały wygenerować fragment kodu z galerią jednak każda zmiana w galerii wygmagała ponownego zaglądania do kodu. W związku z powyższym w pierwotnym założeniu galeria musiała dać się łatwo zamontować na dowolnym adresie. Z czasem rozwoju projektu widzę potencjał na wykorzystanie galerii jako samodzielna strona. Przykład wdrożenia na stronie z Bootstrap Studio - Galeria zdjęć na stronie imprezowyfotograf

Tutaj możesz zobaczyć Demo samodzielnej aplikacji zainstalowanej z repozytorium z dodanymi kilkoma galeriami.

✨ Co potrafi Pineapple Gallery?

  • Przyjazny interfejs – prosta nawigacja i łatwe zarządzanie galeriami.
  • Panel administratora – dostęp chroniony hasłem, z możliwością tworzenia galerii, dodawania i usuwania zdjęć, oraz zatwierdzania publikacji.
  • Obsługa wielu języków – obecnie obsługiwany jest język polski i angielski ale żeby dodać kolejny wystarczy przetłumaczyć plik json. Detekcja języka odbywa się automatycznie na podstawie nagłówka w zapytaniu.
  • Wsparcie dla cache – cache przechowuje całą stronę której dotyczy zapytanie co znacząco przyspiesza wczytywanie strony która jest renderowana po stronie serwera. Cache jest realizowany z wykorzystaniem KV co daje pełną kontrolę nad czyszczemien cache w przypadku zmian.
  • Planowanie publikacji - możesz zaplanować opiblikowanie nowej galerii z dokłądnością do minuty bez rezygnowania z dobrodziejstw cache i bez ręcznego zerowania cache. Jest to możliwe dzięki własnemi zarządzaniu cache.
  • Galerie zabezpieczone hasłem - możesz zabezpieczyć swoje galerie hasłem bez żadnych kompromisów na szybkości działania.
  • Server-side rendering (SSR) – wszystkie podstrony są renderowane po stronie serwera, zarówno galerie widoczne dla użytkownika jak i panel administratora. Za interaktywność panelu administratora odpowiada HTMX.
  • Logowanie – do logowania wykorzystywane jest basic auth z Hono natomiast z powodzeniem można zastąpić tę metodę inną, na przykład zabezpieczyć aplikację przy pomocy cloudflare access co daje możliwość logowania wieloma metodami.

Dzięki Cloudflare możesz to wszystko uruchomić zupełnie za darmo i w jednym miejscu.

🧰 Technologie

Pineapple Gallery została zbudowana w oparciu o:

  • Hono – lekki framework webowy działający na Cloudflare Workers
  • HTMX – dynamiczne interakcje bez potrzeby pisania dużo JavaScriptu
  • Cloudflare D1 – baza danych SQLite w chmurze
  • Cloudflare R2 – przestrzeń na zdjęcia
  • Cloudflare KV – system cache

🚀 Jak zainstalować Pineapple Gallery?

Nie musisz być super ekspertem, żeby ją uruchomić – wystarczy kilka kroków:

Wymagania

  • Node.js i npm
  • Konto na Cloudflare
  • Zainstalowany Wrangler (CLI od Cloudflare):
  npm install -g @cloudflare/wrangler

Instalacja

  1. Sklonuj repozytorium:
   git clone https://github.com/Endriur24/PineappleGallery.git
   cd PineappleGallery
   npm install
  1. Utwórz zasoby na Cloudflare:
  • Baza danych (D1):
     wrangler d1 create "pineapplegallery-database"
  • Koszyk na zdjęcia (R2):
     wrangler r2 bucket create "pineapplegallery-bucket"
  • Cache (KV):
     wrangler kv namespace create CACHE_KV
  1. Uzupełnij plik wrangler.toml danymi z powyższych poleceń (nie zmieniaj nazw binding – powinny pozostać: DB, R2, CACHE_KV).
  2. Utwórz plik .dev.vars z danymi logowania do panelu admina w środowisku LOKALNYM:
   USERNAME=admin
   PASSWORD=twojehaslo

Uruchomienie lokalne

npm run dev

Uwaga: Transformacje obrazów mogą nie działać lokalnie – są zależne od aktywnej usługi Cloudflare.

Wdrożenie na Cloudflare

npm run deploy

Nie zapomnij dodać zmiennych (variables) w panelu administratora lub w inny godogny sposób

Możesz zdefiniować te zmienne w pliku konfiguracyjnym “wranglr” natomiast pamiętaj, żeby go nie upubliczniać. Jeśli nie jesteś pewien co robisz zrób to w panelu cloudflare w ustawieniach workera.

   USERNAME=admin
   PASSWORD=TwpjeSuperTajneHaslo

Następnie zaloguj się do swojego konta Cloudflare i włącz Image Transformations, aby przekształcanie zdjęć działało prawidłowo.

🔧 Panel administratora

Dostępne funkcje panelu admina:

  • /admin/ – przegląd wszystkich galerii
  • /admin/new-gallery – tworzenie nowej galerii
  • /admin/:galleryTableName – zarządzanie konkretną galerią

Możesz również:

  • przesyłać i usuwać zdjęcia
  • zatwierdzać zdjęcia do publikacji
  • usuwać całe galerie
  • czyścić ręcznie cache danej galerii

🔍 Co dalej?

Projekt cały czas się rozwija – w planach są m.in.:

  • naprawa kilku błędów
  • ulepszenie funkcjonalności seo galerii
  • rozwinięcie systemu zatwierdzania zdjęć przez inne osoby niż administrator
  • poprawa wyglądu panelu administratora

Jeśli chcesz dołożyć coś od siebie – zapraszam do współpracy!

👉 Repozytorium na GitHubie: Pineapple Gallery

📜 Licencja

Projekt jest dostępny na licencji MIT – możesz z niego korzystać, modyfikować go i wdrażać we własnych projektach.

Masz pytania lub sugestie? Zostaw issue na GitHubie albo napisz do mnie. Chętnie pomogę! 🙂

© 2024. Wszelkie prawa zastrzeżone.

Powered by Hydejack v9.2.1