@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/tr/intlayer_with_storybook.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-03-20
-updatedAt: 2026-05-06
-title: Storybook ile Intlayer Nasıl Kurulur
-description: Intlayer ve Storybook kullanarak tasarım sisteminizi nasıl çok dilli hale getireceğinizi öğrenin - içerik bildirimlerini derleyin, bir yerel ayar değiştirici ekleyin ve bileşenlerinizi herhangi bir dilde önizleyin.
+updatedAt: 2026-05-31
+title: "Storybook i18n - Uygulamanızı çevirmek için eksiksiz kılavuz"
+description: "Artık i18next yok. 2026 yılı için çok dilli (i18n) Storybook uygulaması oluşturma kılavuzu. Yapay zeka ajanlarıyla çevirin ve bundle boyutu, SEO ve performansı optimize edin."
 keywords:
   - Uluslararasılaştırma
   - Dokümantasyon
@@ -31,16 +31,54 @@ history:
 
 <TOC/>
 
-## Intlayer Nedir?
+## Neden alternatifler yerine Intlayer?
 
-**Intlayer**, modern web uygulamalarında çok dilli desteği basitleştirmek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma (i18n) kütüphanesidir. **Bileşen düzeyinde** çalışır - her bileşen kendi içerik bildirimlerine sahiptir - böylece çeviriler, onları kullanan kodla aynı yerde tutulur.
+'storybook-react-i18next' veya 'i18next' gibi ana çözümlerle karşılaştırıldığında Intlayer, aşağıdaki gibi entegre optimizasyonlarla gelen bir çözümdür:
 
-Intlayer ile şunları yapabilirsiniz:
+<AccordionGroup>
 
-- **Çevirileri bildirimsel olarak yönetin** bileşen başına içerik dosyalarıyla.
-- **Tam TypeScript desteği alın** otomatik olarak oluşturulan türler ve IDE otomatik tamamlama aracılığıyla.
-- **Çalışma zamanında dilleri değiştirin** sayfa yenilemesi olmadan.
-- **Otomatik olarak çevirin** yerleşik AI sağlayıcı entegrasyonları ile.
+<Accordion header="Tam Hikaye Kitabı kapsamı">
+
+Intlayer, **çok dilli hikaye dekoratörleri**, **yerel değiştirme** ve tasarım sisteminizde uluslararasılaştırmayı (i18n) ölçeklendirmek için gereken tüm özellikleri sunarak Storybook ile mükemmel çalışacak şekilde optimize edilmiştir.
+
+</Accordion>
+
+<Accordion header="Bundle boyutu">
+
+Sayfalarınıza çok büyük JSON dosyaları yüklemek yerine yalnızca gerekli içeriği yükleyin. Intlayer **bundle ve sayfa boyutlarınızı %50'ye kadar azaltmanıza** yardımcı olur.
+
+</Accordion>
+
+<Accordion header="Sürdürülebilirlik">
+
+Uygulamanızın içeriğinin kapsamını belirlemek, büyük ölçekli uygulamalar için **bakımı kolaylaştırır**. İçerik kod tabanınızın tamamını gözden geçirmenin zihinsel yükü olmadan, tek bir özellik klasörünü çoğaltabilir veya silebilirsiniz. Ayrıca Intlayer, içeriğinizin doğruluğunu sağlamak için **tamamen tiplendirilmiş (fully typed)tır**.
+
+</Accordion>
+
+<Accordion header="Yapay Zeka Temsilcisi">
+
+İçeriğin bir arada konumlandırılması **Büyük Dil Modellerinin (LLM'ler) ihtiyaç duyduğu bağlamı azaltır**. Intlayer ayrıca eksik çevirileri test etmek için **CLI** gibi bir araç paketiyle birlikte gelir**[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)** ve **[aracı becerileri](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, geliştirici deneyimini (DX) yapay zeka için daha da sorunsuz hale getirmek için ajanlar.
+
+</Accordion>
+
+<Accordion header="Otomasyon">
+
+Maliyeti AI sağlayıcınıza ait olmak üzere seçtiğiniz LLM'yi kullanarak CI/CD işlem hattınızda çeviri yapmak için otomasyonu kullanın. Intlayer ayrıca içerik çıkarmayı otomatikleştirmek için bir **derleyici** ve **arka planda çeviri yapmaya** yardımcı olacak bir [web platformu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) sunar.
+
+</Accordion>
+
+<Accordion header="Performans">
+
+Büyük JSON dosyalarını bileşenlere bağlamak performans ve tepkime sorunlarına yol açabilir. Intlayer, içerik yüklemenizi derleme sırasında optimize eder.
+
+</Accordion>
+
+<Accordion header="Non-dev ile ölçeklendirme">
+
+Bir i18n çözümünden çok daha fazlası olan Intlayer, **kendi kendine barındırılan bir [görsel düzenleyici](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** ve **[tam CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** çok dilli içeriğinizi **gerçek zamanlı** olarak yönetmenize yardımcı olarak çevirmenler, metin yazarları ve diğer ekip üyeleriyle işbirliğini kusursuz hale getirir. İçerik yerel olarak ve/veya uzaktan depolanabilir.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -59,7 +97,9 @@ Storybook, UI bileşenlerini izole bir şekilde geliştirmek ve belgelemek için
 <Tabs>
 <Tab value="Vite Setup">
 
-### Adım 1: Bağımlılıkları Yükleyin
+<Steps>
+
+<Step number={1} title="Bağımlılıkları Yükleyin">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -89,7 +129,9 @@ bun add vite-intlayer --dev
 
 ---
 
-### Adım 2: Bir Intlayer Yapılandırması Oluşturun
+</Step>
+
+<Step number={2} title="Bir Intlayer Yapılandırması Oluşturun">
 
 Projenizin kök dizinine (veya tasarım sistemi paketinizin içine) `intlayer.config.ts` dosyasını oluşturun:
 
@@ -118,7 +160,9 @@ export default config;
 
 ---
 
-### Adım 3: Storybook'a Vite Eklentisini Ekleyin
+</Step>
+
+<Step number={3} title="Storybook'a Vite Eklentisini Ekleyin">
 
 Storybook'un `viteFinal` kancası, dahili Vite yapılandırmasını genişletmenize olanak tanır. Oraya `intlayer()` eklentisini içe aktarın ve ekleyin:
 
@@ -159,7 +203,9 @@ export default config;
 
 ---
 
-### Adım 4: `IntlayerProvider` Dekoratörünü ve Bir Yerel Araç Çubuğunu Ekleyin
+</Step>
+
+<Step number={4} title="`IntlayerProvider` Dekoratörünü ve Bir Yerel Araç Çubuğunu Ekleyin">
 
 Storybook'un `preview` dosyası, her hikayeyi `IntlayerProvider` ile sarmalamak ve araç çubuğunda bir dil değiştirici göstermek için doğru yerdir:
 
@@ -216,7 +262,9 @@ export default preview;
 </Tab>
 <Tab value="Webpack Setup">
 
-### Adım 1: Bağımlılıkları Yükleyin
+</Step>
+
+<Step number={1} title="Bağımlılıkları Yükleyin">
 
 ```bash packageManager="npm"
 npm install intlayer react-intlayer
@@ -240,7 +288,9 @@ bun add @intlayer/webpack --dev
 
 ---
 
-### Adım 2: Bir Intlayer Yapılandırması Oluşturun
+</Step>
+
+<Step number={2} title="Bir Intlayer Yapılandırması Oluşturun">
 
 Projenizin kök dizinine `intlayer.config.ts` dosyasını oluşturun:
 
@@ -262,7 +312,9 @@ export default config;
 
 ---
 
-### Adım 3: Storybook'un Webpack'ini Yapılandırın
+</Step>
+
+<Step number={3} title="Storybook'un Webpack'ini Yapılandırın">
 
 Webpack tabanlı Storybook kurulumları için (örneğin `@storybook/react-webpack5`), Intlayer takma adlarını ve yükleyiciyi eklemek için `webpackFinal` aracılığıyla webpack yapılandırmasını genişletin:
 
@@ -289,7 +341,9 @@ export default config;
 
 ---
 
-### Adım 4: `IntlayerProvider` Dekoratörünü ve Bir Yerel Araç Çubuğunu Ekleyin
+</Step>
+
+<Step number={4} title="`IntlayerProvider` Dekoratörünü ve Bir Yerel Araç Çubuğunu Ekleyin">
 
 Vite kurulumuyla aynıdır - dekoratörü ve genel dil türünü `.storybook/preview.tsx` dosyasına ekleyin:
 
@@ -335,6 +389,10 @@ export default preview;
 
 ---
 
+</Step>
+
+</Steps>
+
 ## İçerik Bildirme
 
 Her bileşenin yanına bir `*.content.ts` dosyası oluşturun. Intlayer derleme sırasında bunu otomatik olarak algılar.

package/docs/tr/intlayer_with_svelte_kit.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-11-20
-updatedAt: 2026-05-06
-title: SvelteKit i18n - SvelteKit uygulamasını çevirme 2026
-description: SvelteKit web sitenizi çok dilli hale nasıl getireceğinizi keşfedin. Server-Side Rendering (SSR) kullanarak uluslararasılaştırma (i18n) ve çeviri yapmak için dokümantasyonu takip edin.
+updatedAt: 2026-05-31
+title: "SvelteKit i18n - Uygulamanızı çevirmek için eksiksiz kılavuz"
+description: "Artık i18next yok. 2026 yılı için çok dilli (i18n) SvelteKit uygulaması oluşturma kılavuzu. Yapay zeka ajanlarıyla çevirin ve bundle boyutu, SEO ve performansı optimize edin."
 keywords:
   - Uluslararasılaştırma
   - Dokümantasyon
@@ -59,16 +59,54 @@ history:
 
 <TOC/>
 
-## Intlayer nedir?
+## Neden alternatifler yerine Intlayer?
 
-**Intlayer**, modern web uygulamalarında çok dilli desteği basitleştirmek için tasarlanmış yenilikçi, açık kaynaklı bir uluslararasılaştırma (i18n) kütüphanesidir. **SvelteKit'in** Server-Side Rendering (SSR) yetenekleriyle sorunsuz çalışır.
+"svelte-i18n" veya "i18next" gibi ana çözümlerle karşılaştırıldığında Intlayer, aşağıdaki gibi entegre optimizasyonlarla gelen bir çözümdür:
 
-Intlayer ile şunları yapabilirsiniz:
+<AccordionGroup>
 
-- **Bileşen seviyesinde deklaratif sözlükler kullanarak çevirileri kolayca yönetin.**
-- **Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirin.**
-- **Otomatik oluşturulan tiplerle TypeScript desteğini sağlayın.**
-- **SEO dostu uluslararasılaştırma için SvelteKit'in SSR'sinden yararlanın.**
+<Accordion header="Tam SvelteKit kapsamı">
+
+Intlayer, **çok dilli yönlendirme**, **SSR desteği** ve uluslararasılaştırmayı (i18n) ölçeklendirmek için gereken tüm özellikleri sunarak SvelteKit ile mükemmel çalışacak şekilde optimize edilmiştir.
+
+</Accordion>
+
+<Accordion header="Bundle boyutu">
+
+Sayfalarınıza çok büyük JSON dosyaları yüklemek yerine yalnızca gerekli içeriği yükleyin. Intlayer **bundle ve sayfa boyutlarınızı %50'ye kadar azaltmanıza** yardımcı olur.
+
+</Accordion>
+
+<Accordion header="Sürdürülebilirlik">
+
+Uygulamanızın içeriğinin kapsamını belirlemek, büyük ölçekli uygulamalar için **bakımı kolaylaştırır**. İçerik kod tabanınızın tamamını gözden geçirmenin zihinsel yükü olmadan, tek bir özellik klasörünü çoğaltabilir veya silebilirsiniz. Ayrıca Intlayer, içeriğinizin doğruluğunu sağlamak için **tamamen tiplendirilmiş (fully typed)tır**.
+
+</Accordion>
+
+<Accordion header="Yapay Zeka Temsilcisi">
+
+İçeriğin bir arada konumlandırılması **Büyük Dil Modellerinin (LLM'ler) ihtiyaç duyduğu bağlamı azaltır**. Intlayer ayrıca eksik çevirileri test etmek için **CLI** gibi bir araç paketiyle birlikte gelir**[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)** ve **[aracı becerileri](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)**, geliştirici deneyimini (DX) yapay zeka için daha da sorunsuz hale getirmek için ajanlar.
+
+</Accordion>
+
+<Accordion header="Otomasyon">
+
+Maliyeti AI sağlayıcınıza ait olmak üzere seçtiğiniz LLM'yi kullanarak CI/CD işlem hattınızda çeviri yapmak için otomasyonu kullanın. Intlayer ayrıca içerik çıkarmayı otomatikleştirmek için bir **derleyici** ve **arka planda çeviri yapmaya** yardımcı olacak bir [web platformu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) sunar.
+
+</Accordion>
+
+<Accordion header="Performans">
+
+Büyük JSON dosyalarını bileşenlere bağlamak performans ve tepkime sorunlarına yol açabilir. Intlayer, içerik yüklemenizi derleme sırasında optimize eder.
+
+</Accordion>
+
+<Accordion header="Non-dev ile ölçeklendirme">
+
+Bir i18n çözümünden çok daha fazlası olan Intlayer, **kendi kendine barındırılan bir [görsel düzenleyici](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** ve **[tam CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** çok dilli içeriğinizi **gerçek zamanlı** olarak yönetmenize yardımcı olarak çevirmenler, metin yazarları ve diğer ekip üyeleriyle işbirliğini kusursuz hale getirir. İçerik yerel olarak ve/veya uzaktan depolanabilir.
+
+</Accordion>
+</AccordionGroup>
 
 ---
 
@@ -116,7 +154,9 @@ Başlamak için yeni bir SvelteKit projesi oluşturun. İşte oluşturacağımı
 └── vite.config.ts
 ```
 
-### Adım 1: Bağımlılıkları Yükleyin
+<Steps>
+
+<Step number={1} title="Bağımlılıkları Yükleyin">
 
 Gerekli paketleri npm kullanarak yükleyin:
 
@@ -148,7 +188,9 @@ bun x intlayer init
 - **svelte-intlayer**: Svelte/SvelteKit için context sağlayıcıları ve store'lar sunar.
 - **vite-intlayer**: İçerik bildirimlerini build süreciyle entegre eden Vite eklentisi.
 
-### Adım 2: Projenizin Yapılandırması
+</Step>
+
+<Step number={2} title="Projenizin Yapılandırması">
 
 Proje kök dizininizde bir yapılandırma dosyası oluşturun:
 
@@ -165,7 +207,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Adım 3: Intlayer'ı Vite Konfigürasyonunuza Entegre Edin
+</Step>
+
+<Step number={3} title="Intlayer'ı Vite Konfigürasyonunuza Entegre Edin">
 
 `vite.config.ts` dosyanızı, Intlayer eklentisini içerecek şekilde güncelleyin. Bu eklenti, içerik dosyalarınızın transpile edilmesini yönetir.
 
@@ -179,7 +223,9 @@ export default defineConfig({
 });
 ```
 
-### Adım 4: İçeriğinizi Bildirin
+</Step>
+
+<Step number={4} title="İçeriğinizi Bildirin">
 
 `src` klasörünüzde istediğiniz herhangi bir yerde içerik bildirim dosyalarınızı oluşturun (örneğin, `src/lib/content` veya bileşenlerinizin yanında). Bu dosyalar, uygulamanız için çevrilebilir içeriği her locale için `t()` fonksiyonunu kullanarak tanımlar.
 
@@ -200,13 +246,15 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Adım 5: Bileşenlerinizde Intlayer'ı Kullanın
+</Step>
+
+<Step number={5} title="Bileşenlerinizde Intlayer'ı Kullanın">
 
 Artık `useIntlayer` fonksiyonunu herhangi bir Svelte bileşeninde kullanabilirsiniz. Bu fonksiyon, locale değiştiğinde otomatik olarak güncellenen reaktif bir store döner. Fonksiyon, mevcut locale'yi otomatik olarak dikkate alır (hem SSR sırasında hem de istemci tarafı gezinmede).
 
 > **Not:** `useIntlayer` bir Svelte store döner, bu yüzden reaktif değerine erişmek için `---
 > createdAt: 2025-11-20
-> updatedAt: 2026-05-06
+> updatedAt: 2026-05-31
 > title: SvelteKit uygulamanızı nasıl çevirirsiniz – i18n rehberi 2026
 > description: SvelteKit web sitenizi çok dilli hale nasıl getireceğinizi keşfedin. Server-Side Rendering (SSR) kullanarak uluslararasılaştırma (i18n) ve çeviri yapmak için dokümantasyonu takip edin.
 > keywords:
@@ -231,6 +279,10 @@ Artık `useIntlayer` fonksiyonunu herhangi bir Svelte bileşeninde kullanabilirs
 
 # Intlayer kullanarak SvelteKit web sitenizi çevirin | Uluslararasılaştırma (i18n)
 
+</Step>
+
+</Steps>
+
 ## İçindekiler
 
 <TOC/>
@@ -292,7 +344,9 @@ Başlamak için yeni bir SvelteKit projesi oluşturun. İşte oluşturacağımı
 └── vite.config.ts
 ```
 
-### Adım 1: Bağımlılıkları Yükleyin
+<Steps>
+
+<Step number={1} title="Bağımlılıkları Yükleyin">
 
 Gerekli paketleri npm kullanarak yükleyin:
 
@@ -324,7 +378,9 @@ bun x intlayer init
 - **svelte-intlayer**: Svelte/SvelteKit için context sağlayıcıları ve store'lar sunar.
 - **vite-intlayer**: İçerik bildirimlerini build süreciyle entegre eden Vite eklentisi.
 
-### Adım 2: Projenizin Yapılandırması
+</Step>
+
+<Step number={2} title="Projenizin Yapılandırması">
 
 Proje kök dizininizde bir yapılandırma dosyası oluşturun:
 
@@ -341,7 +397,9 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-### Adım 3: Intlayer'ı Vite Konfigürasyonunuza Entegre Edin
+</Step>
+
+<Step number={3} title="Intlayer'ı Vite Konfigürasyonunuza Entegre Edin">
 
 `vite.config.ts` dosyanızı, Intlayer eklentisini içerecek şekilde güncelleyin. Bu eklenti, içerik dosyalarınızın transpile edilmesini yönetir.
 
@@ -355,7 +413,9 @@ export default defineConfig({
 });
 ```
 
-### Adım 4: İçeriğinizi Bildirin
+</Step>
+
+<Step number={4} title="İçeriğinizi Bildirin">
 
 `src` klasörünüzde istediğiniz herhangi bir yerde içerik bildirim dosyalarınızı oluşturun (örneğin, `src/lib/content` veya bileşenlerinizin yanında). Bu dosyalar, uygulamanız için çevrilebilir içeriği her locale için `t()` fonksiyonunu kullanarak tanımlar.
 
@@ -376,7 +436,9 @@ const heroContent = {
 export default heroContent;
 ```
 
-### Adım 5: Bileşenlerinizde Intlayer'ı Kullanın
+</Step>
+
+<Step number={5} title="Bileşenlerinizde Intlayer'ı Kullanın">
 
 ön ekini kullanmanız gerekir (örneğin, `$content.title`).
 
@@ -398,7 +460,9 @@ export default heroContent;
 <div aria-label={String($content.title)}></div>
 ```
 
-### (İsteğe bağlı) Adım 6: Yönlendirmeyi ayarlama
+</Step>
+
+<Step number={6} title="Yönlendirmeyi ayarlama" isOptional={true}>
 
 Aşağıdaki adımlar, SvelteKit'te locale tabanlı yönlendirmeyi nasıl ayarlayacağınızı gösterir. Bu, URL'lerinizin locale önekini içermesine olanak tanır (örneğin, `/en/about`, `/fr/about`) ve böylece SEO ve kullanıcı deneyimini iyileştirir.
 
@@ -423,7 +487,9 @@ Aşağıdaki adımlar, SvelteKit'te locale tabanlı yönlendirmeyi nasıl ayarla
         └── +layout.svelte         # Yazı tipleri ve genel stiller için kök düzen
 ```
 
-### Adım 7: Sunucu Tarafı Dil Algılama (Hooks) İşlemi
+</Step>
+
+<Step number={7} title="Sunucu Tarafı Dil Algılama (Hooks) İşlemi">
 
 SvelteKit'te, SSR sırasında doğru içeriği render etmek için sunucunun kullanıcının dilini bilmesi gerekir. URL veya çerezlerden dili algılamak için `hooks.server.ts` kullanılır.
 
@@ -635,7 +701,9 @@ export const prerender = true;
 </style>
 ```
 
-### (İsteğe Bağlı) Adım 8: Uluslararasılaştırılmış Bağlantılar
+</Step>
+
+<Step number={8} title="Uluslararasılaştırılmış Bağlantılar" isOptional={true}>
 
 SEO için, rotalarınızı locale ile öneklemeniz önerilir (örneğin, `/en/about`, `/fr/about`). Bu bileşen, herhangi bir bağlantıyı otomatik olarak mevcut locale ile önekler.
 
@@ -668,7 +736,9 @@ const localizedPath = getLocalizedUrl("/about", $locale);
 goto(localizedPath); // Yerel dile bağlı olarak /en/about veya /fr/about adresine gider
 ```
 
-### (İsteğe Bağlı) Adım 9: Dil Değiştirici
+</Step>
+
+<Step number={9} title="Dil Değiştirici" isOptional={true}>
 
 Kullanıcıların dilleri değiştirmesine izin vermek için URL'yi güncelleyin.
 
@@ -709,7 +779,9 @@ Kullanıcıların dilleri değiştirmesine izin vermek için URL'yi güncelleyin
 </style>
 ```
 
-### (İsteğe Bağlı) Adım 10: Backend proxy ekleme
+</Step>
+
+<Step number={10} title="Backend proxy ekleme" isOptional={true}>
 
 SvelteKit uygulamanıza bir backend proxy eklemek için, `vite-intlayer` eklentisi tarafından sağlanan `intlayerProxy` fonksiyonunu kullanabilirsiniz. Bu eklenti, URL, çerezler ve tarayıcı dil tercihleri temelinde kullanıcı için en iyi yereli otomatik olarak algılar.
 
@@ -728,7 +800,9 @@ export default defineConfig({
 });
 ```
 
-### (İsteğe Bağlı) Adım 11: intlayer editör / CMS kurulumu
+</Step>
+
+<Step number={11} title="intlayer editör / CMS kurulumu" isOptional={true}>
 
 intlayer editörünü kurmak için, [intlayer editör dokümantasyonunu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/intlayer_visual_editor.md) takip etmelisiniz.
 
@@ -753,18 +827,9 @@ intlayer editör seçicisini görselleştirebilmek için, intlayer içeriğinizd
 </div>
 ```
 
-### Git Yapılandırması
+</Step>
 
-Intlayer tarafından oluşturulan dosyaların göz ardı edilmesi önerilir.
-
-```plaintext fileName=".gitignore"
-# Intlayer tarafından oluşturulan dosyaları göz ardı et
-.intlayer
-```
-
----
-
-### (İsteğe bağlı) Adım 12 : Bileşenlerinizin içeriğini çıkarın
+<Step number={12} title="Bileşenlerinizin içeriğini çıkarın" isOptional={true}>
 
 Mevcut bir kod tabanınız varsa, binlerce dosyayı dönüştürmek zaman alıcı olabilir.
 
@@ -859,6 +924,20 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
+
+### Git Yapılandırması
+
+Intlayer tarafından oluşturulan dosyaların göz ardı edilmesi önerilir.
+
+```plaintext fileName=".gitignore"
+# Intlayer tarafından oluşturulan dosyaları göz ardı et
+.intlayer
+```
+
+---
 
 ### Daha İleri Gitmek İçin