Web sitesi

website/ içindeki Next.js tanıtım sayfası

3 dk okuma7 bölüm

website/ klasörü CleanLens'in tanıtım sayfasını ve bu docs/ klasörünü gösteren dokümantasyon sayfalarını içerir. Ayrı bir uygulamadır: eklentinin kodunu içe aktarmaz, kendi package.json ve kilit dosyası vardır ve eklenti paketinin parçası değildir.

Teknoloji yığını

Parça	Sürüm / seçim
Çatı	Next.js 16 (App Router)
Arayüz	React 19, Tailwind CSS 4
Uluslararasılaştırma	i18next + react-i18next, `accept-language`
3B arka plan	Three.js
Animasyon	GSAP (`@gsap/react`)
Doküman işleme	`marked` (Markdown), `shiki` (kod renklendirme), `github-slugger` (başlık kimlikleri)
Yazı tipleri	Alexandria, IBM Plex Sans Arabic, IBM Plex Sans, JetBrains Mono (`next/font/google` ile)
Node	≥ 20.9

Çalıştırma

bash

cd website
npm install
npm run dev     # http://localhost:3000 → redirects to /ar, /en or /tr
npm run build
npm start
npm run lint

next.config.ts, turbopack.root değerini website/ klasörüne ayarlar; aksi halde bir üst düzeydeki eklentinin kendi kilit dosyası Next.js'in proje kökünü belirlemesini karıştırırdı.

Yapı

text

website/
├── app/
│   ├── [locale]/
│   │   ├── layout.tsx      fonts, <html lang/dir>, metadata, theme bootstrap
│   │   ├── page.tsx        renders HomePageContent for the locale
│   │   ├── docs/page.tsx   docs home (cards per group)
│   │   ├── docs/[slug]/page.tsx   one doc page
│   │   └── globals.css
│   ├── i18n/
│   │   ├── settings.js     languages, fallback, RTL list, cookie name
│   │   ├── index.js        server-side getTranslation()
│   │   └── locales/{ar,en,tr}/translation.json
│   └── icon.png
├── components/
│   ├── ForPages/Home/      one folder per page section (see below)
│   ├── ForPages/Docs/      DocsShell, DocsSidebar, DocArticle, DocToc, docs.css
│   └── Global/             Navbar, LanguageSwitcher, Footer, ThemeToggle,
│                           BackToTop, CopyCommandButton, RichText, Icons
├── lib/constants.ts        Marketplace URL, extension id, install command,
│                           EXTENSION_VERSION, theme storage key
├── lib/docs.ts             reads and renders docs/*.md (build time)
├── proxy.ts                locale redirect (Next.js 16 "proxy", formerly middleware)
└── public/images/

Sayfa bölümleri

components/ForPages/Home/HomePageContent.tsx sırasıyla şunları gösterir:

Bölüm	Klasör	İçerik
Arka plan	`Scene/`	Animasyonlu 3B Git grafiği sahnesi (Three.js)
Karşılama	`Hero/`	Başlık, kendiliğinden yazılan kurulum komutu, eğik kart
Vibe coding	`VibeCoding/`	Yapay zekâ ile üretilmiş kod üzerindeki bulguların demosu
Sorun	`Problem/`	Blame tabanlı atamanın neden adil olmadığı (eski dosya örneği)
İşlem hattı	`Pipeline/`	Analiz adımları
Puanlama	`Scoring/`	Puan formülü, örnek geliştirici kartı
Kurallar	`Rules/`	14 kural
Kullanım	`Usage/`	Eklenti ve CLI sekmeleri
Hedef kitle	`Audience/`	Kimler için olduğu
Gizlilik	`Privacy/`	Yalnızca yerel çalışma garantileri
Sınırlar	`Limits/`	Dürüst sınırlamalar
Yol haritası	`Roadmap/`	Planlanan işler
Son çağrı	`FinalCta/`	Kurulum çağrısı

Motion/ScrollAnimations.tsx GSAP kaydırma efektlerini ekler.

Dokümantasyon sayfaları

Gezinme çubuğundaki Dokümantasyon düğmesi /<locale>/docs sayfasını açar. Sayfalar derleme zamanında deponun docs/ klasöründen oluşturulur (tamamen statik).

Yol	İçerik
`/<locale>/docs`	Doküman ana sayfası: özelleştirme kılavuzu için öne çıkan bir kart, ardından `docs/README.md` gibi gruplanmış her doküman için bir kart
`/<locale>/docs/<slug>`	Tek bir doküman: kenar çubuğu, makale, "Bu sayfada", önceki/sonraki

Slug, numarası olmadan dosya adıdır: 08-scoring.md → /tr/docs/scoring.

İçerik nereden gelir (lib/docs.ts):

Liste, sıra, gruplar, başlıklar ve özetler docs/README.md (veya docs/<locale>/README.md) içindeki tablolardan ayrıştırılır; oraya bir satır eklemek bir sayfa ekler.
/ar/... docs/ar/ klasörünü, /tr/... docs/tr/ klasörünü, /en/... docs/ klasörünü okur. Eksik bir çeviri İngilizceye döner (soldan sağa gösterilir).
docs/ klasörü, sunucu website/ klasöründen veya depo kökünden başlatılsa da website/ yanında bulunur. Geçersiz kılmak için CLEANLENS_DOCS_DIR ayarlayın. Dağıtımlar derleme zamanında docs/ klasörünü içermelidir.

İşleme:

Başlıklar github-slugger ile kimlik alır; çevrilmiş başlıklar konumlarına göre İngilizce kimlikleri yeniden kullanır (bkz. 15).
Diğer dokümanlara giden bağlantılar site bağlantılarına dönüşür; depo dosyalarına (kaynak kod, ana README) giden bağlantılar, depo özel olduğu için düz metin olarak gösterilir.
Kod blokları açık ve koyu temalarda shiki ile renklendirilir ve bir Kopyala düğmesine sahiptir. Tablolar küçük ekranlarda yatay kayar. Alıntı blokları bilgi kutusu olarak gösterilir.

Arayüz: aramalı kenar çubuğu (/ veya Ctrl/Cmd+K; başlıklar, özetler ve bölüm başlıklarıyla eşleşir), kaydırmayı izleyen bir "Bu sayfada" listesi, önceki/sonraki bağlantıları, 960 px altında mobil çekmece ve Arapça için sağdan sola düzen. Arayüz metinleri çeviri dosyalarındaki docs.* anahtarlarındadır.

Diller

Desteklenenler: Arapça (ar, varsayılan ve yedek, sağdan sola), İngilizce (en), Türkçe (tr).
Tüm metinler app/i18n/locales/<lng>/translation.json içindedir.
dirFor(lng) Arapça için dir="rtl" ayarlar.
Çevirilerdeki zengin metin, components/Global/RichText/RichText.tsx içinde eşlenen etiketleri kullanır: <hl> (vurgu), <code>, <kbd>, <mk> (Marketplace bağlantısı) ve diğerleri.

Dil yönlendirmesi (`proxy.ts`)

Dil öneki olmayan her yol için ziyaretçi sırasıyla şuradan seçilen bir dile yönlendirilir: i18next çerezi → Accept-Language başlığı → Arapça. Bir sayfa bir dil altında ziyaret edildiğinde o dil çereze kaydedilir. Statik dosyalar (_next, images, assets, favicon.ico, …) yönlendirilmez.

Dil ekleme

Kodu app/i18n/settings.js içindeki languages listesine (sağdan solaysa rtlLanguages listesine de) ekleyin.
en ile aynı anahtarlara sahip app/i18n/locales/<code>/translation.json dosyasını oluşturun.
Etiketlerini components/Global/Navbar/LanguageSwitcher.tsx içindeki LABELS ve SHORT nesnelerine ekleyin (seçici languages içindeki her girdiyi listeler).
Yazı sistemi gerektiriyorsa app/[locale]/layout.tsx içine yazı tipi alt kümesini ekleyin.

Tema

Varsayılan açık temadır. Ziyaretçinin seçimi localStorage içinde cleanlens-theme (THEME_KEY) altında saklanır ve yanlış temanın bir anlık görünmesini önlemek için layout tarafından çizimden önce uygulanır.

Site için sürüm kontrol listesi

lib/constants.ts içindeki EXTENSION_VERSION değerini package.json ile eşleşecek şekilde güncelleyin.
Kurallar, puanlama veya sınırlamalar değiştiyse üç çeviri dosyasındaki ilgili bölümleri güncelleyin.

#Teknoloji yığını

#Çalıştırma

#Yapı

#Sayfa bölümleri

#Dokümantasyon sayfaları

#Diller

#Dil yönlendirmesi (proxy.ts)

#Dil ekleme

#Tema

#Site için sürüm kontrol listesi