@intlayer/docs 8.11.1 → 8.11.3

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 SvelteKit
+description: Najlepsze rozwiązanie dla rozmiaru bundle, SEO, wydajności & utrzymania. Uczyń swój SvelteKit stronę internetową wielojęzycznym w 2026, tłumaczenie LLM, Agent Skills & MCP.
 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>
+
+<Step number={5} title="Wykorzystaj Intlayer w swoich komponentach">
 
-### Krok 5: 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).
 
@@ -766,7 +825,9 @@ Zaleca się ignorowanie plików generowanych przez Intlayer.
 
 ---
 
-### (Opcjonalnie) Krok 12 : Wyodrębnij zawartość swoich komponentów
+</Step>
+
+<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.
 
@@ -866,3 +927,7 @@ bun run build # Or bun run dev
 
 - **Edytor wizualny**: Zintegruj [Intlayer Visual Editor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md), aby edytować tłumaczenia bezpośrednio z interfejsu użytkownika.
 - **CMS**: Zewnętrz zarządzanie treścią, korzystając z [Intlayer CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_CMS.md).
+
+</Step>
+
+</Steps>

package/docs/pl/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: i18n Tanstack Start - Jak przetłumaczyć aplikację Tanstack Start używając Solid.js w 2026 roku
-description: Dowiedz się, jak dodać internacjonalizację (i18n) do swojej aplikacji Tanstack Start, korzystając z Intlayer i Solid.js. Postępuj zgodnie z tym kompleksowym przewodnikiem, aby stworzyć wielojęzyczną aplikację z routingiem uwzględniającym lokalizację (locale).
+updatedAt: 2026-05-31
+title: i18n Tanstack Start - Kompletny przewodnik po tłumaczeniu TanStack Start
+description: Najlepsze rozwiązanie dla rozmiaru bundle, SEO, wydajności & utrzymania. Uczyń swój TanStack Start and Solid aplikację wielojęzycznym w 2026, tłumaczenie LLM, Agent Skills & MCP.
 keywords:
   - Internacjonalizacja
   - Dokumentacja
@@ -37,17 +37,37 @@ history:
 
 Ten przewodnik pokazuje, jak zintegrować **Intlayer** w celu zapewnienia bezproblemowej internacjonalizacji w projektach Tanstack Start z Solid.js, z routingiem uwzględniającym lokalizację, wsparciem TypeScript oraz nowoczesnymi praktykami programistycznymi.
 
-## Czym jest Intlayer?
+## Dlaczego Interlayer zamiast alternatyw?
 
-**Intlayer** to innowacyjna biblioteka internacjonalizacji (i18n) o otwartym kodzie źródłowym, zaprojektowana w celu uproszczenia obsługi wielu języków w nowoczesnych aplikacjach internetowych.
+W porównaniu do głównych rozwiązań, takich jak „react-i18next” lub „i18next”, Intlayer jest rozwiązaniem wyposażonym w zintegrowane optymalizacje, takie jak:
 
-Dzięki Intlayer możesz:
+**Pełne pokrycie TanStack Start**
 
-- **Łatwo zarządzać tłumaczeniami** za pomocą deklaratywnych słowników na poziomie komponentów.
-- **Dynamicznie lokalizować metadane, trasy (routes) i treść**.
-- **Zapewnić wsparcie TypeScript** dzięki automatycznie generowanym typom, co poprawia autouzupełnianie i wykrywanie błędów.
-- **Korzystać z zaawansowanych funkcji**, takich jak dynamiczne wykrywanie i przełączanie języka.
-- **Włączyć routing uwzględniający język** dzięki systemowi routingu Tanstack Start opartemu na plikach.
+Intlayer jest zoptymalizowany do doskonałej współpracy z TanStack Start i Solid, oferując **routing wielojęzyczny**, **mapę witryny** 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.
 
 ---
 
@@ -85,11 +105,15 @@ Dzięki Intlayer możesz:
 
 Zobacz [Szablon Aplikacji](https://github.com/aymericzip/intlayer-tanstack-start-solid-template) na GitHubie.
 
-### Krok 1: Utworzenie projektu
+<Steps>
+
+<Step number={1} title="Utworzenie projektu">
 
 Najpierw utwórz nowy projekt TanStack Start, postępując zgodnie z przewodnikiem [Rozpoczęcie nowego projektu](https://tanstack.com/start/latest/docs/framework/solid/quick-start) na stronie TanStack Start.
 
-### Krok 2: Instalacja pakietów Intlayer
+</Step>
+
+<Step number={2} title="Instalacja pakietów Intlayer">
 
 Zainstaluj niezbędne pakiety za pomocą preferowanego menedżera pakietów:
 
@@ -127,7 +151,9 @@ bun x intlayer init
 - **vite-intlayer**
   Zawiera wtyczkę Vite do integracji Intlayer z [bundlerem Vite](https://vite.dev/guide/why.html#why-bundle-for-production), a także middleware do wykrywania preferowanego języka użytkownika, zarządzania ciasteczkami (cookies) i obsługi przekierowań adresów URL.
 
-### Krok 3: Konfiguracja Twojego projektu
+</Step>
+
+<Step number={3} title="Konfiguracja Twojego projektu">
 
 Utwórz plik konfiguracyjny, aby ustawić języki Twojej aplikacji:
 
@@ -148,7 +174,9 @@ export default config;
 
 > Za pomocą tego pliku konfiguracyjnego możesz skonfigurować zlokalizowane adresy URL, przekierowania middleware, nazwy ciasteczek, lokalizację i rozszerzenie deklaracji treści, wyłączyć logi Intlayer w konsoli i wiele więcej. Pełną listę dostępnych parametrów znajdziesz w [dokumentacji konfiguracji](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/configuration.md).
 
-### Krok 4: Integracja Intlayer w konfiguracji Vite
+</Step>
+
+<Step number={4} title="Integracja Intlayer w konfiguracji Vite">
 
 Dodaj wtyczkę intlayer do swojej konfiguracji:
 
@@ -176,7 +204,9 @@ export default defineConfig({
 
 > Wtyczka `intlayer()` Vite jest używana do integracji Intlayer z Vite. Zapewnia ona budowanie plików deklaracji treści i monitoruje je w trybie deweloperskim. Definiuje ona zmienne środowiskowe Intlayer wewnątrz aplikacji Vite. Dodatkowo zapewnia aliasy w celu zmniejszenia narzutu wydajnościowego.
 
-### Krok 5: Utworzenie Root Layoutu
+</Step>
+
+<Step number={5} title="Utworzenie Root Layoutu">
 
 Skonfiguruj swój layout główny (root layout), aby obsługiwał internacjonalizację, używając `useParams` do wykrywania bieżącego języka i ustawiając atrybuty `lang` oraz `dir` w tagu `html`.
 
@@ -217,7 +247,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### Krok 6: Utworzenie Layoutu Językowego (opcjonalnie)
+</Step>
+
+<Step number={6} title="Utworzenie Layoutu Językowego">
 
 Utwórz layout, który obsługuje prefiks językowy i wykonuje walidację. Ten layout zapewni, że przetwarzane będą tylko prawidłowe języki.
 
@@ -252,7 +284,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > Dla trybu `'prefix-all'` możesz preferować zamianę slotu na `$locale`.
 > Dla trybu `'no-prefix'` lub `'search-params'` możesz całkowicie usunąć ten slot.
 
-### Krok 7: Zadeklaruj swoją treść
+</Step>
+
+<Step number={7} title="Zadeklaruj swoją treść">
 
 Twórz i zarządzaj swoimi deklaracjami treści, aby przechowywać tłumaczenia:
 
@@ -298,7 +332,9 @@ export default appContent;
 
 > Więcej szczegółów znajdziesz w [dokumentacji deklaracji treści](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/content_file.md).
 
-### Krok 8: Wykorzystaj komponenty i hooki uwzględniające lokalizację
+</Step>
+
+<Step number={8} title="Wykorzystaj komponenty i hooki uwzględniające lokalizację">
 
 Utwórz komponent `LocalizedLink` do nawigacji uwzględniającej język:
 
@@ -377,7 +413,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Krok 9: Użyj Intlayer na swoich stronach
+</Step>
+
+<Step number={9} title="Użyj Intlayer na swoich stronach">
 
 Zyskaj dostęp do słowników treści w całej aplikacji:
 
@@ -420,7 +458,9 @@ function RouteComponent() {
 >
 > Aby dowiedzieć się więcej o hooku `useIntlayer`, zapoznaj się z [dokumentacją](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/packages/solid-intlayer/useIntlayer.md).
 
-### Krok 10: Utworzenie komponentu Locale Switcher
+</Step>
+
+<Step number={10} title="Utworzenie komponentu Locale Switcher">
 
 Utwórz komponent pozwalający użytkownikom na zmianę języka:
 
@@ -464,7 +504,9 @@ export default LocaleSwitcher;
 >
 > Aby dowiedzieć się więcej o hooku `useLocale`, zapoznaj się z [dokumentacją](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/packages/solid-intlayer/useLocale.md).
 
-### Krok 11: Zarządzanie atrybutami HTML
+</Step>
+
+<Step number={11} title="Zarządzanie atrybutami HTML">
 
 Jak pokazano w Kroku 5, możesz zarządzać atrybutami `lang` oraz `dir` tagu `html` za pomocą `useParams` w swoim głównym komponencie (root component). Dzięki temu prawidłowe atrybuty zostaną ustawione zarówno na serwerze, jak i na kliencie.
 
@@ -483,7 +525,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### Krok 12: Dodaj Middleware (opcjonalnie)
+</Step>
+
+<Step number={12} title="Dodaj Middleware">
 
 Możesz również użyć `intlayerProxy`, aby dodać routing po stronie serwera do swojej aplikacji. Ten plugin automatycznie wykryje aktualny język na podstawie adresu URL i ustawi odpowiednie ciasteczko (cookie) języka. Jeśli nie określono języka, plugin określi najbardziej odpowiedni na podstawie preferencji językowych przeglądarki użytkownika. Jeśli nie zostanie wykryty żaden język, nastąpi przekierowanie do domyślnego języka.
 
@@ -514,7 +558,9 @@ export default defineConfig({
 
 ---
 
-### Krok 13: Umiędzynarowienie metadanych (opcjonalnie)
+</Step>
+
+<Step number={13} title="Umiędzynarowienie metadanych">
 
 Możesz również użyć funkcji `getIntlayer`, aby uzyskać dostęp do swoich słowników treści wewnątrz loadera `head` w celu uzyskania metadanych uwzględniających lokalizację:
 
@@ -561,7 +607,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Krok 14: Pobieranie języka w akcjach serwera (opcjonalnie)
+</Step>
+
+<Step number={14} title="Pobieranie języka w akcjach serwera">
 
 Możesz chcieć uzyskać dostęp do bieżącego języka wewnątrz akcji serwera (server actions) lub punktów końcowych API.
 Możesz to zrobić, używając pomocnika `getLocale` z `intlayer`.
@@ -598,7 +646,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Krok 15: Zarządzanie stronami "nie znaleziono" (404) (opcjonalnie)
+</Step>
+
+<Step number={15} title="Zarządzanie stronami &quot;nie znaleziono&quot; (404)" isOptional={true}>
 
 Gdy użytkownik odwiedzi nieistniejącą stronę, możesz wyświetlić niestandardową stronę 404, a prefiks językowy może wpływać na sposób wyzwalania strony 404.
 
@@ -672,7 +722,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (Opcjonalnie) Krok 16: Wyodrębnij treść ze swoich komponentów
+</Step>
+
+<Step number={16} title="Wyodrębnij treść ze swoich komponentów" isOptional={true}>
 
 Jeśli masz istniejącą bazę kodu, transformacja tysięcy plików może być czasochłonna.
 
@@ -785,7 +837,9 @@ bun run build # Lub bun run dev
 
 ---
 
-### Krok 17: Skonfiguruj TypeScript (opcjonalnie)
+</Step>
+
+<Step number={17} title="Skonfiguruj TypeScript">
 
 Intlayer używa rozszerzania modułów (module augmentation), aby czerpać korzyści z TypeScript i wzmocnić Twoją bazę kodu.
 
@@ -816,6 +870,10 @@ Aby to zrobić, możesz dodać następujące instrukcje do pliku `.gitignore`:
 
 ---
 
+</Step>
+
+</Steps>
+
 ## Rozszerzenie VS Code
 
 Aby poprawić swoje doświadczenia deweloperskie z Intlayer, możesz zainstalować oficjalne **rozszerzenie Intlayer VS Code**.