@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/pl/intlayer_with_storybook.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
-title: Jak skonfigurować Intlayer z Storybook
-description: Dowiedz się, jak uczynić swój system projektowania wielojęzycznym, używając Intlayer z Storybook - kompiluj deklaracje treści, dodaj przełącznik języka i przeglądaj komponenty w dowolnym języku.
+updatedAt: 2026-05-31
+title: "Storybook i18n - Kompletny przewodnik po tłumaczeniu swojej aplikacji"
+description: "Koniec z i18next. Przewodnik 2026 do budowania wielojęzycznej (i18n) aplikacji Storybook. Tłumacz z agentami AI i optymalizuj rozmiar bundle, SEO i wydajność."
 keywords:
   - Internacjonalizacja
   - Dokumentacja
@@ -31,16 +31,37 @@ history:
 
 <TOC/>
 
-## Czym jest Intlayer?
+## Dlaczego Interlayer zamiast alternatyw?
 
-**Intlayer** to innowacyjna biblioteka internacjonalizacji (i18n) typu open-source, zaprojektowana w celu uproszczenia obsługi wielojęzyczności w nowoczesnych aplikacjach internetowych. Działa na **poziomie komponentów** - każdy komponent posiada własne deklaracje treści - co pozwala na przechowywanie tłumaczeń w tym samym miejscu, co kod, który ich używa.
+W porównaniu do głównych rozwiązań, takich jak „storybook-react-i18next” lub „i18next”, Intlayer jest rozwiązaniem wyposażonym w zintegrowane optymalizacje, takie jak:
 
-Dzięki Intlayer możesz:
+**Pełne pokrycie Storybook**
 
-- **Zarządzać tłumaczeniami deklaratywnie** za pomocą plików treści dla poszczególnych komponentów.
-- **Korzystać z pełnego wsparcia TypeScript** dzięki automatycznie generowanym typom i autouzupełnianiu w środowisku IDE.
-- **Przełączać języki w czasie rzeczywistym** bez konieczności przeładowywania strony.
-- **Automatycznie tłumaczyć treści** dzięki wbudowanym integracjom z dostawcami AI.
+Intlayer jest zoptymalizowany do doskonałej współpracy z Storybook, oferując **wielojęzyczne dekoratory historii**, **przełączanie ustawień regionalnych** i wszystkie funkcje potrzebne do skalowania internacjonalizacji (i18n) w całym systemie projektowym.
+
+**Rozmiar bundle'a**
+
+Zamiast ładować ogromne pliki JSON na swoje strony, ładuj tylko niezbędną treść. Intlayer pomaga **zmniejszyć rozmiary bundle'a i stron nawet o 50%**.
+
+**Łatwość konserwacji**
+
+Określanie zakresu zawartości aplikacji **ułatwia konserwację** aplikacji na dużą skalę. Możesz powielić lub usunąć pojedynczy folder funkcji bez obciążania psychicznego koniecznością przeglądania całej bazy kodu zawartości. Dodatkowo Inlayer jest **w pełni napisany**, aby zapewnić dokładność treści.
+
+**Agent AI**
+
+Wspólna lokalizacja treści **zmniejsza potrzebny kontekst** dzięki modelom dużego języka (LLM). Intlayer zawiera także zestaw narzędzi, taki jak **CLI** do sprawdzania brakujących tłumaczeń**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** i **[umiejętności agenta](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, aby praca programisty (DX) była jeszcze płynniejsza dla agentów AI.
+
+**Automatyzacja**
+
+Korzystaj z automatyzacji, aby tłumaczyć w swoim potoku CI/CD przy użyciu wybranego LLM na koszt dostawcy sztucznej inteligencji. Intlayer oferuje także **kompilator** do automatyzacji ekstrakcji treści, a także [platformę internetową] (https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), która pomaga **tłumaczyć w tle**.
+
+**Wydajność**
+
+Łączenie ogromnych plików JSON z komponentami może prowadzić do problemów z wydajnością i reaktywnością. Inlayer optymalizuje ładowanie treści w czasie kompilacji.
+
+**Skalowanie bez użycia dewelopera**
+
+Więcej niż tylko rozwiązanie i18n, Intlayer zapewnia **samodzielny [edytor wizualny](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** i **[pełny CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, który pomoże Ci zarządzać wielojęzyczną treścią w **w czasie rzeczywistym**, dzięki czemu współpraca z tłumaczami, copywriterami i innymi członkami zespołu będzie płynna. Treść może być przechowywana lokalnie i/lub zdalnie.
 
 ---
 
@@ -59,7 +80,9 @@ Storybook to standardowe narzędzie branżowe do tworzenia i dokumentowania komp
 <Tabs>
 <Tab value="Vite Setup">
 
-### Krok 1: Instalacja zależności
+<Steps>
+
+<Step number={1} title="Instalacja zależności">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +112,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### Krok 2: Tworzenie konfiguracji Intlayer
+</Step>
+
+<Step number={2} title="Tworzenie konfiguracji Intlayer">
 
 Utwórz plik `intlayer.config.ts` w katalogu głównym projektu (lub wewnątrz pakietu systemu projektowania):
 
@@ -118,7 +143,9 @@ export default config;
 
 ---
 
-### Krok 3: Dodawanie wtyczki Vite do Storybook
+</Step>
+
+<Step number={3} title="Dodawanie wtyczki Vite do Storybook">
 
 Hook `viteFinal` w Storybook pozwala na rozszerzenie wewnętrznej konfiguracji Vite. Zaimportuj i dodaj wtyczkę `intlayer()` w tym miejscu:
 
@@ -159,7 +186,9 @@ Wtyczka `intlayer()` monitoruje pliki `*.content.ts` i automatycznie przebudowuj
 
 ---
 
-### Krok 4: Dodawanie dekoratora `IntlayerProvider` i przełącznika języków
+</Step>
+
+<Step number={4} title="Dodawanie dekoratora `IntlayerProvider` i przełącznika języków">
 
 Plik `preview` w Storybook to odpowiednie miejsce, aby opakować każdą historię w `IntlayerProvider` i udostępnić przełącznik języków na pasku narzędzi:
 
@@ -216,7 +245,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### Krok 1: Instalacja zależności
+</Step>
+
+<Step number={1} title="Instalacja zależności">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +271,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### Krok 2: Tworzenie konfiguracji Intlayer
+</Step>
+
+<Step number={2} title="Tworzenie konfiguracji Intlayer">
 
 Utwórz plik `intlayer.config.ts` w katalogu głównym projektu:
 
@@ -262,7 +295,9 @@ export default config;
 
 ---
 
-### Krok 3: Konfiguracja Webpack dla Storybook
+</Step>
+
+<Step number={3} title="Konfiguracja Webpack dla Storybook">
 
 W przypadku konfiguracji Storybook opartych na Webpack (np. `@storybook/react-webpack5`), rozszerz konfigurację za pomocą `webpackFinal`, aby dodać aliasy i loader Intlayer:
 
@@ -289,7 +324,9 @@ export default config;
 
 ---
 
-### Krok 4: Dodawanie dekoratora `IntlayerProvider` i przełącznika języków
+</Step>
+
+<Step number={4} title="Dodawanie dekoratora `IntlayerProvider` i przełącznika języków">
 
 Podobnie jak w przypadku konfiguracji Vite - dodaj dekorator i globalny typ języka w `.storybook/preview.tsx`:
 
@@ -335,6 +372,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Deklarowanie treści
 
 Utwórz plik `*.content.ts` obok każdego komponentu. Intlayer automatycznie wykryje go podczas kompilacji.

package/docs/pl/intlayer_with_svelte_kit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-05-06
-title: SvelteKit i18n - Jak przetłumaczyć aplikację SvelteKit w 2026
-description: Dowiedz się, jak uczynić swoją stronę SvelteKit wielojęzyczną. Postępuj zgodnie z dokumentacją, aby zinternacjonalizować (i18n) i przetłumaczyć ją za pomocą Server-Side Rendering (SSR).
+updatedAt: 2026-05-31
+title: "SvelteKit i18n - Kompletny przewodnik po tłumaczeniu swojej aplikacji"
+description: "Koniec z i18next. Przewodnik 2026 do budowania wielojęzycznej (i18n) aplikacji SvelteKit. Tłumacz z agentami AI i optymalizuj rozmiar bundle, SEO i wydajność."
 keywords:
   - Internacjonalizacja
   - Dokumentacja
@@ -59,16 +59,37 @@ history:
 
 <TOC/>
 
-## Czym jest Intlayer?
+## Dlaczego Interlayer zamiast alternatyw?
 
-**Intlayer** to innowacyjna, open-source'owa biblioteka do internacjonalizacji (i18n), zaprojektowana, aby uprościć wsparcie wielojęzyczne w nowoczesnych aplikacjach webowych. Działa bezproblemowo z możliwościami Server-Side Rendering (SSR) w **SvelteKit**.
+W porównaniu do głównych rozwiązań, takich jak `svelte-i18n` czy `i18next`, Intlayer jest rozwiązaniem wyposażonym w zintegrowane optymalizacje, takie jak:
 
-Dzięki Intlayer możesz:
+**Pełne pokrycie SvelteKit**
 
-- **Łatwo zarządzać tłumaczeniami** za pomocą deklaratywnych słowników na poziomie komponentów.
-- **Dynamicznie lokalizować metadane**, ścieżki i zawartość.
-- **Zapewnić wsparcie TypeScript** dzięki automatycznie generowanym typom.
-- **Wykorzystać SSR SvelteKit** dla SEO-przyjaznej internacjonalizacji.
+Intlayer jest zoptymalizowany do doskonałej współpracy z SvelteKit, oferując **routing wielojęzyczny**, **obsługę SSR** i wszystkie funkcje potrzebne do skalowania internacjonalizacji (i18n).
+
+**Rozmiar bundle'a**
+
+Zamiast ładować ogromne pliki JSON na swoje strony, ładuj tylko niezbędną treść. Intlayer pomaga **zmniejszyć rozmiary bundle'a i stron nawet o 50%**.
+
+**Łatwość konserwacji**
+
+Określanie zakresu zawartości aplikacji **ułatwia konserwację** aplikacji na dużą skalę. Możesz powielić lub usunąć pojedynczy folder funkcji bez obciążania psychicznego koniecznością przeglądania całej bazy kodu zawartości. Dodatkowo Inlayer jest **w pełni napisany**, aby zapewnić dokładność treści.
+
+**Agent AI**
+
+Wspólna lokalizacja treści **zmniejsza potrzebny kontekst** dzięki modelom dużego języka (LLM). Intlayer zawiera także zestaw narzędzi, taki jak **CLI** do sprawdzania brakujących tłumaczeń**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**, **[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** i **[umiejętności agenta](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, aby praca programisty (DX) była jeszcze płynniejsza dla agentów AI.
+
+**Automatyzacja**
+
+Korzystaj z automatyzacji, aby tłumaczyć w swoim potoku CI/CD przy użyciu wybranego LLM na koszt dostawcy sztucznej inteligencji. Intlayer oferuje także **kompilator** do automatyzacji ekstrakcji treści, a także [platformę internetową] (https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md), która pomaga **tłumaczyć w tle**.
+
+**Wydajność**
+
+Łączenie ogromnych plików JSON z komponentami może prowadzić do problemów z wydajnością i reaktywnością. Inlayer optymalizuje ładowanie treści w czasie kompilacji.
+
+**Skalowanie bez użycia dewelopera**
+
+Więcej niż tylko rozwiązanie i18n, Intlayer zapewnia **samodzielny [edytor wizualny](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** i **[pełny CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)**, który pomoże Ci zarządzać wielojęzyczną treścią w **w czasie rzeczywistym**, dzięki czemu współpraca z tłumaczami, copywriterami i innymi członkami zespołu będzie płynna. Treść może być przechowywana lokalnie i/lub zdalnie.
 
 ---
 
@@ -116,7 +137,9 @@ Aby rozpocząć, utwórz nowy projekt SvelteKit. Oto końcowa struktura, którą
 └── vite.config.ts
 ```
 
-### Krok 1: Instalacja zależności
+<Steps>
+
+<Step number={1} title="Instalacja zależności">
 
 Zainstaluj niezbędne pakiety za pomocą npm:
 
@@ -148,7 +171,9 @@ bun x intlayer init
 - **svelte-intlayer**: Zapewnia dostawców kontekstu i sklepy dla Svelte/SvelteKit.
 - **vite-intlayer**: Wtyczka Vite do integracji deklaracji treści z procesem budowania.
 
-### Krok 2: Konfiguracja projektu
+</Step>
+
+<Step number={2} title="Konfiguracja projektu">
 
 Utwórz plik konfiguracyjny w katalogu głównym projektu:
 
@@ -165,7 +190,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Krok 3: Integracja Intlayer w konfiguracji Vite
+</Step>
+
+<Step number={3} title="Integracja Intlayer w konfiguracji Vite">
 
 Zaktualizuj swój plik `vite.config.ts`, aby uwzględnić wtyczkę Intlayer. Ta wtyczka obsługuje transpileację Twoich plików z treścią.
 
@@ -179,7 +206,9 @@ export default defineConfig({
 });
 ```
 
-### Krok 4: Zadeklaruj swoją treść
+</Step>
+
+<Step number={4} title="Zadeklaruj swoją treść">
 
 Utwórz pliki deklaracji treści w dowolnym miejscu w folderze `src` (np. `src/lib/content` lub obok swoich komponentów). Pliki te definiują tłumaczoną treść dla Twojej aplikacji, używając funkcji `t()` dla każdego języka.
 
@@ -200,15 +229,19 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Krok 5: Wykorzystaj Intlayer w swoich komponentach
+</Step>
 
-### Krok 5: Wykorzystaj Intlayer w swoich komponentach
+<Step number={5} title="Wykorzystaj Intlayer w swoich komponentach">
+
+</Step>
+
+<Step number={5} title="Wykorzystaj Intlayer w swoich komponentach">
 
 Teraz możesz użyć funkcji `useIntlayer` w dowolnym komponencie Svelte. Zwraca ona reaktywny store, który automatycznie aktualizuje się, gdy zmienia się lokalizacja. Funkcja automatycznie uwzględnia aktualną lokalizację (zarówno podczas SSR, jak i nawigacji po stronie klienta).
 
 > **Uwaga:** `useIntlayer` zwraca store Svelte, więc musisz użyć prefiksu `---
 > createdAt: 2025-11-20
-> updatedAt: 2026-05-06
+> updatedAt: 2026-05-31
 > title: Jak przetłumaczyć swoją aplikację SvelteKit – przewodnik i18n 2026
 > description: Dowiedz się, jak uczynić swoją stronę SvelteKit wielojęzyczną. Postępuj zgodnie z dokumentacją, aby zinternacjonalizować (i18n) i przetłumaczyć ją za pomocą Server-Side Rendering (SSR).
 > keywords:
@@ -233,6 +266,10 @@ Teraz możesz użyć funkcji `useIntlayer` w dowolnym komponencie Svelte. Zwraca
 
 # Przetłumacz swoją stronę SvelteKit za pomocą Intlayer | Internacjonalizacja (i18n)
 
+</Step>
+
+</Steps>
+
 ## Spis treści
 
 <TOC/>
@@ -294,7 +331,9 @@ Aby rozpocząć, utwórz nowy projekt SvelteKit. Oto końcowa struktura, którą
 └── vite.config.ts
 ```
 
-### Krok 1: Instalacja zależności
+<Steps>
+
+<Step number={1} title="Instalacja zależności">
 
 Zainstaluj niezbędne pakiety za pomocą npm:
 
@@ -326,7 +365,9 @@ bun x intlayer init
 - **svelte-intlayer**: Zapewnia dostawców kontekstu i sklepy dla Svelte/SvelteKit.
 - **vite-intlayer**: Wtyczka Vite do integracji deklaracji treści z procesem budowania.
 
-### Krok 2: Konfiguracja projektu
+</Step>
+
+<Step number={2} title="Konfiguracja projektu">
 
 Utwórz plik konfiguracyjny w katalogu głównym projektu:
 
@@ -343,7 +384,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Krok 3: Integracja Intlayer w konfiguracji Vite
+</Step>
+
+<Step number={3} title="Integracja Intlayer w konfiguracji Vite">
 
 Zaktualizuj swój plik `vite.config.ts`, aby uwzględnić wtyczkę Intlayer. Ta wtyczka obsługuje transpileację Twoich plików z treścią.
 
@@ -357,7 +400,9 @@ export default defineConfig({
 });
 ```
 
-### Krok 4: Zadeklaruj swoją treść
+</Step>
+
+<Step number={4} title="Zadeklaruj swoją treść">
 
 Utwórz pliki deklaracji treści w dowolnym miejscu w folderze `src` (np. `src/lib/content` lub obok swoich komponentów). Pliki te definiują tłumaczoną treść dla Twojej aplikacji, używając funkcji `t()` dla każdego języka.
 
@@ -378,7 +423,9 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Krok 5: Wykorzystaj Intlayer w swoich komponentach
+</Step>
+
+<Step number={5} title="Wykorzystaj Intlayer w swoich komponentach">
 
 , aby uzyskać dostęp do jego reaktywnej wartości (np. `$content.title`).
 
@@ -400,7 +447,9 @@ export default heroContent;
 <div aria-label={String($content.title)}></div>
 ```
 
-### (Opcjonalny) Krok 6: Skonfiguruj routing
+</Step>
+
+<Step number={6} title="Skonfiguruj routing" isOptional={true}>
 
 Poniższe kroki pokazują, jak skonfigurować routing oparty na lokalizacji w SvelteKit. Pozwala to na dodanie prefiksu lokalizacji do adresów URL (np. `/en/about`, `/fr/about`) dla lepszego SEO i doświadczenia użytkownika.
 
@@ -425,7 +474,9 @@ Poniższe kroki pokazują, jak skonfigurować routing oparty na lokalizacji w Sv
         └── +layout.svelte         # Główny layout dla fontów i stylów globalnych
 ```
 
-### Krok 7: Obsługa wykrywania lokalizacji po stronie serwera (Hooks)
+</Step>
+
+<Step number={7} title="Obsługa wykrywania lokalizacji po stronie serwera">
 
 W SvelteKit serwer musi znać lokalizację użytkownika, aby wyrenderować odpowiednią zawartość podczas SSR. Używamy `hooks.server.ts` do wykrywania lokalizacji z URL lub ciasteczek.
 
@@ -637,7 +688,9 @@ export const prerender = true;
 </style>
 ```
 
-### (Opcjonalny) Krok 8: Linki z internacjonalizacją
+</Step>
+
+<Step number={8} title="Linki z internacjonalizacją" isOptional={true}>
 
 Dla SEO zaleca się poprzedzanie swoich ścieżek lokalizacją (np. `/en/about`, `/fr/about`). Ten komponent automatycznie dodaje prefiks lokalizacji do każdego linku.
 
@@ -670,7 +723,9 @@ const localizedPath = getLocalizedUrl("/about", $locale);
 goto(localizedPath); // Nawiguje do /en/about lub /fr/about w zależności od lokalizacji
 ```
 
-### (Opcjonalny) Krok 9: Przełącznik języka
+</Step>
+
+<Step number={9} title="Przełącznik języka" isOptional={true}>
 
 Aby umożliwić użytkownikom zmianę języka, zaktualizuj URL.
 
@@ -711,7 +766,9 @@ Aby umożliwić użytkownikom zmianę języka, zaktualizuj URL.
 </style>
 ```
 
-### (Opcjonalny) Krok 10: Dodaj backend proxy
+</Step>
+
+<Step number={10} title="Dodaj backend proxy" isOptional={true}>
 
 Aby dodać backend proxy do swojej aplikacji SvelteKit, możesz użyć funkcji `intlayerProxy` dostarczonej przez wtyczkę `vite-intlayer`. Ta wtyczka automatycznie wykryje najlepszy locale dla użytkownika na podstawie URL, ciasteczek i preferencji językowych przeglądarki.
 
@@ -730,7 +787,9 @@ export default defineConfig({
 });
 ```
 
-### (Opcjonalny) Krok 11: Konfiguracja edytora intlayer / CMS
+</Step>
+
+<Step number={11} title="Konfiguracja edytora intlayer / CMS" isOptional={true}>
 
 Aby skonfigurować edytor intlayer, należy postępować zgodnie z [dokumentacją edytora intlayer](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md).
 
@@ -755,18 +814,9 @@ Aby móc wizualizować selektor edytora intlayer, musisz użyć składni kompone
 </div>
 ```
 
-### Konfiguracja Git
-
-Zaleca się ignorowanie plików generowanych przez Intlayer.
-
-```plaintext fileName=".gitignore"
-# Ignoruj pliki generowane przez Intlayer
-.intlayer
-```
-
----
+</Step>
 
-### (Opcjonalnie) Krok 12 : Wyodrębnij zawartość swoich komponentów
+<Step number={12} title="Wyodrębnij zawartość swoich komponentów" isOptional={true}>
 
 Jeśli masz istniejącą bazę kodu, transformacja tysięcy plików może być czasochłonna.
 
@@ -861,6 +911,20 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
+
+### Konfiguracja Git
+
+Zaleca się ignorowanie plików generowanych przez Intlayer.
+
+```plaintext fileName=".gitignore"
+# Ignoruj pliki generowane przez Intlayer
+.intlayer
+```
+
+---
 
 ### Idź dalej