@intlayer/docs 8.7.7 → 8.7.8-canary.0

package/docs/tr/intlayer_CMS.md

@@ -93,7 +93,7 @@ Bu, kimlik doğrulama işlemini tamamlamak ve Intlayer hizmetlerini kullanmak i
 
 Intlayer konfigürasyon dosyanızda, CMS ayarlarını özelleştirebilirsiniz:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import type { IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -144,106 +144,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ... diğer yapılandırma ayarları
-  editor: {
-    /**
-     * Gerekli
-     *
-     * Uygulamanın URL'si.
-     * Bu, görsel editörün hedeflediği URL'dir.
-     */
-    applicationURL: process.env.INTLAYER_APPLICATION_URL,
-
-    /**
-     * Gerekli
-     *
-     * Editörü etkinleştirmek için Client ID ve client secret gereklidir.
-     * Bunlar, içeriği düzenleyen kullanıcıyı tanımlamaya olanak sağlar.
-     * Intlayer Dashboard - Projects (https://app.intlayer.org/projects) üzerinde yeni bir client oluşturarak elde edilebilir.
-     * clientId: process.env.INTLAYER_CLIENT_ID,
-     * clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-     */
-    clientId: process.env.INTLAYER_CLIENT_ID,
-    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-
-    /**
-     * Opsiyonel
-     *
-     * Intlayer CMS'yi kendi sunucunuzda barındırıyorsanız, CMS'nin URL'sini ayarlayabilirsiniz.
-     *
-     * Intlayer CMS'nin URL'si.
-     * Varsayılan olarak https://intlayer.org olarak ayarlanmıştır.
-     */
-    cmsURL: process.env.INTLAYER_CMS_URL,
-
-    /**
-     * Opsiyonel
-     *
-     * Intlayer CMS'yi kendi sunucunuzda barındırıyorsanız, backend'in URL'sini ayarlayabilirsiniz.
-     *
-     * Intlayer CMS'nin URL'si.
-     * Varsayılan olarak https://back.intlayer.org olarak ayarlanmıştır.
-     */
-    backendURL: process.env.INTLAYER_BACKEND_URL,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ... diğer yapılandırma ayarları
-  editor: {
-    /**
-     * Gerekli
-     *
-     * Uygulamanın URL'si.
-     * Bu, görsel editörün hedeflediği URL'dir.
-     */
-    applicationURL: process.env.INTLAYER_APPLICATION_URL,
-
-    /**
-     * Gerekli
-     *
-     * Editörü etkinleştirmek için Client ID ve client secret gereklidir.
-     * Bunlar, içeriği düzenleyen kullanıcıyı tanımlamaya olanak sağlar.
-     * Intlayer Dashboard - Projects (https://app.intlayer.org/projects) üzerinden yeni bir client oluşturarak elde edilebilirler.
-     * clientId: process.env.INTLAYER_CLIENT_ID,
-     * clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-     */
-    clientId: process.env.INTLAYER_CLIENT_ID,
-    clientSecret: process.env.INTLAYER_CLIENT_SECRET,
-
-    /**
-     * Opsiyonel
-     *
-     * Intlayer CMS'yi kendi sunucunuzda barındırıyorsanız, CMS'nin URL'sini ayarlayabilirsiniz.
-     *
-     * Intlayer CMS'nin URL'si.
-     * Varsayılan olarak https://intlayer.org olarak ayarlanmıştır.
-     */
-    cmsURL: process.env.INTLAYER_CMS_URL,
-
-    /**
-     * Opsiyonel
-     *
-     * Intlayer CMS'yi kendi sunucunuzda barındırıyorsanız, backend URL'sini ayarlayabilirsiniz.
-     *
-     * Intlayer CMS'nin backend URL'si.
-     * Varsayılan olarak https://back.intlayer.org olarak ayarlanmıştır.
-     */
-    backendURL: process.env.INTLAYER_BACKEND_URL,
-  },
-};
-
-module.exports = config;
-```
-
 > Eğer bir client ID ve client secret'ınız yoksa, bunları [Intlayer Dashboard - Projects](https://app.intlayer.org/projects) üzerinden yeni bir client oluşturarak edinebilirsiniz.
 
 > Mevcut tüm parametreleri görmek için [konfigürasyon dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/tr/configuration.md) bakınız.
@@ -294,7 +194,7 @@ Canlı Senkronizasyon, uygulamanızın CMS içerik değişikliklerini çalışma
 
 Intlayer yapılandırmanızı güncelleyerek Canlı Senkronizasyonu etkinleştirin:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import type { IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -330,92 +230,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ... diğer yapılandırma ayarları
-  editor: {
-    /**
-     * Yerel ayar yapılandırmalarında değişiklik algılandığında sıcak yeniden yüklemeyi etkinleştirir.
-     * Örneğin, bir sözlük eklendiğinde veya güncellendiğinde, uygulama sayfada görüntülenen
-     * içeriği günceller.
-     *
-     * Sıcak yeniden yükleme, sunucuya sürekli bağlantı gerektirdiği için
-     * yalnızca `enterprise` planı müşterileri için kullanılabilir.
-     *
-     * Varsayılan: false
-     */
-    liveSync: true,
-  },
-  dictionary: {
-    /**
-     * Sözlüklerin nasıl içe aktarılacağını kontrol eder:
-     *
-     * - "live": Sözlükler, Live Sync API kullanılarak dinamik olarak getirilir.
-     *   useIntlayer yerine useDictionaryDynamic kullanılır.
-     *
-     * Not: Canlı mod, sözlükleri getirmek için Live Sync API'sini kullanır. API çağrısı
-     * başarısız olursa, sözlükler dinamik olarak içe aktarılır.
-     * Not: Yalnızca uzak içeriğe sahip ve "live" bayraklı sözlükler canlı modu kullanır.
-     * Diğerleri performans için dinamik modu kullanır.
-     */
-    importMode: "fetch",
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ... diğer yapılandırma ayarları
-  editor: {
-    /**
-     * Değişiklikler algılandığında yerel yapılandırmaların sıcak yeniden yüklenmesini etkinleştirir.
-     * Örneğin, bir sözlük eklendiğinde veya güncellendiğinde, uygulama sayfada görüntülenen
-     * içeriği günceller.
-     *
-     * Sıcak yeniden yükleme, sunucuya sürekli bağlantı gerektirdiği için
-     * yalnızca `enterprise` planı müşterileri için kullanılabilir.
-     *
-     * Varsayılan: false
-     */
-    liveSync: true,
-
-    /**
-     * Live Sync sunucusunun portu.
-     *
-     * Varsayılan: 4000
-     */
-    liveSyncPort: 4000,
-
-    /**
-     * Live Sync sunucusunun URL'si.
-     *
-     * Varsayılan: http://localhost:{liveSyncPort}
-     */
-    liveSyncURL: "https://live.example.com",
-  },
-  dictionary: {
-    /**
-     * Sözlüklerin nasıl içe aktarılacağını kontrol eder:
-     *
-     * - "live": Sözlükler, Live Sync API kullanılarak dinamik olarak alınır.
-     *   useIntlayer yerine useDictionaryDynamic kullanılır.
-     *
-     * Not: Canlı mod, sözlükleri almak için Live Sync API'sini kullanır. API çağrısı
-     * başarısız olursa, sözlükler dinamik olarak içe aktarılır.
-     * Not: Yalnızca uzak içeriğe sahip ve "live" bayrağı olan sözlükler canlı modu kullanır.
-     * Diğerleri performans için dinamik modu kullanır.
-     */
-    importMode: "fetch",
-  },
-};
-
-module.exports = config;
-```
-
 Uygulamanızı sarmak için Live Sync sunucusunu başlatın:
 
 Next.js kullanarak örnek:
@@ -473,7 +287,7 @@ Nasıl çalışır:
 
 Optimizasyonu etkinleştirin, böylece Intlayer geliştirme sırasında Live import dönüşümlerini uygular:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import type { IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -493,44 +307,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  editor: {
-    applicationURL: "http://localhost:5173",
-    liveSyncURL: "http://localhost:4000",
-    liveSync: true,
-  },
-  dictionary: {
-    importMode: "fetch",
-  },
-  build: {
-    optimize: true,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  editor: {
-    applicationURL: "http://localhost:5173",
-    liveSyncURL: "http://localhost:4000",
-    liveSync: true,
-  },
-  dictionary: {
-    importMode: "fetch",
-  },
-  build: {
-    optimize: true,
-  },
-};
-
-module.exports = config;
-```
-
 Bu yapılandırma, geliştirme sunucunuzu Live Sync sunucusuyla sarar, başlangıçta uzak sözlükleri getirir ve CMS'den SSE aracılığıyla güncellemeleri aktarır. Değişiklikleri görmek için sayfayı yenileyin.
 
 Notlar ve kısıtlamalar:

package/docs/tr/intlayer_visual_editor.md

@@ -88,7 +88,7 @@ bun add intlayer-editor --dev
 
 Intlayer yapılandırma dosyanızda düzenleyici ayarlarını özelleştirebilirsiniz:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import type { IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -125,77 +125,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ... diğer yapılandırma ayarları
-  editor: {
-    /**
-     * Gerekli
-     * Uygulamanın URL'si.
-     * Bu, görsel düzenleyici tarafından hedeflenen URL'dir.
-     * Örnek: 'http://localhost:3000'
-     */
-    applicationURL: process.env.INTLAYER_APPLICATION_URL,
-    /**
-     * İsteğe bağlı
-     * Varsayılan olarak `true`. Eğer `false` ise, düzenleyici etkin değildir ve erişilemez.
-     * Güvenlik nedeniyle üretim gibi belirli ortamlar için düzenleyiciyi devre dışı bırakmak için kullanılabilir.
-     */
-    enabled: process.env.INTLAYER_ENABLED,
-    /**
-     * İsteğe bağlı
-     * Varsayılan olarak `8000`.
-     * Görsel düzenleyici sunucusu tarafından kullanılan port.
-     */
-    port: process.env.INTLAYER_PORT,
-    /**
-     * İsteğe bağlı
-     * Varsayılan olarak "http://localhost:8000"
-     * Uygulamadan erişilecek düzenleyici sunucusunun URL'si. Güvenlik nedeniyle uygulamayla etkileşim kurabilecek kaynakları kısıtlamak için kullanılır. '*' olarak ayarlanırsa, düzenleyici herhangi bir kaynaktan erişilebilir. Port değiştirilirse veya düzenleyici farklı bir domaine barındırılırsa ayarlanmalıdır.
-     */
-    editorURL: process.env.INTLAYER_EDITOR_URL,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  // ... diğer yapılandırma ayarları
-  editor: {
-    /**
-     * Gerekli
-     * Uygulamanın URL'si.
-     * Bu, görsel düzenleyici tarafından hedeflenen URL'dir.
-     */
-    applicationURL: process.env.INTLAYER_APPLICATION_URL,
-    /**
-     * İsteğe bağlı
-     * Varsayılan olarak `8000`.
-     * Düzenleyici sunucusunun portu.
-     */
-    port: process.env.INTLAYER_PORT,
-    /**
-     * İsteğe bağlı
-     * Varsayılan olarak "http://localhost:8000"
-     * Düzenleyici sunucusunun URL'si.
-     */
-    editorURL: process.env.INTLAYER_EDITOR_URL,
-    /**
-     * İsteğe bağlı
-     * Varsayılan olarak `true`. Eğer `false` ise, düzenleyici etkin değildir ve erişilemez.
-     * Güvenlik nedeniyle üretim gibi belirli ortamlar için düzenleyiciyi devre dışı bırakmak için kullanılabilir.
-     */
-    enabled: process.env.INTLAYER_ENABLED,
-  },
-};
-
-module.exports = config;
-```
-
 > Kullanılabilir tüm parametreleri görmek için [yapılandırma dokümantasyonuna](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md) bakın.
 
 ## Düzenleyiciyi Kullanma

package/docs/tr/intlayer_with_adonisjs.md

@@ -42,7 +42,7 @@ Backend'i uluslararasılaştırarak, uygulamanız sadece kültürel farklılıkl
 ## Başlarken
 
 <iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer-adonis-template?embed=1&ctl=1&file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-adonis-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 - How to Internationalize your application using Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
@@ -79,7 +79,7 @@ bun x intlayer init
 
 Proje kök dizininizde bir `intlayer.config.ts` oluşturarak uluslararasılaştırma ayarlarını yapılandırın:
 
-```typescript fileName="intlayer.config.ts"  codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -111,77 +111,11 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.RUSSIAN,
-      Locales.JAPANESE,
-      Locales.FRENCH,
-      Locales.KOREAN,
-      Locales.CHINESE,
-      Locales.SPANISH,
-      Locales.GERMAN,
-      Locales.ARABIC,
-      Locales.ITALIAN,
-      Locales.ENGLISH_UNITED_KINGDOM,
-      Locales.PORTUGUESE,
-      Locales.HINDI,
-      Locales.TURKISH,
-      Locales.POLISH,
-      Locales.INDONESIAN,
-      Locales.VIETNAMESE,
-      Locales.UKRAINIAN,
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.RUSSIAN,
-      Locales.JAPANESE,
-      Locales.FRENCH,
-      Locales.KOREAN,
-      Locales.CHINESE,
-      Locales.SPANISH,
-      Locales.GERMAN,
-      Locales.ARABIC,
-      Locales.ITALIAN,
-      Locales.ENGLISH_UNITED_KINGDOM,
-      Locales.PORTUGUESE,
-      Locales.HINDI,
-      Locales.TURKISH,
-      Locales.POLISH,
-      Locales.INDONESIAN,
-      Locales.VIETNAMESE,
-      Locales.UKRAINIAN,
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-module.exports = config;
-```
-
 ### İçeriğinizi Tanımlayın
 
 Çevirileri depolamak için içerik bildirimlerinizi oluşturun ve yönetin:
 
-```typescript fileName="app/index.content.ts" contentDeclarationFormat="typescript"
+```typescript fileName="app/index.content.ts" contentDeclarationFormat={["typescript", "esm", "commonjs"]}
 import { t, type Dictionary } from "intlayer";
 
 const indexContent = {
@@ -200,46 +134,6 @@ const indexContent = {
 export default indexContent;
 ```
 
-```javascript fileName="app/index.content.mjs" contentDeclarationFormat="esm"
-import { t } from "intlayer";
-
-/** @type {import('intlayer').Dictionary} */
-const indexContent = {
-  key: "index",
-  content: {
-    exampleOfContent: t({
-      en: "Example of returned content in English",
-      fr: "Exemple de contenu renvoyé en français",
-      tr: "Türkçe olarak döndürülen içerik örneği",
-      "es-ES": "Ejemplo de contenido devuelto en español (España)",
-      "es-MX": "Ejemplo de contenido devuelto en español (México)",
-    }),
-  },
-};
-
-export default indexContent;
-```
-
-```javascript fileName="app/index.content.cjs" contentDeclarationFormat="commonjs"
-const { t } = require("intlayer");
-
-/** @type {import('intlayer').Dictionary} */
-const indexContent = {
-  key: "index",
-  content: {
-    exampleOfContent: t({
-      en: "Example of returned content in English",
-      fr: "Exemple de contenu renvoyé en français",
-      tr: "Türkçe olarak döndürülen içerik örneği",
-      "es-ES": "Ejemplo de contenido devuelto en español (España)",
-      "es-MX": "Ejemplo de contenido devuelto en español (México)",
-    }),
-  },
-};
-
-module.exports = indexContent;
-```
-
 ```json fileName="app/index.content.json" contentDeclarationFormat="json"
 {
   "$schema": "https://intlayer.org/schema.json",

package/docs/tr/intlayer_with_analog.md

@@ -15,6 +15,7 @@ slugs:
   - environment
   - analog
 applicationTemplate: https://github.com/aymericzip/intlayer-analog-template
+applicationShowcase: https://intlayer-analog-template.vercel.app
 history:
   - version: 8.0.4
     date: 2026-01-26
@@ -23,14 +24,31 @@ history:
 
 # Intlayer kullanarak Analog (Angular) uygulamanızı tercüme edin | Uluslararasılaştırma (i18n)
 
+<Tabs defaultTab="code">
+  <Tab label="Kod" value="code">
+
 <iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer-analog-template?embed=1&ctl=1&file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-analog-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 - How to Internationalize your application using Intlayer"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
 
+  </Tab>
+  <Tab label="Demo" value="demo">
+
+<iframe
+  src="https://intlayer-analog-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-analog-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
+  </Tab>
+</Tabs>
+
 ## İçindekiler
 
 <TOC/>
@@ -90,7 +108,7 @@ bun x intlayer init
 
 Uygulamanızın dillerini yapılandırmak için bir yapılandırma dosyası oluşturun:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -108,44 +126,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // Diğer yerel ayarlarınız
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // Diğer yerel ayarlarınız
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-module.exports = config;
-```
-
 > Bu yapılandırma dosyası aracılığıyla yerelleştirilmiş URL'ler, ara yazılım yeniden yönlendirmesi, çerez adları, içerik bildirimlerinizin konumu ve uzantısı, konsoldaki Intlayer günlüklerini 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.
 
 ### Adım 3: Intlayer'ı Vite Yapılandırmanıza Entegre Edin
@@ -174,7 +154,7 @@ export default defineConfig(() => ({
 
 Çevirileri saklamak için içerik bildirimlerinizi oluşturun ve yönetin:
 
-```tsx fileName="src/app/app.content.ts" contentDeclarationFormat="typescript"
+```tsx fileName="src/app/app.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
 import { t, type Dictionary } from "intlayer";
 
 const appContent = {

package/docs/tr/intlayer_with_angular.md

@@ -14,6 +14,7 @@ slugs:
   - environment
   - angular
 applicationTemplate: https://github.com/aymericzip/intlayer-angular-template
+applicationShowcase: https://intlayer-angular-template.vercel.app
 history:
   - version: 8.0.0
     date: 2025-12-30
@@ -48,13 +49,24 @@ Intlayer ile şunları yapabilirsiniz:
   <Tab label="Kod" value="code">
 
 <iframe
-  src="https://stackblitz.com/github/aymericzip/intlayer-angular-template?embed=1&ctl=1&file=intlayer.config.ts"
+  src="https://ide.intlayer.org/aymericzip/intlayer-angular-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 - Intlayer kullanarak uygulamanızı nasıl uluslararasılaştırırsınız"
   sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
   loading="lazy"
 />
 
+  </Tab>
+  <Tab label="Demo" value="demo">
+
+<iframe
+  src="https://intlayer-angular-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-angular-template"
+  sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  loading="lazy"
+/>
+
   </Tab>
 </Tabs>
 
@@ -102,7 +114,7 @@ bun x intlayer init
 
 Uygulamanızın dillerini yapılandırmak için bir yapılandırma dosyası oluşturun:
 
-```typescript fileName="intlayer.config.ts" codeFormat="typescript"
+```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
 import { Locales, type IntlayerConfig } from "intlayer";
 
 const config: IntlayerConfig = {
@@ -120,44 +132,6 @@ const config: IntlayerConfig = {
 export default config;
 ```
 
-```javascript fileName="intlayer.config.mjs" codeFormat="esm"
-import { Locales } from "intlayer";
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // Diğer yerel ayarlarınız
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-export default config;
-```
-
-```javascript fileName="intlayer.config.cjs" codeFormat="commonjs"
-const { Locales } = require("intlayer");
-
-/** @type {import('intlayer').IntlayerConfig} */
-const config = {
-  internationalization: {
-    locales: [
-      Locales.ENGLISH,
-      Locales.FRENCH,
-      Locales.SPANISH,
-      // Diğer yerel ayarlarınız
-    ],
-    defaultLocale: Locales.ENGLISH,
-  },
-};
-
-module.exports = config;
-```
-
 > Bu yapılandırma dosyası aracılığıyla yerelleştirilmiş URL'ler, ara yazılım (middleware) yönlendirmesi, çerez adları, içerik bildirimlerinizin konumu ve uzantısı, konsoldaki Intlayer günlüklerini devre dışı bırakma ve daha fazlasını ayarlayabilirsiniz. Mevcut parametrelerin tam listesi için [yapılandırma belgelerine](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/configuration.md) bakın.
 
 ### Adım 3: Intlayer'ı Angular Yapılandırmanıza Entegre Edin
@@ -207,7 +181,7 @@ export default mergeConfig({});
 
 Çevirileri saklamak için içerik bildirimlerinizi oluşturun ve yönetin:
 
-```tsx fileName="src/app/app.content.ts" contentDeclarationFormat="typescript"
+```tsx fileName="src/app/app.content.ts" contentDeclarationFormat=["typescript", "esm", "cjs"]
 import { t, type Dictionary } from "intlayer";
 
 const appContent = {