"astro": "^4.8.6",

Details (also known as “disclosures” or “accordions”) are useful to hide content that is not immediately relevant.

Users can click a short summary to expand and view the full content.

Use the standard HTML [`<details>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details) and [`<summary>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary) elements in your Markdown content to create a disclosure widget.

You can nest any other Markdown syntax inside a `<details>` element.

<details>

<summary>Where and when is the Andromeda constellation most visible?</summary>

The [Andromeda constellation](<https://en.wikipedia.org/wiki/Andromeda_(constellation)>) is most visible in the night sky during the month of November at latitudes between `+90°` and `−40°`.

</details>

<details>

<summary>Where and when is the Andromeda constellation most visible?</summary>

The [Andromeda constellation](<https://en.wikipedia.org/wiki/Andromeda_(constellation)>) is most visible in the night sky during the month of November at latitudes between `+90°` and `−40°`.

</details>

Web endüstrisinin iklime etkisinin [%2][sf] ila [%4 arasında küresel karbon emisyonu][bbc]'na sahip olduğu tahmin ediliyor; kabaca havayolları endüstrisindeki emisyon oranında.

Starlight'ın Astro'dan aldığı güç sayesinde, MDX dosyalarınız içerisinde [desteklenen herhangi bir arayüz çerçevesi ile (React, Preact, Svelte, Vue, Solid, Lit, ve Alpine)](https://docs.astro.build/en/core-concepts/framework-components/) oluşturulmuş bileşenlerinizi destekleyebilirsiniz.

[Starlight’ın yerleşik ikonlarından](#tüm-i̇konlar) birini, etiketin yanında kalması için zorunlu olmayan `icon` niteliğini kullanın.

<TabItem label="Yıldızlar" icon="star">

Sirius, Vega, Betelgeuse

</TabItem>

<TabItem label="Uydular" icon="moon">

Io, Europa, Ganymede

</TabItem>

<TabItem label="Yıldızlar" icon="star">

Sirius, Vega, Betelgeuse

</TabItem>

<TabItem label="Uydular" icon="moon">

Io, Europa, Ganymede

</TabItem>

</Tabs>

`syncKey` niteliği ekleyerek çoklu sekme gruplarınızı senkronize edin.

Sayfadaki aynı `syncKey` değerine sahip tüm `<Tabs>` bileşenleri aynı etkin etiketi görüntüler. Bu, okuyucunuza bir kez seçme (örneğin okuyucunuzun işletim sistemi ya da paket yöneticisi) ve sayfa boyunca yansıyan seçimi görmesine olanak tanır.

İlişkili sekmeleri senkronize etmek için, her `<Tabs>` bileşenine özdeş `syncKey` niteliği ekleyin ve hepsinin aynı `<TabItems>` etiketi kullandığına emin olun:

```mdx 'syncKey="constellations"'

import { Tabs, TabItem } from '@astrojs/starlight/components';

_Bazı yıldızlar:_

<Tabs syncKey="constellations">

<TabItem label="Orion">Bellatrix, Rigel, Betelgeuse</TabItem>

<TabItem label="Gemini">Pollux, Castor A, Castor B</TabItem>

</Tabs>

_Bazı ötegezegenler:_

<Tabs syncKey="constellations">

<TabItem label="Orion">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>

<TabItem label="Gemini">Pollux b, HAT-P-24b, HD 50554 b</TabItem>

</Tabs>

Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:

_Bazı yıldızlar:_

<Tabs syncKey="constellations">

<TabItem label="Orion">Bellatrix, Rigel, Betelgeuse</TabItem>

<TabItem label="Gemini">Pollux, Castor A, Castor B</TabItem>

</Tabs>

_Bazı ötegezegenler:_

<Tabs syncKey="constellations">

<TabItem label="Orion">HD 34445 b, Gliese 179 b, Wasp-82 b</TabItem>

<TabItem label="Gemini">Pollux b, HAT-P-24b, HD 50554 b</TabItem>

Ara bölümler (ayrıca "uyarı" ve "açıklama balonu" olarak da bilinir), sayfanın ana içeriği ile birlikte ikincil bilgi göstermek için kullanışlıdır.

`<Aside>` bileşeni zorunlu olmayan `note` (varsayılan), `tip`, `caution` ya da `danger` değerini alan `type` niteliğine sahiptir. `title` niteliği eklemek varsayılan ara bölüm başlığını değiştirir.

import { Aside } from '@astrojs/starlight/components';

<Aside>Özel başlığı olmayan bir varsayılan ara bölüm</Aside>

<Aside type="caution" title="Dikkat Et!">

Özel bir başlık *ile* uyarı ara bölümü.

</Aside>

<Aside type="tip">

Diğer içerikler de ara bölümde desteklenir.

</Aside>

<Aside type="danger">Şifreni kimseye verme.</Aside>

Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:

import { Aside } from '@astrojs/starlight/components';

<Aside>Özel başlığı olmayan bir varsayılan ara bölüm</Aside>

<Aside type="caution" title="Dikkat Et!">

Özel bir başlık *ile* uyarı ara bölümü.

</Aside>

<Aside type="tip">

Diğer içerikler de ara bölümde desteklenir.

</Aside>

<Aside type="danger">Şifreni kimseye verme.</Aside>

Starlight, ayrıca `<Aside>` bileşenine alternatif olarak Markdown ve MDX içerisinde ara bölüm oluşturmak için özel bir sözdizimi sağlar.

[“Markdown'da İçerik Yazmak”](/tr/guides/authoring-content/#ara-bölümler) rehberine özel sözdizimi detayları için bakın.

`<Code>` bileşenini [Markdown kod bloğu](/tr/guides/authoring-content/#kod-blokları) kullanmanın mümkün olmadığı zaman sözdizim vurgulu kod oluşturmak için kullanın - örneğin dosyalar, veritabanları ve API'ler gibi harici kaynaklardan gelen verileri oluşturmak için.

`<Code>` bileşeninin destekleği niteliklerin tüm detaylarını [Expressive Code “Code Component” dokümanında](https://expressive-code.com/key-features/code-component/) inceleyin.

import { Code } from '@astrojs/starlight/components';

export const exampleCode = `console.log('Bu bir dosya ya da İçerik Yönetim Sisteminden gelebilir!');`;

export const fileName = 'example.js';

export const highlights = ['file', 'CMS'];

<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />

Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:

import { Code } from '@astrojs/starlight/components';

export const exampleCode = `console.log('Bu bir dosya ya da İçerik Yönetim Sisteminden gelebilir!');`;

export const fileName = 'example.js';

export const highlights = ['file', 'CMS'];

<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />

[Vite’nin `?raw` son ekini](https://vitejs.dev/guide/assets#importing-asset-as-string) herhangi kod dosyasını string olarak almak için kullanın.

`<Code>` bileşenine alınan bu string'i sayfanıza dahil etmek için ekleyin.

```mdx title="src/content/docs/example.mdx" "?raw"

import { Code } from '@astrojs/starlight/components';

import importedCode from '/src/env.d.ts?raw';

<Code code={importedCode} lang="ts" title="src/env.d.ts" />

Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:

import importedCode from '/src/env.d.ts?raw';

<Code code={importedCode} lang="ts" title="src/env.d.ts" />

`<FileTree>` bileşenini dizin yapısını dosya ikonları ve toplanabilir alt dizinleri göstermek için kullanın.

Dosyalarınızın yapısını ve dizinleri `<FileTree>` içerisinde [numaralandırılmamış Markdown listesi](https://www.markdownguide.org/basic-syntax/#unordered-lists) ile açıkça belirtin.

İç içe yerleşmiş liste kullanarak ya da belirli bir içeriksiz dizin oluşturmak için liste elemanının sonuna `/` ekleyerek alt dizin oluşturun.

Aşağıdaki sözdizimi dosya ağacınının görünümünü özelleştirmek için kullanılabilir:

- Dosya ya da dizinin ismini kalın yaparak vurgulayın. Örneğin `**README.md**`.

- Dosya ya da dizine isimden sonra metin ekleyerek yorum ekleyin.

- Dosyalara ya da dizinlere isim olarak `...` ya da `…` yazımını kullanarak ayrılmış bilgi alanı ekleyin.

import { FileTree } from '@astrojs/starlight/components';

<FileTree>

- astro.config.mjs **önemli** bir dosya

- package.json

- README.md

- src

- components

- **Header.astro**

- …

- pages/

</FileTree>

Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:

import { FileTree } from '@astrojs/starlight/components';

<FileTree>

- astro.config.mjs **önemli** bir dosya

- package.json

- README.md

- src

- components

- **Header.astro**

- …

- pages/

</FileTree>

`<Steps>` bileşenini numaralanmış görevler listesini biçimlendirmek için kullanın.

Her aşamasının açıkça belirtilmeye ihtiyaç duyan çok karmaşık adım adım rehberleri oluşturmak için kullanışlıdır.

Standart Markdown sıralanmış listesini `<Steps>` bileşeni ile sarmalayın.

`<Steps>` bileşeni içerisinde tüm olağan Markdown sözdizimi uygulanabilir.

````mdx title="src/content/docs/example.mdx"

import { Steps } from '@astrojs/starlight/components';

<Steps>

1. Bileşeni MDX dosyasına dahil edin:

```js

import { Steps } from '@astrojs/starlight/components';

```

2. Sıralanmış liste elemanlarını `<Steps>` ile sarmalayın.

</Steps>

Yukarıdaki kod, sayfa üzerinde aşağıdaki gibi çıktı oluşturur:

import { Steps } from '@astrojs/starlight/components';

<Steps>

1. Bileşeni MDX dosyasına dahil edin:

```js

import { Steps } from '@astrojs/starlight/components';

```

2. Sıralanmış liste elemanlarını `<Steps>` ile sarmalayın.

</Steps>

Her `<Icon>` [`name`](#tüm-i̇konlar) değerine ihtiyaç duyar ve isteğe bağlı olarak `label` eklenebilir.

`size` ve `color` nitelikleri ikonun görünümünü CSS birimleri ve renk değerleri ile ayarlamak için kullanılabilir.

<Icon name="rocket" color="var(--sl-color-text-accent)" />

<Icon name="rocket" color="var(--sl-color-text-accent)" />