@intlayer/docs 8.7.6 → 8.7.8-canary.0

package/docs/pl/intlayer_with_astro.md

@@ -1,11 +1,11 @@
 ---
 createdAt: 2024-03-07
 updatedAt: 2025-12-30
-title: Astro i18n - Jak przetłumaczyć aplikację Astro w 2026
-description: Dowiedz się, jak dodać internacjonalizację (i18n) do swojej strony Astro za pomocą Intlayer. Postępuj zgodnie z tym przewodnikiem, aby uczynić swoją stronę wielojęzyczną.
+title: Tłumaczenie Astro i18n - Jak przetłumaczyć aplikację Astro w 2026 roku
+description: Dowiedz się, jak dodać międzynarodowość (i18n) do swojej witryny Astro za pomocą Intlayer. Postępuj zgodnie z tym przewodnikiem, aby uczynić swoją witrynę wielojęzyczną.
 keywords:
-  - Internacjonalizacja
-  - Dokumentacja
+  - międzynarodowość
+  - dokumentacja
   - Intlayer
   - Vite
   - React
@@ -16,101 +16,95 @@ slugs:
   - environment
   - astro
 applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
+applicationShowcase: https://intlayer-astro-template.vercel.app
 history:
   - version: 7.5.9
     date: 2025-12-30
-    changes: "Dodaj polecenie init"
+    changes: "Dodano polecenie init"
   - version: 6.2.0
     date: 2025-10-03
-    changes: "Odświeżenie integracji z Astro, konfiguracji, użytkowania"
+    changes: "Aktualizacja integracji z Astro, konfiguracji i użytkowania"
 ---
 
-### Idź dalej
+# Przetłumacz swoją witrynę Astro za pomocą Intlayer | Międzynarodowość (i18n)
 
-Aby pójść dalej, możesz zaimplementować [edytor wizualny](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md) lub wyodrębnić swoją zawartość, korzystając z [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_CMS.md).---
-createdAt: 2024-03-07
-updatedAt: 2025-10-03
-title: Jak przetłumaczyć swoją aplikację Astro – przewodnik i18n 2026
-description: Dowiedz się, jak dodać internacjonalizację (i18n) do swojej strony Astro za pomocą Intlayer. Postępuj zgodnie z tym przewodnikiem, aby uczynić swoją stronę wielojęzyczną.
-keywords:
+<Tabs defaultTab="code">
+  <Tab label="Kod" value="code">
 
-- Internacjonalizacja
-- Dokumentacja
-- Intlayer
-- Vite
-- React
-- i18n
-- JavaScript
-  slugs:
-- doc
-- environment
-- astro
-  applicationTemplate: https://github.com/aymericzip/intlayer-astro-template
-  history:
-- version: 6.2.0
-  date: 2025-10-03
-  changes: Odświeżenie integracji z Astro, konfiguracji, użytkowania
+<iframe
+  src="https://ide.intlayer.org/aymericzip/intlayer-astro-template?file=intlayer.config.ts"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo CodeSandbox - Jak umiędzynarodowić aplikację za pomocą Intlayer"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
 
----
+  </Tab>
+  <Tab label="Demo" value="demo">
 
-# Tłumacz swoją stronę Astro za pomocą Intlayer | Internacjonalizacja (i18n)
+<iframe
+  src="https://intlayer-astro-template.vercel.app"
+  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
+  title="Demo — intlayer-astro-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+</Tabs>
+
+## Spis treści
+
+<TOC/>
 
 ## Czym jest Intlayer?
 
-**Intlayer** to innowacyjna, open-source'owa biblioteka do internacjonalizacji (i18n), zaprojektowana, aby uprościć wsparcie wielojęzyczne w nowoczesnych aplikacjach webowych.
+**Intlayer** to innowacyjna biblioteka międzynarodowości (i18n) o otwartym kodzie źródłowym, zaprojektowana w celu uproszczenia obsługi wielojęzyczności w nowoczesnych aplikacjach internetowych.
 
 Dzięki Intlayer możesz:
 
-- **Łatwo zarządzać tłumaczeniami** za pomocą deklaratywnych słowników na poziomie komponentów.
-- **Dynamicznie lokalizować metadane**, ścieżki i treści.
-- **Zapewnić wsparcie dla 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 lokalizacji.
+- **Łatwo zarządzać tłumaczeniami**: Korzystając z deklaratywnych słowników na poziomie komponentów.
+- **Dynamicznie lokalizować metadane, trasy i treści**.
+- **Zapewnić obsługę TypeScript**: Dzięki automatycznie generowanym typom dla lepszego autouzupełniania i wykrywania błędów.
+- **Korzystać z zaawansowanych funkcji**: Takich jak dynamiczne wykrywanie języka i przełączanie języków.
 
 ---
 
-## Przewodnik krok po kroku: konfiguracja Intlayer w Astro
-
-<iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer-astro-template?embed=1&ctl=1&file=intlayer.config.ts"
-  className="m-auto overflow-hidden rounded-lg border-0 max-md:size-full max-md:h-[700px] md:aspect-16/9 md:w-full"
-  title="Demo CodeSandbox - Jak internacjonalizować swoją aplikację za pomocą Intlayer"
-  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
-  loading="lazy"
-/>
+## Przewodnik krok po kroku po konfiguracji Intlayer w Astro
 
-Zobacz [Szablon aplikacji](https://github.com/aymericzip/intlayer-astro-template) na GitHub.
+Sprawdź [szablon aplikacji](https://github.com/aymericzip/intlayer-astro-template) na GitHubie.
 
-### Krok 1: Instalacja zależności
+### Krok 1: Zainstaluj zależności
 
-Zainstaluj niezbędne pakiety za pomocą swojego menedżera pakietów:
+Zainstaluj niezbędne pakiety za pomocą preferowanego menedżera pakietów:
 
 ```bash packageManager="npm"
 npm install intlayer astro-intlayer
-# Opcjonalnie: dodaj wsparcie dla React island
+# opcjonalnie: jeśli chcesz dodać obsługę islandów React
 npm install react react-dom react-intlayer @astrojs/react
 ```
 
 ```bash packageManager="pnpm"
 pnpm add intlayer astro-intlayer
-# Opcjonalnie: dodaj wsparcie dla React island
+# opcjonalnie: jeśli chcesz dodać obsługę islandów React
 pnpm add react react-dom react-intlayer @astrojs/react
 ```
 
 ```bash packageManager="yarn"
 yarn add intlayer astro-intlayer
- # Opcjonalnie: dodaj wsparcie dla React island
+# opcjonalnie: jeśli chcesz dodać obsługę islandów React
 yarn add react react-dom react-intlayer @astrojs/react
 ```
 
 - **intlayer**
-  Główny pakiet, który dostarcza narzędzia do internacjonalizacji do zarządzania konfiguracją, tłumaczeń, [deklaracji treści](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/content_file.md), transpilecji oraz [poleceń CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/cli/index.md).
+  Główny pakiet zapewniający narzędzia i18n do zarządzania konfiguracją, tłumaczeniami, [deklaracją treści](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/content_file.md), transpilacją i [poleceniami CLI](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/cli/index.md).
 
 - **astro-intlayer**
-  Zawiera wtyczkę integracyjną Astro 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 i obsługi przekierowań URL.
+  Wtyczka integracyjna Astro służąca do połączenia Intlayer z [bundlerem Vite](https://vite.dev/guide/why.html#why-bundle-for-production); zawiera również oprogramowanie pośredniczące (middleware) do wykrywania preferowanego języka użytkownika, zarządzania plikami cookie i obsługi przekierowań URL.
 
-### Krok 2: Konfiguracja Twojego projektu
+### Krok 2: Skonfiguruj swój projekt
 
-Utwórz plik konfiguracyjny, aby skonfigurować języki swojej aplikacji:
+Utwórz plik konfiguracyjny, aby zdefiniować języki swojej aplikacji:
 
 ```typescript fileName="intlayer.config.ts"
 import { Locales, type IntlayerConfig } from "intlayer";
@@ -121,7 +115,8 @@ const config: IntlayerConfig = {
       Locales.ENGLISH,
       Locales.FRENCH,
       Locales.SPANISH,
-      // Twoje pozostałe lokalizacje
+      Locales.POLISH,
+      // Twoje inne języki
     ],
     defaultLocale: Locales.ENGLISH,
   },
@@ -130,11 +125,11 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-> Dzięki temu plikowi konfiguracyjnemu możesz ustawić lokalizowane adresy URL, przekierowania w 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 konfiguracyjnej](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/configuration.md).
+> Za pośrednictwem tego pliku konfiguracyjnego możesz ustawić zlokalizowane adresy URL, przekierowania oprogramowania pośredniczącego, nazwy plików cookie, lokalizację i rozszerzenia deklaracji treści, wyłączyć dzienniki 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 3: Zintegruj Intlayer w konfiguracji Astro
+### Krok 3: Zintegruj Intlayer ze swoją konfiguracją Astro
 
-Dodaj wtyczkę intlayer do swojej konfiguracji.
+Dodaj wtyczkę `intlayer` do konfiguracji Astro.
 
 ```typescript fileName="astro.config.ts"
 // @ts-check
@@ -148,11 +143,11 @@ export default defineConfig({
 });
 ```
 
-> Wtyczka integracyjna `intlayer()` dla Astro służy do integracji Intlayer z Astro. Zapewnia budowanie plików deklaracji treści oraz monitoruje je w trybie deweloperskim. Definiuje zmienne środowiskowe Intlayer w aplikacji Astro. Dodatkowo dostarcza aliasy w celu optymalizacji wydajności.
+> Wtyczka integracyjna `intlayer()` służy do integracji Intlayer z Astro. Zapewnia ona generowanie plików deklaracji treści i monitoruje je w trybie deweloperskim. Definiuje zmienne środowiskowe Intlayer w aplikacji Astro i udostępnia aliasy w celu optymalizacji wydajności.
 
 ### Krok 4: Zadeklaruj swoją treść
 
-Twórz i zarządzaj deklaracjami treści, aby przechowywać tłumaczenia:
+Twórz i zarządzaj swoimi deklaracjami treści, aby przechowywać tłumaczenia:
 
 ```tsx fileName="src/app.content.tsx"
 import { t, type Dictionary } from "intlayer";
@@ -165,6 +160,7 @@ const appContent = {
       en: "Hello World",
       fr: "Bonjour le monde",
       es: "Hola mundo",
+      pl: "Witaj świecie",
     }),
   },
 } satisfies Dictionary;
@@ -172,16 +168,15 @@ const appContent = {
 export default appContent;
 ```
 
-> Twoje deklaracje treści mogą być definiowane w dowolnym miejscu w aplikacji, pod warunkiem, że zostaną umieszczone w katalogu `contentDir` (domyślnie `./src`). Muszą również odpowiadać rozszerzeniu pliku deklaracji treści (domyślnie `.content.{json,ts,tsx,js,jsx,mjs,cjs}`).
+> Deklaracje treści mogą być definiowane w dowolnym miejscu aplikacji, pod warunkiem, że są zawarte w `contentDir` (domyślnie `./src`) i pasują do rozszerzenia pliku deklaracji treści (domyślnie `.content.{json,ts,tsx,js,jsx,mjs,cjs}`).
 
-> Po więcej szczegółów odsyłamy do [dokumentacji dotyczącej deklaracji treści](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/content_file.md).
+> Więcej informacji znajdziesz w [dokumentacji deklaracji treści](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/dictionary/content_file.md).
 
-### Krok 5: Użyj swojej treści w Astro
+### Krok 5: Korzystanie z treści w Astro
 
-Możesz korzystać ze słowników bezpośrednio w plikach `.astro` za pomocą podstawowych helperów eksportowanych przez `intlayer`.
+Możesz konsumować słowniki bezpośrednio w swoich plikach `.astro`, używając podstawowych pomocników wyeksportowanych z `intlayer`.
 
 ```astro fileName="src/pages/index.astro"
-<!-- astro -->
 ---
 import { getIntlayer } from "intlayer";
 import appContent from "../app.content";
@@ -189,7 +184,7 @@ import appContent from "../app.content";
 const { title } = getIntlayer('app');
 ---
 
-<html lang="en">
+<html lang="pl">
   <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
@@ -201,12 +196,11 @@ const { title } = getIntlayer('app');
 </html>
 ```
 
-### Krok 6: Lokalizowane routowanie
+### Krok 6: Zlokalizowany routing
 
-Utwórz dynamiczny segment ścieżki, aby obsługiwać lokalizowane strony, na przykład `src/pages/[locale]/index.astro`:
+Twórz dynamiczne segmenty tras (np. `src/pages/[locale]/index.astro`), aby serwować zlokalizowane strony:
 
 ```astro fileName="src/pages/[locale]/index.astro"
-<!-- astro -->
 ---
 import { getIntlayer } from "intlayer";
 
@@ -216,11 +210,11 @@ const { title } = getIntlayer('app');
 <h1>{title}</h1>
 ```
 
-Integracja Astro dodaje middleware Vite podczas developmentu, który pomaga w routingu uwzględniającym lokalizację oraz definicjach środowiska. Nadal możesz tworzyć linki między lokalizacjami używając własnej logiki lub funkcji pomocniczych, takich jak `getLocalizedUrl` z `intlayer`.
+Integracja z Astro dodaje oprogramowanie pośredniczące Vite, które pomaga w routingu uwzględniającym język i definiowaniu środowiska podczas programowania. Możesz również użyć własnej logiki lub narzędzi `intlayer`, takich jak `getLocalizedUrl`, aby tworzyć linki między językami.
 
-### Krok 7: Kontynuuj korzystanie z ulubionego frameworka
+### Krok 7: Kontynuuj korzystanie ze swojego ulubionego frameworka
 
-Kontynuuj korzystanie z ulubionego frameworka do budowy swojej aplikacji.
+Kontynuuj budowanie swojej aplikacji, korzystając z wybranego frameworka.
 
 - Intlayer + React: [Intlayer z React](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_with_vite+react.md)
 - Intlayer + Vue: [Intlayer z Vue](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_with_vite+vue.md)
@@ -230,19 +224,19 @@ Kontynuuj korzystanie z ulubionego frameworka do budowy swojej aplikacji.
 
 ### Konfiguracja TypeScript
 
-Intlayer używa rozszerzenia modułów, aby korzystać z zalet TypeScript i wzmocnić Twoją bazę kodu.
+Intlayer wykorzystuje rozszerzenie modułów (module augmentation), aby skorzystać z TypeScript, czyniąc bazę kodu bardziej solidną.
 
-![Autouzupełnianie](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
+![Autocompletion](https://github.com/aymericzip/intlayer/blob/main/docs/assets/autocompletion.png?raw=true)
 
-![Błąd tłumaczenia](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
+![Translation Error](https://github.com/aymericzip/intlayer/blob/main/docs/assets/translation_error.png?raw=true)
 
 Upewnij się, że Twoja konfiguracja TypeScript zawiera automatycznie generowane typy.
 
 ```json5 fileName="tsconfig.json"
 {
-  // ... Twoje istniejące konfiguracje TypeScript
+  // ... Twoja istniejąca konfiguracja TypeScript
   "include": [
-    // ... Twoje istniejące konfiguracje TypeScript
+    // ... Twoja istniejąca konfiguracja TypeScript
     ".intlayer/**/*.ts", // Uwzględnij automatycznie generowane typy
   ],
 }
@@ -250,34 +244,130 @@ Upewnij się, że Twoja konfiguracja TypeScript zawiera automatycznie generowane
 
 ### Konfiguracja Git
 
-Zaleca się ignorowanie plików generowanych przez Intlayer. Pozwala to uniknąć ich zatwierdzania do repozytorium Git.
+Zaleca się ignorowanie plików generowanych przez Intlayer. Zapobiega to ich przesyłaniu do repozytorium Git.
 
-Aby to zrobić, możesz dodać następujące instrukcje do pliku `.gitignore`:
+Aby to zrobić, dodaj następujące instrukcje do pliku `.gitignore`:
 
 ```bash
-#  Ignoruj pliki generowane przez Intlayer
+# Ignoruj pliki generowane przez Intlayer
 .intlayer
 ```
 
 ### Rozszerzenie VS Code
 
-Aby poprawić doświadczenie programistyczne z Intlayer, możesz zainstalować oficjalne **rozszerzenie Intlayer dla VS Code**.
+Aby poprawić wrażenia z programowania z Intlayer, możesz zainstalować **oficjalne rozszerzenie Intlayer dla VS Code**.
 
-[Zainstaluj z Marketplace VS Code](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+[Instalacja z VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
 
-To rozszerzenie oferuje:
+To rozszerzenie zapewnia:
 
 - **Autouzupełnianie** kluczy tłumaczeń.
 - **Wykrywanie błędów w czasie rzeczywistym** dla brakujących tłumaczeń.
-- **Podglądy w linii** przetłumaczonej zawartości.
-- **Szybkie akcje** umożliwiające łatwe tworzenie i aktualizowanie tłumaczeń.
+- **Podgląd inline** przetłumaczonej treści.
+- **Szybkie akcje** do łatwego tworzenia i aktualizowania tłumaczeń.
 
-Aby uzyskać więcej informacji na temat korzystania z rozszerzenia, zapoznaj się z [dokumentacją rozszerzenia Intlayer VS Code](https://intlayer.org/doc/vs-code-extension).
+Więcej informacji na temat korzystania z rozszerzenia znajdziesz w [dokumentacji rozszerzenia VS Code](https://intlayer.org/doc/vs-code-extension).
 
 ---
 
-### Idź dalej
+### (Opcjonalnie) Krok 17 : Wyodrębnij zawartość swoich komponentów
+
+Jeśli masz istniejącą bazę kodu, transformacja tysięcy plików może być czasochłonna.
+
+Aby ułatwić ten proces, Intlayer proponuje [kompilator](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/compiler.md) / [ekstraktor](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/cli/extract.md), aby przetransformować komponenty i wyodrębnić zawartość.
+
+Aby go skonfigurować, możesz dodać sekcję `compiler` w pliku `intlayer.config.ts`:
+
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
+import { type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  // ... Reszta Twojej konfiguracji
+  compiler: {
+    /**
+     * Wskazuje, czy kompilator powinien być włączony.
+     */
+    enabled: true,
+
+    /**
+     * Definiuje ścieżkę plików wyjściowych
+     */
+    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+
+    /**
+     * Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.
+     */
+    saveComponents: false,
+
+    /**
+     * Prefiks klucza słownika
+     */
+    dictionaryKeyPrefix: "",
+  },
+};
+
+export default config;
+```
+
+<Tabs>
+ <Tab value='Polecenie wyodrębniania'>
 
-Aby pójść dalej, możesz zaimplementować [edytor wizualny](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md) lub wyodrębnić swoją zawartość, korzystając z [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_CMS.md).
+Uruchom ekstraktor, aby przetransformować komponenty i wyodrębnić zawartość
+
+```bash packageManager="npm"
+npx intlayer extract
+```
+
+```bash packageManager="pnpm"
+pnpm intlayer extract
+```
+
+```bash packageManager="yarn"
+yarn intlayer extract
+```
+
+```bash packageManager="bun"
+bun x intlayer extract
+```
+
+ </Tab>
+ <Tab value='Kompilator Babel'>
+
+Zaktualizuj `vite.config.ts`, aby dołączyć wtyczkę `intlayerCompiler`:
+
+```ts fileName="vite.config.ts"
+import { defineConfig } from "vite";
+import { intlayer, intlayerCompiler } from "vite-intlayer";
+
+export default defineConfig({
+  plugins: [
+    intlayer(),
+    intlayerCompiler(), // Dodaje wtyczkę kompilatora
+  ],
+});
+```
+
+```bash packageManager="npm"
+npm run build # Lub npm run dev
+```
+
+```bash packageManager="pnpm"
+pnpm run build # Or pnpm run dev
+```
+
+```bash packageManager="yarn"
+yarn build # Or yarn dev
+```
+
+```bash packageManager="bun"
+bun run build # Or bun run dev
+```
+
+ </Tab>
+</Tabs>
 
 ---
+
+### Pogłębiaj swoją wiedzę
+
+Jeśli chcesz dowiedzieć się więcej, możesz również wdrożyć [Edytor Wizualny](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_visual_editor.md) lub użyć [CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/pl/intlayer_CMS.md), aby wyeksternalizować swoją treść.