autoloejekPage

Autolejek

Wielojęzyczna strona statyczna publikowana przez GitHub Pages. Gotowe pliki HTML są generowane podczas wdrożenia — przeglądarka nie pobiera słowników i nie tłumaczy strony za pomocą JavaScriptu.

Struktura

src/pages/                 szablony HTML i struktura stron
src/locales/pl/            polskie treści podzielone tematycznie
src/locales/en/            angielskie treści podzielone tematycznie
public/                    CSS, JavaScript, obrazy, CNAME i .nojekyll
scripts/build.mjs          generator stron językowych
scripts/check.mjs          kontrola linków, zasobów i metadanych
site.config.json           języki, strony i adres domeny
.github/workflows/pages.yml publikacja GitHub Pages

Nie edytuj katalogu _site/. Jest generowany automatycznie i ignorowany przez Git.

Edycja treści

Długie teksty znajdują się w plikach JSON podzielonych według języka i tematu, na przykład:

src/locales/pl/meters.json
src/locales/en/meters.json
src/locales/pl/valves.json
src/locales/en/valves.json

Szablony w src/pages/ określają układ strony. Atrybut data-i18n="nazwaKlucza" wskazuje tekst pobierany ze słownika. Wszystkie języki muszą zawierać identyczny zestaw kluczy; generator sprawdza to automatycznie.

Budowanie lokalne

Wymagany jest Node.js 18 lub nowszy.

npm ci
npm run check
python3 -m http.server 8080 -d _site

Strona będzie dostępna pod http://localhost:8080/.

Dodawanie języka

  1. Skopiuj jeden z katalogów w src/locales/, np. pl do de.
  2. Przetłumacz wartości, nie zmieniając nazw kluczy.
  3. Dodaj kod języka do tablicy languages w site.config.json.
  4. Uruchom npm run check.

Generator utworzy osobny zestaw stron, np. /de/, doda język do przełącznika oraz wygeneruje metadane hreflang i mapę witryny.

GitHub Pages

Push do gałęzi main uruchamia workflow .github/workflows/pages.yml. Workflow buduje katalog _site, sprawdza stronę i publikuje artefakt przez oficjalne GitHub Pages Actions.

W ustawieniach repozytorium wybierz jednorazowo:

Settings → Pages → Build and deployment → Source: GitHub Actions

Domenę niestandardową trzeba ustawić w Settings → Pages → Custom domain oraz skierować jej DNS na GitHub Pages. Przy publikacji przez GitHub Actions sam plik public/CNAME nie konfiguruje domeny. Po poprawnej konfiguracji DNS włącz Enforce HTTPS. Instrukcja GitHub: https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/managing-a-custom-domain-for-your-github-pages-site

Nazwy ilustracji

Pliki obrazów mają opisowe angielskie nazwy zapisane małymi literami, z wyrazami oddzielonymi myślnikami. Nazwa opisuje zawartość, np. flow-meter-u-bend-correct.png lub minimum-flow-limit.png. Wersje językowe pozostają w katalogach pl i en; nazwy zdjęć z Pexels zachowują autora i identyfikator źródła.

Import instrukcji (npm run manual:sync) używa mapowania scripts/manual-image-names.json, aby zachować te nazwy również przy ponownym kopiowaniu obrazów z repozytorium Neptun. Dodając ilustrację do instrukcji, uzupełnij mapowanie nazwy źródłowej na nazwę używaną na stronie.

Zdjęcia i opisy realizacji

Strona Projekty pobiera treści z content/investments/ podczas budowania. Każda realizacja ma własny katalog z data.json, okładką i opcjonalną galerią. Instrukcja dodawania realizacji oraz tłumaczeń: content/README.md. Wpis testowy pozostaje szkicem (draft: true). Widoczne są rzeczywiste realizacje. Synchronizacja z Dyskiem Google jest dostępna po jednorazowej konfiguracji.