@intlayer/docs 8.12.5-canary.0 → 9.0.0-canary.2

package/docs/tr/dictionary/plurial.md

@@ -35,12 +35,181 @@ Kendi tanımladığınız sayısal aralıklara göre içerik seçen [`enu`](http
 
 ## Ne Zaman `plural` vs `enu` Kullanılmalı?
 
-| Kullanım durumu                                                         | Yardımcı |
-| ----------------------------------------------------------------------- | -------- |
-| Yerele duyarlı dilbilgisel çoğul formlar (bir elma / iki elma / 5 elma) | `plural` |
-| Özel sayısal aralıklar (`<5`, `>=10`) veya CLDR dışı gruplar            | `enu`    |
+<Tabs group="framework">
+  <Tab label="React" value="react">
 
-Sadece İngilizceyi hedefliyorsanız (sadece `one` / `other` vardır), her ikisi de çalışır. `few` / `many` / `two` ayrımları olan herhangi bir dil için `plural` tercih edin.
+To use plural content inside a React component, retrieve it via the `useIntlayer` hook and call it with a count. The active locale and the count are combined to pick the matching CLDR category.
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
+  const { totalOpenings } = useIntlayer("total_openings");
+
+  return (
+    <div>
+      <p>{totalOpenings(count)}</p>
+    </div>
+  );
+};
+
+export default OpeningsComponent;
+```
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+To use plural content in Next.js Client Components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
+  const { totalOpenings } = useIntlayer("total_openings");
+
+  return (
+    <div>
+      <p>{totalOpenings(count)}</p>
+    </div>
+  );
+};
+
+export default OpeningsComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+To use plural content in Vue components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+defineProps<{ count: number }>();
+
+const { totalOpenings } = useIntlayer("total_openings");
+</script>
+
+<template>
+  <div>
+    <p>{{ totalOpenings(count) }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+To use plural content in Svelte components, retrieve it via the `useIntlayer` hook and call it with a count. The store is accessed with `$`. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+export let count: number;
+
+const content = useIntlayer("total_openings");
+</script>
+
+<div>
+  <p>{$content.totalOpenings(count)}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+To use plural content in Preact components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
+  const { totalOpenings } = useIntlayer("total_openings");
+
+  return (
+    <div>
+      <p>{totalOpenings(count)}</p>
+    </div>
+  );
+};
+
+export default OpeningsComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+To use plural content in SolidJS components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const OpeningsComponent: Component<{ count: number }> = (props) => {
+  const { totalOpenings } = useIntlayer("total_openings");
+
+  return (
+    <div>
+      <p>{totalOpenings(props.count)}</p>
+    </div>
+  );
+};
+
+export default OpeningsComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+To use plural content in Angular components, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component, Input } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-openings",
+  template: `
+    <div>
+      <p>{{ content().totalOpenings(count) }}</p>
+    </div>
+  `,
+})
+export class OpeningsComponent {
+  @Input() count!: number;
+
+  content = useIntlayer("total_openings");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+To use plural content with `vanilla-intlayer`, retrieve it via the `useIntlayer` hook and call it with a count. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("total_openings").onChange((newContent) => {
+  document.getElementById("openings")!.textContent =
+    newContent.totalOpenings(5);
+});
+
+// Initial render
+document.getElementById("openings")!.textContent = content.totalOpenings(5);
+```
+
+  </Tab>
+</Tabs>
 
 ## Çoğul İçeriği Ayarlama
 

package/docs/tr/dictionary/translation.md

@@ -85,7 +85,10 @@ export default config;
 
 ## React Bileşenlerinde Çevirileri Kullanma
 
-`react-intlayer` ile React bileşenlerinde çevirileri kullanabilirsiniz. İşte bir örnek:
+<Tabs group="framework">
+  <Tab label="React" value="react">
+
+With `react-intlayer`, you can use translations in React components. Here's an example:
 
 ```jsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
 import type { FC } from "react";
@@ -104,7 +107,158 @@ const MyComponent: FC = () => {
 export default MyComponent;
 ```
 
-Bu bileşen, uygulamanızda ayarlanan mevcut yerel ayara göre karşılık gelen çeviriyi getirir.
+This component fetches the corresponding translation based on the current locale set in your application.
+
+  </Tab>
+  <Tab label="Next.js" value="nextjs">
+
+With `next-intlayer`, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+"use client";
+
+import type { FC } from "react";
+import { useIntlayer } from "next-intlayer";
+
+const MyComponent: FC = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Vue" value="vue">
+
+With `vue-intlayer`, you can use translations in Vue components. Here's an example:
+
+```vue fileName="**/*.vue"
+<script setup lang="ts">
+import { useIntlayer } from "vue-intlayer";
+
+const content = useIntlayer("multi_lang");
+</script>
+
+<template>
+  <div>
+    <p>{{ content.welcomeMessage }}</p>
+  </div>
+</template>
+```
+
+  </Tab>
+  <Tab label="Svelte" value="svelte">
+
+With `svelte-intlayer`, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:
+
+```svelte fileName="**/*.svelte"
+<script lang="ts">
+import { useIntlayer } from "svelte-intlayer";
+
+const content = useIntlayer("multi_lang");
+</script>
+
+<div>
+  <p>{$content.welcomeMessage}</p>
+</div>
+```
+
+  </Tab>
+  <Tab label="Preact" value="preact">
+
+With `preact-intlayer`, you can use translations in Preact components. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { FC } from "preact";
+import { useIntlayer } from "preact-intlayer";
+
+const MyComponent: FC = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Solid" value="solid">
+
+With `solid-intlayer`, you can use translations in SolidJS components. Here's an example:
+
+```tsx fileName="**/*.tsx" codeFormat={["typescript", "esm"]}
+import type { Component } from "solid-js";
+import { useIntlayer } from "solid-intlayer";
+
+const MyComponent: Component = () => {
+  const content = useIntlayer("multi_lang");
+
+  return (
+    <div>
+      <p>{content.welcomeMessage}</p>
+    </div>
+  );
+};
+
+export default MyComponent;
+```
+
+  </Tab>
+  <Tab label="Angular" value="angular">
+
+With `angular-intlayer`, you can use translations in Angular components. Here's an example:
+
+```typescript fileName="app.component.ts" codeFormat="typescript"
+import { Component } from "@angular/core";
+import { useIntlayer } from "angular-intlayer";
+
+@Component({
+  selector: "app-my-component",
+  template: `
+    <div>
+      <p>{{ content().welcomeMessage }}</p>
+    </div>
+  `,
+})
+export class MyComponent {
+  content = useIntlayer("multi_lang");
+}
+```
+
+  </Tab>
+  <Tab label="Vanilla JS" value="vanilla">
+
+With `vanilla-intlayer`, you can use translations by subscribing to content changes. Here's an example:
+
+```typescript fileName="**/*.ts" codeFormat={["typescript", "esm"]}
+import { installIntlayer, useIntlayer } from "vanilla-intlayer";
+
+installIntlayer();
+
+const content = useIntlayer("multi_lang").onChange((newContent) => {
+  document.getElementById("welcome-message")!.textContent = String(
+    newContent.welcomeMessage
+  );
+});
+
+// Initial render
+document.getElementById("welcome-message")!.textContent = String(
+  content.welcomeMessage
+);
+```
+
+  </Tab>
+</Tabs>
 
 ## Özel İçerik Nesneleri
 

package/docs/tr/dynamic_dictionaries/collections.md

@@ -14,7 +14,7 @@ slugs:
   - concept
   - collections
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Koleksiyon sözlükleri özelliğinin sürümü"
 author: aymericzip

package/docs/tr/dynamic_dictionaries/dynamic_content.md

@@ -15,7 +15,7 @@ slugs:
   - concept
   - dynamic-records
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Dinamik içerik özelliğinin sürümü"
 author: aymericzip

package/docs/tr/dynamic_dictionaries/index.md

@@ -15,7 +15,7 @@ slugs:
   - concept
   - dynamic-dictionaries
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Dinamik sözlükler özelliğinin sürümü"
 author: aymericzip

package/docs/tr/dynamic_dictionaries/variants.md

@@ -15,7 +15,7 @@ slugs:
   - concept
   - variants
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-12
     changes: "Varyantlar özelliğinin sürümü"
 author: aymericzip

package/docs/tr/migration_from_i18next_to_intlayer.md

@@ -17,7 +17,7 @@ slugs:
   - migration
   - i18next
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/tr/migration_from_next-i18next_to_intlayer.md

@@ -20,7 +20,7 @@ slugs:
   - migration
   - next-i18next
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/tr/migration_from_next-intl_to_intlayer.md

@@ -18,7 +18,7 @@ slugs:
   - migration
   - next-intl
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/tr/migration_from_nuxtjs_i18n_to_intlayer.md

@@ -19,7 +19,7 @@ slugs:
   - migration
   - nuxtjs-i18n
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip 

package/docs/tr/migration_from_react-i18next_to_intlayer.md

@@ -19,7 +19,7 @@ slugs:
   - migration
   - react-i18next
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/tr/migration_from_vue-i18n_to_intlayer.md

@@ -18,7 +18,7 @@ slugs:
   - migration
   - vue-i18n
 history:
-  - version: 8.13.0
+  - version: 9.0.0
     date: 2026-06-05
     changes: "Init history"
 author: aymericzip

package/docs/tr/releases/v8.md

@@ -1,6 +1,6 @@
 ---
 createdAt: 2025-09-22
-updatedAt: 2026-01-26
+updatedAt: 2026-06-14
 title: "Yeni Intlayer v8 - Yenilikler"
 description: "Intlayer v8'deki yenilikleri keşfedin. Geliştirici deneyiminde otomatik içerik algılama ile iyileştirmeler, şema doğrulamasıyla veri bütünlüğünün sağlanması ve sözlük yönetimi üzerinde daha fazla kontrol sunulmaktadır."
 keywords:
@@ -409,6 +409,16 @@ Daha fazla ayrıntı için [HTML İçerik Dokümantasyonu](https://github.com/ay
 
 ---
 
+## YAML ve Markdown İçerik Dosyaları (v8.10.0)
+
+Artık doğrudan `.content.md` ve `.content.yaml` dosya uzantılarını kullanarak içerik tanımlayabilirsiniz. Bu, uzun biçimli içerikler, bloglar, dokümantasyonlar ve gizlilik politikaları için mükemmeldir.
+
+Bu dosyalar Görsel Editör (Visual Editor) üzerinden tamamen düzenlenebilir, böylece teknik olmayan ekip üyeleri için kolaylaştırılmış bir iş akışı sağlanır.
+
+Daha fazla ayrıntı için [YAML İçerik Dosyaları Dokümantasyonu](https://intlayer.org/tr/doc/concept/content#yaml-content-file) ve [Markdown İçerik Dosyaları Dokümantasyonu](https://intlayer.org/tr/doc/concept/content/markdown) sayfalarına bakın.
+
+---
+
 ## Özel URL Yeniden Yazımları
 
 Intlayer v8, standart `/locale/path` yapısından farklı olan dile özgü yollar tanımlamanıza olanak tanıyan **Özel URL Yeniden Yazımları** desteğini getirir. Bu, yerel SEO'yu iyileştirmek ve İngilizce dışı kullanıcılar için daha doğal bir kullanıcı deneyimi sağlamak açısından güçlü bir özelliktir.
@@ -753,6 +763,58 @@ export default {
   </Tab>
 </Tabs>
 
+## Unicode CLDR Çoğul Kuralları (v8.8.0)
+
+Karmaşık diller için desteği artıran, Unicode CLDR Projesi tarafından tanımlanan çoğul kurallarına dayalı yeni bir `plural` düğüm yardımcısı (helper) tanıtıldı.
+
+```typescript fileName="src/openings.content.ts"
+import { plural, t, type Dictionary } from "intlayer";
+
+const openingsContent = {
+  key: "total_openings",
+  content: {
+    totalOpenings: t({
+      en: plural({
+        one: "{{count}} opening",
+        other: "{{count}} openings",
+      }),
+      fr: plural({
+        one: "{{count}} offre",
+        other: "{{count}} offres",
+      }),
+    }),
+  },
+} satisfies Dictionary;
+
+export default openingsContent;
+```
+
+Daha sonra framework bileşeninizde sayıyı dinamik olarak geçirebilirsiniz:
+
+```tsx
+import type { FC } from "react";
+import { useIntlayer } from "react-intlayer";
+
+const OpeningsComponent: FC<{ count: number }> = ({ count }) => {
+  const { totalOpenings } = useIntlayer("total_openings");
+
+  return (
+    <div>
+      {/* In English:                                  */}
+      {/*  count=0  → "0 openings"   (other)           */}
+      {/*  count=1  → "1 opening"    (one)             */}
+      {/*  count=2  → "2 openings"   (other)           */}
+      {/*  count=21 → "21 openings"  (other)           */}
+      <p>{totalOpenings(count)}</p>
+    </div>
+  );
+};
+```
+
+Daha fazla bilgi için [Çoğullaştırma Dokümantasyonu](https://intlayer.org/tr/doc/concept/content/plural) sayfasına bakın.
+
+---
+
 ## İçerik Şeması Doğrulama
 
 Intlayer v8, sözlükler için şema doğrulamasını tanıtır. Artık yapılandırmanızda Zod kullanarak yeniden kullanılabilir doğrulama şemaları tanımlayabilir ve bunları içerik dosyalarınıza uygulayabilirsiniz. Bu, içeriğinizin her zaman beklenen yapıya uygun olmasını sağlar ve hataları build zamanında yakalar.
@@ -797,6 +859,34 @@ Eğer içerik şemayla eşleşmezse (ör. başlık çok kısaysa), build süreci
 
 ---
 
+## TypeScript: IntlayerNode İlkel Erişimcileri (Primitive Accessors)
+
+`IntlayerNode` tipi, ilkel JavaScript metotlarının doğrudan içerik düğümleri üzerinde çağrılmasına izin verecek şekilde güncellendi. Bu, yerelleştirilmiş içeriğinizle doğrudan standart bir string, number, boolean veya array ilkel tipiymiş gibi etkileşime girmenizi mümkün kılar.
+
+React, Preact, Solid, Svelte, Vue ve Angular genelinde desteklenir.
+
+### String Örneği
+
+```typescript
+content.placeholder; // IntlayerNode<string> döner
+content.placeholder.value; // string döner
+content.placeholder.toString(); // string döner
+content.placeholder.toLowerCase(); // string döner
+String(content.placeholder); // string döner
+content.placeholder.toUpperCase(); // Büyük harfe dönüştürülmüş string döner
+content.placeholder.replace("a", "b"); // Değiştirilmiş string döner
+```
+
+### Array Örneği
+
+```typescript
+content.myArrayOfString             // IntlayerNode<Array<string>> döner
+content.myArrayOfString.find(...)   // Eleman döner
+content.myArrayOfString.join(', ')  // Birleştirilmiş string döner
+```
+
+---
+
 ### Geliştirilmiş Otomatik İçerik Algılama
 
 v8'de Intlayer, içerik dizelerinizde Markdown sözdizimini, HTML etiketlerini ve değişken yerleştirmelerini akıllıca algılar. Bu, genellikle `md()`, `html()` veya `insert()` gibi yardımcı fonksiyonları atlamanıza olanak tanır.
@@ -1002,6 +1092,17 @@ Intlayer VSCode uzantısı, uluslararasılaştırma iş akışınızı kolaylaş
 
 ---
 
+## Araçlar: C++ Watcher ve OXC Tabanlı LSP (v8.12.0)
+
+Intlayer v8.12.0, geliştirici deneyimine büyük iyileştirmeler getiriyor:
+
+- **Parcel Watcher**: İçerik izleyici (content watcher), daha hızlı güncellemeler sağlamak ve bellek tüketimini önemli ölçüde azaltmak için yerel C++ dosya izlemeden yararlanan `@parcel/watcher` paketine `chokidar`'dan taşındı.
+- **Yeni Language Server Protocol (LSP)**: Yepyeni bir LSP artık kullanılabilir. OXC tabanlı ayrıştırma ile oluşturulan bu protokol, IDE'nizin ve yapay zeka ajanlarınızın `useIntlayer('my-key')` çağrılarını ilgili `.content` dosyalarıyla ve tersi şekilde sorunsuz bir şekilde ilişkilendirmesine yardımcı olur.
+
+Daha fazla ayrıntı için [LSP Dokümantasyonu](https://intlayer.org/tr/doc/lsp) sayfasına bakın.
+
+---
+
 ## Derleyici Optimizasyonları
 
 Intlayer v8, Markdown ve HTML derleyicisi için yeni bir önbellekleme katmanı içerir. Bu, aynı yapılandırmaya sahip özdeş içerik dizelerinin yalnızca bir kez ayrıştırılmasını sağlar; bu da yeniden render'lar sırasında veya aynı içeriğin birden çok yerde kullanılması durumunda genel yükü önemli ölçüde azaltır.
@@ -1057,6 +1158,48 @@ Intlayer v8, Markdown ve HTML derleyicisi için yeni bir önbellekleme katmanı
 
 ---
 
+## Deneysel Build Optimizasyonları: Minify ve Purge (v8.7.0)
+
+Intlayer v8.7.0, üretim (production) bundle'ınızı optimize etmek için tasarlanmış, `intlayer.config.ts` dosyanızda kullanabileceğiniz yeni deneysel build özellikleri sunar:
+
+- **Sözlük Minifikasyonu (Minification)**: Boyutu azaltmak için sözlük dosyalarını küçültür (minify eder).
+- **Kullanılmayan Anahtarları Temizleme (Purging)**: Sözlüklerden kullanılmayan çeviri anahtarlarını tarar ve kaldırır, aktif anahtarları kısa karakterlere yeniden adlandırır (örneğin `"products" -> "a"`, `"pricing" -> "b"`). Bu, bundle boyutunu %5'e kadar azaltır.
+- **TypeScript Kontrollerini Devre Dışı Bırakma**: Derleme adımı sırasında TypeScript tip kontrolünü (typechecking) devre dışı bırakarak build işlemlerini hızlandırır.
+
+```typescript fileName="intlayer.config.ts"
+import { Locales, type IntlayerConfig } from "intlayer";
+
+const config: IntlayerConfig = {
+  internationalization: {
+    locales: [Locales.ENGLISH, Locales.FRENCH],
+    defaultLocale: Locales.ENGLISH,
+  },
+  dictionary: {
+    importMode: "dynamic",
+  },
+  build: {
+    /**
+     * Minify the dictionaries to reduce the bundle size.
+     */
+    minify: true,
+
+    /**
+     * Purge the unused keys in dictionaries
+     */
+    purge: true,
+
+    /**
+     * Indicates if the build should check TypeScript types
+     */
+    checkTypes: false,
+  },
+};
+
+export default config;
+```
+
+---
+
 ## Esneklik: Birleştirilmiş İçe Aktarma Modu
 
 `live` boolean özelliği, daha kapsamlı olan `importMode` özelliği lehine kullanımdan kaldırıldı. Bu, sözlüklerin nasıl yükleneceğini açıkça tanımlamanıza olanak tanır: statik olarak, dinamik olarak veya canlı senkronizasyon ile.
@@ -1204,6 +1347,49 @@ Svelte'deki Markdown ve HTML içerikleri artık stringleştirildiklerinde otomat
 
 ---
 
+## Angular Desteği: Vite Bundler (v8.11.0)
+
+Angular kullanıcıları için Intlayer, artık yeni bir özel esbuild eklentisi aracılığıyla Vite bundler'ı yerel olarak destekleyerek geliştirme ve derleme (build) sürelerini hızlandırıyor.
+
+Yapılandırma detayları için [Angular Ortam Dokümantasyonu](https://intlayer.org/tr/doc/environment/angular) sayfasına bakın.
+
+---
+
+## Site Haritası (Sitemap) Oluşturma (v8.6.0)
+
+Intlayer artık dillerinize (locales) ve yönlendirme (routing) modunuza göre otomatik olarak site haritaları oluşturuyor. Bu, özellikle TanStack Router gibi yönlendirici mimarilerinde SEO optimizasyonu için son derece kullanışlıdır:
+
+```typescript fileName="src/routes/sitemap.xml.ts"
+import { createFileRoute } from "@tanstack/react-router";
+import { generateSitemap } from "intlayer";
+
+const SITE_URL = (
+  import.meta.env.VITE_SITE_URL ?? "http://localhost:3000"
+).replace(/\/$/, "");
+
+export const Route = createFileRoute("/sitemap.xml")({
+  server: {
+    handlers: {
+      GET: async () => {
+        const sitemap = generateSitemap(
+          [
+            { path: "/", changefreq: "daily", priority: 1.0 },
+            { path: "/about", changefreq: "monthly", priority: 0.8 },
+          ],
+          { siteUrl: SITE_URL }
+        );
+
+        return new Response(sitemap, {
+          headers: { "Content-Type": "application/xml" },
+        });
+      },
+    },
+  },
+});
+```
+
+---
+
 ## v7'den geçiş notları
 
 ### Yapılandırma Değişiklikleri