Tasarım Sistemi & Bileşen Vitrini

Bu sayfa sitenin tasarım sistemini ve tüm bileşenlerini tek yerde gösterir 🎨 . Aynı zamanda her şeyin açık/koyu temada doğru çalıştığını doğrulayan canlı bir testtir.

Renk paleti

Uyarılar (Alert)

Bilgi kutuları (Callout)

Düğmeler & Rozetler

Kart (Card)

Sekmeler (Tabs)

Akordeon (Accordion)

Adımlar (Steps)

Klavye tuşları (Kbd)

Aramayı açmak için ⌘ + K, temayı değiştirmek için T.

Artılar & Eksiler (ProsCons)

GitHub kartı (build-time)

Etkileşimli sandbox

YouTube (tıkla-oynat)

Altyazılı görsel (Figure)

Tipografi & Markdown

Burada kalın, italik, üstü çizili, satır içi kod ve bir bağlantı var.

• Madde bir
• Madde iki
  • İç madde

1. Birinci
2. İkinci

Görev listesi (GFM)

• Tamamlanan iş
• Bekleyen iş

Tablo

Sadelik nihai gelişmişliktir. — Leonardo da Vinci

Kod blokları (Expressive Code)

1
function selamla(isim) {
2
  const mesaj = `Merhaba, ${isim}!`;
3
  console.log(mesaj); // eklendi
4
  console.log('eski'); // silindi
5
  return mesaj;
6
}

pnpm install
pnpm dev

İlgisiz satırlar katlanır (tıklayınca açılır):

1
export function setup() {
5 collapsed lines
2
  const a = 1;
3
  const b = 2;
4
  const c = 3;
5
  const d = 4;
6
  const e = 5;
7
  return a + b + c + d + e;
8
}

Sekmeli kod grubu

1
import { defineConfig } from 'astro/config';
2

3
export default defineConfig({
4
  site: 'https://mehmetnuri.com',
5
});

1
/** @type {import('next').NextConfig} */
2
module.exports = {
3
  reactStrictMode: true,
4
};

1
import { defineConfig } from 'vite';
2

3
export default defineConfig({
4
  build: { target: 'es2022' },
5
});

Twoslash (hover tip bilgisi)

Aşağıdaki blokta değişkenlerin üzerine gelince tür bilgisi görünür:

1
const 
const greeting: "Merhaba"
greeting = 'Merhaba';
2
const upper = 
const greeting: "Merhaba"
greeting.
String.toUpperCase(): string
Converts all the alphabetic characters in a string to uppercase.
toUpperCase();
const upper: string
3

4
function 
function double(x: number): number
double(
x: number
x: number): number {
5
  return 
x: number
x * 2;
6
}
7

8
const 
const result: number
result = 
function double(x: number): number
double(21);

Mermaid diyagramları

flowchart TD
    A[Markdown yaz] --> B{Dil?}
    B -->|TR| C["/blog/yazi"]
    B -->|EN| D["/en/blog/yazi"]
    C --> E[GitHub Pages]
    D --> E

sequenceDiagram
    participant Y as Yazar
    participant G as GitHub
    participant P as Pages
    Y->>G: git push
    G->>P: Actions build
    P-->>Y: Yayında!

Görsel

Dipnot

Astro, Markdown’da dipnotları destekler¹.

Test bitti 🎉 .