Strona główna klasztoru Sióstr Klarysek z ujęciem klasztoru z drona w przeglądarce i na telefonie

Strona Internetowa

Strona Klasztoru Sióstr Klarysek w Starym Sączu

Nowa strona klasztoru założonego przez świętą Kingę w 1280 roku: klasyczna typografia, liturgia dnia aktualizowana automatycznie, wersje po polsku, angielsku i węgiersku oraz WCAG 2.2 AA. Statyczna strona, którą siostry edytują w CMS.

12.10.2026

Klasztor Sióstr Klarysek w Starym Sączu założyła święta Kinga w 1280 roku. To jedno z najstarszych miejsc tego typu w Polsce, a jego strona internetowa przez lata wyglądała jak każdy inny szablon WordPressa.

Nowa strona pod adresem klaryski.starysacz.org.pl miała oddać charakter miejsca, a przy tym być dostępna, wielojęzyczna i prosta w utrzymaniu dla sióstr.

Wygląd, który pasuje do miejsca

Tematyka sama prosiła o coś innego niż sztywna siatka kafelków. Postawiłem na klasyczną typografię EB Garamond, ciepłą paletę w odcieniach pergaminu i brązu oraz asymetryczne układy, w których tekst i zdjęcia nachodzą na siebie.

Stronę otwiera film z drona nad klasztorem, z przyciskiem pauzy. Podstrony mają czarno-białe kadry dziedzińca i wieży, a w stopce jest rysunek klasztoru. Wszystkie zdjęcia pochodzą z nalotu nad klasztorem, a nie z banku zdjęć.

Liturgia dnia, która aktualizuje się sama

Siostry chciały, żeby na stronie codziennie były aktualne czytania. Wklejanie ich ręcznie co rano nie wchodziło w grę, a zewnętrzny widżet w ramce nie pasowałby do wyglądu strony.

Dlatego zbudowałem własny import:

skrypt codziennie pobiera czytania i zapisuje je w Directusie jako zwykłe treści,
własny moduł liczy kalendarz liturgiczny Kościoła w Polsce: okres, tydzień, rok i kolor szat,
strona dostaje czytania, psalm z refrenem i Ewangelię w tej samej typografii co reszta,
każdy dzień zostaje w archiwum, więc można wrócić do czytań z poprzednich dni.

Kafel Liturgia dnia na stronie głównej z dużą datą obok podstrony z czytaniami, kolorem szat i okresem liturgicznym — Liturgia dnia na stronie głównej i na osobnej podstronie

Treści ze starej strony, ale w lepszej formie

Strona ma sporo treści historycznych: życie świętej Kingi, dzieje kultu, legendy, pisma świętej Klary i świętego Franciszka, przewodnik po kościele. Przeniosłem je ze starego portalu do CMS i od razu uporządkowałem.

Kalendarium życia świętej Kingi i kalendarium klasztoru są teraz osią czasu, a nie długą listą dat w akapicie. Parser rozumie daty dzienne, przybliżone („ok. 1247”) i zakresy lat, także w wersjach obcojęzycznych.

Kalendarium życia świętej Kingi jako oś czasu z datami od 1226 roku — Kalendarium życia świętej Kingi jako oś czasu

Po polsku, angielsku i węgiersku

Święta Kinga była córką króla Węgier, a klasztor regularnie odwiedzają pielgrzymi z Węgier. Dlatego oprócz angielskiego strona ma pełną wersję węgierską.

wspólne trasy dla wszystkich języków, więc nie ma trzech osobnych drzew stron do utrzymania,
słownik interfejsu PL, EN i HU, łącznie z datami w kalendarium,
przełącznik języka w nagłówku i poprawne atrybuty lang i hreflang dla wyszukiwarek.

Strona główna w wersji polskiej, węgierskiej i angielskiej na telefonie — Wersja polska, węgierska i angielska

Dostępność bez nakładek

Strona spełnia WCAG 2.2 AA w samym kodzie: semantyczny HTML, poprawna kolejność nagłówków, widoczny fokus, kontrast i opisy zdjęć. Panel ułatwień to dodatek dla tych, którzy chcą coś dostosować, a nie łatka na problemy.

W panelu można:

powiększyć tekst,
włączyć wysoki kontrast i podkreślenie linków,
przełączyć się na prostszą, czytelną czcionkę zamiast Garamonda,
zwiększyć odstępy między wierszami,
zatrzymać animacje i film w tle,
włączyć czytanie strony na głos.

Panel ułatwień dostępu: wielkość tekstu, wysoki kontrast, podkreślanie linków, czytelna czcionka, większe odstępy, zatrzymanie animacji i czytanie na głos — Panel ułatwień dostępu

Praktyczne rzeczy dla odwiedzających

transmisja Mszy i nabożeństw z kanału YouTube klasztoru, bez ręcznego podmieniania linków,
porządek nabożeństw i intencje mszalne edytowane przez siostry w CMS,
mapa dojazdu na Leaflet i OpenStreetMap z parkingami i atrakcjami w okolicy,
wyszukiwarka pełnotekstowa działająca bez serwera,
aplet darowizn i numer konta w stopce.

Skróty do najważniejszych podstron pisane dużą szeryfową czcionką nad mapą dojazdu z pinezkami klasztoru, parkingów i atrakcji — Skróty do najważniejszych treści i mapa dojazdu

Statyczna strona z CMS w tle

Strona jest generowana statycznie. Odwiedzający dostaje gotowe pliki HTML z serwera nginx, bez bazy danych i bez kodu po stronie serwera. To najszybsza i najbezpieczniejsza forma strony, jaką można postawić.

Siostry edytują treści w Directusie. Zapis w CMS wysyła webhook, a osobny kontener przebudowuje stronę w tle do nowego katalogu. Dopiero gotowy build zastępuje stary, więc strona nie znika ani na sekundę.

Wyszukiwarkę zapewnia Pagefind, który buduje indeks razem ze stroną. Stare adresy z WordPressa przekierowują na nowe, a mapa strony i robots.txt generują się same.

Przy stronie klasztoru, który ma ponad 700 lat, najłatwiej zrobić coś modnego. Trudniej zrobić coś, co za kilka lat nadal będzie pasowało do tego miejsca.
- Aleksander Kowal

Szkielet dla kolejnych projektów

Od początku traktowałem ten projekt także jako szkielet pod inne strony: konfiguracja Directusa ze schematem w repozytorium, Makefile do lokalnej pracy, CI na OneDev i wdrożenie pull-based po tagu wersji. Kolejne strony instytucji startują już z tej bazy.

Stack

Astro w trybie statycznym, TailwindCSS i DaisyUI z własnym motywem,
Directus jako CMS, z kontenerem budującym stronę po webhooku,
Pagefind do wyszukiwania, Leaflet.js do map,
nginx serwuje gotowe pliki,
Docker, OneDev CI, wdrożenie po tagach v*.