@intlayer/docs 8.11.1 → 8.11.3

package/docs/tr/intlayer_with_tanstack+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-03-25
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - 2026'da Solid.js kullanarak Tanstack Start Uygulamasını Çevirme
-description: Intlayer ve Solid.js kullanarak Tanstack Start uygulamanıza nasıl uluslararasılaştırma (i18n) ekleyeceğinizi öğrenin. Uygulamanızı yerel ayara duyarlı yönlendirme ile çok dilli hale getirmek için bu kapsamlı kılavuzu izleyin.
+updatedAt: 2026-05-31
+title: "Tanstack Start i18n - Eksiksiz çeviri rehberi: TanStack Start"
+description: Bundle boyutu, SEO, performans ve sürdürülebilirlik için en iyi çözüm. TanStack Start and Solid uygulamayı'ınızı 2026'da çok dilli yapın, LLM çevirisi, Agent Skills & MCP.
 keywords:
   - Uluslararasılaştırma
   - Dokümantasyon
@@ -37,17 +37,47 @@ history:
 
 Bu kılavuz, Solid.js içeren Tanstack Start projelerinde sorunsuz uluslararasılaştırma, yerel ayara duyarlı yönlendirme, TypeScript desteği ve modern geliştirme uygulamaları için **Intlayer**'ı nasıl entegre edeceğinizi gösterir.
 
-## 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.
+'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>
+<Accordion header="Tam TanStack Start kapsamı">
 
-- Bileşen düzeyinde bildirimsel sözlükler kullanarak **çevirileri kolayca yönetebilirsiniz**.
-- **Meta verileri, rotaları ve içeriği dinamik olarak yerelleştirebilirsiniz**.
-- Otomatik olarak oluşturulan türlerle **TypeScript desteği sağlayabilir**, otomatik tamamlamayı ve hata tespitini iyileştirebilirsiniz.
-- Dinamik yerel ayar algılama ve değiştirme gibi **gelişmiş özelliklerden yararlanabilirsiniz**.
-- Tanstack Start'ın dosya tabanlı yönlendirme sistemi ile **yerel ayara duyarlı yönlendirmeyi etkinleştirebilirsiniz**.
+Intlayer, **çok dilli yönlendirme**, **site haritası** ve uluslararasılaştırmayı (i18n) ölçeklendirmek için gereken tüm özellikleri sunarak TanStack Start ve Solid 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>
 
 ---
 
@@ -85,11 +115,15 @@ Intlayer ile şunları yapabilirsiniz:
 
 GitHub'daki [Uygulama Şablonu](https://github.com/aymericzip/intlayer-tanstack-start-solid-template)na göz atın.
 
-### Adım 1: Proje Oluşturma
+<Steps>
+
+<Step number={1} title="Proje Oluşturma">
 
 Öncelikle, TanStack Start web sitesindeki [Yeni Proje Başlat](https://tanstack.com/start/latest/docs/framework/solid/quick-start) kılavuzunu izleyerek yeni bir TanStack Start projesi oluşturun.
 
-### Adım 2: Intlayer Paketlerini Kurun
+</Step>
+
+<Step number={2} title="Intlayer Paketlerini Kurun">
 
 Tercih ettiğiniz paket yöneticisini kullanarak gerekli paketleri kurun:
 
@@ -127,7 +161,9 @@ bun x intlayer init
 - **vite-intlayer**
   Intlayer'ı [Vite paketleyici](https://vite.dev/guide/why.html#why-bundle-for-production) ile entegre etmek için Vite eklentisini ve kullanıcının tercih ettiği yerel ayarı algılamak, çerezleri yönetmek ve URL yönlendirmesini işlemek için ara yazılımı (middleware) içerir.
 
-### Adım 3: Projenizin Yapılandırılması
+</Step>
+
+<Step number={3} title="Projenizin Yapılandırılması">
 
 Uygulamanızın dillerini ayarlamak için bir yapılandırma dosyası oluşturun:
 
@@ -148,7 +184,9 @@ export default config;
 
 > Bu yapılandırma dosyası aracılığıyla, yerelleştirilmiş URL'leri, ara yazılım yönlendirmesini, çerez adlarını, içerik bildirimlerinizin konumunu ve uzantısını yapılandırabilir, konsoldaki Intlayer günlüklerini devre dışı bırakabilir ve daha fazlasını yapabilirsiniz. Kullanılabilir parametrelerin tam listesi için [yapılandırma dokümantasyonu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/configuration.md)na bakın.
 
-### Adım 4: Intlayer'ı Vite Yapılandırmanıza Entegre Edin
+</Step>
+
+<Step number={4} title="Intlayer'ı Vite Yapılandırmanıza Entegre Edin">
 
 Bite yapılandırmanıza intlayer eklentisini ekleyin:
 
@@ -176,7 +214,9 @@ export default defineConfig({
 
 > `intlayer()` Vite eklentisi, Intlayer'ı Vite ile entegre etmek için kullanılır. İçerik bildirim dosyalarının oluşturulmasını sağlar ve geliştirme modunda bunları izler. Vite uygulaması içinde Intlayer ortam değişkenlerini tanımlar. Ayrıca, performans yükünü azaltmak için takma adlar (aliases) sağlar.
 
-### Adım 5: Kök Düzeni (Root Layout) Oluşturma
+</Step>
+
+<Step number={5} title="Kök Düzeni (Root Layout) Oluşturma">
 
 Geçerli yerel ayarı algılamak için `useParams` kullanarak ve `html` etiketinde `lang` ve `dir` özelliklerini ayarlayarak kök düzeninizi uluslararasılaştırmayı destekleyecek şekilde yapılandırın.
 
@@ -217,7 +257,9 @@ const RootComponent: ParentComponent = (props) => {
 };
 ```
 
-### Adım 6: Yerel Ayar Düzeni Oluşturma (İsteğe Bağlı)
+</Step>
+
+<Step number={6} title="Yerel Ayar Düzeni Oluşturma">
 
 Yerel ayar önekini işleyen ve doğrulama gerçekleştiren bir düzen oluşturun. Bu düzen, yalnızca geçerli yerel ayarların işlenmesini sağlayacaktır.
 
@@ -252,7 +294,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > `'prefix-all'` modu için slotu `$locale` olarak değiştirmeyi tercih edebilirsiniz.
 > `'no-prefix'` veya `'search-params'` modu için slotu tamamen kaldırabilirsiniz.
 
-### Adım 7: İçeriğinizi Bildirin
+</Step>
+
+<Step number={7} title="İçeriğinizi Bildirin">
 
 Çevirileri depolamak için içerik bildirimlerinizi oluşturun ve yönetin:
 
@@ -298,7 +342,9 @@ export default appContent;
 
 > Daha fazla ayrıntı için [içerik bildirimi dokümantasyonu](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/dictionary/content_file.md)na bakın.
 
-### Adım 8: Yerel Ayara Duyarlı Bileşenleri ve Hook'ları Kullanın
+</Step>
+
+<Step number={8} title="Yerel Ayara Duyarlı Bileşenleri ve Hook'ları Kullanın">
 
 Yerel ayara duyarlı navigasyon için bir `LocalizedLink` bileşeni oluşturun:
 
@@ -378,7 +424,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Adım 9: Sayfalarınızda Intlayer'ı Kullanın
+</Step>
+
+<Step number={9} title="Sayfalarınızda Intlayer'ı Kullanın">
 
 Uygulamanız genelinde içerik sözlüklerinize erişin:
 
@@ -421,7 +469,9 @@ function RouteComponent() {
 >
 > `useIntlayer` hook'u hakkında daha fazla bilgi edinmek için [dokümantasyon](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/packages/solid-intlayer/useIntlayer.md)a bakın.
 
-### Adım 10: Yerel Ayar Değiştirici Bileşeni Oluşturma
+</Step>
+
+<Step number={10} title="Yerel Ayar Değiştirici Bileşeni Oluşturma">
 
 Kullanıcıların dilleri değiştirmesine olanak tanıyan bir bileşen oluşturun:
 
@@ -465,7 +515,9 @@ export default LocaleSwitcher;
 >
 > `useLocale` hook'u hakkında daha fazla bilgi edinmek için [dokümantasyon](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/packages/solid-intlayer/useLocale.md)a bakın.
 
-### Adım 11: HTML Özniteliklerinin Yönetimi
+</Step>
+
+<Step number={11} title="HTML Özniteliklerinin Yönetimi">
 
 Adım 5'te görüldüğü gibi, kök bileşeninizde `useParams` kullanarak `html` etiketinin `lang` ve `dir` özniteliklerini yönetebilirsiniz. Bu, hem sunucuda hem de istemcide doğru özniteliklerin ayarlanmasını sağlar.
 
@@ -484,7 +536,9 @@ const RootComponent: ParentComponent = (props) => {
 
 ---
 
-### Adım 12: Ara Yazılım Ekleme (İsteğe Bağlı)
+</Step>
+
+<Step number={12} title="Ara Yazılım Ekleme">
 
 Uygulamanıza sunucu tarafı yönlendirmesi eklemek için `intlayerProxy`yi de kullanabilirsiniz. Bu eklenti, URL'ye göre geçerli yerel ayarı otomatik olarak algılayacak ve uygun yerel ayar çerezini ayarlayacaktır. Herhangi bir yerel ayar belirtilmemişse, eklenti kullanıcının tarayıcı dili tercihlerine göre en uygun yerel ayarı belirleyecektir. Hiçbir yerel ayar algılanmazsa varsayılan yerel ayara yönlendirecektir.
 
@@ -515,7 +569,9 @@ export default defineConfig({
 
 ---
 
-### Adım 13: Meta Verilerinizi Uluslararasılaştırın (İsteğe Bağlı)
+</Step>
+
+<Step number={13} title="Meta Verilerinizi Uluslararasılaştırın">
 
 Yerel ayara duyarlı meta veriler için `head` yükleyicisi içindeki içerik sözlüklerinize erişmek için `getIntlayer` fonksiyonunu da kullanabilirsiniz:
 
@@ -562,7 +618,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Adım 14: Sunucu aksiyonlarınızda yerel ayarı alın (İsteğe Bağlı)
+</Step>
+
+<Step number={14} title="Sunucu aksiyonlarınızda yerel ayarı alın">
 
 Sunucu aksiyonlarınızın veya API uç noktalarınızın içinden geçerli yerel ayara erişmek isteyebilirsiniz.
 Bunu `intlayer`dan `getLocale` yardımcısını kullanarak yapabilirsiniz.
@@ -599,7 +657,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Adım 15: Bulunamayan sayfaları yönetme (İsteğe Bağlı)
+</Step>
+
+<Step number={15} title="Bulunamayan sayfaları yönetme">
 
 Bir kullanıcı var olmayan bir sayfayı ziyaret ettiğinde, özel bir bulunamadı sayfası görüntüleyebilirsiniz ve yerel ayar öneki bulunamadı sayfasının tetiklenme şeklini etkileyebilir.
 
@@ -673,7 +733,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 });
 ```
 
-### (İsteğe Bağlı) Adım 16: Bileşenlerinizden içeriği çıkartın
+</Step>
+
+<Step number={16} title="Bileşenlerinizden içeriği çıkartın" isOptional={true}>
 
 Mevcut bir kod tabanınız varsa, binlerce dosyayı dönüştürmek zaman alıcı olabilir.
 
@@ -786,7 +848,9 @@ bun run build # veya bun run dev
 
 ---
 
-### Adım 17: TypeScript'i Yapılandırın (İsteğe Bağlı)
+</Step>
+
+<Step number={17} title="TypeScript'i Yapılandırın">
 
 Intlayer, TypeScript'in avantajlarından yararlanmak ve kod tabanınızı daha güçlü hale getirmek için modül genişletme (module augmentation) kullanır.
 
@@ -817,6 +881,10 @@ Bunu yapmak için `.gitignore` dosyanıza aşağıdaki talimatları ekleyebilirs
 
 ---
 
+</Step>
+
+</Steps>
+
 ## VS Code Uzantısı
 
 Intlayer ile geliştirme deneyiminizi iyileştirmek için resmi **Intlayer VS Code Uzantısı**nı yükleyebilirsiniz.

package/docs/tr/intlayer_with_tanstack.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-09-09
-updatedAt: 2026-05-06
-title: Tanstack Start i18n - Tanstack Start uygulamasını çevirme 2026
-description: Tanstack Start uygulamanıza Intlayer kullanarak uluslararasılaştırma (i18n) nasıl eklenir öğrenin. Uygulamanızı yerel dil yönlendirmesi ile çok dilli hale getirmek için bu kapsamlı rehberi takip edin.
+updatedAt: 2026-05-31
+title: "Tanstack Start i18n - Eksiksiz çeviri rehberi: TanStack Start"
+description: Bundle boyutu, SEO, performans ve sürdürülebilirlik için en iyi çözüm. TanStack Start uygulamayı'ınızı 2026'da çok dilli yapın, LLM çevirisi, Agent Skills & MCP.
 keywords:
   - Uluslararasılaştırma
   - Dokümantasyon
@@ -54,17 +54,47 @@ history:
 
 Bu rehber, Tanstack Start projelerinde yerel dil yönlendirmesi, TypeScript desteği ve modern geliştirme uygulamalarıyla sorunsuz uluslararasılaştırma için **Intlayer**'ın nasıl entegre edileceğini göstermektedir.
 
-## 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.
+'React-i18next' veya 'use-intl' veya 'paraglide' 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>
+<Accordion header="Tam TanStack Start kapsamı">
 
-- **Bileşen seviyesinde bildirisel sözlükler kullanarak çevirileri kolayca yönetin.**
-- **Meta verileri, yönlendirmeleri ve içeriği dinamik olarak yerelleştirin.**
-- **Otomatik oluşturulan tiplerle TypeScript desteğini sağlayarak otomatik tamamlama ve hata tespitini geliştirin.**
-- **Dinamik yerel dil algılama ve değiştirme gibi gelişmiş özelliklerden faydalanın.**
-- **Tanstack Start'ın dosya tabanlı yönlendirme sistemi ile yerel dil farkındalıklı yönlendirmeyi etkinleştirin.**
+Intlayer, TanStack Start için tamamen optimize edilmiştir ve **çok dilli yönlendirme**, **çerez yönetimi**, **site haritası oluşturma**, **dinamik içerik yükleme** ve uluslararasılaştırma (i18n) çabalarınızı ölçeklendirmek için gereken tüm özellikleri sağlar.
+
+</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>
 
 ---
 
@@ -102,11 +132,15 @@ Intlayer ile şunları yapabilirsiniz:
 
 GitHub'da [Uygulama Şablonu](https://github.com/aymericzip/intlayer-tanstack-start-template) sayfasına bakın.
 
-### Adım 1: Proje Oluşturma
+<Steps>
+
+<Step number={1} title="Proje Oluşturma">
 
 TanStack Start web sitesindeki [Yeni proje başlatma](https://tanstack.com/start/latest/docs/framework/react/quick-start) rehberini takip ederek yeni bir TanStack Start projesi oluşturun.
 
-### Adım 2: Intlayer Paketlerini Yükleyin
+</Step>
+
+<Step number={2} title="Intlayer Paketlerini Yükleyin">
 
 Tercih ettiğiniz paket yöneticisini kullanarak gerekli paketleri yükleyin:
 
@@ -144,7 +178,9 @@ bun x intlayer init
 - **vite-intlayer**
   Intlayer'ı [Vite paketleyicisi](https://vite.dev/guide/why.html#why-bundle-for-production) ile entegre etmek için Vite eklentisini içerir; ayrıca kullanıcının tercih ettiği yereli algılayan, çerezleri yöneten ve URL yönlendirmesini ele alan ara yazılımı da kapsar.
 
-### Adım 3: Projenizin Yapılandırılması
+</Step>
+
+<Step number={3} title="Projenizin Yapılandırılması">
 
 Uygulamanızın dillerini yapılandırmak için bir yapılandırma dosyası oluşturun:
 
@@ -165,7 +201,9 @@ export default config;
 
 > Bu yapılandırma dosyası aracılığıyla, yerelleştirilmiş URL'ler, ara yazılım yönlendirmesi, çerez isimleri, içerik bildirimlerinizin konumu ve uzantısı, Intlayer günlüklerini konsolda devre dışı bırakma ve daha fazlasını ayarlayabilirsiniz. Mevcut parametrelerin tam listesi için [yapılandırma dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/configuration.md) bakınız.
 
-### Adım 4: Intlayer'ı Vite Yapılandırmanıza Entegre Edin
+</Step>
+
+<Step number={4} title="Intlayer'ı Vite Yapılandırmanıza Entegre Edin">
 
 Yapılandırmanıza intlayer eklentisini ekleyin:
 
@@ -195,7 +233,9 @@ export default config;
 
 > `intlayer()` Vite eklentisi, Intlayer'ı Vite ile entegre etmek için kullanılır. İçerik bildirim dosyalarının oluşturulmasını sağlar ve geliştirme modunda bunları izler. Vite uygulaması içinde Intlayer ortam değişkenlerini tanımlar. Ayrıca performansı optimize etmek için takma adlar sağlar.
 
-### Adım 5: Kök Düzen (Root Layout) Oluşturma
+</Step>
+
+<Step number={5} title="Kök Düzen (Root Layout) Oluşturma">
 
 Kök düzeninizi uluslararasılaştırmayı destekleyecek şekilde yapılandırın; `useParams` kullanarak mevcut yerel ayarı tespit edin ve `html` etiketinde `lang` ve `dir` özniteliklerini ayarlayın.
 
@@ -255,7 +295,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### Adım 6: Yerel Dil Düzeni Oluşturma
+</Step>
+
+<Step number={6} title="Yerel Dil Düzeni Oluşturma">
 
 Yerel ayar ön ekini işleyen ve doğrulama gerçekleştiren bir düzen oluşturun.
 
@@ -287,7 +329,9 @@ export const Route = createFileRoute("/{-$locale}")({
 > `'prefix-all'` modu için slotu `$locale` olarak değiştirmeyi tercih edebilirsiniz.
 > `'no-prefix'` veya `'search-params'` modu için slotu tamamen kaldırabilirsiniz.
 
-### Adım 7: İçeriğinizi Bildirin
+</Step>
+
+<Step number={7} title="İçeriğinizi Bildirin">
 
 Çevirileri depolamak için içerik bildirimlerinizi oluşturun ve yönetin:
 
@@ -333,7 +377,9 @@ export default appContent;
 
 > Daha fazla ayrıntı için, [içerik bildirim dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/dictionary/content_file.md) bakınız.
 
-### Adım 8: Yerel Dili Algılayan Bileşenler ve Hook'lar Oluşturun
+</Step>
+
+<Step number={8} title="Yerel Dili Algılayan Bileşenler ve Hook'lar Oluşturun">
 
 Yerel dil algılayan gezinme için bir `LocalizedLink` bileşeni oluşturun:
 
@@ -437,7 +483,9 @@ export const useLocalizedNavigate = () => {
 };
 ```
 
-### Adım 9: Sayfalarınızda Intlayer'ı Kullanın
+</Step>
+
+<Step number={9} title="Sayfalarınızda Intlayer'ı Kullanın">
 
 Uygulamanız genelinde içerik sözlüklerinize erişin:
 
@@ -485,7 +533,9 @@ function RouteComponent() {
 
 > `useIntlayer` kancasını daha fazla öğrenmek için, [belgelere](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/packages/react-intlayer/useIntlayer.md) bakınız.
 
-### Adım 10: Bir Dil Değiştirici (Locale Switcher) Bileşeni Oluşturun
+</Step>
+
+<Step number={10} title="Bir Dil Değiştirici (Locale Switcher) Bileşeni Oluşturun">
 
 Kullanıcıların dilleri değiştirmesine izin veren bir bileşen oluşturun:
 
@@ -546,7 +596,9 @@ export const LocaleSwitcher: FC = () => {
 
 > `useLocale` hook'u hakkında daha fazla bilgi edinmek için [belgelere](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/packages/react-intlayer/useLocale.md) bakınız.
 
-### Adım 11: HTML Öznitelik Yönetimi
+</Step>
+
+<Step number={11} title="HTML Öznitelik Yönetimi">
 
 Adım 5'te görüldüğü gibi, kök bileşeninizde `useParams` kullanarak `html` etiketinin `lang` ve `dir` özniteliklerini yönetebilirsiniz. Bu, sunucuda ve istemcide doğru özniteliklerin ayarlanmasını sağlar.
 
@@ -565,7 +617,9 @@ function RootDocument({ children }: { children: ReactNode }) {
 
 ---
 
-### Adım 12: Middleware Ekleme (İsteğe Bağlı)
+</Step>
+
+<Step number={12} title="Middleware Ekleme">
 
 Uygulamanıza sunucu tarafı yönlendirme eklemek için `intlayerProxy`'i de kullanabilirsiniz. Bu eklenti, URL'ye göre mevcut yerel ayarı otomatik olarak algılar ve uygun yerel ayar çerezini ayarlar. Hiçbir yerel ayar belirtilmemişse, eklenti kullanıcının tarayıcı dil tercihlerine göre en uygun yerel ayarı belirler. Hiçbir yerel ayar algılanmazsa, varsayılan yerel ayara yönlendirme yapar.
 
@@ -596,7 +650,9 @@ export default defineConfig({
 
 ---
 
-### Adım 13: Meta Verilerinizi Uluslararasılaştırın (İsteğe Bağlı)
+</Step>
+
+<Step number={13} title="Meta Verilerinizi Uluslararasılaştırın">
 
 Uygulamanız genelinde içerik sözlüklerinize erişmek için `getIntlayer` hook'unu da kullanabilirsiniz:
 
@@ -643,7 +699,9 @@ export const Route = createFileRoute("/{-$locale}/")({
 
 ---
 
-### Adım 14: Sunucu işlemlerinde yerel ayarı alma (İsteğe Bağlı)
+</Step>
+
+<Step number={14} title="Sunucu işlemlerinde yerel ayarı alma">
 
 Sunucu işlemleriniz veya API uç noktalarınızın içinden mevcut yerel ayara erişmek isteyebilirsiniz.
 Bunu `intlayer` paketinden `getLocale` yardımcısını kullanarak yapabilirsiniz.
@@ -680,7 +738,9 @@ export const getLocaleServer = createServerFn().handler(async () => {
 
 ---
 
-### Adım 15: Bulunamayan sayfaları yönetme (İsteğe Bağlı)
+</Step>
+
+<Step number={15} title="Bulunamayan sayfaları yönetme">
 
 Bir kullanıcı var olmayan bir sayfayı ziyaret ettiğinde, özel bir bulunamadı sayfası gösterebilirsiniz ve yerel ayar öneki, bulunamadı sayfasının tetiklenme şeklini etkileyebilir.
 
@@ -756,7 +816,9 @@ export const Route = createFileRoute("/{-$locale}/$")({
 
 ---
 
-### Adım 16: TypeScript Yapılandırması (İsteğe Bağlı)
+</Step>
+
+<Step number={16} title="TypeScript Yapılandırması">
 
 Intlayer, TypeScript'in avantajlarından yararlanmak ve kod tabanınızı daha güçlü hale getirmek için modül genişletme (module augmentation) kullanır.
 
@@ -774,7 +836,9 @@ TypeScript yapılandırmanızın otomatik oluşturulan türleri içerdiğinden e
 
 ---
 
-### (İsteğe bağlı) Adım 17 : Bileşenlerinizin içeriğini çıkarın
+</Step>
+
+<Step number={17} 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.
 
@@ -885,6 +949,10 @@ Bunu yapmak için, `.gitignore` dosyanıza aşağıdaki talimatları ekleyebilir
 
 ---
 
+</Step>
+
+</Steps>
+
 ## VS Code Eklentisi
 
 Intlayer ile geliştirme deneyiminizi iyileştirmek için resmi **Intlayer VS Code Eklentisi**ni yükleyebilirsiniz.