162 lines
4.5 KiB
Markdown
162 lines
4.5 KiB
Markdown
# Portfolio New
|
||
|
||
Bu monorepo, Next.js tabanlı portfolyo web uygulaması ve Electron ile geliştirilen veri yönetim panelini bir arada sunar.
|
||
|
||
## Mimari
|
||
|
||
```mermaid
|
||
flowchart TD
|
||
subgraph Web Uygulama (Next.js)
|
||
A[app/] --> B[components/]
|
||
A --> C[content/]
|
||
A --> D[data/]
|
||
A --> E[public/]
|
||
B --> F[UI Bilesenleri]
|
||
C --> G[Markdown Blog/Podcast]
|
||
D --> H[TypeScript Veri Kaynaklari]
|
||
E --> I[Statik Dosyalar]
|
||
end
|
||
subgraph Electron Data Panel
|
||
J[apps/data-panel/]
|
||
J --> K[renderer/]
|
||
J --> L[main.cjs]
|
||
J --> M[preload.cjs]
|
||
K --> N[configs.js]
|
||
J --> O[assets/]
|
||
J --> P[Electron build scripts]
|
||
end
|
||
J --> D
|
||
J --> E
|
||
J --> C
|
||
J --> Q[Git ile publish]
|
||
Q --> D
|
||
Q --> E
|
||
Q --> C
|
||
A -.-> E
|
||
A -.-> D
|
||
A -.-> C
|
||
```
|
||
|
||
### Klasörler ve Akış
|
||
|
||
- **app/**: Next.js route ve sayfa yapısı
|
||
- **components/**: UI bileşenleri (React)
|
||
- **content/**: Markdown içerikler (blog, podcast)
|
||
- **data/**: TypeScript veri kaynakları (projeler, referanslar, eğitim vb.)
|
||
- **public/**: Statik dosyalar (görseller, pdf, avatar)
|
||
- **apps/data-panel/**: Electron tabanlı içerik yönetim paneli
|
||
- **renderer/**: Panelin arayüzü ve form konfigürasyonları
|
||
- **main.cjs**: Electron ana süreç, dosya ve git işlemleri
|
||
- **configs.js**: Koleksiyon ve form alanı yönetimi
|
||
|
||
### Akış
|
||
|
||
1. Web uygulaması Next.js ile çalışır, içerik ve veri dosyalarını okur.
|
||
2. Electron paneli ile içerik (blog/podcast), veri (data/\*.ts) ve medya (public/) yönetimi yapılır.
|
||
3. Panelde yapılan değişiklikler git ile commit/push edilerek yayınlanır.
|
||
4. Paneldeki koleksiyonlar ve form alanları configs.js ile özelleştirilebilir.
|
||
|
||
## Gereksinimler
|
||
|
||
- Node.js 20+
|
||
- pnpm 9+
|
||
- Git
|
||
|
||
## Kurulum
|
||
|
||
```bash
|
||
pnpm install
|
||
```
|
||
|
||
## Frontend Komutları
|
||
|
||
```bash
|
||
pnpm dev # Next.js local
|
||
pnpm lint # ESLint
|
||
pnpm build # Production build
|
||
pnpm start # Production run
|
||
```
|
||
|
||
## Electron Data Panel Komutları
|
||
|
||
```bash
|
||
pnpm panel:dev # Electron panel (development)
|
||
pnpm panel:clean # apps/data-panel/dist temizle
|
||
pnpm panel:pack # Paket test (unpacked)
|
||
pnpm panel:dist # Tüm hedefler için distributable
|
||
pnpm panel:dist:win # Windows NSIS installer
|
||
pnpm panel:dist:portable # Windows portable exe
|
||
```
|
||
|
||
## İçerik Kaynakları
|
||
|
||
- Blog markdown: `content/blog/*.md`
|
||
- Podcast markdown:
|
||
- `content/podcasts/yazilim/*.md`
|
||
- `content/podcasts/masa-basi/*.md`
|
||
- Site verileri: `data/*.ts`
|
||
|
||
## Electron Panel Özellikleri
|
||
|
||
- Blog/podcast içeriği oluşturma-güncelleme-silme
|
||
- `data/*.ts` export dizilerini form tabanlı yönetme
|
||
- `public/` altına medya yükleme/silme
|
||
- `git add + commit + push` ile yayınlama akışı
|
||
|
||
## Özelleştirme ve Açık Kaynak
|
||
|
||
### Dashboard tab/field özelleştirme
|
||
|
||
Paneldeki koleksiyonlar ve form alanları `apps/data-panel/renderer/configs.js` dosyasından yönetilir.
|
||
|
||
- Yeni tab/collection ekleyebilir
|
||
- Alan tiplerini (`text`, `textarea`, `number`, `url`) değiştirebilir
|
||
- Kart görünümünü özelleştirebilirsin
|
||
|
||
### Farklı repo kökü ile çalıştırma
|
||
|
||
Panel varsayılan olarak bu monorepo kökünü kullanır. Farklı klasör için:
|
||
|
||
- Çevresel değişken: `PORTFOLIO_WORKSPACE_ROOT`
|
||
- veya CLI argüman: `--workspace-root=<path>`
|
||
|
||
Örnek (PowerShell):
|
||
|
||
```powershell
|
||
$env:PORTFOLIO_WORKSPACE_ROOT = "D:\my-portfolio-repo"
|
||
pnpm panel:dev
|
||
```
|
||
|
||
Örnek (packaged exe):
|
||
|
||
```powershell
|
||
.\apps\data-panel\dist\portfolio-data-panel-0.1.0-x64-portable.exe --workspace-root="D:\my-portfolio-repo"
|
||
```
|
||
|
||
Panel başlarken `data`, `public`, `content/blog`, `content/podcasts` klasörlerini doğrular.
|
||
|
||
### Publish akışını değiştirme
|
||
|
||
Git publish akışı `apps/data-panel/main.cjs` içindeki `publishChanges` fonksiyonunda yönetilir.
|
||
Varsayılan akış:
|
||
|
||
- `git add data public content`
|
||
- Otomatik/manuel commit message
|
||
- `git push`
|
||
Branch seçimi, PR tabanlı akış veya sadece commit modları eklenebilir.
|
||
|
||
## Yayın ve Kontrol Listesi
|
||
|
||
1. `pnpm lint`
|
||
2. `pnpm build`
|
||
3. İçerik/veri kontrolü (`content/`, `data/`, `public/`)
|
||
4. Electron panel akışı kontrolü (`pnpm panel:dev`)
|
||
5. Gerekirse distributable kontrolü (`pnpm panel:pack` / `pnpm panel:dist`)
|
||
|
||
## Sorun Giderme
|
||
|
||
### YouTube cookie/SameSite uyarıları
|
||
|
||
Embed URL'ler `youtube-nocookie.com` formatına çekildi. Bu değişiklik cross-site cookie kaynaklı konsol gürültüsünü azaltır.
|
||
Tarayıcı güvenlik politikası nedeniyle bazı 3rd-party loglar tamamen sıfırlanamayabilir; bu durumda uygulama davranışı etkilenmez.
|